html标签相关规范知识整理

1.W3C简介
万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会，是万维网的主要国际标准组织[2]。为半自治非政府组织（quasi-autonomous non-governmental organisation）。

	**历史**
	万维网联盟（W3C）由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心（CERN）后成立，在欧盟执委会和国防高等研究计划署（DARPA）的支持下成立于麻省理工学院MIT计算器科学与人工智能实验室（MIT／LCS）[2]，DARPA曾率先推出了互联网及其前身ARPANET。

	该组织试图透过W3C制定的新标准来促进业界成员间的兼容性和协议。不兼容的HTML版本由不同的供应商提供，导致网页显示方式不一致。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

	CERN最初打算做为W3C的欧洲分支机构，然而CERN希望把重点放在粒子物理而不是信息技术上。1995年4月，法国国家信息与自动化研究所（INRIA）成为W3C的欧洲机构。1996年9月，庆应义塾大学SFC研究所成为W3C亚洲机构[3]。从1997年开始，W3C在世界各地创建了区域办事处。截至2009年9月，已有十八个区域办事处，涵盖澳大利亚、比荷卢联盟、巴西、中国、芬兰、德国、奥地利、希腊、香港、匈牙利、印度、以色列、意大利、韩国、摩洛哥、南非、西班牙、瑞典[4]。2013年1月，北京航空航天大学成为W3C中国机构。2016年，W3C在英国和爱尔兰创建了区域办事处。

	**标准**
	为解决网上应用中不同平台、技术和开发者带来的不兼容问题，保障网上信息的顺利和完整流通，万维网联盟制定了一系列标准并督促网上应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。

	但是，W3C制定的网上标准似乎并非强制，而只是推荐标准。因此部分网站仍然不能完全实现这些标准，特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

	**W3C推荐标准**
	CSS：层叠样式表
	DOM：文档对象模型
	HTML：超文本标记语言
	RDF：资源描述框架
	SMIL：同步多媒体集成语言
	SVG：可缩放矢量图形
	WAI
	Widgets
	XHTML：可扩展超文本标记语言
	XML：可扩展标记语言
	PICS：网上内容筛选平台

2.MDN 简介
MDN （Mozilla Developer Network ）是一个维基，即意味着任何人都可以向其添加和编辑内容。你不一定非得是是一个程序员或了解许多涉及技术方面的知识。这里有很多需要完成的任务，从简单的（如校对和纠正拼写）到复杂的（如写作API文档）。
Mozilla 开发者社区（MDN）是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件，包括：
网络标准（例如：CSS、HTML 和 JavaScript）
开发开放网络应用
开发 Firefox 附加组件
MDN的使命很简单：提供给开发者们更轻易构建Web项目的信息。致力于记录互联网上的开源技术。
另外，MDN提供关于怎样创建和贡献火狐项目以及关于Firefox OS 和Web app development的文档。

3.HTML 所有标签列表
下面列出了HTML elements 。它们按功能分组，以帮助您轻松找到想要的内容。

3.1什么是空标签？
空元素：标签里面不能有内容（即「空元素」）例如:input、img、hr、br、mata、link等

3.2什么是可替换标签？
可替换元素:可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。可替换元素展现不是由css控制的，这些元素是外观渲染独立于css的外部对象。简单地说就是一些元素自带宽和高，大多数就是可替换元素。例如:<img>、<input>、<textarea>、<select>、<object>
不可替换元素：html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）例如：<p>段落的内容</p>
段落<p>是一个不可替换元素，文字“段落的内容”全被显示。
3.3什么是语义化标签？
在程序中, 语义 指的是一段代码的含义 — 例如 "运行这行代码会产生怎样的影响?", 或者 "这个HTML的元素有什么作用，扮演了什么样的角色" (不只是 "它看上去像是什么?"。)
例如,“h1” 元素是一个语义化元素, 充当了“这个页面中最高级别标题功能“的角色 (或含义) 。
![<h1>This is a top level heading</h1>](https://img-blog.csdnimg.cn/20181031102728972.png)

一般情况下，它将会被赋予一个很大的字号尺寸从而使它看上去更像是一个标题 (虽然你可以把它格式化为任何你想要的样式), 但是更重要的是它的语义会被在很多地方以不同的方式被使用到， 例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序 (参见SEO),而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。
另一方面，你可以通过样式（CSS）来让任何的元素看上去像是一个最高级别的标题，就像下面所展示的方法一样：

这将会把这个元素渲染得像是一个最高级别的标题，但是它的值没有对应到最“最高级别标题”这一语义，所以在此之上，它不会获得更多额外的描述（只是一个普通“span”元素而不是“最高级别标题”这一语义）。所以在恰当的需求下使用恰当的HTML元素是一个不错的主意。

这是一些语义化的元素(source).
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>