【现代前端】HTML基础 DOCTYPE AMP HTML

布满荆棘的人生 2022-06-05 12:17 259阅读 0赞

## 必须要知道的DOCTYPE ##

H5自2014年正式发布以来，其DOCTYPE文档声明即`<!DOCTYPE html>`被各大浏览器所支持。尽管如此，这并不代表H5的新标签可以在这些浏览器上正常解析。  
这是因为DOCTYPE声明只用于指示web页面使用哪个版本的HTML版本编写指令进行解析。`<!DOCTYPE html>`的定义兼容所有HTML的历史版本和最新的H5版本。不支持H5的浏览器，仍会使用H4等的兼容模式来解析。  
H4是基于SGML（Standard Generalized Markup Language，标准通用标记语言）规范来指定的。SGML的标准很多，所以我们之前在HTML开发时，需要对文档类型定义（Document Type Difinition,DTD）进行声明。**如果DOCTYPE不存在或者格式不正确，则浏览器会以兼容模式呈现。这时，浏览器会使用较低的浏览器标准模式来解析整个HTML文本。**如果定义了标准模式运行，例如`<DOCTYPE html PUBLIC "-//w3c//DTDXHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`，那么这时候浏览器DOM渲染和JS的运作模式都是以浏览器支持额坐高标准来解析执行的。  
我们要知道，H5不是基于SGML的，不需要对DTD定义。

## Web语义化标签 ##

Web语义化是指，在HTML结构的恰当位置上使用语义恰当的标签，是页面具有良好的结构，是页面标签具有含义，能够让人或者搜索引擎更容易理解。  
对于语义化标签，我们首先要理解一下几点：

*  **用正确的标签做正确的事。**例如，在列表的地方要使用列表元素，文章内容中要使用段落或文章标签，就不要只是用div来搭建。
 *  HTML语义化能让页面内容更具结构化且更加清晰，**便于浏览器和搜索引擎进行解析**。例如，H5中定义`<header><nav><footer><sectoin><article>`等标签内容会被搜索引擎解析收录，能够提高页面内容关键字的搜索排行。
 *  即使在没有css样式的情况下，网页内容也应当是以有序的文档形式显示。
 *  语义化使项目人员更容易对网页进行分块，便于阅读和理解。

理解了以上几点，我们就来看看HTML主要变迁的设计。CSS规定，每个标签元素都有display属性。所以，根据display属性，把html标签分为以下几类：

*  行内元素：`<a><b><span><img><input><button><select><strong>`等，其默认宽度是由内容宽度决定。
 *  块级元素：`<div><ul><ol><li><dl><dt><dd><h*><p><table>`等，其默认宽度为父元素的100%。
 *  常见的空元素：`<br><hr><link><meta><area><base><col><command><embed><keygen><param><source><track>`等不能显示内容甚至不会在页面中出现，但是对页面的解析有着重要的作用。

合理使用语义化标签可提高被检索概率。例如，关键字使用h1标签比div更容易搜索到。

## HTML的诟病 ##

*  我们知道语义化带来的便捷，可是基本没人会告诉你，H5语义化的诟病。例如，在桌面浏览器应用开发时，若使用H5的标签，会使部分页面**无法解析**。所以，考虑到兼容性，我们可以使用div来代替，或者使用html5.js来进行特殊解析。但这样会使页面解析变得更慢。
 *  再比如，页面中使用table标签会导致页面内容渲染过慢。因为table标签里面的内容是等表格标签解析完成之后一次性渲染到页面上的。
 *  除了table标签问题，还有一个常见的问题。我们可以任意嵌套两个或者多个HTML标签而不会报错。这个问题会导致很多错误，不过也有人称之为“灵活性”。

## AMP HTML ##

流动网页提速（Accelerated Mobile Pages , AMP）是Google推行的一个提升页面资源载入效率的HTML提议规范。基本思路有两点：

1.  使用严格受限的高效HTML标签
2.  使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验

也就是说，尽量避免使用目前网页上渲染或者展示性能比较差的标签。并且将部分网页静态内容缓存到页面上进行分发，例如内联体积较小的样式和图片、延时加载较大的静态资源文件等；进而提高网页的初识加载速度。

AMP提议中包含了一部分网页端优化的内容，前端网页优化我们都已经做过了。在此着重来看AMP的第一部分。使用受限的HTML标签来进行AMP HTML提升，这只是一个规范提议，不涉及任何一项具体的技术。例如在AMP中，`<img><video><audio><embed><form><table><frame><object><iframe>`这类较慢或者可能影响页面内容渲染的标签是不建议被直接使用的，因为他们常常在页面元素解析时就要去做较慢的渲染或者会立即直接下载src以及param等属性里的内容。`<video>`标签载入解析时会去直接请求src里面的资源内容，这样就占用了浏览器的下载线程，阻塞了页面关键资源的下载，所以我们可以将这些元素需要加载的资源先缓存到HTML结构中，等页面主体结构渲染完成后再去加载。类似懒加载。不同的是，AMP HTML是通过自定义元素完成的Component来实现的，懒加载是通过Js直接在网页中操作实现。

根据AMP团队测试发现，通过AMP规范优化后的网页载入速度可提升15%~85%，这在大量用户访问下，就显得很有价值了。