在 2021 年 4 月 23 日的凌晨，我挑灯夜战，非常 nice 地学习到了一种非常 nice 的学习方法。那就是在学习的时候，先自己画一下知识结构图，它有助于理清学习思路，还有助于查缺补漏，更棒的是，有了这张知识结构图，能够很方便地复习，让知识能更深刻地巩固在脑子里。

一、知识结构图

在这里，我把 HTML 知识画成了如下结构图，语法指的 HTML 的基本用法，标签指的是 HTML 的各种标签。

HTML 概览 - 图1

二、语法

HTML 代码就是许许多多不同的元素嵌套，学习 HTML 语言就是学习各种元素的用法。

1. 元素结构

元素也叫标签，看一下标签的组成部分，由三部分组成：标签名、内容、属性，其中内容和属性不是必备的。
下面示例中，h1 是标签名、一个大标题 是内容、class 是属性。

  1. <h1 class="title">一个大标题</h1>

不同的标签名或不同的属性名，其用途和含义有所不同。
一个 HTML 页面的结构基本长这样的，是固定的，可以看到结构嵌套特点。

  • 第一行 <!doctype html> 比较特殊，没有被嵌套，作用是声明文档类型，告诉浏览器如何解析
  • 接下来根元素 html，包裹 head 和 body
  • 然后我们在 head、body 里面书写各种各样的元素 ```html <!doctype html> 

  2. <a name="mi15f"></a>
  3. ### 2. 字符实体
  5. 在 HTML 中一些字符是预留字符，如果想要准确地显示预留字符，则需使用字符实体（character entities）。<br />实体字符有很多，可以在具体用到哪个时在网上查即可，我熟记并背下来使用的也就下面这几个。

  © © < < > >

  2. <a name="VKHqE"></a>
  3. ## 三、元素
  5. 我们可以笼统地把标签分成以下这几个类型，会在后面文章中逐一讲解
  7. 1. 元信息
  8. 1. 语义文本
  9. 1. 链接
  10. 1. 媒体
  11. 1. 表单
  12. 1. 表格
  14. <a name="nr2UY"></a>
  15. ### 1. 基本元素讲解
  17. `<!doctype html>`表示文档类型，告诉浏览器如何解析网页。<br />`<html>`标签是网页的顶层容器，也称为根元素（root element），一个网页只能有一个`<html>` 标签。<br />`<head>`标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上。<br />`<meta>`标签用于设置或说明网页的元数据，必须放在`<head>`里面，约定放在`<head>`内容的最前面。<br />`<body>`标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。<br />标签内容的头部和尾部的空格，一律忽略不计。内容里面的多个连续空格，会被浏览器合并成一个。<br />注释以`<!--`开头，以`-->`结尾。
  19. <a name="hVFU7"></a>
  20. ### 2. 全局属性
  22. 网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为，全局属性有以下这些
  24. 1. id
  25. 1. class
  26. 1. tabindex
  27. 1. accesskey
  28. 1. style
  29. 1. hidden
  30. 1. lang,dir
  31. 1. contenteditable
  32. 1. data- 属性
  33. 1. 事件处理属性
  35. `id`属性是元素在网页内的唯一标识符，它的值必须是全局唯一的，同时也不能包含空格。`id`属性的值+`#` 放在 URL中可以作为锚点，定位该元素在网页内部的位置。
  37. `class`属性用来对网页元素进行分类。不同元素的`class`属性值相同，就表示它们是一类的。
  39. `title`属性用来为元素添加附加说明。鼠标悬浮在元素上面时，会将`title`属性值作为浮动提示显示出来。
  41. `tabindex`属性用于设置Tab的顺序，其值是一个整数，不同的值有不同的含义
  43. - 负整数：该元素可以获得焦点，但不参与Tab键对网页元素的遍历，这个值通常是`-1`
  44. - `0`：该元素参与Tab键的便利，顺序由浏览器制定，通常按照其在网页里面出现的位置
  45. - 正整数：网页元素按照从小到大的顺序参与Tab键的遍历
  47. 一般来说，`tabindex`属性最后都设成`0`，按照自然顺序进行便利，这样比较符合用户预期，除非网页有特殊布局。
  49. `accesskey`属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符，它要配合功能键使用。
  51. `style`属性用来指定当前元素的 CSS 样式。
  53. `hidden`是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素。CSS 的可见性设置高于`hidden`。
  55. `lang`属性指定元素使用的语言，`dir`属性表示文字的阅读方向有三个值：
  57. - `ltr`：从左往右
  58. - `rtl`：从右往左
  59. - `auto`：浏览器自行决定
  61. `contenteditable`属性允许用户修改元素内容，它可能有两个值：
  63. - `true`或空字符串：内容可编辑
  64. - `false`：内容不可编辑
  66. `data-`属性用于放置自定义数据，该属性只能通过 CSS 或 JavaScript 利用。
  68. 事件处理属性用来响应用户的动作，这些属性的值都是 JavaScript 代码。

onabort, onautocomplete, onautocompleteerror onblur, oncancel, oncanplay, oncanplaythrough onchange, onclick, onclose, oncontextmenu oncuechange, ondblclick, ondrag, ondragend ondragenter, ondragexit, ondragleave, ondragover ondragstart, ondrop, ondurationchange, onemptied onended, onerror, onfocus, oninput, oninvalid onkeydown, onkeypress, onkeyup, onload onloadeddata, onloadedmetadata, onloadstart onmousedown, onmouseenter, onmouseleave onmousemove, onmouseout, onmouseover, onmouseup onmousewheel, onpause, onplay, onplaying, onprogress onratechange, onreset, onresize, onscroll, onseeked onseeking, onselect, onshow, onsort, onstalled onsubmit, onsuspend, ontimeupdate, ontoggle onvolumechange, onwaiting ```

「@浪里淘沙的小法师」