论坛 › 新闻资讯 › HTML5有哪些新特性、移除了哪些元素Html5的作用？

lover30 发表于 2022-12-23 10:56:11

HTML5有哪些新特性、移除了哪些元素Html5的作用？

1 浏览器页面有哪三层构成，其分别的作用是什么？

构成：结构层、表示层、行为层

分别是：HTML、CSS、JavaScript

作用：HTML实现页面结构、CSS渲染页面完成页面的表现与风格、JavaScript实现一些业务交互等功能

2 HTML5 的优缺点

优点：

+ 网络标准统一、HTML本身是由W3C推荐出来的

+ 多设备、跨平台

+ 即时更新

+ 提高可用性和改进用户的友好体验

+ 有几个新的标签，更加语义化，有助于开发人员定义重要的内容。

+ 可以给站点带来更多的多媒体元素（视频和音频）

+ 可以很好的代替Flash和Silverlight（Microsoft Silverlight是一个跨浏览器的、跨平台的插件，为网络带来下一代基于NET Framework的媒体体验和丰富的交互式应用程序。）

+ 涉及到网站的抓取和索引的时候，对SEO很友好

+ 被大量应用于移动应用程序和游戏中

缺点：

+ 安全性：项之前Firefox4 的web Socket和透明代理的实现存在严重的安全性问题，同时 web storage、web socket这样的功能很容易被黑客利用来盗取用户信息和资料。

+ 完善性：许多特性各个浏览器的支持程度不一样

+ 技术门槛：HTML5简化开发者同时代表了许多新的的属性和API需要学习，像web worker、web socket 、 web storage等新特性，后台甚至浏览器原理的知识等

+ 性能：某些平台上的引擎问题导致HTML5性能低下

+ 浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没

3 Doctype的作用？严格模式和混杂模式如何区分？它们有什么意义？

<p><pre>    <code>Doctype声明指出阅读程序应该用什么规则集来解释浏览器中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则
R1：它位于文档中的最前面的位置，处于标签之前，此标签可告知浏览器文档使用哪种HTML或XHMTL规范，该标签可声明三种DTD类型，分别是严格版本、过渡版本、以及基于框架的HTML文档。
R2:所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析代码，因为浏览器解析执行的方式不同，所以我称为怪异模式。严格模式是浏览器根据Web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。混杂模式则是一种向后兼容的解析方法，即为可以实现IE5.5以下版本浏览器的渲染模式。
R3：浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD的声明，网页将进入怪异模式。
</code></pre></p>
5 HTML5 有哪些新特性、移除了哪些元素

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

结构性元素主要负责web上下文结构的定义

section：在 web 页面应用中，该元素也可以用于区域的章节描述。

header：页面主体上的头部， header 元素往往在一对 body 元素中。

footer：页面的底部（页脚），通常会标出网站的相关信息。

nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

级块性元素主要完成web页面区域的划分，确保内容的有效分割。

aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。

code：表示一段代码块。

dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。

meter：表示特定范围内的数值，可用于工资、数量、百分比等。

time：表示时间值。

progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。

video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。

audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。

datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。

menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。

command：用来处理命令按钮。

6 你做的网页在哪些流览器测试过,这些浏览器的内核分别是什么?

a、 IE: trident 内核

b、 Firefox ： gecko 内核

c、 Safari:webkit 内核

d、 Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核

e、 Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )

7 HTML5的认识？为什么提出HTML5？

R1：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（ Plug-in-Based Rich Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

R2：HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。

HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

8 对WEB标准以及W3C的理解与认识?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

9 HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

(1)行内元素

a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体 ( 不推荐 )

* bdo - bidi override

* big - 大字体

* br - 换行

* cite - 引用

* code - 计算机代码 ( 在引用源码的时候需要 )

* dfn - 定义字段

* em - 强调

* font - 字体设定 ( 不推荐 )

* i - 斜体

* img - 图片

* input - 输入框

* kbd - 定义键盘文本

* label - 表格标签

* q - 短引用

* s - 中划线 ( 不推荐 )

* samp - 定义范例计算机代码

