HTML文件撰写的注意事项有哪些,前端面试常见问题——HTML篇

1. HTML语义化

什么是HTML语义化

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

为什么要语义化

在没有样式CSS情况下也以一种文档格式显示，容易阅读

搜索引擎爬虫依赖标记来确定上下文和各个关键字的权重，有利于SEO

语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备等)

写HTML代码时应该注意

尽可能少使用无语义的标签div和span

在语义不明显时，即可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利

不要使用纯样式标签，如b、u、i等，改用css设置

需要强调的文本，可以包含在或者中

使用表格时，标题用caption包围，表头用thead包围，主体部分用tbody包围，尾部用tfoot包围

表单域用fieldset标签包围，并用legend标签说明表单用途

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方式