![]()
的title和alt有什么区别
title是global attributes之一，用于为元素提供附加的 advisory information。通常当鼠标滑动到元素上的时候显示。
alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
doctype 是什么,举例常见 doctype 及特点
声明必须处于 HTML 文档的头部，在标签之前，HTML5 中不区分大小写
声明不是一个 HTML 标签，是一个用于告诉浏览器当前 HTMl 版本的指令
现代浏览器的 html 布局引擎通过检查 doctype 决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
在 HTML4.01 中声明指向一个 DTD，由于 HTML4.01 基于 SGML，所以 DTD 指定了标记规则以保证浏览器正确渲染内容
HTML5 不基于 SGML，所以不用指定 DTD
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, link
hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
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
一台服务器要与 HTTP1.1 兼容，只要为资源实现GET和HEAD方法即可
GET是最常用的方法，通常用于请求服务器发送某个资源。
HEAD与 GET 类似，但服务器在响应中值返回首部，不返回实体的主体部分
PUT让服务器用请求的主体部分来创建一个由所请求的 URL 命名的新文档，或者，如果那个 URL 已经存在的话，就用干这个主体替代它
POST起初是用来向服务器输入数据的。实际上，通常会用它来支持 HTML 的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个 TRACE 响应并在响应主体中携带它收到的原始请求报文。TRACE 方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
OPTIONS方法请求 web 服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
DELETE请求服务器删除请求 URL 指定的资源
从浏览器地址栏输入 url 到显示页面的步骤(以 HTTP 为例)
在浏览器地址栏输入 URL
浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
如果资源未缓存，发起新请求
如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
检验新鲜通常有两个 HTTP 头进行控制Expires和Cache-Control：
HTTP1.0 提供 Expires，值为一个绝对时间表示缓存新鲜日期
HTTP1.1 增加了 Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析 URL获取协议，主机，端口，path
浏览器组装一个 HTTP（GET）请求报文
浏览器获取主机 ip 地址，过程如下：
浏览器缓存
本机缓存
hosts 文件
路由器缓存
ISP DNS 缓存
DNS 递归查询（可能存在负载均衡导致每次 IP 不一样）
打开一个 socket 与目标 IP 地址，端口建立 TCP 链接，三次握手如下：
客户端发送一个 TCP 的SYN=1，Seq=X的包到服务器端口
服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
客户端发送ACK=Y+1， Seq=Z
TCP 链接建立后发送 HTTP 请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用 HTTP Host 头部判断请求的服务程序
服务器检查HTTP 请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备 HTTP 响应，可能需要查询数据库等操作
服务器将响应报文通过 TCP 连接发送回浏览器
浏览器接收 HTTP 响应，然后根据情况选择关闭 TCP 连接或者保留重用，关闭 TCP 连接的四次握手如下：
主动方发送Fin=1， Ack=Z， Seq= X报文
被动方发送ACK=X+1， Seq=Z报文
被动方发送Fin=1， ACK=X， Seq=Y报文
主动方发送ACK=Y， Seq=X报文
浏览器检查响应状态吗：是否为 1XX，3XX， 4XX， 5XX，这些情况处理与 2XX 不同
如果资源可缓存，进行缓存
对响应进行解码（例如 gzip 压缩）
根据资源类型决定如何处理（假设资源为 HTML 文档）
解析 HTML 文档，构件 DOM 树，下载资源，构造 CSSOM 树，执行 js 脚本，这些操作没有严格的先后顺序，以下分别解释
构建 DOM 树：
Tokenizing：根据 HTML 规范将字符流解析为标记
Lexing：词法分析将标记转换为对象并定义属性和规则
DOM construction：根据 HTML 标记关系将对象组成 DOM 树
解析过程中遇到图片、样式表、js 文件，启动下载
构建CSSOM 树：
Tokenizing：字符流转换为标记流
Node：根据标记创建节点
CSSOM：节点创建 CSSOM 树
根据 DOM 树和 CSSOM 树构建渲染树:
从 DOM 树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被 css 隐藏的节点，如display: none
对每一个可见节点，找到恰当的 CSSOM 规则并应用
发布可视节点的内容和计算样式
js 解析如下：
浏览器创建 Document 对象并解析 HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate 为 loading
HTML 解析器遇到没有 async 和 defer 的 script 时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用 document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作 script 和他们之前的文档内容
当解析器遇到设置了async属性的 script 时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用 document.write()，它们可以访问自己 script 和之前的文档元素
当文档完成解析，document.readState 变成 interactive
所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用 document.write()
浏览器在 Document 对象上触发 DOMContentLoaded 事件
此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState 变为 complete,window 触发 load 事件
HTTP request 报文结构是怎样的
rfc2616中进行了定义：
首行是Request-Line包括：请求方法，请求 URI，协议版本，CRLF
首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以 CRLF 结束
请求头和消息实体之间有一个CRLF 分隔
CSS 选择器有哪些
*通用选择器：选择所有元素，不参与计算优先级，兼容性 IE6+
#X id 选择器：选择 id 值为 X 的元素，兼容性：IE6+
.X 类选择器： 选择 class 包含 X 的元素，兼容性：IE6+
X Y 后代选择器： 选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性：IE6+
X 元素选择器： 选择标所有签为 X 的元素，兼容性：IE6+
:link，:visited，:focus，:hover，:active 链接状态： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: IE4+
X + Y 直接兄弟选择器：在X 之后第一个兄弟节点中选择满足 Y 选择器的元素，兼容性： IE7+
X > Y 子选择器： 选择 X 的子元素中满足 Y 选择器的元素，兼容性： IE7+
X ~ Y 兄弟： 选择X 之后所有兄弟节点中满足 Y 选择器的元素，兼容性： IE7+
css sprite 是什么,有什么优缺点
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式
display: none;与visibility: hidden;的区别
联系：它们都能让元素不可见
区别：
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点由于继承了 hidden 而消失，通过设置 visibility: visible，可以让子孙节点显示。
修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
读屏器不会读取 display: none;元素内容；会读取 visibility: hidden;元素内容。
css hack 原理
原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。常见的 hack 有 1）属性 hack。2）选择器 hack。3）IE 条件注释
link与@import的区别
link是 HTML 方式， @import是 CSS 方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import
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属性生效
PNG,GIF,JPG 的区别及如何选
参考资料： 选择正确的图片格式
GIF:
8 位像素，256 色
无损压缩
支持简单动画
支持 boolean 透明
适合简单动画
JPEG：
颜色限于 256
有损压缩
可控制压缩质量
不支持透明
适合照片
PNG：
有 PNG8 和 truecolor PNG
PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
适合图标、背景、按钮
CSS 有哪些继承属性
关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor
IE6 浏览器有哪些常见的 bug,缺陷或者与标准不一致的地方,如何解决
IE6 不支持 min-height，解决办法使用 css hack：
.target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下内容高度超过会自动扩展高度
}
ol内li的序号全为 1，不递增。解决方法：为 li 设置样式display: list-item;
未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。解决办法：1）子元素去掉position: relative;; 2）不能为子元素去掉定位时，父元素position: relative;
容器包含若干浮动元素时如何清理(包含)浮动
容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理推荐的清理浮动方法
什么是 FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head
如何创建块级格式化上下文(block formatting context),BFC 有什么用
创建规则：
根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用：
可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠
display,float,position 的关系
如果display为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整。
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display
外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个 margin，叫做外边距折叠。规则如下：
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
浮动元素/inline-block 元素/绝对定位元素的 margin 不会和垂直方向上的其他元素的 margin 折叠
创建了块级格式化上下文的元素，不会和它的子元素发生 margin 折叠
元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
如何确定一个元素的包含块(containing block)
根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与 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的元素产生，规则如下：
如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
其他情况下包含块由祖先节点的padding edge组成
如果找不到定位的祖先元素，包含块为初始包含块
如何水平居中一个元素
如果需要居中的元素为常规流中 inline 元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置text-align: center;,再给子元素恢复需要的值
如何竖直居中一个元素
需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height：