* select - 项目选择

* small - 小字体文本

* span - 常用内联容器，定义文本内区块

* strike - 中划线

* strong - 粗体强调

* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

(2)块元素 (block element)

* address - 地址

* blockquote - 块引用

* center - 居中对齐块

* dir - 目录列表

* div - 常用块级容易，也是 css layout 的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容

* noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet

* button - 按钮

* del - 删除文本

* iframe - inline frame

* ins - 插入的文本

* map - 图片区块 (map)

* object - object对象

* script - 客户端脚本

(3)空元素 ( 在 HTML 元素中，没有内容的 HTML 元素被称为空元素 )

//换行

//分隔线

//文本框等

//图片

10 什么是WebGL,它有什么优点?

WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：

第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;

第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

11 描述一下cookies，session Storage和localStorage的区别？

session Storage和local Storage 是HTML5 WebStorage API提供的，可以方便的在web请求之间保存数据，有了本地数据，就可以避免数据在浏览器和服务器之间来回的传递。

session Storage、local Storage、cookie都是在浏览器端存储的数据，其中 session Storage 的概念很特别，引入了一个“浏览器窗口”的概念，session Storage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新有页面或进入同源的另一个页面，数据仍然存在，关闭窗口后，session Storage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，session Storage对象也是不同的。

cookies会发送到服务器端，session Storage与local storage不会。

Microsoft支持Internet Explorer 8 增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。Firefox每个域名cookie限制为50个，Opera每个域名cookie限制为30个。Firefox和safari允许cookie多达4097个字节，包括名（name）、值(value)和等号。Opera允许cookie多达4096个字节，包括名（name）、值（value）和等号。Internet Explorer允许cookie多达4095个字节包括名（name）、值（value）和等号。

区别

Cookie

+ 每个域名存储量比较小（各浏览器不同，大致4k)

+ 所有域名的存储量有限制（各浏览器不同，大致4k)

+ 有个数限制（各浏览器不同）

+ 会随着请求发送到服务器端

LocalStorage

+ 永久存储

+ 单个域名存储量比较大（推荐5MB，各浏览器不同）

+ 总体数据无限制

Session Storage

+ 只在session内有效

+ 存储量更大（推荐没有限制，但是实际上各浏览器不同）

12 HTML语义化 什么是HTML语义化

根据内容的结构化（内容结构化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好地解析。

为什么要语义化？

1）为了在没有CSS的情况下，页面也能呈现出很好第内容结构、代码结构；

2）用户体验：例如Title、alt用于解析名词或解释图片信息，label标签的活用。

3）有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。

4）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

5）便于团队开发和维护，语义化更具有可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

语义化的便签

<p><pre>    <code><header>
<footer>
<nav>
<section>
<article>：用来在页面中表示一套结构完整且独立的内容部分
<aside>:主题的附属信息（只要是一个附属内容），如果article里面为一篇文章的haul，那么稳重的作者以及信息内容就是这篇稳重的附属内容了。
<figure>:媒体元素，比如一些视频、图片等
<datalist>:选项列表，与input元素配合使用，来定义input可能的值
<details>：用于描述文档或文档某个部分的细节---默认属性为open--，配合summary一起使用。
</code></pre></p>
13 link与@import的区别

