freeCodeCamp Certified Full Stack Developer Curriculum freeCodeCamp 认证全栈开发工程师课程
Courses 课程目录
HTML
CSS
JavaScript
……
This document focuses on Chapter 1: HTML.
本文档聚焦于第一部分，HTML。
HTML 篇
HTML Basics HTML 基础
Role of HTML: HTML represents the content and structure of the web page.
HTML 的作用：HTML 表示网页的内容和结构。
HTML Elements: Elements are the building blocks for an HTML document. They represent headings, paragraphs, links, images and more. Most HTML elements consist of an opening tag (<elementName>) and a closing tag (</elementName>).
HTML 元素：元素是 HTML 文档的构建模块。它们表示标题、段落、链接、图像等。大多数 HTML 元素由一个开始标签（ <elementName> ）和一个结束标签（ </elementName> ）组成。
Here is the basic syntax:
以下是基本语法：
1
<elementName>Content goes here</elementName>
Void Elements: Void elements cannot have any content and only have a start tag. Examples include img and meta elements.
空元素：空元素不能包含任何内容，仅包含一个开始标签。例如 img 和 meta 元素。
1 2
<img> <meta>
It is common to see some codebases that include a forward slash / inside the void element. Both of these are acceptable:
常见的情况是看到一些代码库在空元素内部包含一个向右斜杠 / 。这两种情况都是可以接受的：
1 2
<img> <img/>
Attributes: An attribute is a value placed inside the opening tag of an HTML element. Attributes provide additional information about the element or specify how the element should behave. Here is the basic syntax for an attribute:
属性：属性是放置在 HTML 元素开始标签内部的一个值。属性提供有关元素的其他信息或指定元素应如何行为。以下是属性的基本语法：
1
<elementattribute="value"></element>
A boolean attribute is an attribute that can either be present or absent in an HTML tag. If present, the value is true otherwise it is false. Examples of boolean attributes include disabled, readonly, and required.
布尔属性是一个在 HTML 标签中可以存在或不存在属性。如果存在，其值为 true，否则为 false。布尔属性的例子包括 disabled 、 readonly 和 required 。
Comments: Comments are used in programming to leave notes for yourself and other developers in your code. Here is the syntax for a comment in HTML:
评论：在编程中，评论用于在代码中为自己和其他开发者留下注释。以下是 HTML 中注释的语法：
1
<!--This is an HTML comment.-->
Common HTML elements 常见的 HTML 元素
Heading Elements: There are six heading elements in HTML. The h1 through h6 heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements.
标题元素：HTML 中有六个标题元素。 h1 到 h6 标题元素用于表示它们下方内容的重要性。数字越低，重要性越高，因此 h2 元素的重要性低于 h1 元素。
1 2 3 4 5 6
<h1>most important heading element</h1> <h2>second most important heading element</h2> <h3>third most important heading element</h3> <h4>fourth most important heading element</h4> <h5>fifth most important heading element</h5> <h6>least important heading element</h6>
Paragraph Elements: This is used for paragraphs on a web page.
段落元素：用于网页上的段落。
1
<p>This is a paragraph element.</p>
img Elements: The img element is used to add images to the web page. The src attribute is used to specify the location for that image. For image elements, it’s good practice to include another attribute called the alt attribute. Here’s an example of an img element with the src and alt attributes: img 元素： img 元素用于向网页中添加图片。 src 属性用于指定图片的位置。对于图片元素，建议包含另一个称为 alt 属性的属性。以下是一个带有 img 和 src 属性的 alt 元素的示例：
1
<imgsrc="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"alt="A slice of lasagna on a plate.">
body Element: This element is used to represent the content for the HTML document. body 元素：此元素用于表示 HTML 文档的内容。
1 2 3 4
<body> <h1>CatPhotoApp</h1> <p>This is a paragraph element.</p> </body>
section Elements: This element is used to divide up content into smaller sections. section 元素：此元素用于将内容划分为更小的部分。
1 2 3 4
<section> <h2>About Me</h2> <p>Hi, I am Jane Doe and I am a web developer.</p> </section>
div Elements: This element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements. div 元素：此元素是一个通用的 HTML 元素，不包含任何语义意义。它被用作一个通用容器来包含其他 HTML 元素。
1 2 3 4
<div> <h1>I am a heading</h1> <p>I am a paragraph</p> </div>
Anchor (a) Elements: These elements are used to apply links to a web page. The href attribute is used to specify where the link should go when the user clicks on it.
锚点元素（ a ）：这些元素用于在网页中添加链接。 href 属性用于指定用户点击链接时链接应指向的位置。
Unordered (ul) and Ordered (ol) List Elements: To create a bulleted list of items you should use the ul element with one or more li elements nested inside like this:
无序列表（ ul ）和有序列表（ ol ）元素：要创建一个项目符号列表，你应该使用 ul 元素，并在其中嵌套一个或多个 li 元素，如下所示：
Emphasis (em) Element: This is used to place emphasis on a piece of text.
强调（ em ）元素：这用于强调一段文本。
1
<p>Cats <em>love</em> lasagna.</p>
Strong Importance (strong) Element: This element is used to place strong emphasis on text to indicate a sense of urgency and seriousness.
强重要性 ( strong ) 元素：此元素用于在文本中放置强强调，以表明紧迫感和严肃性。
1 2 3
<p> <strong>Important:</strong> Before proceeding, make sure to wear your safety goggles. </p>
figure and figcaption Elements: The figure element is used to group content like images and diagrams. The figcaption element is used to represent a caption for that content inside the figure element. figure 和 figcaption 元素： figure 元素用于组合内容，如图像和图表。 figcaption 元素用于在 figure 元素内部表示该内容的标题。
1 2 3 4
<figure> <imgsrc="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"alt="Two tabby kittens sleeping together on a couch."> <figcaption>Cats <strong>hate</strong> other cats.</figcaption> </figure>
main Element: This element is used to represent the main content for a web page. main 元素：此元素用于表示网页的主要内容。
footer Element: This element is placed at the bottom of the HTML document and usually contains copyright information and other important page links. footer 元素：此元素放置在 HTML 文档的底部，通常包含版权信息和其他重要页面链接。
1 2 3 4 5
<footer> <p> No Copyright - <ahref="https://www.freecodecamp.org">freeCodeCamp.org</a> </p> </footer>
Identifiers and Grouping 标识符和分组
IDs: Unique element identifiers for HTML elements. ID names should only be used once per HTML document.
ID：HTML 元素的唯一标识符。ID 名称在 HTML 文档中应只使用一次。
1
<h1id="title">Movie Review Page</h1>
ID names cannot have spaces. If your ID name contains multiple words then you can use dashes between the words like this:
ID 名称不能包含空格。如果你的 ID 名称包含多个单词，你可以在单词之间使用连字符，如下所示：
1
<divid="red-box"></div>
Classes: Classes are used to group elements for styling and behavior.
类：类用于对元素进行分组以实现样式和行为。
1
<divclass="box"></div>
Unlike IDs, you can reuse the same class name throughout the HTML document. The class value can also have spaces like this:
与 ID 不同，你可以在整个 HTML 文档中重复使用同一个类名。 class 值也可以像这样包含空格：
HTML entities: An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. Examples include the ampersand (&) symbol and the less than symbol (<).
HTML 实体：HTML 实体，或称字符引用，是一组用于表示 HTML 中保留字符的字符。例如，&符号( & )和小于号( < )。
1
<p>This is an <img /> element</p>
link Element: This element is used to link to external resources like stylesheets and site icons. Here is the basic syntax for using the link element for an external CSS file: link 元素：该元素用于链接外部资源，如样式表和网站图标。以下是使用 link 元素链接外部 CSS 文件的基本语法：
1
<linkrel="stylesheet"href="./styles.css" />
The rel attribute is used to specify the relationship between the linked resource and the HTML document. The href attribute is used to specify the location of the URL for the external resource. rel 属性用于指定链接资源与 HTML 文档之间的关系。 href 属性用于指定外部资源的 URL 位置。
script Element: This element is used to embed executable code. script 元素：该元素用于嵌入可执行代码。
1 2 3 4 5
<body> <script> alert("Welcome to freeCodeCamp"); </script> </body>
While you can technically write all of your JavaScript code inside the script tags, it is considered best practice to link to an external JavaScript file instead. Here is an example of using the script element to link to an external JavaScript file:
虽然你可以在 script 标签内编写所有 JavaScript 代码，但最佳实践是链接到外部 JavaScript 文件。以下是使用 script 元素链接外部 JavaScript 文件的示例：
1
<scriptsrc="path-to-javascript-file.js"></script>
The src attribute is used here to specify the location for that external JavaScript file. src 属性在这里用于指定外部 JavaScript 文件的位置。
Boilerplate and Encoding 模板和编码
HTML boilerplate: This is a boilerplate that includes the basic structure and essential elements every HTML document needs.
HTML 模板：这是一个包含每个 HTML 文档所需的基本结构和必要元素的模板。
1 2 3 4 5 6 7 8 9 10 11
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8" /> <title>freeCodeCamp</title> <linkrel="stylesheet"href="./styles.css" /> </head> <body> <!--Headings, paragraphs, images, etc. go inside here--> </body> </html>
DOCTYPE: This is used to tell browsers which version of HTML you’re using. DOCTYPE ：这用于告诉浏览器你正在使用哪个版本的 HTML。
html Element: This represents the top level element or the root of an HTML document. To specify the language for the document, you should use the lang attribute. html 元素：这代表 HTML 文档的顶层元素或根元素。要指定文档的语言，你应该使用 lang 属性。
head Element: The head section contains important meta data which is behind-the-scenes information needed for browsers and search engines. head 元素： head 部分包含重要的元数据，这是浏览器和搜索引擎所需的后台信息。
meta Elements: These elements represent your site’s metadata. These element have details about things like character encoding, and how websites like Twitter should preview your page’s link and more. meta 元素：这些元素代表你网站的元数据。这些元素包含有关字符编码等详细信息，以及像 Twitter 这样的网站如何预览你的页面链接等更多信息。
title Element: This element is used to set the text that appears in the browser tab or window. title 元素：这个元素用于设置浏览器标签或窗口中显示的文本。
UTF-8 character encoding: UTF-8, or UCS Transformation Format 8, is a standardized character encoding widely used on the web. Character encoding is the method computers use to store characters as data. The charset attribute is used inside of a meta element to set the character encoding to UTF-8.
UTF-8 字符编码：UTF-8，或称 UCS 转换格式 8，是一种在网络上广泛使用的标准化字符编码。字符编码是计算机用来将字符存储为数据的方法。 charset 属性用于在 meta 元素内部设置字符编码为 UTF-8。
SEO and Social Sharing SEO 和社交分享
SEO: Search Engine Optimization is a practice that optimizes web pages so they become more visible and rank higher on search engines.
SEO：搜索引擎优化是一种优化网页的实践，使网页在搜索引擎中更加可见并排名更高。
Meta (description) Element: This is used to provide a short description for the web page and impacting SEO.
元（ description ）元素：用于为网页提供简短描述，并影响 SEO。
1 2 3 4
<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 tags: The open graph protocol enables you to control how your website’s content appears across various social media platforms, such as Facebook, LinkedIn, and many more.
Open Graph 标签：Open Graph 协议使您能够控制您的网站内容在各种社交媒体平台（如 Facebook、LinkedIn 等）上的显示方式。
By setting these open graph properties, you can entice users to want to click and engage with your content. You can set these properties through a collection of meta elements inside your HTML head section.
通过设置这些开放图谱属性，你可以吸引用户点击并参与你的内容。你可以通过在 HTML 的 head 部分内的 meta 元素集合中设置这些属性。
og:title Property: This is used to set the title that displays for social media posts. og:title 属性：这用于设置社交媒体帖子显示的标题。
og:type Property: The type property is used to represent the type of content being shared on social media. Examples of this content include articles, websites, videos, or music. og:type 属性： type 属性用于表示在社交媒体上分享的内容类型。这种内容的示例包括文章、网站、视频或音乐。
1
<metaproperty="og:type"content="website" />
og:image Property: This is used to set the image shown for social media posts. og:image 属性：这用于设置社交媒体帖子显示的图像。
Replaced elements: A replaced element is an element whose content is determined by an external resource rather than by CSS itself. An example would be an iframe element. iframe stands for inline frame. It’s an inline element used to embed other HTML content directly within the HTML page.
替换元素：替换元素是指其内容由外部资源决定而非 CSS 本身定义的元素。例如 iframe 元素。 iframe 代表内联框架。它是一个内联元素，用于将其他 HTML 内容直接嵌入到 HTML 页面中。
You can include the allowfullscreen attribute which allows the user to display the iframe in full screen mode.
您可以包含 allowfullscreen 属性，该属性允许用户以全屏模式显示 iframe。
To embed a video within an iframe you can copy it directly from popular video services like YouTube and Vimeo, or define it yourself with the src attribute pointing to the URL of that video. Here’s an example of embedding a popular freeCodeCamp course from YouTube:
要在 iframe 中嵌入视频，可以直接从 YouTube 和 Vimeo 等热门视频服务中复制，或者使用 src 属性指向该视频的 URL 来自定义。以下是从 YouTube 嵌入 freeCodeCamp 课程的示例：
1 2 3 4 5 6 7 8 9 10 11
<h1>A freeCodeCamp YouTube Video Embedded with the iframe Element</h1>
There are some other replaced elements, such as video, and embed. And some elements behave as replaced elements under specific circumstances. Here’s an example of an input element with the type attribute set to image:
有一些其他被替换的元素，例如 video 和 embed 。还有一些元素在特定情况下表现得像被替换的元素。这里是一个 input 元素的例子，其 type 属性设置为 image ：
1
<inputtype="image"alt="Descriptive text goes here"src="example-img-url">
Optimizing media: There are three tools to consider when using media, such as images, on your web pages: the size, the format, and the compression. A compression algorithm is used to reduce the size for files or data.
优化媒体：在使用媒体（如图片）时，你的网页上有三个工具需要考虑：大小、格式和压缩。压缩算法用于减小文件或数据的大小。
Image formats: Two of the most common file formats are PNG and JPG, but these are no longer the most ideal formats for serving images. Unless you need support for older browsers, you should consider using a more optimized format, like WEBP or AVIF.
图片格式：PNG 和 JPG 是两种最常见的文件格式，但这些格式不再是最理想的图片服务格式。除非你需要支持旧版浏览器，否则你应该考虑使用更优化的格式，如 WEBP 或 AVIF。
Image licenses: An image under the public domain has no copyright attached to it and is free to be used without any restrictions. Images licensed specifically under the Creative Commons 0 license are considered public domain. Some images might be released under a permissive license, like a Creative Commons license, or the BSD license that freeCodeCamp uses.
图片许可：公共领域的图片没有版权限制，可以无限制地使用。在创意共享 0 许可下许可的图片被视为公共领域。有些图片可能发布在宽松的许可下，如创意共享许可或 freeCodeCamp 使用的 BSD 许可。
SVGs: Scalable Vector Graphics track data based on paths and equations to plot points, lines, and curves. What this really means is that a vector graphic, like an SVG, can be scaled to any size without impacting the quality.
SVGs：可缩放矢量图形基于路径和方程来追踪数据，以绘制点、线和曲线。这真正意味着的是，矢量图形（如 SVG）可以缩放到任何大小而不影响质量。
Multimedia Integration 多媒体集成
audio and video Elements: The audio and video elements allow you to add sound and video content to your HTML documents. The audio element supports popular audio formats like mp3, wav, and ogg. The video element supports mp4, ogg, and webm formats. audio 和 video 元素： audio 和 video 元素允许你将声音和视频内容添加到你的 HTML 文档中。 audio 元素支持流行的音频格式，如 mp3、wav 和 ogg。 video 元素支持 mp4、ogg 和 webm 格式。
1
<audiosrc="CrystalizeThatInnerChild.mp3"></audio>
If you want to see the audio player on the page, then you can add the audio element with the controls attribute:
如果你想在页面上看到音频播放器，你可以添加带 controls 属性的 audio 元素：
The controls attribute enables users to manage audio playback, including adjusting volume, and pausing, or resuming playback. The controls attribute is a boolean attribute that can be added to an element to enable built-in playback controls. If omitted, no controls will be shown. controls 属性使用户能够管理音频播放，包括调整音量，以及暂停或继续播放。 controls 属性是一个布尔属性，可以添加到元素上以启用内置播放控件。如果省略，则不会显示控件。
loop Attribute: The loop attribute is a boolean attribute that makes the audio replay continuously. loop 属性： loop 属性是一个布尔属性，使音频循环播放。
muted Attribute: When present in the audio element, the muted boolean attribute will start the audio in a muted state. muted 属性：当 audio 元素中存在 muted 布尔属性时，音频将以静音状态开始播放。
source Element: When it comes to audio file types, there are differences in which browsers support which type. To accommodate this, you can use source elements inside the audio element and the browser will select the first source that it understands. Here’s an example of using multiple source elements for an audio element: source 元素：关于音频文件类型，不同浏览器支持不同类型。为了适应这种情况，你可以在 audio 元素中使用 source 元素，浏览器将选择它首先理解的第一个源。这里是一个使用多个 source 元素为 audio 元素提供示例：
All the attributes we have learned so far are also supported in the video element. Here’s an example of using a video element with the loop, controls, and muted attributes:
我们之前学过的所有属性也都支持在 video 元素中使用。这里是一个使用带有 loop 、 controls 和 muted 属性的 video 元素的示例：
poster Attribute: If you wanted to display an image while the video is downloading, you can use the poster attribute. This attribute is not available for audio elements and is unique to the video element. poster 属性：如果你想在视频下载时显示图片，你可以使用 poster 属性。这个属性不适用于 audio 元素，是 video 元素特有的。
target Attribute: This attribute tells the browser where to open the URL for the anchor element. There are four important possible values for this attribute: _self, _blank, _parent and _top. There is a fifth value, called _unfencedTop, which is currently used for the experimental FencedFrame API. You probably won’t have a reason to use this one yet. target 属性：这个属性告诉浏览器如何打开锚元素的 URL。这个属性有四个重要的可能值： _self 、 _blank 、 _parent 和 _top 。还有一个第五个值，称为 _unfencedTop ，目前用于实验性的 FencedFrame API。你可能现在还没有使用这个值的理由。
_self Value: This is the default value for the target attribute. This opens the link in the current browsing context. In most cases, this will be the current tab or window. _self 值：这是 target 属性的默认值。这个值会在当前浏览上下文中打开链接。在大多数情况下，这将是当前标签页或窗口。
_blank Value: This opens the link in a new browsing context. Typically, this will open in a new tab. But some users might configure their browsers to open a new window instead. _blank 值：这个值会在新的浏览上下文中打开链接。通常，这会在新的标签页中打开。但有些用户可能会配置他们的浏览器以在新窗口中打开。
_parent Value: This opens the link in the parent of the current context. For example, if your website has an iframe, a _parent value in that iframe would open in your website’s tab/window, not in the embedded frame. _parent 值：这会在当前上下文的父级中打开链接。例如，如果你的网站有一个 iframe，其中的 _parent 值会在你的网站的标签页/窗口中打开，而不是在嵌入的框架中。
_top Value: This opens the link in the top-most browsing context - think “the parent of the parent”. This is similar to _parent, but the link will always open in the full browser tab/window, even for nested embedded frames. _top 值：这会在最顶层的浏览上下文中打开链接——可以理解为“父级的父级”。这类似于 _parent ，但链接将始终在完整的浏览器标签页/窗口中打开，即使对于嵌套的嵌入框架也是如此。
Path definition: A path is a string that specifies the location of a file or directory in a file system. In web development, paths let developers link to resources like images, stylesheets, scripts, and other web pages.
路径定义：路径是一个指定文件或目录在文件系统中位置的字符串。在网页开发中，路径允许开发者链接到资源，如图片、样式表、脚本和其他网页。
Path Syntax: There are three key syntaxes to know. First is the slash, which can be a backslash (\) or forward slash (/) depending on your operating system. The second is the single dot (.). And finally, we have the double dot (..). The slash is known as the “path separator”. It is used to indicate a break in the text between folder or file names. A single dot points to the current directory, and two dots point to the parent directory.
路径语法：有三种关键语法需要了解。首先是斜杠，它可以是反斜杠（ \ ）或正斜杠（ / ），具体取决于你的操作系统。其次是单点（ . ）。最后是双点（ .. ）。斜杠被称为“路径分隔符”。它用于在文件夹或文件名之间指示文本的断开。单点指向当前目录，双点指向父目录。
1 2 3
public/index.html ./favicon.ico ../src/index.css
Absolute Path: An absolute path is a complete link to a resource. It starts from the root directory, includes every other directory, and finally the filename and extension. The “root directory” refers to the top-level directory or folder in a hierarchy. An absolute path also includes the protocol - which could be http, https, and file and the domain name if the resource is on the web. Here’s an example of an absolute path that links to the freeCodeCamp logo:
绝对路径：绝对路径是一个资源的完整链接。它从根目录开始，包含所有其他目录，最后是文件名和扩展名。"根目录"指的是层次结构中的顶级目录或文件夹。绝对路径还包括协议（可能是 http 、 https 和 file ）以及如果资源在网络上则包括域名。这里是一个指向 freeCodeCamp 标志的绝对路径的例子：
1 2 3
<ahref="https://design-style-guide.freecodecamp.org/img/fcc_secondary_small.svg"> View fCC Logo </a>
Relative Path: A relative path specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name, making it shorter and more flexible for internal links within the same website. Here’s an example of linking to the about.html page from the contact.html page, both of which are in the same folder:
相对路径：相对路径指定文件相对于当前文件所在目录的位置。它不包括协议或域名，因此对于同一网站内的内部链接来说更短、更灵活。这里是一个从 contact.html 页面链接到 about.html 页面的例子，这两个页面都在同一个文件夹中：
1 2 3 4
<p> Read more on the <ahref="about.html">About Page</a> </p>
Link states 链接状态
:link: This is the default state. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it. :link ：这是默认状态。这个状态代表用户尚未访问、点击或与之交互的链接。你可以将这个状态视为页面所有链接的基础样式。其他状态都是在此基础上构建的。
:visited: This applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user. :visited : 当用户已经访问过链接的页面时适用。默认情况下，这会将链接变为紫色——但你可以利用 CSS 提供不同的视觉指示给用户。
:hover: This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it. :hover : 当用户将鼠标悬停在链接上时适用。这种状态有助于为链接提供额外关注，确保用户确实打算点击它。
:focus: This state applies when we focus on a link. :focus : 当我们聚焦于链接时适用。
:active: This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases. :active : 当链接被用户激活时适用。这通常意味着使用鼠标主键（通常是左键）点击链接。
Semantic HTML 语义HTML
Importance of Semantic HTML 语义 HTML 的重要性
Structural hierarchy for heading elements: It is important to use the correct heading element to maintain the structural hierarchy of the content. The h1 element is the highest level of heading and the h6 element is the lowest level of heading.
标题元素的结构层次：使用正确的标题元素以保持内容的结构层次非常重要。 h1 元素是最高级别的标题，而 h6 元素是最低级别的标题。
Presentational HTML elements: Elements that define the appearance of content. Ex. the deprecated center, big and font elements.
表现性 HTML 元素：定义内容外观的元素。例如已弃用的 center 、 big 和 font 元素。
Semantic HTML elements: Elements that hold meaning and structure. Ex. header, nav, figure.
语义 HTML 元素：具有含义和结构的元素。例如 header 、 nav 、 figure 。
Semantic HTML Elements 语义 HTML 元素
Header element: used to define the header of a document or section.
标题元素：用于定义文档或部分的头部。
Main element: used to contain the main content of the web page.
主元素：用于包含网页的主要内容。
Section element: used to divide up content into smaller sections.
区域元素：用于将内容划分为更小的区域。
Navigation Section (nav) element: represents a section with navigation links.
导航部分（ nav ）元素：表示包含导航链接的部分。
Figure element: used to contain illustrations and diagrams.
图元素：用于包含插图和图表。
Emphasis (em) element: marks text that has stress emphasis.
强调（ em ）元素：标记具有强调重点的文字。
1 2 3
<p> Never give up on <em>your</em> dreams. </p>
Idiomatic Text (i) element: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
习语文本（ i ）元素：用于突出显示替代语音或情绪、来自其他语言的习语、技术术语和想法。
1 2 3
<p> There is a certain <ilang="fr">je ne sais quoi</i> in the air. </p>
The lang attribute inside the open i tag is used to specify the language of the content. In this case, the language would be French. The i element does not indicate if the text is important or not, it only shows that it’s somehow different from the surrounding text.
在打开的 i 标签内的 lang 属性用于指定内容的语言。在这种情况下，语言是法语。 i 元素并不表示文本是否重要，它只是表明文本与周围文本有所不同。
Strong Importance (strong) element: marks text that has strong importance.
强重要性（ strong ）元素：标记具有强重要性的文本。
1 2 3
<p> <strong>Warning:</strong> This product may cause allergic reactions. </p>
Bring Attention To (b) element: used to bring attention to text that is not important for the meaning of the content. It’s commonly used to highlight keywords in summaries or product names in reviews.
吸引注意（ b ）元素：用于吸引对内容意义不重要的文本的注意。它通常用于突出摘要中的关键词或在评论中突出产品名称。
1 2 3
<p> We tested several products, including the <b>SuperSound 3000</b> for audio quality, the <b>QuickCharge Pro</b> for fast charging, and the <b>Ecoclean Vacuum</b> for cleaning. The first two performed well, but the <b>Ecoclean Vacuum</b> did not meet expectations. </p>
Description List (dl) element: used to represent a list of term-description groupings.
描述列表（ dl ）元素：用于表示术语-描述分组列表。
Description Term (dt) element: used to represent the term being defined.
描述术语（ dt ）元素：用于表示被定义的术语。
Description Details (dd) element: used to represent the description of the term.
描述详情（ dd ）元素：用于表示术语的描述。
Block Quotation (blockquote) element: used to represent a section that is quoted from another source. This element has a cite attribute. The value of the cite attribute is the URL of the source.
块引用（ blockquote ）元素：用于表示从其他来源引用的部分。此元素具有一个 cite 属性。 cite 属性的值是来源的 URL。
1 2 3
<blockquotecite="https://www.freecodecamp.org/news/learn-to-code-book/"> "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?" </blockquote>
Citation (cite) element: used to attribute the source of the referenced work visually. Marks up the title of the reference.
引用（ cite ）元素：用于在视觉上归属引用作品的来源。标记参考文献的标题。
1 2 3 4 5 6 7 8
<div> <blockquotecite="https://www.freecodecamp.org/news/learn-to-code-book/"> "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?" </blockquote> <p> -Quincy Larson, <cite>How to learn to Code and Get a Developer Job [Full Book].</cite> </p> </div>
Inline Quotation (q) element: used to represent a short inline quotation.
行内引用（ q ）元素：用于表示简短的行内引用。
1 2 3 4 5 6
<p> As Quincy Larson said, <qcite="https://www.freecodecamp.org/news/learn-to-code-book/"> Momentum is everything. </q> </p>
Abbreviation (abbr) element: used to represent an abbreviation or acronym. To help users understand what the abbreviation or acronym is, you can show its full form, a human readable description, with the title attribute.
缩写（ abbr ）元素：用于表示缩写或首字母缩略词。为了帮助用户理解缩写或首字母缩略词的含义，您可以使用 title 属性显示其完整形式或人类可读的描述。
1 2 3
<p> <abbrtitle="HyperText Markup Language">HTML</abbr> is the foundation of the web. </p>
Contact Address (address) element: used to represent the contact information.
联系地址（ address ）元素：用于表示联系信息。
(Date) Time (time) element: used to represent a date and/or time. The datetime attribute is used to translate dates and times into a machine-readable format.
（日期）时间（ time ）元素：用于表示日期和/或时间。 datetime 属性用于将日期和时间转换为机器可读的格式。
1 2 3
<p> The reservations are for the <timedatetime="20:00">20:00 </time> </p>
ISO 8601 Date (datetime) attribute: used to represent dates and times in a machine-readable format. The standard format is YYYY-MM-DDThh:mm:ss, with the capital T being a separator between the date and time.
ISO 8601 日期（ datetime ）属性：用于以机器可读格式表示日期和时间。标准格式为 YYYY-MM-DDThh:mm:ss ，其中大写 T 用作日期和时间之间的分隔符。
Superscript (sup) element: used to represent superscript text. Common use cases for the sup element would include exponents, superior lettering and ordinal numbers.
上标（ sup ）元素：用于表示上标文本。 sup 元素的常见用例包括指数、上标字母和序数词。
1 2 3
<p> 2<sup>2</sup> (2 squared) is 4. </p>
Subscript (sub) element: used to represent subscript text. Common use cases for the subscript element include chemical formulas, footnotes, and variable subscripts.
下标（ sub ）元素：用于表示下标文本。下标元素的常见用例包括化学公式、脚注和变量下标。
1 2 3
<p> CO<sub>2</sub> </p>
Inline Code (code) element: used to represent a fragment of computer code.
行内代码（ code ）元素：用于表示一段计算机代码。
Preformatted Text (pre) element: represents preformatted text
预格式化文本（ pre ）元素：表示预格式化文本。
1 2 3 4 5 6 7
<pre> <code> body { color: red; } </code> </pre>
Unarticulated Annotation (u) element: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
未说明的注释（ u ）元素：用于表示应以非文本注释方式呈现的内联文本片段。
1 2 3 4
<p> You can use the unarticulated annotation element to highlight <u>inccccort</u><u>spling</u><u>issses</u>. </p>
Ruby Annotation (ruby) element: used for annotating text with pronunciation or meaning explanations. An example usage is for East Asian typography.
Ruby 注释（ ruby ）元素：用于对文本进行发音或含义解释的注释。例如，用于东亚排版。
Ruby fallback parenthesis (rp) element: used as a fallback for browsers lacking support for displaying ruby annotations.
Ruby 备用括号（ rp ）元素：用于在浏览器不支持显示 Ruby 注释时作为备用。
Ruby text (rt) element: used to indicate text for the ruby annotation. Usually used for pronunciation, or translation details in East Asian typography.
Ruby 文本（ rt ）元素：用于指示 Ruby 注释的文本。通常用于发音，或在东亚排版中用于翻译细节。
Strikethrough (s) element: used to represent content that is no longer accurate or relevant.
删除线（ s ）元素：用于表示不再准确或不相关的内容。
1 2 3 4 5 6
<p> <s>Tomorrow's hike will be meeting at noon.</s> </p> <p> Due to unforeseen weather conditions, the hike has been canceled. </p>
Forms and Tables 表格和表单
HTML Form Elements and Attributes HTML 表单元素和属性
form element: used to create an HTML form for user input. form 元素：用于创建 HTML 表单以接收用户输入。
action attribute: used to specify the URL where the form data should be sent. action 属性：用于指定表单数据应提交到的 URL。
method attribute: used to specify the HTTP method to use when sending the form data. The most common methods are GET and POST. method 属性：用于指定发送表单数据时应使用的 HTTP 方法。最常用的方法是 GET 和 POST 。
1 2 3
<formmethod="value-goes-here"action="url-goes-here"> <!-- inputs go inside here --> </form>
input element: used to create an input field for user input. input 元素：用于创建用户输入的输入字段。
type attribute: used to specify the type of input field. Ex. text, email, number, radio, checkbox, etc. type 属性：用于指定输入字段的类型。例如 text 、 email 、 number 、 radio 、 checkbox 等。
placeholder attribute: used to show a hint to the user to show them what to enter in the input field. placeholder 属性：用于向用户显示提示，告诉他们应该在输入字段中输入什么。
value attribute: used to specify the value of the input. If the input has a button type, the value attribute can be used to set the button text. value 属性：用于指定输入的值。如果输入具有 button 类型，可以使用 value 属性来设置按钮文本。
name attribute: used to assign a name to an input field, which serves as the key when form data is submitted. For radio buttons, giving them the same name groups them together, so only one option in the group can be selected at a time. name 属性：用于为输入字段分配一个名称，该名称在表单数据提交时作为键。对于单选按钮，将它们赋予相同的 name 可以将它们分组在一起，因此每次只能选择该组中的一个选项。
size attribute: used to define the number of characters that should be visible as the user types into the input. size 属性：用于定义用户在输入时应该可见的字符数。
min attribute: can be used with input types such as number to specify the minimum value allowed in the input field. min 属性：可用于 number 等输入类型，以指定输入字段允许的最小值。
max attribute: can be used with input types such as number to specify the maximum value allowed in the input field. max 属性：可用于 number 等输入类型，以指定输入字段允许的最大值。
minlength attribute: used to specify the minimum number of characters required in an input field. minlength 属性：用于指定输入字段所需的最小字符数。
maxlength attribute: used to specify the maximum number of characters allowed in an input field. maxlength 属性：用于指定输入字段允许的最大字符数。
required attribute: used to specify that an input field must be filled out before submitting the form. required 属性：用于指定在提交表单之前必须填写输入字段。
disabled attribute: used to specify that an input field should be disabled. disabled 属性：用于指定应禁用输入字段。
readonly attribute: used to specify that an input field is read-only. readonly 属性：用于指定输入字段为只读。
label element: used to create a label for an input field. label 元素：用于为输入字段创建标签。
for attribute: used to specify which input field the label is for. for 属性：用于指定标签对应哪个输入字段。
Implicit form association: inputs can be associated with labels by wrapping the input field inside the label element.
隐式表单关联：通过将输入字段包裹在 label 元素内，可以将输入字段与标签关联起来。
1 2 3 4 5 6
<formaction=""> <label> Full Name: <inputtype="text" /> </label> </form>
Explicit form association: inputs can be associated with labels by using the for attribute on the label element.
显式表单关联：通过在 label 元素上使用 for 属性，可以将输入字段与标签关联起来。
button element: used to create a clickable button. A button can also have a type attribute, which is used to control the behavior of the button when it is activated. Ex. submit, reset, button. button 元素：用于创建可点击的按钮。按钮也可以有 type 属性，该属性用于控制按钮被激活时的行为。例如 submit 、 reset 、 button 。
HTML validator: a tool that checks the syntax of HTML code to ensure it is valid.
HTML 验证器：一种检查 HTML 代码语法以确保其有效的工具。
DOM inspector: a tool that allows you to inspect and modify the HTML structure of a web page.
DOM 检查器：一种允许您检查和修改网页 HTML 结构的工具。
Devtools: a set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.
开发者工具：一组直接集成在浏览器中的网络开发者工具，帮助您调试、分析和分析网页。
Accessibility 无障碍
Introduction to Accessibility 无障碍简介
Web Content Accessibility Guidelines: The Web Content Accessibility Guidelines (WCAG) are a set of guidelines for making web content more accessible to people with disabilities. The four principles of WCAG are POUR which stands for Perceivable, Operable, Understandable, and Robust.
Web 内容无障碍指南：Web 内容无障碍指南（WCAG）是一套使网络内容对残障人士更友好的指南。WCAG 的四个原则是 POUR，代表可感知、可操作、可理解、稳定可靠。
Assistive Technology for Accessibility 无障碍辅助技术
Screen readers: Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
屏幕阅读器：能够将计算机屏幕内容朗读出来的软件程序。它们被盲人或视障人士用来访问网络。
Large text or braille keyboards: Used by people with visual impairments to access the web.
大字体或盲文键盘：视障人士用来访问网络的工具。
Screen magnifiers: Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
屏幕放大器：放大计算机屏幕内容的软件程序。它们被视力低劣的人用来访问网络。
Alternative pointing devices: Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
替代指点设备：被行动障碍的人用来访问网络。这包括诸如操纵杆、轨迹球和触摸板等设备。
Voice recognition: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
语音识别：被行动障碍的人用来访问网络。它允许用户使用他们的声音来控制计算机。
Accessibility Auditing Tools 无障碍性审核工具
Common Accessibility Tools: Google Lighthouse, Wave, IBM Equal Accessibility Checker, and axe DevTools are some of the common accessibility tools used to audit the accessibility of a website.
常见的无障碍工具：Google Lighthouse、Wave、IBM Equal Accessibility Checker 和 axe DevTools 是一些常用的用于审计网站无障碍性的工具。
Accessibility Best Practices 无障碍最佳实践
Proper heading level structure: You should use proper heading levels to create a logical structure for your content. This helps people using assistive technologies understand the content of your website.
正确的标题级别结构：您应该使用正确的标题级别来为您的内容创建逻辑结构。这有助于使用辅助技术的人理解您网站的内容。
Accessibility and Tables: When using tables, you should use the th element to define header cells and the td element to define data cells. This helps people using assistive technologies understand the structure of the table. With the caption element, you can write the caption (or title) of a table, so users, especially those who use assistive technologies, can quickly understand the table’s purpose and content. You should place the caption element immediately after the opening tag of the table element. This way, screen readers and other assistive technologies can provide more context by announcing the caption before reading the content.
可访问性与表格：在使用表格时，您应该使用 th 元素来定义表头单元格，并使用 td 元素来定义数据单元格。这有助于使用辅助技术的人理解表格的结构。通过使用 caption 元素，您可以编写表格的标题（或标题），以便用户，特别是使用辅助技术的用户，可以快速理解表格的目的和内容。您应该在 table 元素的开始标签之后立即放置 caption 元素。这样，屏幕阅读器和其他辅助技术可以在读取内容之前宣布标题，从而提供更多上下文。
Importance for inputs to have an associated label: You should use the label element to associate labels with form inputs. This helps people using assistive technologies understand the purpose of the input.
输入具有关联标签的重要性：您应该使用 label 元素将标签与表单输入关联起来。这有助于使用辅助技术的人理解输入的目的。
Importance of good alt text: You should use the alt attribute to provide a text alternative for images. This helps people using assistive technologies understand the content of the image.
良好的 alt 文本的重要性：您应该使用 alt 属性为图像提供文本替代。这有助于使用辅助技术的人理解图像内容。
Importance of good link text: You should use descriptive link text to help users understand the purpose of the link. This helps people using assistive technologies understand the purpose of the link.
良好的链接文本的重要性：您应该使用描述性链接文本帮助用户理解链接的目的。这有助于使用辅助技术的人理解链接的目的。
Best practices for making audio and video content accessible: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
制作音频和视频内容可访问性的最佳实践：您应该为音频和视频内容提供字幕和文本记录，使其对有听力障碍的人士可访问。您还应该为视频内容提供音频描述，使其对有视觉障碍的人士可访问。
tabindex attribute: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the tabindex attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. tabindex 属性：用于使元素可聚焦并定义使用键盘导航时的相对顺序。重要的是永远不要使用 tabindex 属性值大于 0。相反，你应该使用 0 或-1 的值。
1
<ptabindex="-1">Sorry, there was an error with your submission.</p>
accesskey attribute: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily. accesskey 属性：用于为元素定义键盘快捷键。这可以帮助行动不便的用户更轻松地浏览网站。
WAI-ARIA: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
WAI-ARIA：它代表 Web 可访问性倡议 - 可访问的丰富互联网应用程序。它是一组可以添加到 HTML 元素中的属性，以提高可访问性。它向辅助技术提供有关内容目的和结构的信息。
ARIA roles: A set of predefined roles that can be added to HTML elements to define their purpose. This helps people using assistive technologies understand the content of the website. Examples include role="tab", role="menu", and role="alert".
ARIA 角色：一组预定义的角色，可以添加到 HTML 元素中，以定义其用途。这有助于使用辅助技术的人理解网站内容。例如包括 role="tab" 、 role="menu" 和 role="alert" 。
There are six main categories of ARIA roles:
ARIA 角色有六个主要类别：
Document structure roles: These roles define the overall structure of the web page. With these roles, assistive technologies can understand the relationships between different sections and help users navigate the content.
文档结构角色：这些角色定义了网页的整体结构。使用这些角色，辅助技术可以理解不同部分之间的关系，并帮助用户导航内容。
Widget roles: These roles define the purpose and functionality of interactive elements, like scrollbars.
组件角色：这些角色定义了交互式元素（如滚动条）的目的和功能。
Landmark roles: These roles classify and label the primary sections of a web page. Screen readers use them to provide convenient navigation to important sections of a page.
地标角色：这些角色对网页的主要部分进行分类和标记。屏幕阅读器使用它们为用户提供方便地导航到页面重要部分的途径。
Live region roles: These roles define elements with content that will change dynamically. This way, screen readers and other assistive technologies can announce changes to users with visual disabilities.
实时区域角色：这些角色定义了内容将动态变化的部分。这样，屏幕阅读器和其他辅助技术可以通知有视觉障碍的用户这些变化。
Window roles: These roles define sub-windows, like pop up modal dialogues. These roles include alertdialog and dialog.
窗口角色：这些角色定义了子窗口，如弹出式模态对话框。这些角色包括 alertdialog 和 dialog 。
Abstract roles: These roles help organize the document. They’re only meant to be used internally by the browser, not by developers, so you should know that they exist but you shouldn’t use them on your websites or web applications.
摘要角色：这些角色有助于组织文档。它们仅供浏览器内部使用，而不是供开发者使用，因此您应该知道它们的存在，但不应在您的网站或 Web 应用程序中使用它们。
aria-label and aria-labelledby attributes: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. aria-label allows you to define the name directly in the attribute while aria-labelledby allows you to reference existing text on the page. aria-label 和 aria-labelledby 属性：这些属性用于为元素提供一个程序化（或可访问）的名称，这有助于使用辅助技术（如屏幕阅读器）的人理解元素的目的。当元素的视觉标签是图像或符号而不是文本时，通常使用它们。 aria-label 允许您直接在属性中定义名称，而 aria-labelledby 允许您引用页面上的现有文本。
aria-hidden attribute: Used to hide an element from assistive technologies such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content. aria-hidden 属性：用于隐藏元素，使其不被辅助技术（如屏幕阅读器）显示。例如，这可以用来隐藏不提供任何有意义内容的装饰性图像。
aria-describedby attribute: Used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission. aria-describedby 属性：用于通过将其与包含信息的另一个元素相关联来提供有关元素的附加信息。这使使用屏幕阅读器的人在导航到元素时能够立即访问附加信息。常见的用法包括将格式指令关联到文本输入或错误消息关联到无效表单提交后的输入。
1 2 3 4 5
<form> <labelfor="password">Password:</label> <inputtype="password"id="password"aria-describedby="password-help" /> <pid="password-help">Your password must be at least 8 characters long.</p> </form>
