Open qinyakang opened 4 years ago
= 0, 兼容性IE9+
概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点:
缺点:
display: none;
与visibility: hidden;
的区别联系:它们都能让元素不可见
区别:
specified value: 计算方法如下:
computed value: 以specified value根据规范定义的行为进行计算,通常将相对值计算为绝对值,例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性,如width,margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承
used value:属性计算后的最终值,对于大多数属性可以通过window.getComputedStyle获得,尺寸值单位为像素。以下属性依赖于布局,
link
与@import
的区别link
是HTML方式, @import
是CSS方式link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现FOUClink
可以通过rel="alternate stylesheet"
指定候选样式link
支持早于@import
,可以使用@import
对老浏览器隐藏样式@import
必须在样式规则之前,可以在css文件中引用其他文件display: block;
和display: inline;
的区别block
元素特点:
1.处于常规流中时,如果width
没有设置,会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间(独占一个水平空间)
5.忽略vertical-align
inline
元素特点
1.水平方向上根据direction
依次布局
2.不会在元素前后进行换行
3.受white-space
控制
4.margin/padding
在竖直方向上无效,水平方向上有效
5.width/height
属性对非替换行内元素无效,宽度由元素内容决定
6.非替换行内元素的行框高由line-height
确定,替换行内元素的行框高由height
,margin
,padding
,border
决定
6.浮动或绝对定位时会转换为block
7.vertical-align
属性生效
参考资料: 选择正确的图片格式
GIF:
JPEG:
PNG:
关于文字排版的属性如:
clear: both
/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
* contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block:可以防止容器和
* 子元素top-margin折叠,这样能使清理效果与BFC,IE6/7
* zoom: 1;一致
**/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
*zoom: 1;
}
Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。解决方法:把样式表放到文档的head
创建规则:
float
不是none
)position
取值为absolute
或fixed
)display
取值为inline-block
,table-cell
, table-caption
,flex
, inline-flex
之一的元素overflow
不是visible
的元素作用:
display
为none,那么position和float都不起作用,这种情况下元素不产生框display
毗邻的两个或多个margin
会合并成一个margin,叫做外边距折叠。规则如下:
根元素的包含块叫做初始包含块,在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin;对于paged media,它的尺寸等于page area。初始包含块的direction属性与根元素相同。
position
为relative
或者static
的元素,它的包含块由最近的块级(display
为block
,list-item
, table
)祖先元素的内容框组成
如果元素position
为fixed
。对于连续媒体,它的包含块为viewport;对于paged media,包含块为page area
如果元素position
为absolute
,它的包含块由祖先元素中最近一个position
为relative
,absolute
或者fixed
的元素产生,规则如下:
z轴上的默认层叠顺序如下(从下到上):
如何创建stacking context:
text-align: center;
即可实现<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
</style>
position: relative;
,3)浮动方向偏移量(left或者right)设置为50%,4)浮动方向上的margin设置为元素宽度一半乘以-1<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: left;
position: relative; /* 2 */
left: 50%; /* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: purple;
}
</style>
参考资料:6 Methods For Vertical Centering With CSS。 盘点8种CSS实现垂直居中
font-size
的line-height
:<p class="text">center text</p>
<style>
.text {
line-height: 200px;
}
</style>
<input hidden/>
的检测设置需要hasAttribute和removeAttribute来完成,或者设置对应property<a href="../index.html">link</a>
中href属性,转换成property的时候需要通过转换得到完整URL<input value="hello"/>
对应的是defaultValue,修改或设置value property修改的是控件当前值,setAttribute修改value属性不会改变value propertyMeasuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9
readyState
:表示请求状态的整数,取值:onreadystatechange
:readyState改变时调用的函数status
:服务器返回的HTTP状态码(如,200, 404)statusText
:服务器返回的HTTP状态信息(如,OK,No Content)responseText
:作为字符串形式的来自服务器的完整响应responseXML
: Document对象,表示服务器的响应解析成的XML文档abort()
:取消异步HTTP请求getAllResponseHeaders()
: 返回一个字符串,包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对,并且使用一个回车/换行来分隔报头行getResponseHeader(headerName)
:返回headName对应的报头值open(method, url, asynchronous [, user, password])
:初始化准备发送到服务器上的请求。method是HTTP方法,不区分大小写;url是请求发送的相对或绝对URL;asynchronous表示请求是否异步;user和password提供身份验证setRequestHeader(name, value)
:设置HTTP报头send(body)
:对服务器请求进行初始化。参数body包含请求的主体部分,对于POST请求为键值对字符串;对于GET请求,为null例子:鼠标从div#target元素移出时进行处理,判断逻辑如下:
<div id="target"><span>test</span></div>
<script type="text/javascript">
var target = document.getElementById('target');
if (target.addEventListener) {
target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
target.attachEvent('onmouseout', mouseoutHandler);
}
function mouseoutHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
// 判断移出鼠标的元素是否为目标元素
if (target.id !== 'target') {
return;
}
// 判断鼠标是移出元素还是移到子元素
var relatedTarget = event.relatedTarget || e.toElement;
while (relatedTarget !== target
&& relatedTarget.nodeName.toUpperCase() !== 'BODY') {
relatedTarget = relatedTarget.parentNode;
}
// 如果相等,说明鼠标在元素内部移动
if (relatedTarget === target) {
return;
}
// 执行需要操作
//alert('鼠标移出');
}
</script>
同源:两个文档同源需满足
跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
<img>
,<script>
,<link>
,<iframe>
元素,通过src,href属性设置为目标url。实现跨域请求<script>
进行jsonp请求六种基本数据类型
一种引用类型
闭包是在某个作用域内定义的函数,它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分:
闭包常见用途:
重要参考资料:MDN:Functions_and_function_scope
HTML5新增应用程序缓存,允许web应用将应用程序自身保存到用户浏览器中,用户离线状态也能访问。
1.为html元素设置manifest属性:<html manifest="myapp.appcache">
,其中后缀名只是一个约定,真正识别方式是通过text/cache-manifest
作为MIME类型。所以需要配置服务器保证设置正确
2.manifest文件首行为CACHE MANIFEST
,其余就是要缓存的URL列表,每个一行,相对路径都相对于manifest文件的url。注释以#开头
3.url分为三种类型:CACHE
:为默认类型。NETWORK
:表示资源从不缓存。 FALLBACK
:每行包含两个url,第二个URL是指需要加载和存储在缓存中的资源, 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存,如果从网络中载入这样的URL失败的话,就会用第二个URL指定的缓存资源来替代。以下是一个文件例子:
CACHE MANIFEST
CACHE:
myapp.html
myapp.css
myapp.js
FALLBACK:
videos/ offline_help.html
NETWORK:
cgi/
localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x
// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
localStorage.removeItem('x'); // remove x
localStorage.clear(); // remove all data
document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';
document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值,需要使用相同的名字、路径和域,新的值
// 来设置cookie,同样的方法可以用来改变有效期
// 设置max-age为0可以删除指定cookie
//读取cookie,访问document.cookie返回键值对组成的字符串,
//不同键值对之间用'; '分隔。通过解析获得需要的值
var obj = {};
var obj = new Object();
var obj = Object.create(Object.prototype);
1. 如果对象有valueOf()方法并且返回元素值,javascript将返回值转换为数字作为结果
2. 否则,如果对象有toString()并且返回原始值,javascript将返回结果转换为数字作为结果
3. 否则,throws a TypeError
所有比较运算符都支持任意类型,但是比较只支持数字和字符串,所以需要执行必要的转换然后进行比较,转换规则如下:
var args = Array.prototype.slice.call(arguments, 0);
参考答案: push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter
参考答案: indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase
var days = ['日','一','二','三','四','五','六'];
var date = new Date();
console.log('今天是星期' + days[date.getDay()]);
参考答案:大多数语言里边都是块作作用域,以{}进行限定,js里边不是.js里边叫函数作用域,就是一个变量在全函数里有效.比如有个变量p1在函数最后一行定义,第一行也有效,但是值是undefined.
var globalVar = 'global var';
function test() {
alert(globalVar); // undefined, 因为globalVar在本函数内被重定义了,导致全局失效,这里使用函数内的变量值,可是此时还没定义
var globalVar = 'overrided var'; // globalVar在本函数内被重定义
alert(globalVar); // overrided var
}
alert(globalVar); // global var,使用全局变量
参考答案: this指的是对象本身,而不是构造函数.
参考答案:三者都可以把一个函数应用到其他对象上,注意不是自身对象.apply,call是直接执行函数调用,bind是绑定,执行需要再次调用.apply和call的区别是apply接受数组作为参数,而call是接受逗号分隔的无限多个参数列表,
代码演示
function Person() {
}
Person.prototype.sayName() { alert(this.name); }
var obj = {name: 'michaelqin'}; // 注意这是一个普通对象,它不是Person的实例
1) apply
Person.prototype.sayName.apply(obj, [param1, param2, param3]);
2) call
Person.prototype.sayName.call(obj, param1, param2, param3);
3) bind
var sn = Person.prototype.sayName.bind(obj);
sn([param1, param2, param3]); // bind需要先绑定,再执行
sn(param1, param2, param3); // bind需要先绑定,再执行
参考答案: caller,callee之间的关系就像是employer和employee之间的关系,就是调用与被调用的关系,二者返回的都是函数对象引用.arguments是函数的所有参数列表,它是一个类数组的变量.
代码演示
function parent(param1, param2, param3) {
child(param1, param2, param3);
}
function child() {
console.log(arguments); // { '0': 'mqin1', '1': 'mqin2', '2': 'mqin3' }
console.log(arguments.callee); // [Function: child]
console.log(child.caller); // [Function: parent]
}
parent('mqin1', 'mqin2', 'mqin3');
html基础
前端需要注意哪些SEO
web开发中会话跟踪的方法有哪些
<img>
的title
和alt
有什么区别title
是global attributes之一,用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。alt
是<img>
的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。doctype是什么,举例常见doctype及特点
<!doctype>
声明必须处于HTML文档的头部,在<html>
标签之前,HTML5中不区分大小写<!doctype>
声明不是一个HTML标签,是一个用于告诉浏览器当前HTMl版本的指令<!doctype>
声明指向一个DTD,由于HTML4.01基于SGML,所以DTD指定了标记规则以保证浏览器正确渲染内容常见dotype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!doctype html>
HTML全局属性(global attribute)有哪些
参考资料:MDN: html global attribute或者W3C HTML global-attributes
accesskey
:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shift + a
可激活元素class
:为元素设置类标识,多个类名用空格分开,CSS和javascript可通过class属性获取元素contenteditable
: 指定元素内容是否可编辑contextmenu
: 自定义鼠标右键弹出菜单内容data-*
: 为元素增加自定义属性dir
: 设置元素文本方向draggable
: 设置元素是否可拖拽dropzone
: 设置元素拖放类型: copy, move, linkhidden
: 表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果id
: 元素id,文档内唯一lang
: 元素内容的的语言spellcheck
: 是否启动拼写和语法检查style
: 行内css样式tabindex
: 设置元素可以获得焦点,通过tab可以导航title
: 元素相关的建议信息translate
: 元素和子孙节点内容是否需要本地化什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。
HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构
css命名的语义化是指:为html标签添加有意义的class,id补充未表达的语义,如Microformat通过添加符合规则的class描述信息
为什么需要语义化:
HTTP method
从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
检验新鲜通常有两个HTTP头进行控制
Expires
和Cache-Control
:浏览器获取主机ip地址,过程如下:
打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下:
浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下:
构建DOM树:
构建CSSOM树:
根据DOM树和CSSOM树构建渲染树:
script
,meta
这样本身不可见的标签。2)被css隐藏的节点,如display: none
js解析如下:
HTTP request报文结构是怎样的
rfc2616中进行了定义:
一个请求报文例子如下:
HTTP response报文结构是怎样的
rfc2616中进行了定义:
响应报文例子如下:
如何进行网站性能优化
雅虎Best Practices for Speeding Up Your Web Site:
content方面
Server方面
Cookie方面
css方面
Javascript方面
图片方面
移动方面
什么是渐进增强
渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:
HTTP状态码及其含义
参考RFC 2616
1XX:信息状态码
2XX:成功状态码
3XX:重定向
4XX:客户端错误
5XX: 服务器错误