HTML来源自freeCodecamp，基于freeCodecamp课程整理。HTML表示网页的内容和结构。 HTML元

HTML：（HyperText Markup Language）

标记语言，非编程语言；使用元素描述事情。 HTML表示网页的内容和结构。

HTML元素：元素是HTML文档的构建模块。它们代表标题、段落、链接、图像等。大多数HTML元素由一个开始标签（ <elementName> ）和一个结束标签（ </elementName> ）组成。

Void元素：

Void元素不能有任何内容，只能有一个开始标签。例如<img>和<meta>元素。

Attributes：

属性是放置在HTML元素开始标记中的值。属性为元素提供额外的信息，或者指定元素的行为。下面是属性的基本语法：

布尔属性

一种在HTML标签中既可以存在也可以不存在的属性。如果存在，该值为true,否则为false。布尔属性的例子包括disabled、readonly和required。

HTML注释的语法：

<!--This is an HTML comment.-->

标题元素：

HTML中有6个标题元素。 h1 到 h6 标题元素用于表示内容的重要性。数值越低，重要性越高，因此 h2 元素的重要性小于 h1 元素。

段落元素p：

用于显示网页上的段落。

<p>用于显示网页上的段落</p>

img元素:

img元素用于向网页添加图像.src 属性用于指定图像的位置。对于图像元素，最好再添加一个属性，称为 alt 属性。

<img src="https://XXX" alt="XXX">

body 元素：该元素用于表示HTML文档的内容。

<body>
 	<h1>HTML</h1>
 	<p>about html</p>
</body>

section元素：

该元素用于将内容分成更小的部分。

<section>
  <h2>About html</h2>
  <p>Hello</p>
</section>

div元素：

该元素是一个通用的HTML元素，没有任何语义。它被用作保存其他HTML元素的通用容器。

<div>
  <h1>I am a heading</h1>
  <p>I am a paragraph</p>
</div>

a元素：

用于为网页应用链接。 href 属性用于指定用户单击链接时链接的位置。

<a href="https://">cat</a>

无序（ `ul` ）和有序（ `ol` ）列表元素：

要创建项目列表，你应该使用 ul 元素，其中嵌套一个或多个 li 元素，如下所示：

<ul>
  <li>bread</li>
  <li>milk</li>
  <li>water</li>
</ul>

要创建元素的有序列表，应该使用 ol 元素：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

em：

用来强调一段文本。

<p>Cats <em>love</em> lasagna.</p>

strong:

用于强调文本，表示紧迫感和严肃性。

<p>
  <strong>Important:</strong>  
</p>

figure 和 figcaption元素：

figure 元素用于对图像和图表等内容进行分组。 figcaption 元素用于表示 figure 元素内的内容的标题。

<figure>
  <img src="https:XXX" alt="XXX">
  <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
</figure>

main 元素：

该元素用于表示网页的主要内容。

footer 元素：

这个元素位于HTML文档的底部，通常包含版权信息和其他重要的页面链接。

id:

HTML元素的唯一标识符。每个HTML文档只能使用一次ID名称。ID名称不能包含空格。如果你的ID包含多个单词，那么你可以在单词之间使用破折号-。

class：

类用于对元素进行分组，决定其样式和行为。与id不同，可以在整个HTML文档中重用相同的类。
class 值可以包含空格。

link:

用于链接到外部资源，如样式表和网站图标。- 下面是在外部CSS文件中使用 link 元素的基本语法：

<link rel="stylesheet" href="./styles.css" />

rel 属性用于指定链接的资源和HTML文档之间的关系。 href 属性用于指定外部资源的URL位置。

script 元素：

该元素用于嵌入可执行代码。

<body>
  <script>
    alert("Welcome to freeCodeCamp");
  </script>
</body>

从技术上讲，可以在script 标签中编写所有JavaScript代码，但最好的做法是链接到外部的JavaScript文件。下面是一个使用 script 元素链接到外部JavaScript文件的例子：

<script src="path-to-javascript-file.js"></script>

这里使用src属性来指定外部Javascript文件的位置。

HTML样板文件（HTML boilerplate）：

这是一个样板文件，包含每个HTML文档所需的基本结构和基本元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>freeCodeCamp</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <!--Headings, paragraphs, images, etc. go inside here-->
  </body>
</html>

DOCTYPE：用于告诉浏览器你使用的是哪个版本的HTML。
html元素：表示HTML文档的顶层元素或根元素。要指定文档的语言，应该使用lang属性。
head元素： head 部分包含了重要的元数据，是浏览器和搜索引擎需要的幕后信息。
meta元素:这些元素表示站点的元数据。这些元素包含字符编码等细节，以及网站如何预览页面链接等。 title元素：该元素用于设置出现在浏览器选项卡或窗口中的文本。 UTF-8字符编码：UTF-8或UCS转换格式8，是在web上广泛使用的标准化字符编码。字符编码是计算机用来存储字符作为数据的方法。 charset 属性用于 meta 元素中，以将字符编码设置为UTF-8。