<p><pre>    <code>XML/HTML代码
<link rel = &#39;stylesheet&#39; rev=&#39;stylesheet&#39; href="CSS文件" type=&#39;text/css&#39; media = &#39;all&#39;/>
<style type="text/css" media = "screeen">@import url(&#39;CSS文件&#39;);</style>
两者都是外部引用CSS的方式，但是存在一定的区别：
+ link是XHTML标签，处理加载CSS外，还可以定义RSS等其他事物；@import属于CSS范畴，只能加载CSS、
+ link引用CSS时，在页面载入时同时加载；@import需要页面网页全部载入后以后加载
+ link是XHTML标签，无兼容问题；@import是CSS2.1 提出的，低版本的浏览器不支持
+ link支持使用JavaScript控制DOM改变样式；@import不支持。
</code></pre></p>
14 说说对SVG的理解

<p><pre>    <code>SVG -- 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML） ，用于描述微微矢量图形的一种图形格式。SVG是W3C（‘World Wide Web Con Sortium&#39; 即国际互联网标准组织），在2000年8月指定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵循XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，SVG于2003年1月14日成为W3C推荐的标准。
特点：
+ 任意缩放：用户可以任意缩放图像的显示，而不会破坏图像的清晰度、细节等。
+ 文本独立：SVG图形中的文字独立于图形，文字保留可编辑和可搜寻的状态，也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
+ 较小文件：总体来说，SVG文件比那些GIF和JPEG格式的文件要小的多，因而下载速度也快
+ 超强显示效果：SVG图形在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
+ 超级颜色控制：SVG图像提供一个1600万中颜色的调色板，致辞ICC颜色描述文件标准、RGB、线X填充、拣鞭河蒙版。
+ 交互X和智能化：SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题；另一个是SVG的本地运行环境下的厂家支持程度。
浏览器支持：
1）Internet Explorer9 ，Firefox，Chrome，Opera，Safari 都支持
IE8和早期版本都需要一个插件-如Adobe SVG浏览器，
</code></pre></p>
15 HTML全部属性（global attribute）有哪些？

<p><pre>    <code>MDN：设置快捷键
class：为元素设置类标识
contenteditalbe:指定元素内容是否可编辑
contextmenu:自定义鼠标右键弹出菜单内容
data-*：为元素增加自定义属性；
dir:设置元素文本方向draggable:设置元素是否可拖拽
dropzone：设置元素拖放类型
copy、move、link、hidden、id
lang:元素内容的语言
spellcheck：是否启动拼写和语法检查
style
tabIndex
title
translate:元素和子孙节点内容是否需要本地化
</code></pre></p>
16 超链接target属性的取值和作用

<p><pre>    <code>target 指定所链接的页面在浏览器窗口中的打开方式。
参数值有：
_blank:在新浏览器窗口中打开链接的文件
_parent:将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件、就像_self 参数1.
_self:在同一框架或窗口中打开所链接的文档，此参数是默认值
_top:在当前的整个浏览器窗口打开所链接的文档，因而会删除所有框架。
</code></pre></p>
17 data-* 属性的作用是什么？

<p><pre>    <code>data-* 是HTML5 新增的自定义属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取。
data-*之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格，所有主流浏览器都支持            data- 即：当没有合适的属性和元素时，自定义的data属性是能够存储页面或App的稀有的自定义数据。
</code></pre></p>
18 谈谈对浏览器内核的理解？

<p><pre>    <code>浏览器内核主要分成两个部分：渲染引擎和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息，以及计算网页的显示方式，然后会输出 志显示器或打印机，浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果。
</code></pre></p>
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

19 iframe有哪些缺点？

<p><pre>    <code>1） iframe会阻塞主页面的Onload事件
2） 搜索引擎的检索程序无法解读这种页面，不利于SEO（Search Engine Optimization）
3） iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
4） 使用iframe之前需要考虑这它的缺点，如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕过以上的问题。
</code></pre></p>
20 Label的作用

<p><pre>    <code>label标签定义表单控制间的关系，当用选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for ="Name">Number:</label>
<input type = "text" name = "Name" id = "Name"/>
<label>Date:<input type = "text" name = "B"/></label>
注意：label的for属性值时与后面对应的input的id属性值相同
</code></pre></p>
21 如何实现浏览器内多个标签页之间的通信？

<p><pre>    <code>WebSocket、SharedWorker；
也可以调用localstorage、cookies等本地存储方式；
localstorage另一个浏览器上下文里被添加、修改或删除时，它都会触发一个事件。我们通过监听事件，控制它的值进行页面信息通信；
注意quirks:Safari在无痕模式下设置localstorage值时会抛出QuotaExceededError的异常；
</code></pre></p>
22 如何在页面上实现一个圆形的可点击区域？

<p><pre>    <code>map+area 或 SVG
border-radius
纯js实现 需要求一个点在不在圆上简单算法，获取鼠标的坐标等
</code></pre></p>
23 title与h3的区别、b与strong的区别、i与em的区别？

<p><pre>    <code>title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是表明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调的内容。
i内容展示位斜体，em表示强调的文本。
b i u s pre 属于自然样式的标签
strong em ins del code 属于语义样式的标签
应该准确使用语义样式的标签，但不能滥用，如果不能确定时首先选用自然样式的标签
</code></pre></p>
24 不使用 border 画出 1px 高的线，在不同浏览器的标准模式好怪异模式下都能保持一样的显示效果？

<p><pre>    <code><div style="width:100%;height:1px;background-color:black;"></div>
</code></pre></p>
25 HTML5标签的作用？

<p><pre>    <code>1） 使Web页面的内容更加有序和规范
2） 使得搜索引擎更加容易按照HTML5规则识别出有效的内容
3） 使Web页面更接近于一种数据字段和表
</code></pre></p>
26 简述src和href 的区别？

<p><pre>    <code>src用于替换当前元素，href用于在当前文档和引用资源之间建立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
<script src = "js.js"></script>
当前浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入到当前标签内。这也是为什么将js脚本放在底部而不是投标href是Hypertext Reference 的缩写，指向网络资所在的位置，建立与当前元素或当前文档之间的链接，如果我们在文档中添加了<link href = "commmon.css" rel="stylesheet"/>那么浏览器就会识别该文档为CSS文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式加载CSS，而不是使用@import方式
</code></pre></p>
27 对Canvas的理解

<p><pre>    <code>canvas 是HTML5中新增的一个HTML5标签与操作Canvas的JavaScript API，它可以实现在网页中完成动态的2D与3D图像技术，标记和SVG以及VML之间的一个重要的不同是，有一个基于JavaScript的绘图API，而SVG和VML使用XML文档来描述绘图，SVG绘图很容易编辑与生产，但是功能明显小弱一些。Canvas可以完成的动画游戏、图表、图像处理等原来需要Flash完成的一些功能。
</code></pre></p>
28 WebSocket与消息推送

<p><pre>    <code>B/S架构的系统多使用HTTP协议；
HTTP协议的特点：
1） 无状态
2） 用于通过Internet发送消息和响应消息
3） 使用端口接收和发送消息，默认端口号为80，底层通信还是使用Socket完成
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送，一些变相的解决方法：
1）双向通信与消息推送：
轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：后端程序编写比较容易。
缺点：请求中有大半是无用的，浪费带宽和服务器资源。
实例：适用于小型应用
长轮询：客户端项服务器发送Ajax请求，服务器接到请求后hold主连接，直到有新消息才返回响应信息并关闭连接，客户端出来玩响应信息后再向服务器发送信息的消息。
优点：在无消息的情况下不会频繁的请求，耗费资小。
缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理和维护，Commet异步ashx
实例：WebQQ、Hi网页版、Facebook IM
长连接：在页面嵌入一个隐藏的iframe，将这个隐藏的iframe的src属性设为对一个常连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。
优点：消息即时到达，不发无用请求，管理起来相对便利
缺点：服务器维护一个长连接会增加开销。
实例：Gmail聊天
2）Flash Socket:在页面内嵌入一个使用了Socket类的Flash程序，JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。
优点:实现真正的即时通信
缺点：客户端必须安装flash插件；非HTTP协议，无法自动穿越防火墙
实例：网络互动游戏
Websocket：Websocket是HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术，依靠这种技术可以实现客户端与服务器端的长连接，双向实时通信。
特点：
1 事件驱动
2 异步
3 使用ws或wss协议的客户端socket
4 能够实现真正意义上的推送功能
缺点：部分浏览器不支持。   
</code></pre></p>
29 img 的title与alt的区别？

<p><pre>    <code>alt用于图片无法正常加载时显示
title用于为该属性提供信息，通常当鼠标滑动到元素时显示
</code></pre></p>
30 表单的基本组成部分有哪些，表单的主要用途是什么？

<p><pre>    <code>组成：表单标签、表单域、表单按钮
a 表单标签：这里包含了处理表单数据所用的CGI程序的URL，以及数据提交到服务器的方法。
b 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等
c 表单按钮：包括提交、复位和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的工作。
主要用途：表单在网页中主要负责数据域采集功能和向服务器传送数据。
</code></pre></p>
31 表单中Get和Post方法的区别

<p><pre>    <code>1） get是从服务器上获取数据，post是向服务器发送传送的数据
2） get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以可看到。post是通过HTTP post机制，将表单内各个字段与其内容放置到HTML HEADER内一起传送到Action属性所指的URL地址，用户看不到这个过程。
3） 对应get方式，服务器端用Request.QueryString获取变量的值，对应post方式，服务器端用Request.Form获取提交的数据。
4）get传送的数据量小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论是哪个IIS4中最大为80KB，IIS5中最大为100KB。
5）get安全性第，post安全性高。
</code></pre></p>
32 HTML5中新增了哪些表单元素

<p><pre>    <code>HTML5中新增了很多表单元素让开发者构建更优秀的Web应用程序，主要有：
datalist
Keygen
output
</code></pre></p>
33 HTML5中废弃了哪些HTML4中的标签

<p><pre>    <code>frame
frameset
noframe
applet
big
center
basefront
</code></pre></p>
34 HTML5标准提供了哪些新的API？

<p><pre>    <code>Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
</code></pre></p>
35 HTML5存储类型有什么区别？

<p><pre>    <code>HTML5能够本地存储数据，在之前都是使用cookies存储的。HTML5 提供了下面两种本地存储方案：
1） localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失
2）sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
</code></pre></p>
36 HTML5 应用程序缓存和浏览器缓存有什么区别？

<p><pre>    <code>应用程序缓存是HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如HTML、CSS、图片以及JavaScript。这个特性可以提高网络性能，它的实现借助于manifest文件：如下：
<!doctype html>
<html manifest="example.appcache">
.....
</html>
与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
</code></pre></p>
37 HTML5 Canvas元素有什么用？

<p><pre>    <code>Canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作。
<canvas id = &#39;canvas1&#39; width=&#39;300&#39; height=&#39;100&#39;></canvas>
</code></pre></p>
38 除了audio 和video，HTML5还有哪些媒体标签？

<p><pre>    <code>HTML5对于多媒体提供了强大的支持，除了audio和video标签还有：
embed ：定义嵌入的内容，比如插件。<embed type="video/quicktime" src="Fishing.mov">
<source> 对于定义多个数据源很有用
<video width="450" height="340" controls>
<source src = "jamshed.mp4" type = "video/mp4">
<source src = "jamshed.org" type = "video/org">
</video>
track ：为诸如video元素之类的媒介规定外部文本轨道，用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
<video width=” 450 ″ height= ” 340 ″ controls>
<source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
<source src=” jamshed.ogg ” type= ” video/ogg ” >
<track kind=” subtitles ” label= ” English ” src= ” jamshed_en.vtt ” srclang= ” en ” default></track>
<track kind=” subtitles ” label= ” Arabic ” src= ” jamshed_ar.vtt ” srclang= ” ar ” ></track>
</code></pre></p>
39 HTML5中如何嵌入视频

<p><pre>    <code><video width=” 450 ″ height= ” 340 ″ controls>
    <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
   Your browser does’ nt support video embedding feature.
</video>
</code></pre></p>
40 HTML5嵌入音频

<p><pre>    <code><audiocontrols>
    <source src=” jamshed.mp3 ″ type= ” audio/mpeg ″ >
   Your browser does’ nt support audio embedding feature.
</audio>
</code></pre></p>
41 HTML5 文档类型和字符集是？

<p><pre>    <code>文档类型：<!doctype html>
字符集：<meta charset = "UTF-8">
</code></pre></p>
42 CSS的盒子模型

<p><pre>    <code>1 标准的CSS盒子模型：宽度=内容宽度+边框宽度+内边距宽度
2 CSS盒子模型具有 content、padding、border、margin
3 它与生活中的箱子相似，所以称为盒子模型
</code></pre></p>
43 请你说说CSS有什么特殊性?（优先级、计算特殊值）

优先级

1 同类型，同级别的样式后者先于前者

2 ID>类样式>标签

3 内联>ID>伪类>属性选择器>类选择器>标签选择器>通用选择器>继承的样式

4 具体>泛化的

5 近的>远的(内联样式>内部样式表>外联样式表)

7 ！important权重最高，比inline style还要高

计算特殊值：

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

44 要动态改变底层中内容可使用的方法？

<p><pre>    <code>innerHTML、innerText
</code></pre></p>
45 常见浏览器兼容性问题与解决方案？ (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

(2)浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

(3)浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

(4)浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案 ： 在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

(5) 浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注 ： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

(6) 浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

(7)浏览器兼容问题七：透明度的兼容CSS设置

一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity:0,对于兼容的，一般的做法就是在书写css样式的将2个都写上就行，就能实现兼容

46 列出display的值并说明他们的作用？

<p><pre>    <code>display:none|inline|block|list-item|inline-block|table|inline-talbe|table-caption|table-cell|table-row|table-row-group|table-column|talbe-group|table-footer-group|table-header-group|run-in|box|inline-box|flexbox|inline-flexbox|flex|inline-flex
默认值：inline
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留1i物理空间。
inline：内联对象
block：块元素
list-item：列表项目
inline-block：内联块对象
table：块元素及的表格
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定队形是内联对象还是块级对象
box：将对象作为弹性伸缩盒显示
inline-box：将对象作为内联块级弹性伸缩盒显示
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
</code></pre></p>
47 如何居中div，如何居中一个浮动的元素

<p><pre>    <code>（1）非浮动元素居中：可以设置margin：0 auto令其居中，定位，父级元素text-align：center等等。
（2）浮动元素居中：
a设置当前div的宽度，然后设置 margin-left:50%;position:relative;left:-250px;其中left是宽度的一半
b 父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%；
c position定位等等。
</code></pre></p>
48 列举几种清除浮动的方法 父级div定义高度

<p><pre>    <code>原理:父级div手动定义高度，就解决了父级div无法自动获取高度的问题
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样是，会产生问题。
建议：不建议使用，只建议高度固定的布局时使用
</code></pre></p>
结尾处加空div标签 clear：both

<p><pre>    <code>原理：添加一个空div，利用CSS提高的clear：both清除浮动，让父级div自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出血怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，代码体验，可读性较差
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动的方法
</code></pre></p>
父级div定义 伪类：after 和 zoom

<p><pre>    <code>原理：IE8以上和非IE浏览器才支持：after，原理和方法2 有点类似，zoom（IE专有属性）可解决IE6，IE7浮动问题。
优点：浏览器支持好，不易出现怪问题
缺点：代码多，不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，减少CSS代码
</code></pre></p>
父级div定义 overflow：hidden

<p><pre>    <code>原理：必须定义width或zoom：1，同时不能定义height，使用overflow：hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持友好
缺点：不能和position配合使用，因为超出的尺寸会被隐藏。
建议：只推荐没有使用position或对overflow：hidden理解比较深入的开发者使用。
</code></pre></p>
父级div定义 overflow：auto

<p><pre>    <code>原理：必须定义width或zoom：1 ，同时不能定义height，使用overflow：auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部高度超过父级div时，会出现滚动条
建议：不建议使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条的时候可以使用。
</code></pre></p>
49 block，inline和inlinke-block细节对比？

display:block;

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度

block 元素可以设置width和height属性，块级元素及时设置了宽度，仍然是独占一行

block 元素可以设置margin和padding属性

display:inline

inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会换新的一行，其宽度随元素的内容而变化

inline 元素设置width和height无效

inline 元素的margin和padding属性，水平方向的都会产生边距效果，但是竖直方向的不会产生效果

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内，比如我们设置一个 a 标签为inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

a、一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。

b、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

50 什么叫优雅降级和渐进增强

优雅降级

Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为哪些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强：

从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

51 说说浮动元素引起的问题和你的解决办法

问题：

1）父元素高度无法被撑开，影响与父级元素同级的元素。

2）与浮动元素同级的非浮动元素会跟随其后

3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法

使用 clear:both;来解决（2）（3）,对于（1），添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content:”“;display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}/* for IE/Mac*/

清除浮动的几种方法：

(1)、额外标签法，

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

(2)、使用after伪类

#parent:after{

content:” “;

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮动外部元素

(4)、设置overflow为hidden或者auto52 说说有哪些性能优化的方法

<p><pre>    <code>1）减少HTTP请求次数：CSS Sprites ,JS,CSS源码压缩，图片大小控制合适，网页Gzip，CDN托管，data缓存，图片服务器
2）前端模板 Js+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4）当需要设置的样式很多时设置className而不是直接操作style
5）少用全局变量、缓存DOM节点的查找结果，减少IO读取操作。
6）避免使用 CSS Expression（CSS表达式）又称Dynamic properties 动态属性
7）图片预加载，将样式表放在顶部，把脚本放在底部，加上时间戳
8）避免用空的src和href
9）为头文件指定Expires
10)避免跳转
11）使用GET来完成AJAX请求
</code></pre></p>
53 为什么要初始化CSS样式？

