前端面试常见问题——HTML篇

1. HTML语义化

什么是HTML语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

为什么要语义化
1. 在没有样式CSS情况下也以一种文档格式显示，容易阅读
2. 搜索引擎爬虫依赖标记来确定上下文和各个关键字的权重，有利于SEO
3. 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等）
写HTML代码时应该注意
1. 尽可能少使用无语义的标签div和span
2. 在语义不明显时，即可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利
3. 不要使用纯样式标签，如b、u、i等，改用css设置
4. 需要强调的文本，可以包含在<strong>或者<em>中
5. 使用表格时，标题用caption包围，表头用thead包围，主体部分用tbody包围，尾部用tfoot包围
6. 表单域用fieldset标签包围，并用legend标签说明表单用途
7. input标签对应的说明文本使用label标签，通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来
常用的语义元素
- <header>
  定义页面的介绍展示区域，通常包括网站logo、主导航以及搜索框。
- <nav>
  定义页面的导航链接部分区域
- <hgroup>
  当标题有多个层级时，该元素将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
- <article>
  定义页面独立的内容，有自己的header、footer、section等，专注于单个主题的文章
- <section>
  标记文档的节或段，通常自带标题
- <aside>
  定义与主要内容相关的内容块。通常显示为侧边栏
- <footer>
  定义底部区域，通常包含作者，著作权信息，链接的使用条款，联系信息等

2. Html5新特性

关于图像，位置，存储，多任务等功能的增加
- canvas绘画
- video 和 audio 元素，用于媒介回放
- localStorage本地离线存储，长期存储数据，浏览器关闭数据不丢失
- sessionStorage在浏览器关闭后自动删除
- article、footer、header、nav、section 等语义化内容元素
- calendar、date、time、email、url、search等表单控件
- webworker、websocket、manifest离线存储等新技术
移除的元素：
- 纯表现的元素，如big、center、font、 s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes
IE8/IE7/IE6如何支持HTML5新标签：

通过document.createElement方法让这些浏览器支持HTML5新标签，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim

3. Web Worker

HTML5提供的一种多线程解决方案，可以将大计算量的代码交给web worker而不冻结页面。但子线程完全受主线程控制，且不得操作dom，还是没有改变js单线程的本质

使用方式
- 创建在分线程中执行的js文件，设置self.onmessage，在回调函数中处理数据，通过self.postMessage返回要传递给主线程的数据
- 在主线程的js中创建worker对象，向分线程发消息worker.postMessage(要传递给分线程的数据)并设置回调worker.onmessage=function(event)
注意事项
- 主线程和分线程的this不同，所以分线程很多属性、方法不能用（document、window、alert等），也不能操作DOM更新界面
- 同源限制：分配给分线程的脚本必须与主线程脚本同源
- HTML5新特性：不是所有浏览器都兼容

4. Canvas

canvas 是 HTML5 提供的一个用于展示绘图效果的标签，提供了一个空白的图形区域，可以使用特定的JavaScript API来绘画图形
在标签中通过width和height可以指定画布的宽高，不能在CSS中定义宽高，因为canvas的默认宽高为300px * 150px，在CSS中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行绘图，得到的图形可能就变形的效果
在开始和闭合标签之间添加后备信息，当浏览器不支持（IE9以下）时则会显示标签内的信息
getContext()获取绘图上下文
translate(x, y)更改坐标原点
fillStyle属性指定填充样式
strokeStyle、lineWidth等属性指定描边样式
绘制路径
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
- rect(x, y, width, height) 可以绘制一个左上角坐标为(x, y)，宽width，高height的矩形路径
绘制图形
- fillRect(x, y, width, height) 绘制一个由fillStyle指定填充样式的矩形
绘制文本
- fillText(text, x, y, maxWidth) 使用fillStyle属性显示文本
- strokeText(text, x, y, maxWidth) 使用strokeStyle属性为文本描边
绘制图像
- drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)
创建渐变、阴影
变换
- rotate(angle) 旋转
- scale(scaleX, scaleY) 缩放
导出画布
- toDataURL()