SEO和社交分享

搜索引擎优化是一种优化网页的实践，使它们在搜索引擎上变得更可见和排名更高。

Meta （ `description` ）元素：

用于提供网页的简短描述，并影响SEO。

<meta
  name="description"
  content="Discover expert tips and techniques for gardening in small spaces, choosing the right plants, and maintaining a thriving garden."
/>

Open Graph标签：

OG协议使您能够控制您的网站内容如何在各种社交媒体平台上显示，如Facebook、LinkedIn等。通过设置这些open graph属性，可以吸引用户点击并参与你的内容。可以通过HTMLhead部分中的meta元素集合来设置这些属性。
og:title 属性：用于设置社交媒体帖子显示的标题。

<meta property="og:title" content="DeepSeek">

og:type 属性： type 属性用于表示社交媒体上共享的内容类型。这些内容包括文章、网站、视频或音乐。

<meta property="og:type" content="website">

og:image 属性：该属性用于设置社交媒体帖子显示的图像。

<meta property="og:image" content="https://cdn.deepseek.com/images/deepseek-chat-open-graph-image.jpeg">

og:url 属性：用于设置社交媒体帖子的URL，用户将点击该URL。

<meta property="og:url" content="https://chat.deepseek.com">

媒体元素及优化

被替换的元素：

被替换的元素的内容是由外部资源而不是CSS本身决定的。例如 iframe 元素。 iframe 表示行内帧。它是一个内联元素，用于直接在HTML页面中嵌入其他HTML内容。

<iframe src="https://www.example.com" title="Example Site"></iframe>

您可以包含 allowfullscreen 属性，它允许用户以全屏模式显示iframe。

<iframe
  src="video-url"
  width="width-value"
  height="height-value"
  allowfullscreen
></iframe>

要在 iframe 中嵌入视频，您可以直接从流行的视频服务中复制它，或自己定义它与 src 属性指向该视频的URL。
还有一些其他的替代元素，如 video ，和 embed 。某些元素在特定情况下表现为替换元素。下面是一个 input 元素的例子，其中 type 属性设置为 image ：

<input type="image" alt="Descriptive text goes here" src="example-img-url">

优化媒体：

在网页中使用图片等媒体时，有三个工具需要考虑：大小、格式和压缩。压缩算法用于减少文件或数据的大小。

图像格式：

两种最常见的文件格式是PNG和JPG，但它们不再是提供图像的最理想格式。除非你需要支持老版本浏览器，否则你应该考虑使用更优化的格式，如WEBP或AVIF。

图像许可：

公共领域下的图像没有版权，可以不受任何限制地自由使用。根据Creative Commons 0许可授权的图像被认为是公共领域。有些图片可能是在许可协议下发布的，比如知识共享协议（Creative Commons），或者freeCodeCamp使用的BSD协议。

svg：

可扩展的矢量图形跟踪数据基于路径和方程来绘制点，线，和曲线。这意味着矢量图形（比如SVG）可以缩放到任何大小而不会影响质量。

多媒体集成

audio 和 video元素：

audio 和 video 元素允许您为HTML文档添加声音和视频内容。 audio 元素支持流行的音频格式，如mp3、wav和ogg。 video 元素支持mp4、ogg和webm格式。

<audio src="xxx.mp3"></audio>

如果你想在页面上看到音频播放器，可以添加 audio 元素和 controls 属性，controls 属性对音频播放进行管理，包括音量调节、暂停/恢复播放等。 controls 属性是一个布尔属性，可以添加到元素中以启用内置的播放控制。如果省略，则不会显示任何控件。

<audio src="xxx.mp3" controls></audio>

loop 属性： loop 属性是布尔属性，使音频连续回放。

<audio src="xxx.mp3" loop controls></audio>

muted 属性：当 audio 元素中出现 muted 布尔属性时，将以静音状态启动音频。

<audio 
src="xxx.mp3" 
muted 
loop 
controls
></audio>

source 元素：说到音频文件类型，不同浏览器支持的类型是不同的。为了适应这一点，你可以在 audio 元素中使用 source 元素，浏览器将选择它理解的第一个源。下面是一个使用多个 source 元素对应一个 audio 元素的例子：

<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

video 元素也支持这些属性。
poster 属性：如果想在视频下载时显示图像，可以使用 poster 属性。该属性对于 audio 元素不可用，并且对于 video 元素是唯一的。

<video
  src="XXX.mp4"
  loop
  controls
  muted
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620"
></video>

目标属性类型：