<p><pre>    <code>因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
</code></pre></p>
54 解释下浮动和它的工作原理？清除浮动的技巧？

<p><pre>    <code>浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
(1)、使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
</code></pre></p>
55 CSS样式表根据所在网页的位置，可分为哪几种样式表？

<p><pre>    <code>行内样式表、内联样式表、外部样式表
</code></pre></p>
56 谈谈你对CSS中刻度的认识？

CSS中刻度是用于设置元素尺寸的单位

1 特殊值0可以省略单位，例如：margin：0px可以写为margin：0

2 一些属性可能允许有负长度值，或者有一定的范围限制，如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。

3 长度单位包括：相对单位和绝对单位

相对单位有：em ex ch rem vw vh vmax vmin

绝对单位有：cm mm q in pt pc px

绝对长度单位 ：1in = 2.54cm =25.4mm = 72pt = 6pc 96px

<p><pre>    <code>文本相对长度单位：em
相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相对长度单位：rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。
</code></pre></p>
57 请你说说box-sizing属性的的用法？

<p><pre>    <code>设置或检索对象的盒模型组成模式
1）box-sizing:content-box;padding和border不被包含在定义的width和height中，对象的实际宽度等于width+border+padding，但占有页面还会再加上margin，此属性表现为标准模式下的盒模型
2）box-sizing：border-box,padding和margin被包含在定义的width和height之内，对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 Element width=width，此属性表现为怪异模式下的盒模式。   
</code></pre></p>
58 浏览器标准模式和怪异模式之间的区别是什么？

