# HTML 基础复习
HTML 基础
- HTML 的作用 ：HTML 表示网页的内容和结构。
- HTML 元素 ：元素是 HTML 文档的构建块。它们表示标题、段落、链接、图像等。大多数 HTML 元素由一个起始标签
<elementName>和一个结束标签</elementName>组成。
以下是基本语法：
以下是基本语法：
<elementName>Content goes here</elementName> |
空元素 ：空元素不能包含任何内容，只能有开始标签。示例包括 img 和 meta 元素。
<img> | |
<meta> |
在某些代码库中常见在空元素内包含一个正斜杠 / 。这两种写法都是可接受的：
<img> | |
<img/> |
属性 ：属性是放在 HTML 元素起始标签内的一个值。属性为元素提供额外信息或指定元素应如何表现。属性的基本语法如下：
<element attribute="value"></element> |
布尔属性是一种在 HTML 标签中可以存在或不存在的属性。如果存在，其值为 true ，否则为 false 。布尔属性的例子包括 disabled 、 readonly 和 required 。
注释 ：注释用于在代码中为自己或其他开发者留下说明。以下是 HTML 注释的语法：
<!--This is an HTML comment.--> |
# 常见的 HTML 元素
标题元素 ：HTML 中有六个标题元素。 h1 到 h6 标题元素用于表示其下方内容的重要性。数字越小，重要性越高，因此 h2 元素的重要性低于 h1 元素。
<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> |
段落元素 ：用于网页中的段落。
<p>This is a paragraph element.</p> |
img 元素 ： img 元素用于向网页添加图像。 src 属性用于指定该图像的位置。对于图像元素，最好包含另一个名为 alt 的属性。下面是一个同时包含 src 和 alt 属性的 img 元素示例：
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."> |
body 元素 ：此元素用于表示 HTML 文档的内容。
<body> | |
<h1>CatPhotoApp</h1> | |
<p>This is a paragraph element.</p> | |
</body> |
section 元素 ：此元素用于将内容划分为更小的部分。
<section> | |
<h2>About Me</h2> | |
<p>Hi, I am Jane Doe and I am a web developer.</p> | |
</section> |
div 元素 ：该元素是一个通用的 HTML 元素，不包含任何语义信息。它用作通用容器以承载其他 HTML 元素。
<div> | |
<h1>I am a heading</h1> | |
<p>I am a paragraph</p> | |
</div> |
锚点 a 元素 ：这些元素用于在网页上创建链接。 href 属性用于指定用户点击链接时应跳转到的位置。
<a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> |
无序 ul 和有序 ol 列表元素 ：要创建带项目符号的项目列表，应使用 ul 元素，并在其内部嵌套一个或多个 li 元素，如下所示：
<ul> | |
<li>catnip</li> | |
<li>laser pointers</li> | |
<li>lasagna</li> | |
</ul> |
要创建有序的项目列表，应使用 ol 元素：
<ol> | |
<li>flea treatment</li> | |
<li>thunder</li> | |
<li>other cats</li> | |
</ol> |
强调 em 元素 ：用于对一段文本施加强调。
<p>Cats <em>love</em> lasagna.</p> |
重要强调 strong 元素 ：此元素用于对文本施加强烈强调，以表示紧迫性和严重性。
<p> | |
<strong>Important:</strong> Before proceeding, make sure to wear your safety goggles. | |
</p> |
figure 与 figcaption 元素 ： figure 元素用于对图像和图表等内容进行分组。 figcaption 元素用于在 figure 元素内表示该内容的说明文字。
<figure> | |
<img src="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 元素 ：该元素用于表示网页的主要内容。footer 元素 ：该元素放置在 HTML 文档的底部，通常包含版权信息和其他重要页面链接。
<footer> | |
<p> | |
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a> | |
</p> | |
</footer> |
# 标识符与分组
ID：HTML 元素的唯一标识符。ID 名称在每个 HTML 文档中只能使用一次。
<h1 id="title">Movie Review Page</h1> |
ID 名称不能包含空格。如果你的 ID 名称由多个单词组成，可以在单词之间使用连字符，像这样：
<div id="red-box"></div> |
类（Classes）：类用于将元素分组以便进行样式和行为处理。
<div class="box"></div> |
与 ID 不同，您可以在整个 HTML 文档中重复使用相同的 class 名称。 class 的值也可以包含空格，例如：
<div class="box red-box"></div> | |
<div class="box blue-box"></div> |
# 特殊字符与链接
HTML 实体 ：HTML 实体或字符引用是一组用于表示 HTML 中保留字符的字符。示例包括和号 & 符号和小于号 < 。
<p>This is an <img /> element</p> |
link 元素 ：此元素用于链接到外部资源，如样式表和站点图标。以下是用于外部 CSS 文件的 link 元素的基本语法：
<link rel="stylesheet" href="./styles.css" /> |
rel 属性用于指定被链接资源与 HTML 文档之间的关系。 href 属性用于指定外部资源的 URL 位置。
script 元素 ：此元素用于嵌入可执行代码。
<body> | |
<script> | |
alert("Welcome to freeCodeCamp"); | |
</script> | |
</body> |
尽管技术上可以将所有 JavaScript 代码写在 script 标签内，但更好的做法是链接到外部 JavaScript 文件。下面是一个使用 script 元素链接到外部 JavaScript 文件的示例：
<script src="path-to-javascript-file.js"></script> |
src 属性在此用于指定该外部 JavaScript 文件的位置。
# 模板和编码
HTML 样板 ：这是包含每个 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元素 ：这些元素表示站点的元数据。它们包含诸如字符编码、以及像 Twitter 这样的站点应如何预览您页面链接等详细信息。title元素 ：该元素用于设置显示在浏览器标签或窗口中的文本。- UTF-8 字符编码 ：UTF-8，即 UCS 转换格式 8，是一种在网络上广泛使用的标准化字符编码。字符编码是计算机将字符作为数据存储的方法。
charset属性用于在meta元素内将字符编码设置为 UTF-8。
# SEO 与社交分享
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 标签 ：开放图谱协议使您能够控制网站内容在各种社交媒体平台（例如 Facebook、LinkedIn 等）上的显示方式。
通过设置这些 Open Graph 属性，您可以吸引用户点击并与您的内容互动。您可以通过在 HTML 的 head 部分内的一组 meta 元素来设置这些属性。
og:title 属性 ：用于设置在社交媒体帖子中显示的标题。
<meta content="freeCodeCamp.org" property="og:title" /> |
og:type 属性 ：type 属性用于表示在社交媒体上共享的内容类型。此类内容的示例包括文章、网站、视频或音乐。
<meta property="og:type" content="website" /> |
og:image 属性 ：用于设置在社交媒体帖子中显示的图片。
<meta | |
content="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" | |
property="og:image" | |
/> |
og:url 属性 ：用于设置社交媒体帖子中用户点击的 URL。
<meta property="og:url" content="https://www.freecodecamp.org" /> |
# 媒体元素与优化
替换元素 ：替换元素是其内容由外部资源决定而非由 CSS 本身决定的元素。一个例子是 iframe 元素。 iframe 代表内联框架（inline frame）。它是一个内联元素，用于在 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 中嵌入视频，您可以直接从 YouTube、Vimeo 等流行视频服务复制，或通过将 src 属性指向该视频的 URL 来自行定义。下面是一个从 YouTube 嵌入 freeCodeCamp 热门课程的示例：
<h1>A freeCodeCamp YouTube Video Embedded with the iframe Element</h1> | |
<iframe | |
width="560" | |
height="315" | |
src="https://www.youtube.com/embed/PkZNo7MFNFg?si=-UBVIUNM3csdeiWF" | |
title="YouTube video player" | |
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
referrerpolicy="strict-origin-when-cross-origin" | |
allowfullscreen | |
></iframe> |
还有一些其他的替换元素，例如 video 和 embed 。有些元素在特定情况下也会表现为替换元素。以下是一个将 type 属性设置为 image 的 input 元素示例：
<input type="image" alt="Descriptive text goes here" src="example-img-url"> |
优化媒体 ：在网页中使用媒体（如图像）时，有三项工具需要考虑：尺寸、格式和压缩。压缩算法用于减小文件或数据的体积。
图像格式 ：两种最常见的文件格式是 PNG 和 JPG，但它们已不再是提供图像的最佳格式。除非需要支持较旧的浏览器，否则应考虑使用更优化的格式，如 WEBP 或 AVIF。
图片许可 ：处于公有领域的图像不附带版权，可以无限制地使用。特别以 Creative Commons 0 许可证授权的图像被视为公有领域。有些图像可能以宽松许可发布，例如 Creative Commons 许可证或 freeCodeCamp 使用的 BSD 许可证。
SVG：可缩放矢量图形（Scalable Vector Graphics）基于路径和方程来跟踪数据以绘制点、线和曲线。其真正含义是，像 SVG 这样的矢量图可以缩放到任意尺寸而不影响质量。
# 多媒体集成
audio 和 video 元素 ： audio 和 video 元素允许你在 HTML 文档中添加音频和视频内容。 audio 元素支持常见的音频格式，如 mp3、wav 和 ogg。 video 元素支持 mp4、ogg 和 webm 格式。
<audio src="CrystalizeThatInnerChild.mp3"></audio> |
如果你想在页面上看到音频播放器，可以添加带有 controls 属性的 audio 元素：
<audio src="CrystalizeThatInnerChild.mp3" controls></audio> |
controls 属性使用户能够控制音频播放，包括调节音量、暂停或恢复播放。 controls 属性是一个布尔属性，可添加到元素以启用内置的播放控件。如果省略，则不会显示任何控件。
loop 属性 ： loop 属性是一个布尔属性，使音频连续重播。
<audio | |
src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3" | |
loop | |
controls | |
></audio> |
muted 属性 ：当出现在 audio 元素中时，布尔属性 muted 会使音频以静音状态开始播放。
<audio | |
src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3" | |
loop | |
controls | |
muted | |
></audio> |
source 元素 ：对于音频文件类型，不同浏览器对各类型的支持存在差异。为适应这种情况，你可以在 audio 元素内使用多个 source 元素，浏览器会选择第一个其能识别的来源。下面是为 audio 元素使用多个 source 元素的示例：
<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 元素。下面是一个使用了 loop 、 controls 和 muted 属性的 video 元素示例：
<video | |
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" | |
loop | |
controls | |
muted | |
></video> |
poster 属性 ：如果你想在视频下载时显示一张图片，可以使用 poster 属性。此属性不适用于 audio 元素，仅适用于 video 元素。
<video | |
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" | |
loop | |
controls | |
muted | |
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" | |
width="620" | |
></video> |
# 目标属性类型
target 属性 ：此属性告诉浏览器在何处打开锚点元素的 URL。该属性有四个重要的可能值： _self 、 _blank 、 _parent 和 _top 。还有第五个值，称为 _unfencedTop ，目前用于实验性的 FencedFrame API。你现在大概还不需要使用它。_self 值 ：这是 target 属性的默认值。它在当前浏览上下文中打开链接。在大多数情况下，这将是当前标签页或窗口。
<a href="https://freecodecamp.org" target="_self">Visit freeCodeCamp</a> |
_blank 值 ：在新的浏览上下文中打开链接。通常这会在新标签页中打开，但有些用户可能将浏览器配置为改为在新窗口中打开。
<a href="https://freecodecamp.org" target="_blank">Visit freeCodeCamp</a> |
_parent 值 ：在当前上下文的父级中打开链接。例如，如果你的网站包含一个 iframe，则该 iframe 中的 _parent 值会在你网站所在的标签 / 窗口中打开，而不是在嵌入的框架内打开。
<a href="https://freecodecamp.org" target="_parent">Visit freeCodeCamp</a> |
_top 值 ：在最顶层的浏览上下文中打开链接 —— 可以理解为 “父的父级”。这与 _parent 类似，但无论嵌套多少层嵌入框架，链接都会始终在完整的浏览器标签 / 窗口中打开。
<a href="https://freecodecamp.org" target="_top">Visit freeCodeCamp</a> |
# 绝对路径 vs 相对路径
路径定义 ：路径是一个字符串，用于指定文件系统中某个文件或目录的位置。在网页开发中，路径让开发者能够链接到资源，例如图像、样式表、脚本和其他网页。
路径语法 ：有三种关键语法需要了解。第一个是斜杠，根据你的操作系统可以是反斜杠 \ 或正斜杠 / 。第二个是单点 . 。最后是双点 .. 。斜杠被称为 “路径分隔符”，用于表示文件夹或文件名之间的分隔。单点表示当前目录，两个点表示父目录。
示例代码
public/index.html
./favicon.ico
../src/index.css
绝对路径 ：绝对路径是指向资源的完整链接。它从根目录开始，包含每一级子目录，最后是文件名和扩展名。“根目录” 指的是层级结构中的顶级目录或文件夹。绝对路径还包含协议 —— 可能是 http 、 https 或 file —— 以及当资源位于网络上时的域名。下面是一个链接到 freeCodeCamp 徽标的绝对路径示例：
示例代码
<a href="https://design-style-guide.freecodecamp.org/img/fcc_secondary_small.svg"> | |
View fCC Logo | |
</a> |
相对路径 ：相对路径指定文件相对于当前文件所在目录的位置。它不包含协议或域名，因此在同一网站内部链接时更简短、更灵活。下面是一个示例，展示如何从位于同一文件夹中的 contact.html 页面链接到 about.html 页面：
<p> | |
Read more on the | |
<a href="about.html">About Page</a> | |
</p> |
# 链接状态
:link ：这是默认状态。该状态表示用户尚未访问、点击或与之交互的链接。你可以把此状态视为为页面上所有链接提供基础样式。其他状态都在此基础上扩展。:visited ：当用户已访问被链接到的页面时应用此状态。默认情况下，这会将链接变为紫色 —— 但你可以使用 CSS 为用户提供不同的视觉提示。:hover ：当用户将光标悬停在链接上时应用此状态。此状态有助于为链接提供额外的注意力，以确保用户确实打算点击它。:focus ：当链接获得焦点时应用此状态。:active ：此状态适用于正在被用户激活的链接。通常指在大多数情况下通过主鼠标按钮（左键）点击该链接来激活。
