【前端圭臬】二：你知道的和不知道的 HTML
作者：互联网
文章目录
前言
我们先来简单复习三遍。
div、span。
div、span。
div、span。
好的，掌握了这两个标签和 head 的写法，我们就已经掌握了 HTML 百分之九十的应用场景。
对于前端开发人员来说，HTML 似乎是一种无需关注的背景知识（好比小学语文），无非就是 “元素=标签+内容”， 很少有人愿意花费大量时间去琢磨它，除非大版本更迭，也大会去关注它究竟发生了什么变化。
那么这种做法对吗？我觉得对。既然不必花费太大精力关注也不会出岔子，那不如把精力用在容易出岔子的地方。
但在认识上，我们不应该小看 HTML，它同样拥有很高的天花板，可以诞生大师级的人物，值得去深入钻研。而且从某种程度上来说，虽然优先级不那么高，但精通 HTML 也是成为优秀的前端工程师的必由之路。
这篇文章，我们一起来整理一下那些容易被遗漏的知识，从而一窥 HTML 的庐山真面目。
首先看一下 W3C 对 HTML 的定义。
What is HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
- Publish online documents with headings, text, tables, lists, photos, etc.
- Retrieve online information via hypertext links, at the click of a button.
- Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
- Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
- With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
这一串 balabala 的，就第一句有内涵 —— HTML 是描述 Web 页面结构的语言。
既然是语言，就绕不开 语法 和 语义。HTML 为什么采用了今天这种语法和语义呢？
先说 语法，我们在写 HTML 时，通常会先写 <!DOCTYPE html>，也就是 DTD（Document Type Defination，文档定义语言），用来告诉浏览器使用 W3C 标准来解析 HTML。
在大量历史代码中，我们可以看到其它更为复杂的写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
（对应严格、过渡、frameset 模式）
除此之外，还有
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
（ XHTML 的严格、过渡、frameset 模式）
为什么要这么写？这和 HTML 的语法有什么关系？想搞清楚这个问题，我们需要先进行一下简单的溯源。
1 HTML 的起源与演变
HTML 起源于 80 年代，由 Tim Berners-Lee 老哥设计并在 1990 年前后基本明确定型。1993 年中期互联网工程任务组（IETF）发布首个 HTML 规范的草案，同年，Dave Raggett 在1993 年末提出与之竞争的草案 HTML+。
这两个草案 1994 年初到期后，IETF 又创建了一个 HTML 工作组，并于 1995 年完成 “HTML 2.0”，这是第一个旨在成为其后续实现的依据的（也就是第一个正经的） HTML 规范。
但 IETF 不争气，HTML 标准的进一步发展因为一些利益竞争停滞不前。所以 1996 年起被 W3C 接盘，并由商业软件厂商出资维护。我特地瞅了一眼会员列表，基本上是互联网的全部江山，这里面不知道谁屁股最大，有兴趣的同学可以深扒一下。
从 2.0 开始，HTML 的正式版本发布情况大致如下：
HTML 2
1995 年 11 月 24 日，HTML 2.0 作为 IETF RFC 1866 发布。
HTML 3
1997 年 1 月 14 日，HTML 3.2 作为 W3C 推荐标准发布。
这是首个完全由W3C开发并标准化的版本。最初代号为“威尔伯”（Wilbur），HTML 3.2 完全去除数学公式，协调各种专有扩展，并采用网景设计的大多数视觉标记标签。嗯，当时的大金主。
HTML 4
1997 年 12 月 18 日，HTML 4.0 作为 W3C 推荐标准发布。最初代号“美洲狮”（Cougar）， HTML 4.0 采用许多特定浏览器的元素类型和属性，并试图淘汰网景的视觉标记功能，将其标记为不赞成使用。
可以，血雨腥风，没过一年就江山易主了。
HTML 4 提供三种不同的版本：
- Strict，过时的元素被禁止。
- Transitional，过时的元素被允许。
- Frameset，只允许 frame 相关的元素。
这里就跟前面指定 DTD 呼应上了。
HTML 4 是遵循 ISO 8879 - SGML 的 SGML 应用程序。
HTML 的创始人 Tim Berners-Lee 明确指出，HTML 参照了 SGML 的设计。SGML（标准通用标记语言），又源自 IBM 的 GML（通用标记语言），再查下去不知道之前是不是还有个 ML。
总之，可以理解为，HTML 的设计参考了 ISO 的 SGML 标准，并不是原创，而 HTML 4 则完全成为 SGML 标准的一个实现，那些复杂的 DTD 写法，就是由 SGML 规定的。
同时，XML 其实也起源于 SGML，由于比 HTML 抽象程度更高，因此又有人认为 HTML 还应该进一步符合 XML 的标准，其实也就是标签必须闭合，因此又鼓捣出了 XHTML。
1998 年 4 月 24 日，HTML 4.0 进行微调，不增加版本号。
1999 年 12 月 24 日，HTML 4.01 作为 W3C 推荐标准发布。它同样提供三种版本，最终勘误版于 2001 年 5 月 12 日发布。
HTML 4.01 一用就是十几年，可以说正是伴随着互联网的青春年少，直至今天仍然留有难以磨灭的痕迹。
2000 年 5 月，ISO/IEC 15445:2000（“ISO HTML”，基于HTML 4.01 严格版）作为 ISO/IEC 国际标准发布。
HTML 5
2014 年 10 月 28 日，HTML 5 作为 W3C 推荐标准发布，到今天已经成为实质性的开发标准，被所有主流浏览器支持。
而 HTML 5 终于务实地发现没有必要非跟 SGML 死磕。之前我们可以从 DTD 里看到文档的 URL，但实际上浏览器并不访问它，而且 W3C 明确说了浏览器可千万不能访问，不然俺们服务器就崩了。
那我写这玩意儿干锤子？一个 <!DOCTYPE html> 走天下就好了。
HTML 5 这个版本极大地扩充了 HTML 的能力，尤其是添加了新的多媒体标签、Canvas API 等，一时风头无两。为了与旧时代做出区分，过去的几年里很多人都会特地强调自己使用了 H5。
最后贴一下现行 HTML 标准的 URL：https://html.spec.whatwg.org/multipage/
估计也没人仔细看，我们还是再来讨论一下 语义 的问题。
2 HTML 语义：让机器懂一点语文
实际上早期参与 HTML 标准制定的很多都是文字工作者，比如杂志、报社的编辑之类，大多标签是跟排版的需要对应起来的，所以 HTML 其实是更贴近 “文科” 的语言。
我们初学 HTML 的时候，其实都会认认真真地看一遍 h1~h6（heading）、p、em、strong 之类的标签，但后来 CSS 实在太香了，万物皆盒子，何必自找麻烦。
直到有一天，老大告诉你，要做无障碍阅读，你一脸懵逼不知道怎么做，一动手才发现，好家伙，原来 HTML 还能接这种活儿。原来在你看来乱七八糟的标签，原来都有其背后的意义。
涉及到语义的标签，大致可以分为三类：
- 第一类，语言理解类。比如
em标签，表示重（zhong）读，同一句话重读不同含义就不同。 - 第二类，文档结构类。比如
section、heading之类的标签，代表第几章、第几节、第几级标题之类的含义，其实富文本编辑器倒是会经常用到这些标签。 - 第三类，页面结构类，比如
header、footer。
除了上述提到的无障碍阅读（更专业的叫法为 可访问性 ），语义标签的另一个主要应用场景是 SEO 。其实只要是需要机器处理的场景，语义标签都有其用武之地。
从某种程度上来说，正确使用语义标签甚至对开发人员也更加友好。但现实是由于很少公司有专门的标准，有人用有人不用就会产生混乱，因此如果用不好就还不如不用。
由于有较为严格的无障碍阅读的要求，国外一些公司（比如苹果）的网站使用了大量的语义标签，有兴趣的同学可以看一下。
3 head 应该怎么写？
最后，我们再来关注一下 HTML 的 head 标签。
前面也说过，基本上只要掌握 head、div、span 就可以出去找福报了。这个 head 也没有任何难度，只是有些写法我们可能没有用到过，但又确实有用。
虽然不写也不会报错，但 head 标签规定了自身必须是 HTML 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。
这里我图省事，直接参照 winter 大神 【重学前端】 专栏中的文章画一个总结：
title：
语义为 “文档的标题”，在实际使用上会被作为标签名称之类，因此要与 heading 作区分。
base：
代码中的相对地址会以此为基础。因为有时候 JS 会提供此类功能，因此不建议使用 base，避免出现冲突。
meta：
元信息，可以分为五类。
- 普通类，属性包含一个 name 一个 content，也就是一个 键值对，可以表达任意你想传递的信息，比如
<meta name="description" content="Front-End tutorials"> - 包含 charset 属性，比如
<meta charset="UTF-8" >，是 H5 的新写法，建议写在head的第一个位置，以避免解析出现问题。（在该标签之前的内容会被用 ASCII 码解析） - 包含 http-equiv 属性，表示执行一个命令，如
<meta http-equiv="content-type" content="text/html; charset=UTF-8">，会在 HTTP 中添加 Content-Type 这个头，并指定 HTTP 的编码方式。 - name 为
viewport，如<meta name="viewport" content="width=500, initial-scale=1">，该类型没有在标准中定义，但在移动端开发中会被用于指定各种页面显示信息。 - 其它预定义的 name，包括应用名称、页面作者、页面描述、生成工具、页面关键字（用于 SEO）、跳转策略、页面风格颜色（用于控制浏览器主题颜色）等。
下一步
关于 HTML 目前就聊这么多，一些应用层面的技巧会在 JS 篇中提到。
虽然我们日常对 HTML 的应用十分简单，但希望大家能够在用到新的标签时抱着探索的心态仔细查阅一下它的语义，思考一下它的应用场景。也许有一天，更智能化的互联网会需要更精准的语义作为底层支撑。
下一篇计划写 CSS，讲一讲核心的模型和规则以及常用的技巧。
标签：W3C,圭臬,前端,语义,SGML,HTML,标签,head 来源： https://blog.csdn.net/Neuf_Soleil/article/details/114161324