<p><pre>    <code>标准模式就是浏览器按照W3C标准解析执行代码；怪异模式就是使用浏览器自己的方式解析执行代码；浏览器解析时使用什么模式，与DTD声明直接相关，忽略DTD声明，将使浏览器进入到怪异模式（quirks mode)
区别：总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型： 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽： 在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度： 在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
</code></pre></p>
59 说说隐藏元素的方式有哪些？

<p><pre>    <code>1） 使用CSS的display:none，不会占有原来的位置
2）使用CSS的visibility：hidden，会占有原来的位置
3）使用HTML5中的新增属性hidden=“hidden”，不会占有原来的位置
</code></pre></p>
60 为什么重置浏览器默认样式，如何重置默认浏览器样式？

<p><pre>    <code>每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题。
a、最简单的办法：（不推荐使用）*{margin: 0;padding: 0;}。
b、使用CSSReset可以将所有浏览器默认样式设置成一样。
c、normalize：也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。
</code></pre></p>
61 BFC和IFC

BFC：块级格式化上下文

1.内部的盒子会在垂直方向，一个个地放置；

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；

3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

4.BFC的区域不会与float重叠；

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

6.计算BFC的高度时，浮动元素也参与计算

IFC：行内格式化上下文

如何产生BFC

1.根元素；