`target` 属性：

这个属性告诉浏览器在哪里打开锚元素的URL。该属性有4个重要的可能值： _self , _blank , _parent 和 _top 。还有第五个值，称为 _unfencedTop ，目前用于实验用的 FencedFrame API。你可能还不能使用它。 _self 值：是 target 属性的默认值。这将在当前浏览上下文中打开链接。在大多数情况下，这将是当前选项卡或窗口。
_blank 值：在新的浏览上下文中打开链接。通常，这将在一个新的标签页中打开。但有些用户可能会将浏览器配置为打开一个新窗口。
_parent 值：打开当前上下文的父节点中的链接。例如，如果您的网站有一个iframe，该iframe中的 _parent 值将在您的网站的选项卡/窗口中打开，而不是在嵌入式框架中。
_top 值：在最高浏览上下文中打开链接——想象一下“父元素中的父元素”。这类似于 _parent ，但该链接将始终在完整的浏览器选项卡/窗口中打开，即使是嵌套的嵌入式帧。

绝对路径和相对路径

绝对路径：

绝对路径是到资源的完整链接。它从根目录开始，包括所有其他目录，最后是文件名和扩展名。“根目录”指的是层次结构中的顶级目录或文件夹。绝对路径还包括协议（可以是 http 、 https 、 file ）和域名（如果资源在web上）。

相对路径：

相对路径指定了文件相对于当前文件所在目录的位置。它不包括协议或域名，使其更短，更灵活的内部链接在同一网站。

链接状态

:link ：默认状态。此状态表示用户尚未访问、单击或交互的链接。你可以将此状态视为为页面上所有链接提供基础样式。其他状态在它的基础上建立。 :visited ：当用户已经访问过要链接的页面时，使用该机制。默认情况下，这会将链接变成紫色——但你可以利用CSS为用户提供不同的视觉指示。
:hover ：当用户将光标悬停在链接上时，此状态适用。这种状态有助于为链接提供额外的关注，以确保用户确实有意点击它。
:active ：该状态适用于用户正在激活的链路。在大多数情况下，这通常意味着通过左键单击主鼠标按钮来单击链接。
:focus ：当我们聚焦于链接时，该状态生效。
:active ：该状态适用于用户正在激活的链接。在大多数情况下，这通常意味着通过左键单击主鼠标按钮来单击链接。

HTML表单元素和属性

form 元素：用于为用户输入创建HTML表单。 action 属性：定义在哪里发送表单数据。 method 属性：决定表单数据如何发送（ GET 或 POST ）。 input 元素：用于为用户输入创建一个输入字段。 type 属性：用于指定输入字段的类型。例如 text , email , number , radio , checkbox ,等等。 placeholder 属性：用于向用户显示提示，告诉用户在输入框中输入什么。 value 属性：用于指定输入的值。如果输入具有 button 类型，则可以使用 value 属性来设置按钮文本。 name 属性：用于为输入字段分配一个名称，作为提交表单数据时的键。对于单选按钮，给它们相同的 name 将它们分组在一起，因此一次只能选择组中的一个选项。 size 属性：用于定义用户输入时应该显示的字符数。 min 属性：可与 number 等输入类型一起使用，指定输入字段中允许的最小值。 max 属性：可与 number 等输入类型一起使用，以指定输入字段中允许的最大值。 minlength 属性：用于指定输入字段所需的最小字符数。 maxlength 属性：用于指定输入字段允许的最大字符数。 required 属性：用于指定在提交表单前必须填写一个输入字段。 disabled 属性：用于指定一个输入字段应该被禁用。 readonly 属性：用于指定输入字段只读。
freecodecamp中的例子：

<!-- Text input -->
<input 
  type="text"
  id="name"
  name="name"
  placeholder="e.g. Quincy Larson"
  size="20"
  minlength="5"
  maxlength="30"
  required
/>

<!-- Number input -->
<input 
  type="number"
  id="quantity"
  name="quantity"
  min="2"
  max="10"
  disabled
/>

<!-- Button -->
<input type="button" value="Show Alert" />

label 元素：用于为输入字段创建标签。
for 属性：用于指定标签用于哪个输入字段。

隐式表单关联：

通过将输入框包装在 label 元素中，可以将输入框与标签关联起来。

<form action="">
  <label>
    Full Name:
    <input type="text" />
  </label>
</form>

显式关联：

通过使用 label 元素上的 for 属性，可以将输入与标签关联起来。

<form action="">
  <label for="email">Email Address: </label>
  <input type="email" id="email" />
</form>

`button` 元素：

用于创建可点击的按钮。按钮还可以有 type 属性，用于控制按钮在激活时的行为。例如： submit , reset , button 。

<button type="button">Show Form</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

