这是我参与「第四届青训营」笔记创作活动的的第1天，今天学习了HTML的基本内容。

学习参考：MDN文档

HTML

HTML (HyperText Markup Language)是一种用来告知浏览器如何组织页面的标记语言。由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。注意：HTML 标签不区分大小写。

剖析HTML文档

比如下面这样一个HTML页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

<!DOCTYPE html>: 声明文档类型，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西
<html></html>包裹整个完整页面
<head></head>包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。比如我们常常将写在文档的头部。
<meta charset="utf-8">基本上他能识别你放上去的所有文本内容。许多 <meta> 元素包含了 name （指定meta元素的类型）和 content （实际的元数据内容）属性。指定包含关于页面内容的关键字的页面内容的描述是很有用的，有利于搜索引擎优化
<title></title>设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面
<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

块级元素和内联元素

内联元素： a, span, label, strong, em, br, img, input, select, textarea, cite, 块级元素： div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

区别

块级元素总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列，其宽度自动填满其父元素宽度 内联元素不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
块级元素属性标签都是可以设置宽度、高度，行高，距顶部距离，距底部距离（块级元素属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%）

内联元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效（水平方向有效，竖直方向无效）
块级元素可以包含内联元素和块级元素。内联元素不能包含块级元素。（p标签中不能嵌套div标签）

转换

当然块级元素与内联元素之间的特性是可以相互转换的。HTML可以将元素分为内联元素、块状元素和内联块状元素三种。

使用display属性能够将三者任意转换：

display:inline;转换为内联元素；
display:block;转换为块状元素；
display:inline-block;转换为内联块状元素。

语义化是什么？有什么意义？

“语义化”:指的是机器在需要更少的人类干预的情况下,能够研究和收集信息;让网页能够被机器理解,最终让我们受益。

开发者应该遵循语义来编写HTML

比如说：有序列表用ol，无序列表用ul。lang属性表示内容所使用的语言

它的优点可以概括为以下方面：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

高阶文字排版

介绍一些可以用于格式化文本的标签

描述列表

描述列表使用与其他列表类型不同的闭合标签— <dl>; 此外，每一项都用 <dt>(description term) 元素闭合。每个描述都用<dd>(description definition) 元素闭合。

引用

块引用应该用<blockquote>标签包裹起来，并且再cite属性里用URL来指向引用的资源。（浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符）
行内引用应用用<q>标签包裹起来。引用标签 (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符
引文，引文默认的字体样式为斜体。cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为<cite>元素附上链接

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>
  <!-- 块引用  -->
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
  <!-- 行内引用  -->
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

显示效果如下：

缩略语

<abbr>常被用来包裹一个缩略语或者缩写

比如：

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

当光标移动到HTML上时会出现提出（超文本标记语言（Hyper text Markup Language）

标记联系方式

HTML 有个用于标记联系方式的元素——<address>。它仅仅包含你的联系方式

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。<sup>和<sub>元素可以解决这样的问题。

标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的<time>元素。

<time datetime="2022-07-24">24 July 2022</time>

多媒体

常用的标签

图片<img>标签包裹，src属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对 URL。alt属性是对图片的文字描述，用于在图片无法显示或不能被看到的情况。title属性提供图片标题。
视频<video>标签包裹。src属性指向你想要嵌入网页当中的视频资源。可以使用 controls属性来包含浏览器提供的控件界面（更多属性见MDN文档）
音频<audio>，与的使用方式几乎完全相同。不支持 width/height 属性。同时也不支持 poster 属性 — 同样，没有视觉部件。
矢量图<svg>。矢量图像中的文本可访问（有利于搜索引擎优化，也就是有利于SEO）；svg可以更好地适应样式或脚本。

响应式图像

响应式图片是一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片。接下来我们看一下如何创建自适应的图片。

标准的<img>元素传统上仅仅让你给浏览器指定唯一的资源文件。使用新属性srcset和sizes帮助浏览器选择正确的资源。

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

一个文件名 (elva-fairy-480w.jpg.)
一个空格
图像的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w，而非你可能期望的 px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在 Mac 上，你可以在 Finder 上选择这个图像，然后按 Cmd + I 来显示信息）。

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是 480 像素或更少”。
一个空格
当媒体条件为真时，图像将填充的槽的宽度（440px）

所以，有了这些属性，浏览器会：

查看设备宽度
检查sizes列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载srcset列表中引用的最接近所选的槽大小的图像

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<caption>可以为表格增加一个标题。<thead>``<tfoot>``<tbody>许你把表格中的部分标记为表头、页脚、正文部分>

<table>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML简介 ｜ 青训营笔记