2.float的属性不为none；

3.position为absolute或fixed；

4.display为inline-block，table-cell，table-caption，flex；

5.overflow不为visible

62 说说你对页面中使用定位(position)的理解？

<p><pre>    <code> 使用css布局position非常重要，语法如下：
position：static | relative | absolute | fixed | center | page | sticky
默认值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。
(2)、relative
相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
(3)、absolute
a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。
(4)、fixed
固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
(5)、center
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、page
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
(7)、sticky
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
</code></pre></p>
63 如何解决多个元素重叠问题？

<p><pre>    <code>使用z-index属性可以设置元素的层叠顺序
z-index属性
语法：z-index: auto | <integer>
默认值：auto
适用于：定位元素。即定义了position为非static的元素
取值：
auto： 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
整数： 用整数值来定义堆叠级别。可以为负值。 说明：
检索或设置对象的层叠顺序。
z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
当多个元素层叠在一起时，数字大者将显示在上面。   
</code></pre></p>
64 页面布局的方式有哪些？

方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 （1）、双飞翼布局 经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点： a、三列布局，中间宽度自适应，两边定宽； b、中间栏要在浏览器中优先展示渲染； c、允许任意列的高度最高； d、要求只用一个额外的DIV标签； e、要求用最简单的CSS、最少的HACK语句； 在不增加额外标签的情况下，圣

