前端面试常见问题——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. 需要强调的文本，可以包含在或者中
  5. 使用表格时，标题用caption包围，表头用thead包围，主体部分用tbody包围，尾部用tfoot包围
  6. 表单域用fieldset标签包围，并用legend标签说明表单用途
  7. input标签对应的说明文本使用label标签，通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来

• 常用的语义元素

  • 
    定义页面的介绍展示区域，通常包括网站logo、主导航以及搜索框。
  • 
    定义页面的导航链接部分区域
  • 
    当标题有多个层级时，该元素将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
  • 
    定义页面独立的内容，有自己的header、footer、section等，专注于单个主题的文章
  • 
    标记文档的节或段，通常自带标题
  • 
    定义与主要内容相关的内容块。通常显示为侧边栏
  • 
    定义底部区域，通常包含作者，著作权信息，链接的使用条款，联系信息等

---

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，严格模式与混杂模式

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

---

9. HTML5 为何只需写

• 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的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，例如超链接；如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式