前端面试之HTML篇整理
HTML5新特性，语义化
语义化标签比起传统的div+css的样式布局来说，更遵循W3C规则，有利于团队的开发维护，更有利于SEO优化，方便其他设备解析
举几个例说明：
| 标签 | 语义化 |
|---|---|
|
定义文档中的主体部分的节、段。 |
|
定义引入的外部文本 |
|
常用作侧边栏 |
|
页面头部 |
|
页面尾部 |
|
导航栏 |
|
可输入的下拉选择框 |
个人觉得最实用的新增属性是表单属性
新增的有参照链接
其他html5新增的实用属性
浏览器的标准模式和怪异模式
浏览器解析css有两种模式：标准模式和怪异模式。标准模式下浏览器按W3C标准解析执行代码；怪异模式下，为了解决兼容老页面，浏览器按照各自的模式去解析文档
浏览器是如何区分这两种模式呢？
1.标准模式：
即文档头部具有完整的DOCTYPE声名；浏览器会按照doctype中的DTD声明指向来解析，比如
浏览器会按照HTML 4.01 的标准来解析
2.怪异模式：
文档中没有DOCTYPE声明，或者说没有严格的DTD声明，另外一种情况：如果doctype声明在xml之后，IE会解析成怪异模式。
标准模式与怪异模式对CSS解析的区别
- 盒模型：IE标准下：
content+padding+border+margin；IE怪异下：content+margin，其中content就包含了padding和border - 行内元素的垂直对齐:基于 Gecko 的浏览器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】标准模式对齐至基线，怪异模式对齐至底部
- 怪异模式中，IE6/7/8都不认识!important声明 ;标准模式中只有IE6不认识!important声明
- 设置行内元素的高宽： 在标准模式下，给等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。
- 使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效。
xhtml和html的区别
xhtml 实际上是符合 XML 标准的改进型 HTML，对语法的苛刻程序和其它基于 XML 的一样；
使用data-的好处
HTML data-* 属性：使用 data-* 属性来嵌入自定义数据
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）
在高版本浏览器中，可以使用js方法dataset来获取到data-存放的数据
meta标签
meta标签的作用：它里面存放的数据是供机器解读的，告诉机器该如何解析这个页面
它不会显示在页面上，但是对于机器是可读的。
可用于浏览器：1.（如何显示内容或重新加载页面），2.搜索引擎（关键词），3.或其他 web 服务。
meta的必需属性和可选属性：
必须属性：当有http-equiv或name属性的时候，一定要有content属性对其进行说明。
meta的可选属性：http-equiv、name和scheme
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />在页面中加入这个后，5秒钟后就会跳转到百度
常用的属性及用法：
charset：声明编码格式，解决乱码
SEO优化：使用name=”*” content=”…”
移动端页面布局：
<meta name="viewport" content="width=device-width, initial-scale=1.0">告诉各个浏览器去执行什么操作
比如：优先使用最新的chrome版本
<meta http-equiv="X-UA-Compatible" content="chrome=1" />UC手机浏览器全屏显示页面
<meta name="full-screen" content="yes">canvas
谈起canvas，不得不说的是与svg的区别：
canvas是html5提供的新元素
svg是比canvas要早很多，用xml技术（描述二维图形的语言）
canvas可以看做是一个画布。其绘制出来的图形为标量图；可以在canvas中引入jpg或png这类格式的图片，适合制作游戏、图表等
而svg，所绘制的图形为矢量图。svg中不能引入普通的图片，适合制作小图标；
canvas里面绘制的图形不能被引擎抓取，不支持事件绑定，而svg的可以用标签实现，并且svg可以支持事件绑定。
canvas可以使用canvas.οnmοuseοver=function(){}
IE6 bug，和一些定位写法
IE6对文档的解析是有很多bug的，比如 双边距问题、奇数宽高、浮动后3px问题、position:absolute定位中left和bottom的定位错误等等；
这些ie6的bug都可以通过触发layout得到解决，如何触发layout呢？
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值
其中解决定位bug最常用的是：
1、给父层设置zoom:1触发layout。
2、给父层设置宽度（width(定位left)/height(定位bottom)）。
关于viewport
当在meta标签中设置 name=”viewport”
content内容
| 字段名称 | 类型 | 描述 |
|---|---|---|
| width number | device-width | 控制 viewport 的宽度 |
| height number | device-width | 控制 viewport 的宽度 |
| initial-scale device-width | 初始缩放比例，也即是当页面第一次 load 的时候缩放比例 | |
| maximum-scale | number | 允许用户缩放到的最大比例 |
| minimum-scale | number | 允许用户缩放到的最小比例 |
| user-scalable | yes \no | 用户是否可以手动缩放 |
如果不设置viewport，那么width的默认为980;如果页面的所有元素宽度都小于980，此时width为980，如果页面最宽的位置超过980，那么width等于最大宽度。
例如，
那么ios下width还是按980显示（即默认就会通过dpi缩放）
viewport的宽度可以通过 document.documentElement.clientWidth来获取。