方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局

（1）、双飞翼布局

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

a、三列布局，中间宽度自适应，两边定宽；

b、中间栏要在浏览器中优先展示渲染；

c、允许任意列的高度最高；

d、要求只用一个额外的DIV标签；

e、要求用最简单的CSS、最少的HACK语句；

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

(2)、多栏布局

a、栏栅格系统：就是利用浮动实现的多栏布局，在bootstrap中用的非常多。

b、多列布局：栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块

(3)、弹性布局（Flexbox）

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。

Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。

综合而言，Flexbox布局功能主要具有以下几点：

a、屏幕和浏览器窗口大小发生改变也可以灵活调整布局；

b、可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

c、可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

d、可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

e、可以控制元素在页面上的布局方向；

f、可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

(4)、瀑布流布局

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

优点

a、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。

b、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

c、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

缺点

a、有限的用例：

无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。

例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。

b、额外的复杂度：

那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。

c、再见了，页脚：

如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。

最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。

千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。

d、集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。

e、关于页面数量的印象：

其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。

(5)、流式布局（Fluid）

固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

(6)、响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

优点

a、面对不同分辨率设备灵活性强

b、能够快捷解决多设备显示适应问题

缺点

a、兼容各种设备工作量大，效率低下

b、代码累赘，会出现隐藏无用的元素，加载时间加长