fieldset 元素：用于将相关输入分组在一起。
legend 元素：用于添加描述输入组的标题。

<!-- Radio group -->
<fieldset>
  <legend>Was this your first time at our hotel?</legend>

  <label for="yes-option">Yes</label>
  <input id="yes-option" type="radio" name="hotel-stay" value="yes" />

  <label for="no-option">No</label>
  <input id="no-option" type="radio" name="hotel-stay" value="no" />
</fieldset>

<!-- Checkbox group -->
<fieldset>
  <legend>
    Why did you choose to stay at our hotel? (Check all that apply)
  </legend>

  <label for="location">Location</label>
  <input type="checkbox" id="location" name="location" value="location" />

  <label for="price">Price</label>
  <input type="checkbox" id="price" name="price" value="price" />
</fieldset>

处理HTML表格元素和属性

表格元素：用于创建HTML表格。表头（ thead ）元素：用于在HTML表格中对表头内容进行分组。
Table Row （ tr ）元素：用于在HTML表格中创建一行。
表头（ th ）元素：用于在HTML表格中创建表头单元格。
表体（ tbody ）元素：用于在HTML表中对表体内容进行分组。
Table Data Cell （ td ）元素：用于在HTML表格中创建一个数据单元格。
Table Foot （ tfoot ）元素：用于在HTML表格中分组页脚内容。 caption 元素：用于为HTML表格添加标题。 colspan 属性：用于指定一个表格单元格应该跨越的列数。

<table>
  <caption>Exam Grades</caption>

  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Grade</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Davis</td>
      <td>Alex</td>
      <td>54</td>
    </tr>

    <tr>
      <td>Doe</td>
      <td>Samantha</td>
      <td>92</td>
    </tr>

    <tr>
      <td>Rodriguez</td>
      <td>Marcus</td>
      <td>88</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Average Grade</td>
      <td>78</td>
    </tr>
  </tfoot>
</table>

HTML工具

HTML验证器（HTML validator）：检查HTML代码语法以确保其有效的工具。
DOM检查器（DOM inspector）：允许你检查和修改网页HTML结构的工具。
Devtools：一组直接内置在浏览器中的web开发者工具，可以帮助你调试、分析和分析web页面。

Web内容无障碍指南

Web内容无障碍指南（WCAG）是一套指南，旨在使残疾人更容易访问Web内容。WCAG的四个原则是POUR （Perceivable, Operable，易懂的）和Robust（健壮的）。

无障碍辅助技术

屏幕阅读器：能大声读出电脑屏幕内容的软件程序。盲人或视障人士使用它们来访问网络。
大型文本或盲文键盘：视力有障碍的人使用，以访问网络。
屏幕放大镜：放大电脑屏幕内容的软件程序。它们被视力低下的人用来访问网络。
替代指针设备：由行动障碍的人使用访问网络。这包括操纵杆、轨迹球和触控板等设备。
语音识别：由行动障碍的人使用来访问网络。它允许用户用他们的声音控制电脑。

可访问性审计工具

常用辅助工具：谷歌Lighthouse、Wave、IBM Equal Accessibility Checker和axe DevTools是一些常用的辅助工具，用于审查网站的辅助功能。

无障碍最佳实践

正确的标题级别结构：你应该使用正确的标题级别为你的内容创建一个逻辑结构。这有助于辅助技术理解网站的内容。
可访问性和表：当使用表时，您应该使用 th 元素来定义头单元格，使用 td 元素来定义数据单元格。这有助于辅助技术理解表的结构。
对于具有关联标签的输入的重要性：您应该使用 label 元素将标签与表单输入关联起来。这有助于辅助技术理解输入的目的。
好的重要性 alt 文本：您应该使用 alt 属性为图像提供文本替代。这有助于辅助技术理解图像的内容。
好的链接文本的重要性：你应该使用描述性的链接文本，以帮助用户了解链接的目的。这有助于辅助技术理解链接的目的。
无障碍获取音频和视频内容的最佳做法：您应该为音频和视频内容提供字幕和文本，使有听力障碍的人能够无障碍获取这些内容。你还应该为视频内容提供音频描述，使有视觉障碍的人能够访问。
tabindex 属性：用于使元素可聚焦，并定义它们使用键盘导航的相对顺序。千万不要使用值大于0的 tabindex 属性。相反，你应该使用值0或-1。

WAI-ARIA

它代表Web无障碍倡议——无障碍富互联网应用程序。它是一组可以添加到HTML元素中以提高可访问性的属性。它为辅助技术提供了关于内容的目的和结构的附加信息。

ARIA角色

一组预定义的角色，可以添加到HTML元素中以定义它们的用途。这有助于辅助技术理解网站的内容。例子包括 role="tab" , role="menu" ,和 role="alert" 。

HTML