「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」
前面看过了 doctype，这一节我们开始看 html 的主体结构，一个标准的 html 页面使用 html 作为根标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
这个代码结构大家已经非常熟悉了，编写一个 html 文件，第一步肯定是 html>head+body，我们会把需要渲染在页面上的内容放在 body 中。正式因为如此熟悉以至于我们常常忽略了它们，思考几个问题：
html、head、body 这些标签要求是唯一的吗？如果写了多个会发生什么？如果缺少某个标签又会发生什么？
我们可以写一个错乱的页面：
<!DOCTYPE html>
<html lang="en">
<head>
hahaha
<title>Document</title>
<body>
oo
</body>
</head>
</html>
kk
<html>
333
</html>
使用浏览器打开：
可以看到虽然我们并没有严格遵守规范，内容还是能显示出来，那么浏览器是如何处理的呢？我们可以打开 devtools：
可以看到实际上浏览器将我们不符合规范的内容做了尽可能的规范化处理，因此我们可以看到页面内容。虽然如此，实际开发中还是要写遵守规范的代码。
这里在 html 标签上使用了 lang 属性来标识页面的语言，这个属性可以被阅读器等设备识别，有助于页面的 accessibility，此外浏览器的翻译功能也是通过此属性来进行判断的。这个 lang 并非是 html 标签的特有属性，而是一个全局属性。
全局属性是是所有HTML元素共有的属性，这些属性可以在任何 HTML 元素上使用，包括非标准的 html 元素。全局属性有一些我们很熟悉，如 id、class、style 等就不需要特别介绍了，这里看一些不一定常用到的全局属性：
- title：title 属性是元素的标题，在浏览器中光标悬停在元素上可以看到，它也是一个重要的 accessibility 属性，使用阅读器设备访问时 title 很重要。
- tabindex：这个也是一个重要的 accessibility 属性，它是用来支持页面键盘访问的，设置 tabindex 之后可以通过键盘的 tab 键获取焦点，属性值为 tab 访问的先后顺序。
- contenteditable：设置为 true 时页面元素会变成可编辑状态，这个属性曾经被用于实现富文本编辑器，不过由于坑比较多现在的富文本编辑器大多使用其他技术方案。
- data-*：用户自定义数据，可以通过获取元素的 dataset 访问数据内容。
- draggable：可以结合 drag and drop API 实现拖动效果。
- hidden：隐藏元素，在 devtools 中可以看到添加 hidden 的元素浏览器会自动为其增加 display:none 样式。
- dir：设置文本显示方式为 ltr 还是 rtl，在国际化场景需要使用，因为有些国家的文字排版是从右向左的。网页国际化也有很多需要注意的地方。（国际化 internationalization 在 i-n 之间有 18 个字母，常被称为 i18n）。
- slot：与 Web Components 技术相关，这里暂时不展开介绍。
- aria-*：这是一个系列属性，都是用来处理 accessibility 的，accessibility 是一项很重要的能力，不过国内大部分站点对 accessibility 支持程度都不高，因此对这方面的了解不多，感兴趣可以去专门学习。(a-y 之间有 11 个之母，accessibility 常被称为 a11y)
- on-*：一系列事件处理程序如 onclick 等，我们可以通过直接在 html 中设置属性来添加事件绑定，这样不需要在 js 中操作 DOM API。
此外还有一些属性如 item * 系列，使用场景不多，在此就不展开介绍了。