c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

d、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。 (2)、多栏布局 a、栏栅格系统：就是利用浮动实现的多栏布局，在bootstrap中用的非常多。 b、多列布局：栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块 (3)、弹性布局（Flexbox） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。

综合而言，Flexbox布局功能主要具有以下几点： a、屏幕和浏览器窗口大小发生改变也可以灵活调整布局； b、可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； c、可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； d、可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； e、可以控制元素在页面上的布局方向； f、可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 (4)、瀑布流布局 瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。 优点 a、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。 b、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

c、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。 缺点 a、有限的用例： 无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。 例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。 b、额外的复杂度： 那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。 c、再见了，页脚： 如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。 最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。 千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。 d、集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。

对于某些以类型网站来说，在这方面进行冒险是很不划算的。 e、关于页面数量的印象： 其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。 (5)、流式布局（Fluid） 固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。 (6)、响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。 优点 a、面对不同分辨率设备灵活性强 b、能够快捷解决多设备显示适应问题 缺点 a、兼容各种设备工作量大，效率低下 b、代码累赘，会出现隐藏无用的元素，加载时间加长 c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 d、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

65 overflow :hidden是否形成新的块级格式化上下文？

会形成，触发BFC的条件有：

- float的值不为none。

- overflow的值不为visible。

- display的值为table-cell, table-caption, inline-block 中的任何一个。

- position的值不为relative 和static。

查看完整版本: HTML5有哪些新特性、移除了哪些元素Html5的作用？