HTML | 青训营本章笔记主要记录了，我在前端青训营学习到的关于HTML的相关知识。分别从HTML是什么、HTML语法

HTML是什么

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，HTML 使用标记标签来描述网页。例如

HTML 标签是由尖括号包围的关键词，比如<html>；
HTML 标签通常是成对出现的，比如 <div> 和 </div>，此外有些标签是单独出现的，比如<img src="photo.jpg" />,<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src),src 指 "source",源属性的值是图像的 URL 地址。
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

DOM（Document Object Model）文档对象模型，是HTML和XML文档的编程接口，DOM 以树结构表达 HTML 文档，树的每个分支的终点都是一个节点，每个节点都包含着对象。DOM 将web页面与脚本或编程语言链接起来，可以通过DOM提供的方法改变节点的结构、样式或者内容。

DOM树的生成过程是浏览器解析HTML文档的过程。浏览器将HTML文档解析成一个个标记，然后根据标记生成DOM树。具体过程如下：

下面介绍一些常用标签的语法：

标题：标题（Heading）是通过<h1> - <h6>等标签进行定义的。<h1>定义最大的标题，<h6>定义最小的标题。
列表：表列分为有序列表和无序列表，有序列表始于<ol>标签，每个列表项始于<li>标签；无序列表始于<ul>标签，每个列表项始于<li>。
链接：链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
通过使用<a>标签在 HTML 中创建链接，<a href="https://juejin.cn/">掘金</a>掘金。
使用 Target 属性，你可以定义被链接的文档在何处显示，<a href="https://juejin.cn/" target="_blank">掘金(新窗口打开）</a>掘金(新窗口打开）。
多媒体：多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。这里主要介绍图片、音频和视频。

图片：上面在讲述什么是HTML时，有简单提及定义图片的语法，这里要补充一点：替换文本属性（alt），<img src="boat.gif" alt="Big Boat">，当图片加载失败或因某种原因不加载图片时，alt可以告诉读者该图片的信息。
音频：<audio>标签定义声音，比如音乐或其他音频流，该标签是 HTML5 的新标签。标签用法：<audio src="music.ogg" controls></audio>，这里的controls属性向用户显示控件，比如播放按钮。
视频：<video> 标签定义视频，比如电影片段或其他视频流，该标签也是 HTML5 的新标签。<video src="video.mp4" controls></video>，这里的controls属性向用户显示控件，比如播放按钮。

输入/选择：HTML会提供一些控件支持用户输入或选择一些值，这里主要用到的元素有<input>、<select>、<option>、<textarea>和<datalist>。
注：如果限制多选一，则设置name相同。
<datalist> 元素为 <input> 元素规定预定义选项列表,用户会在他们输入数据时看到预定义选项的下拉列表。
文本类标签：
- blockquote：快捷引用/长引用
- cite：短引用，作品的名字或章节
- q：之前出现过的内容，具体引用内容
- code：代码标签
- <pre><code>：多行代码
- strong：多用于表示严重紧急
- em：用于语气强调

HTML语义化就是根据内容结构，选择适合的标签，让浏览器和开发者明确其表达的内容。例如前面介绍的标题使用h1~h6、无序列表使用ul标签、有序别表使用ol标签、选择使用select标签等等。