HTML是WHATWG定义的标准，WHATWG是Web超文本应用程序技术工作组的缩写，该组织由使用最流行的Web浏览器的人们组成。这意味着它基本上由Google，Mozilla，Apple和Microsoft控制。
过去，W3C（万维网联盟）是负责创建HTML标准的组织。
当很明显W3C向XHTML推进不是一个好主意时，该控件非正式地从W3C转移到WHATWG。
如果您从未听说过XHTML，那么这里有个简短的故事。在2000年初，我们都相信Web的未来（严重）是XML。因此，HTML已从基于SGML的创作语言转变为XML标记语言。
这是一个很大的变化。我们必须知道并尊重更多规则。更严格的规则。
最终，浏览器供应商意识到这不是Web的正确路径，于是他们推迟了，创建了现在称为HTML5的东西。
W3C并未真正同意放弃对HTML的控制，多年来，我们获得了2个竞争标准，每个标准都旨在成为正式标准。最终，W3C于2019年5月28日正式宣布，“真正的” HTML版本是WHATWG发布的版本。
我提到了HTML5让我解释一下这个小故事。我知道，到目前为止，这有点令人困惑，因为在涉及到许多演员的生活中，很多事情都令人着迷。
我们在1993年拥有HTML版本1。
HTML 2于1995年问世。
我们在1997年1月获得HTML 3，在1997年12月获得HTML 4。
繁忙的时候！
20多年过去了，我们拥有了所有这些XHTML东西，最终我们现在处在这个HTML5“事物”上，它不再仅仅是HTML。
HTML5是一个术语，现在定义了整套技术，其中包括HTML，但增加了许多API和标准，例如WebGL，SVG等。
这里要理解的关键是：现在没有（像）HTML版本这样的东西。这是生活水平。像CSS一样，我们将其称为3，但实际上它是一堆独立开发的独立模块。像JavaScript一样，我们每年都有一个新版本，但是这与引擎实现哪些单独功能无关紧要。
是的，我们称它为HTML5，但HTML4是1997年发布的。
HTML基础
HTML是用于构造我们在Web上消费的内容的标记语言。
HTML以不同的方式提供给浏览器。
它可以由根据请求或会话数据构建它的服务器端应用程序生成，例如Rails或Laravel或Django应用程序。
或者它可以由JavaScript客户端应用程序生成，该客户端应用程序可以即时生成HTML。
或者，在最简单的情况下，它可以存储到文件中，并由Web服务器提供给浏览器。
让我们深入研究这种情况，尽管在实践中它可能是生成HTML的最不流行的方法，但了解基本的构建块仍然很重要。
按照约定，HTML文件以.html或.htm扩展名保存。
在此文件中，我们使用标签组织内容。
标签包装内容，每个标签为其包装的文本赋予特殊含义。
让我们举几个例子。
这个HTML片段使用p标签创建了一个段落：
<p>A paragraph of text</p>该HTML代码段使用ul标签（即无序列表）和li标签（即列表项）创建了一个项目列表：
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>当浏览器为HTML页面提供服务时，标签将被解释，浏览器将根据定义元素视觉外观的规则来渲染元素。
其中一些规则是内置的。例如，类似列表的呈现方式。或如何用蓝色下划线显示链接。
其他一些规则由您使用CSS设置。
HTML不是演示性的。它与事物的外观无关。相反，它与事物的含义有关。
浏览器由CSS语言来决定外观，由谁来构建页面来定义指令。
现在，我做的这两个示例是在页面上下文之外获取的HTML代码段。
HTML页面结构
让我们举一个合适的HTML页面的例子。
事情始于文档类型声明（又称doctype），一种告诉浏览器这是HTML页面的方式，以及我们使用的HTML版本。
现代HTML使用以下文档类型：
<!DOCTYPE html>然后我们有了html元素，它具有一个开始和结束标签：
<!DOCTYPE html>
<html>
...
</html>所有标签都有一个开始和结束标签。除了一些自闭标签外，因为它们中不包含任何东西，它们不需要合上标签。
结束标记与开始标记相同，但带有/。
在html开始标记被用于在文档的开头，文档类型声明之后。
在html结束标签出现在一个HTML文档中的最后一件事。
在html元素内部，我们有2个元素：head和body：
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>在内部，head我们将具有创建网页必不可少的标签，例如标题，元数据以及内部或外部CSS和JavaScript。通常情况下，不会直接显示在页面上的东西只会帮助浏览器（或Google搜索机器人等机器人）正确显示它。
在里面，body我们将获得页面的内容。在可见的东西。
标签与元素
我提到了标签和元素。有什么不同？
元素具有开始标记和结束标记。
在这种情况下，我们使用p开始和结束标记创建一个p元素。
<p>A paragraph of text</p>因此，一个元素构成了整个包：
- 起始标签
- 文字内容（可能还有其他元素）
- 结束标签
如果元素没有结束标签，则仅使用开始标签编写，并且不能包含任何文本内容。
就是说，我可能会在书中使用标签或元素一词来表示相同的意思，除了我明确提到开始标签或结束标签。
属性
元素的开始标记可以包含我们可以附加的特殊信息片段，称为属性。
属性具有以下key="value"语法：
<p class="a-class">A paragraph of text</p>您也可以使用单引号，但是在HTML中使用双引号是一个很好的约定。
我们可以有多个：
<p class="a-class" id="an-id">A paragraph of text</p>并且某些属性是布尔值，这意味着您只需要键：
<script defer src="file.js"></script>在class和id属性是两个，你会发现最常用的。
它们具有特殊的含义，在CSS和JavaScript中都非常有用。
两者之间的区别在于，anid在网页上下文中是唯一的，不能重复。
另一方面，类可以在多个元素上多次出现。
另外，anid只是一个价值。class可以容纳多个值，以空格分隔：
<p class="a-class another-class">A paragraph of text</p>通常使用破折号-来分隔类值中的单词，但这只是一个约定。
这些只是您可能拥有的两个属性。有些属性仅用于一个标签。他们是高度专业化的。
其他属性可以更一般的方式使用。您刚刚看到了id和class，但是我们还有其他一些，例如style可以用来在元素上插入内联CSS规则。
不区分大小写
HTML不区分大小写。标签可以全部大写，也可以小写。在早期，上限是常态。今天，小写字母已成为常态。这是一个惯例。
您通常这样写：
<p>A paragraph of text</p>不像这样：
<P>A paragraph of text</P>空格
相当重要 在HTML中，即使您在一行中添加了多个空格，浏览器的CSS引擎也会将其折叠。
例如，本段的呈现
<p>A paragraph of text</p>与此相同：
<p> A paragraph of text</p>与此相同：
<p>A paragraph
of
text </p>
使用white-spaceCSS属性，您可以更改行为方式。您可以在CSS Spec中找到有关CSS如何处理空白的更多信息。
我想说的是，使用使语法在视觉上更具组织性和易于阅读的语法，但是您可以使用任何喜欢的语法。
我通常会前往
<p>A paragraph of text</p>要么
<p>
A paragraph of text
</p>嵌套标签应缩进2或4个字符，具体取决于您的偏好：
<body>
<p>
A paragraph of text
</p>
<ul>
<li>A list item</li>
</ul>
</body>注意：这意味着，如果要添加额外的空间，可能会使您发疯。我建议在需要时使用CSS腾出更多空间。
注意：在特殊情况下，您可以使用 HTML实体（缩写，表示不间断空格）-稍后会在HTML实体上进行更多介绍。我认为这不应被滥用。始终首选使用CSS来更改视觉呈现。
文件标题
该head标签包含定义文档属性的特殊标签。
它总是写在body标签之前，紧跟在开始html标签之后：
<!DOCTYPE html>
<html>
<head>
...
</head>
...
</html>我们永远不会在此标签上使用属性。而且我们不会在其中编写内容。
它只是其他标签的容器。在其中，我们可以有各种各样的标签，具体取决于您需要执行的操作：
titlescriptnoscriptlinkstylebasemeta
该title标签
该title标签决定网页标题。标题显示在浏览器中，它特别重要，因为它是搜索引擎优化的关键因素之一。
该script标签
此标记用于将JavaScript添加到页面中。
您可以使用开始标记，JavaScript代码和结束标记来内联包含它：
<script>
..some JS
</script>或者，您可以使用src属性加载外部JavaScript文件：
<script src="file.js"></script>type默认情况下，该属性设置为text/javascript，因此它是完全可选的。
关于此标签，有一些非常重要的知识。
有时在页面底部使用此标记。为什么？出于性能原因。
默认情况下，加载脚本会阻止页面的呈现，直到脚本被解析并加载为止。
这样做，在所有页面都已被解析和加载之后，脚本便被加载并执行，与将其保留在head标记中相比，可以为用户提供更好的体验。
我的看法是，这现在是不好的做法。让我们script活在head标签中。
在现代JavaScript中，除了将脚本保留在页面底部-defer属性外，我们还有一种更有效的选择：
<script defer src="file.js"></script>这种情况触发了到快速加载页面和快速加载JavaScript的更快路径。
注意：async属性相似，但我认为比的选择更差defer。我会在https://flaviocopes.com/javascript-async-defer/页面中详细说明为什么
该noscript标签
此标记用于检测何时在浏览器中禁用了脚本。
注意：用户可以选择在浏览器设置中禁用JavaScript脚本。否则，浏览器可能默认不支持它们。
无论是放在文档头还是文档正文中，它的用法都不同。
现在我们正在谈论文档头，因此让我们首先介绍这种用法。
在这种情况下，noscript标签只能包含其他标签：
link标签style标签meta标签
meta如果禁用了脚本，则更改页面提供的资源或信息。
在此示例中，我设置了带有no-script-alert类的元素，以显示是否禁用了脚本，因为display: none默认情况下是这样的：
<!DOCTYPE html>
<html>
<head>
...
<noscript>
<style>
.no-script-alert {
display: block;
}
</style>
</noscript>
...
</head>
...
</html>让我们解决另一种情况：如果放在正文中，它可以包含在UI中呈现的内容，例如段落和其他标签。
该link标签
该link标签用于文件和其他资源之间的一组关系。
它主要用于链接要加载的外部CSS文件。
该元素没有结束标签。
用法：
<!DOCTYPE html>
<html>
<head>
...
<link href="file.css" rel="stylesheet">
...
</head>
...
</html>该media属性允许根据设备功能加载不同的样式表：
<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">我们可以链接到与样式表不同的资源。
例如，我们可以使用
<link rel="alternate" type="application/rss+xml" href="/index.xml">我们可以使用以下方式关联收藏夹图标：
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">这个标签是也可用于多页内容，以表明使用前面和后面的页面rel="prev"和rel="next"。主要用于Google。Google在2019年宣布不再使用此标签，因为没有它它可以找到正确的页面结构。
该style标签
此标记可用于将样式添加到文档中，而不是加载外部样式表。
用法：
<style>
.some-css {}
</style>与link标记一样，您可以使用media属性仅在指定的介质上使用该CSS：
<style media="print">
.some-css {}
</style>您也可以在文档正文中添加此标签。说到这一点，有趣的是，该scoped属性仅将CSS分配给当前文档子树。换句话说，为了避免CSS泄漏到父元素之外。
该base标签
此标记用于为页面中包含的所有相对URL设置基本URL。
<!DOCTYPE html>
<html>
<head>
...
<base href="https://flaviocopes.com/">
...
</head>
...
</html>该meta标签
元标记执行各种任务，它们非常非常重要。
特别是对于SEO。
meta 元素仅具有开始标记。
最基本的是descriptionmeta标签：
<meta name="description" content="A nice page">这可能由谷歌被用来生成在结果页面的页面描述，如果找到更好的描述比对网页内容的页面（不要问我怎么样）。
该charsetmeta标签是用来设置页面字符编码。utf-8在多数情况下：
<meta charset="utf-8">该robotsmeta标签指示搜索引擎机器人是否索引页面或不：
<meta name="robots" content="noindex">或者他们是否应该遵循链接：
<meta name="robots" content="nofollow">
您也可以在单个链接上设置nofollow。这样可以进行nofollow全局设置。
您可以将它们组合：
<meta name="robots" content="noindex, nofollow">默认行为是index, follow。
您可以使用其它特性，包括nosnippet，noarchive，noimageindex和更多。
您也可以告诉Google而不是定位所有搜索引擎：
<meta name="googlebot" content="noindex, nofollow">其他搜索引擎也可能具有自己的meta标签。
说到这一点，我们可以告诉Google禁用某些功能。这会阻止搜索引擎结果中的翻译功能：
<meta name="google" content="notranslate">该viewportmeta标签是用来告诉浏览器设置页面宽度取决于设备宽度。
<meta name="viewport" content="width=device-width, initial-scale=1">在此标签上查看更多信息。
另一个比较流行的元标记是http-equiv="refresh"。此行告诉浏览器等待3秒钟，然后重定向到该其他页面：
<meta http-equiv="refresh" content="3;url=http://flaviocopes.com/another-page">使用0而不是3将尽快重定向。
这不是完整的参考，存在其他使用较少的元标记。
在介绍完本文档标题之后，我们可以开始深入研究文档正文。
文件主体
在结束head标签之后，我们在HTML文档中只能有一件东西：body元素。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>就像head和html标签一样，我们body在一页中只能有一个标签。
在body标记内，我们具有定义页面内容的所有标记。
从技术上讲，开始和结束标记是可选的。但是我认为添加它们是一个好习惯。为了清楚起见。
在下一章中，我们将定义可在页面正文中使用的各种标签。
但是，在此之前，我们必须在块元素和内联元素之间引入区别。
块元素与内联元素
在页面正文中定义的视觉元素通常可以分为两类：
- 块元素（
p，div标题元素，列表和列表项，...） - 内联元素（
a，span，img，...）
有什么不同？
块元素位于页面中时，不允许其他元素位于它们旁边。在左边或右边。
相反，内联元素可以坐在其他内联元素旁边。
区别还在于我们可以使用CSS编辑的视觉属性。我们可以更改宽度/高度，边距，填充和边框或块元素。我们不能对内联元素执行此操作。
请注意，使用CSS我们可以更改每个元素的默认值p，例如，将标签设置为内联，或将aspan设置为block元素。
另一个区别是内联元素可以包含在块元素中。反之则不成立。
某些块元素可以包含其他块元素，但这要视情况而定。p例如，标签不允许这种选项。
加入我的前端交流群，获取前端零基础手册以及初学者资料
扫一扫
1976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