5. Canvas和SVG的区别

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

6. HTML5离线储存manifest

原理

基于新建的.appcache文件的缓存机制，通过这个文件上的解析清单，离线存储资源。之后当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示，当与因特网连接时，更新机器上的缓存文件

如何使用：
- 页面头部加入一个manifest的属性；
- 在cache.manifest文件的编写离线存储的资源
- 在离线状态时，操作window.applicationCache进行需求实现
管理和加载
- 在线情况下，浏览器发现html头部有manifest属性，会请求manifest文件，第一次访问会根据文件内容下载相应的资源并且进行离线存储。如果已经离线存储，则使用离线的资源加载页面，然后对比新旧的manifest文件，如果文件改变了，那么就会重新下载并存储。
- 离线的情况下直接使用离线存储的资源
- 如果服务器对离线的资源进行了更新，那么必须更新manifest文件，如果只是更新了资源而没有更新manifest文件的话，浏览器不会重新下载资源
- 在更新资源之后，新的资源需要到下次打开才会生效，如需马上生效，可以使用window.applicationCache.swapCache()``方法，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
- 对于manifest文件最好不要设置缓存
- 浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

7. iframe缺点

iframe会阻塞主页面的onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
搜索引擎的检索程序无法解读这种页面，不利于SEO

8. Doctype，严格模式与混杂模式

<!DOCTYPE> 声明位于文档中的最前面，告知浏览器的解析器，用什么文档类型规范来解析文档
严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行
混杂模式的页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

9. HTML5 为何只需写 <!DOCTYPE HTML>

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
SGML(Standard Generalized Markup language)标准通用标记语言，是国际上定义电子文件结构和内容描述的标准，而超文本标记语言HyperText Markup Language(HTML)，标准通用标记语言下的一个应用
随着Web应用的不断深入，HTML在需求广泛的应用中已显得捉襟见肘，有人建议直接使用SGML作为Web语言。但SGML太庞大了，于是W3C建议使用一种精简的SGML版本——XML可扩展标记语言
XML和HTML之间的差异
XML不是HTML的替代，是对HTML的补充，为不同的目的而设计；XML被设计用来传输和存储数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观。HTML旨在显示信息，而XML旨在传输信息

10. xhtml和html的区别

XHTML(eXtensible HyperText Markup Language)可扩展超文本标记语言表现方式与HTML类似，但语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言SGML的应用，XHTML则基于可扩展标记语言XML，XML是SGML的一个子集
功能上：XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
书写习惯上：XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素，所有属性都必须使用双引号

11. HTML全局属性

class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

12. Viewport

// width 设置viewport宽度，为一个正整数，或字符串‘device-width’

// device-width 设备宽度

// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置

// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数

// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数

// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数

// user-scalable 是否允许手动缩放

延伸提问：怎样处理移动端 1px 被渲染成 2px问题
局部处理
mate标签中的 viewport属性，initial-scale 设置为 1
rem按照设计稿标准走，外加利用transfrom 的scale(0.5) 缩小一倍即可；
全局处理
mate标签中的 viewport属性，initial-scale 设置为 0.5
rem 按照设计稿标准走即可

13. div+css的布局较table布局有什么优点？

改版更方便只要改css文件
页面加载速度更快、结构化清晰、页面显示简洁
表现与结构相分离
易于优化SEO，对搜索引擎更友好，排名更容易靠前

14. src与href的区别

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

前端面试常见问题——HTML篇

1. HTML语义化

什么是HTML语义化

为什么要语义化

写HTML代码时应该注意

常用的语义元素

2. Html5新特性

关于图像，位置，存储，多任务等功能的增加

移除的元素：

IE8/IE7/IE6如何支持HTML5新标签：

3. Web Worker

使用方式

注意事项

4. Canvas

绘制路径

绘制图形

绘制文本

绘制图像

创建渐变、阴影

变换