【早年HTML笔记】

标识符 id 和分组 class

<div。></div。>:共享一组 CSS 样式的 HTML 元素进行分组时

当您想要将一组样式应用于许多元素时，最好使用类class;否则使用id="".

ID：HTML 元素的唯一元素标识符。每个 HTML 文档的 ID 名称只能使用一次。

Class：类用于对样式和行为 的元素进行分组。与 ID 不同，您可以在整个 HTML 文档中重复使用相同的类名。

html 复制代码

<h1 id="title">Movie Review Page</h1>

<div class="box red-box"></div>
<div class="box blue-box"></div>

特殊字符和链接

HTML 实体：HTML 实体或字符引用是一组字符，用于表示 HTML 中的保留字符。

以&开头；结尾

html 复制代码

<img />=&lt;img /&gt;
// 命名+十进制+十六进制

不鼓励将所有 JavaScript 放在 HTML 文档中的原因是关注点分离。关注点分离 是一种设计原则，其中将程序分成不同的部分，并让每个部分解决单独的问题。

script 元素：此元素用于嵌入可执行代码。

html 复制代码

<body>
  <script>
    alert("Welcome to freeCodeCamp"); <!--弹出警告-->
  </script>
</body>

虽然从技术上讲，您可以在标签中编写所有 JavaScript 代码，但最佳实践是链接到外部 JavaScript 文件。

html 复制代码

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

搜索引擎优化（描述）和社交分享

元描述是什么？是怎么影响搜索引擎优化的？

改善网站搜索引擎优化的一种方法是使用该元素为网页提供简短描述。

html 复制代码

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

描述在网页本身上不可见 ，可以找到页面描述的一个地方是在搜索引擎结果 页面片段中。尽管描述不会直接影响网站在搜索引擎上的排名，但拥有强有力的描述可能会为您的网站带来更多流量。

开放图标签的作用是什么，它们如何影响 SEO？

开放图协议使您能够控制网站内容在各种社交媒体平台（例如 Facebook、LinkedIn 等）上的显示方式。

html 复制代码

//1.title，
<meta content="freeCodeCamp.org" property="og:title" />
//对于属性property，您需要指定它是og:title。该属性content是您编写要为社交媒体网站显示的标题的地方。

// 2. type
<meta property="og:type" content="website" />
//type该属性用于表示在社交媒体上共享的内容类型。此内容的示例包括文章、网站、视频或音乐。

//3. image
<meta
  content="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
  property="og:image"
/>
//在此示例中，开放的图形图像指向 freeCodeCamp 徽标。

//4.url
<meta property="og:url" content="https://www.freecodecamp.org" />

多媒体集成

HTML 音频和视频元素

要在网页上包含音频内容，您可以使用属性指向音频文件位置的元素

html 复制代码

<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3"></audio>

//属性controls:能在页面上看到音频播放器
<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" controls></audio>

//属性loop:有循环的效果，使音频连续重播。
<audio
  src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"
  loop
  controls
></audio>

//属性muted：当元素中存在时，此布尔属性将以静音状态启动音频。
<audio
  src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"
  loop
  controls
  muted
></audio>

当谈到音频文件类型时，为了适配哪些浏览器支持哪种类型存在差异，您可以使用元素内的元素，浏览器将选择它理解的第一个源。

html 复制代码

//浏览器将首先从 ogg 类型开始，如果它无法播放音频，那么它将向下移动到列表中的下一个类型。
<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

视频也是同理：

html 复制代码

//使用 width属性 来缩小视频并更好地适应预览窗口
<video
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  loop
  controls
  muted
  width="400"
></video>

//属性poster：如果您想在下载视频时显示图像，可以使用该属性。
<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="400"
></video>

试题部分get source用法

html 复制代码

    <section>
      <h2>What is the map method and how does it work</h2>
      <video controls width="640">
        <source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="video/mp4">
      </video>
    </section>
    <section>
      <h2>Sailing Away</h2>
      <audio
      src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3"
      controls
      loop>
      </audio>
    </section>

媒体元素和优化

优化媒体资产的常见方法有哪些？

在网站开发中，要让图像的实际物理尺寸（像素分辨率）与网页样式中设置的显示尺寸保持一致，避免用户下载不必要的大文件，从而提升网页加载速度和用户体验。
接下来要考虑的是您的文件格式。两种最常见的文件格式是 PNG 和 JPG，但它们不再是提供图像的最理想格式。除非您需要支持旧版浏览器，否则您应该考虑使用更优化的格式，例如 WEBP 或 AVIF。
最后，您可以对图像运行压缩算法 。压缩算法用于减小文件或数据的大小。有 pngcrush 等选项可以在本地压缩图像，或者您可以使用在线压缩工具。但是，值得注意的是，特定的文件格式（例如 JPG）并非无损的。无损是指可以从压缩数据中完美重建原始数据。如果您尝试压缩 JPG 图像，将导致质量下降。在为网页选择图像时，您应该牢记所有这些事项。

图像许可证有哪些不同类型，它们如何工作？

图像被视为知识产权，这意味着它们受版权法规的保护，通常属于创作者。

什么是 SVG，什么时候应该使用它们？

图像的工作原理
PNG 和 JPG 等常见图像格式被归类为光栅格式 。这本质上意味着它们是基于像素的，数据跟踪每个像素中的颜色值 。
缺点：它们不能很好地升级。如果您曾经尝试过将 PNG 放大，您可能已经看到它变得像素化或模糊。
SVG
① SVG 是一种不同类型的图像。SVG 代表可缩放的矢量图形 ，这真正的意思是矢量图形（如 SVG）可以缩放到任何大小而不会影响质量。
② SVG 特别具有以 XML 形式存储 数据的额外好处，这意味着您可以直接在代码中 将它们用作带有元素的原始 HTML。这也意味着您可以以编程方式更改图像的颜色。

html 复制代码

<!--viewBox属性:控制图像的可见量。前两个数字设置图像的中心,宽度后跟高度。-->
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<!-- 创建圆圈;fill属性表示填色-->
  <circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
  <circle cx="35" cy="40" r="5" fill="black" />
  <circle cx="65" cy="40" r="5" fill="black" />
  <!-- 创建曲线-->
  <path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>

什么是替换元素，有哪些示例？

替换元素是其内容由外部资源 而不是 CSS 本身决定的元素。CSS（或级联样式表）用于向网页添加样式。替换元素的常见示例包括图像、iframe 和视频元素。

替换元素就是 "内容靠外部资源撑起来，CSS 只能改外观布局，改不了核心内容" 的一类 HTML 元素。

html 复制代码

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

//使用该元素的其他常见示例是 将地图嵌入到页面上。下面是嵌入地图的示例。
<iframe
  title="Map of the Royal Observatory, Greenwich, London"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

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

allow属性：用于授予 iframe> 中嵌入内容的额外权限，控制其能否使用敏感功能（传感器、自动播放、剪贴板等）

accelerometer 权限允许 iframe> 中嵌入的内容访问设备的运动传感器（如加速度计），从而检测设备的倾斜、旋转、运动状态（例如用于游戏、AR 应用等场景）。

autoplay 权限允许 iframe> 中的视频（或音频）自动开始播放（默认情况下，浏览器为了用户体验，可能会禁止自动播放，需要显式授权）。

clipboard-write 权限允许 iframe> 中的内容将数据写入用户的剪贴板（例如实现 "一键复制" 功能，需要授权才能操作用户剪贴板）。

encrypted-media → 播放加密媒体；

gyroscope → 访问陀螺仪传感器；

web-share → 使用网页分享功能。

html 复制代码

    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/I0_951_MPE0"
      allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    >

    </iframe>

allowfullscreen 属性：是 HTML 中用于控制元素是否允许全屏显示的属性。

如何使用 iframe （inline frame）元素将视频嵌入到您的页面上？

如果想在 iframe> 元素中直接嵌入 HTML 代码（而非通过 src 加载外部网页），需要使用 srcdoc 属性，而不是 src 属性。虽然通常用 src 属性加载外部网页。

html 复制代码

<!-- 加载外部 iframe 通过 src 加载外部页面 -->
<iframe src="https://example.com"></iframe>

<!-- 用 srcdoc 直接写 HTML 内容，无需外部链接 -->
<iframe srcdoc="<h1>这是嵌入的内容</h1><p>直接写在 srcdoc 里的 HTML</p>"></iframe>

这几个属性是 iframe> 的常用配置：

src 决定嵌入的内容来源 ；

width 和 height 控制显示大小 ；

allowfullscreen 支持全屏交互 ；

title 提升无障碍访问体验。

锚元素中target属性

有哪些不同的链接状态，为什么它们很重要？

第一种是默认状态，即 :link。此状态表示用户尚未访问、单击或交互的链接。您可以将此状态视为为页面上的所有链接提供基本样式。其他州则在此基础上建立。
第二种状态是 :visited，当用户已经访问了要链接的页面时，它适用。默认情况下，这会将链接变成紫色，这有助于让某人知道他们已经阅读了您的部分文档。
第三种状态是 :hover。当用户将光标悬停在链接上时，此状态适用。此状态有助于对链接提供额外的关注，以确保用户实际打算单击它。将鼠标悬停在链接上，您将看到颜色变为红色。
然后我们有 :focus，当我们关注链接时，此状态适用。单击预览窗口中空格的任何部分，然后按键盘上的 tab。您应该会看到链接被聚焦，并变为绿色。
最后，我们有 :active。此状态适用于用户正在激活的链接。这通常意味着在大多数情况下，通过左键单击鼠标主按钮单击链接。此状态有助于向用户展示他们单击的元素是交互式的。单击链接，您应该会看到链接变为黑色。这发生得很快，因此您可能需要单击几次才能看到颜色变化。【点击的瞬间】

总结

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>

< header>：表示页面的头部区域，通常包含导航、logo 等。

< nav>：专门用于定义导航栏，里面的 < a> 标签是具体的导航链接。现有链接：Home（首页）、About（关于我们）、Contact（联系我们）。

注释 <! --Add the products link here--> 是明确的提示：在这里插入 "Products" 链接。

html 复制代码

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <!--Add the products link here-->

    <a href="#">Contact</a>
  </nav>
</header>

什么时候应该在惯用文本元素上使用强调元素？

open 标记中的 "lang" 属性用于指定内容的语言。在这种情况下，语言将是法语。< i>该元素不指示文本是否重要 ，它仅表明它与周围 的文本在某种程度上不同。

html 复制代码

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

如果您确实需要强调文本的重要性，您可以使用称为强调元素 < em> 的类似语义元素。

html 复制代码

<p>
  Never give up on <em>your</em> dreams.
</p>

什么时候应该在引起注意元素上使用强元素？

"引起注意"元素通常用于突出显示摘要中的关键字或评论中的产品名称,使用< b>

html 复制代码

<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>

如果需要强调文本的重要性，则应使用元素 strong 而不是元素 b 。

html 复制代码

<p>
  <strong>Warning:</strong> This product may cause allergic reactions.
</p>

什么是描述列表，何时应该使用它们？

HTML 描述列表（用于展示 "术语 - 解释" 对应关系）需要三个标签配合使用 ------< dl>（列表容器）、< dt>（术语）、< dd>（术语的解释 / 详情）

html 复制代码

<dl> <!-- 总容器：整个描述列表 -->
  <dt>HTML</dt> <!-- 术语1：要解释的词 -->
  <dd>超文本标记语言</dd> <!-- 术语1的解释 -->
  
  <dt>CSS</dt> <!-- 术语2：要解释的词 -->
  <dd>级联样式表</dd> <!-- 术语2的解释 -->
</dl>

1.块引用元素 < blockquote>

< blockquote> 元素用于表示较长的、独立的 引用内容，通常是段落级别 的引用。浏览器通常会将块引用内容 缩进显示。

html 复制代码

// cite属性：用于指定引用来源的 URL，但不会在页面上显示。
<blockquote cite="https://example.com/source">
  这是从其他来源引用的较长文本内容。
</blockquote>

当引用内容包含多个段落时，可以将多个 < p> 元素包含在同一个 < blockquote> 中：

html 复制代码

<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
  <p>构建你的项目。向你的朋友展示。为你的朋友构建项目。</p>
  <p>建立你的人脉网络。帮助你在旅途中遇到的人。善有善报。你会得到你应得的。</p>
  <p>现在开始还不算太晚。人生很长。</p>
  <p>几年后回顾这一刻，你会庆幸自己采取了行动。</p>
</blockquote>

< cite> 元素
与 cite 属性的区别是：< cite> 元素用于在页面上可见地标注 引用来源，而 cite 属性只是幕后提供信息。

html 复制代码

<div>
  <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    你能想象成为一名成功的开发者会是什么样子吗？构建人们依赖的软件系统？
  </blockquote>
  <p>---Quincy Larson, <cite>《如何学习编程并获得开发者工作》[完整书籍]</cite></p>
</div>

内联引用元素
< q > 元素用于简短的、内联的 引用，作为现有段落的一部分。当您使用此元素时，大多数现代浏览器会自动在内联引号周围添加引号。

html 复制代码

<p>
  正如 Quincy Larson 所说，
  <q cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    动力就是一切。
  </q>
</p>

如何在 HTML 中显示缩写？

缩写是单词或短语的简写形式，用于更简洁地表达信息。常见的缩写类型包括：

首字母缩略词：由短语中每个单词的首字母组成，通常作为一个单词发音
例如：GUI (Graphical User Interface) - 发音为 "gooey"
例如：NASA (National Aeronautics and Space Administration) - 发音为 "nasa"

首字母缩写：由短语中每个单词的首字母组成，但按字母逐个发音
例如：HTML (HyperText Markup Language) - 发音为 "H-T-M-L"
例如：CSS (Cascading Style Sheets) - 发音为 "C-S-S"

html 复制代码

<p><abbr>HTML</abbr> 是 Web 的基础。</p>

// title属性，鼠标悬浮在上面能看到 全称
<p><abbr title="HyperText Markup Language">HTML</abbr> 是 Web 的基础。</p>

如何在 HTML 中显示地址？

< address> 是一个语义化 HTML 元素，专门用于表示网页中某个部分的联系信息。

html 复制代码

<address>
  <h2>公司名称</h2>
  <p>
    1234 榆树街<br>
    斯普林菲尔德, IL 62701<br>
    美国
  </p>
  <p>电话: <a href="tel:+15555555555">+1 (555) 555-5555</a></p>
  <p>邮箱: <a href="mailto:contact@company.com">contact@company.com</a></p>
</address>

地址格式化 - < br> 元素
在地址中使用 **< br>（换行符）**来正确格式化多行地址：

html 复制代码

<p>
  1234 榆树街<br>
  斯普林菲尔德, IL 62701<br>
  美国
</p>

电话链接 - tel: 协议
在移动设备上点击可以直接拨打电话，格式：tel:+国家代码电话号码

html 复制代码

<a href="tel:+15555555555">+1 (555) 555-5555</a>

邮箱链接 - mailto: 协议
点击链接会打开用户默认的邮件客户端，自动填写收件人地址，可以添加主题和正文

html 复制代码

<a href="mailto:contact@company.com">contact@company.com</a>

如何在 HTML 中显示时间和日期？----time元素

html 复制代码

//datetime属性：用于将日期和时间 转换为机器可读 的格式。
<p>The reservations are for <time datetime="20:00">20:00 </time></p>

// 该属性的值采用 ISO 8601 格式。ISO 8601 是表示日期和时间的国际标准。
// 值中的大写字母 T 是日期和时间之间的分隔符。
<p>
  The graduation will be on <time datetime="2024-06-15T15:00">June 15</time>
</p>

上标与下标

html 复制代码

// 上标
<p>2<sup>2</sup> (2 squared) is 4.</p>

// 下标
<p>CO<sub>2</sub></p>

在 HTML 中表示计算机代码？

< pre>：专注于保持文本的格式和布局

< code>：专注于表示代码内容的语义

html 复制代码

// 适用于表示 单行代码
<p>
  To set the text color to blue in CSS, use the following code:
  <code>color: blue;</code>
</p>

// 如果要表示多行代码，则需要将元素放置在预先格式化的文本元素<pre>中
<pre>
  <code>
    body {
      color: red;
    }
  </code>
</pre>

< pre> 是 "preformatted"（预格式化）的缩写，它是一个 HTML 元素，用于显示预先格式化好的文本。

html 复制代码

<pre>
        静夜思
        李白
        
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</pre>

HTML 文本注释元素详解

< u> 未阐明的注释元素

html 复制代码

<!-- 错误：仅用于样式 -->
<p>这是 <u>重要</u> 内容</p>

<!-- 正确：表示非文本注释 -->
<p>这个中文名字 <u>李明</u> 的拼音是 Li Ming</p>

< s > 删除线元素
< s> 元素表示文本不再准确或不再相关 ，但并非被删除的内容。

html 复制代码

<p><s>原价：¥299</s> 现价：¥199</p>

<p><s>会议将于下午2点开始</s></p>
<p>会议时间已改为下午3点</p>

<p><s>库存：50件</s> 已售罄</p>

< ruby> 注音元素
< ruby> 元素用于显示东亚字符的发音或注释，通常出现在字符的上方或下方。

< ruby>：注音容器

< rt>：注音文本（ruby text）

< rp>：后备括号（ruby parentheses）

html 复制代码

<ruby>
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mr. Whiskers' Blog</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <header>
      <h1>Welcome to Mr. Whiskers' Blog Page!</h1>
      <figure>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat in the garden"
        />
        <figcaption>Mr. Whiskers in the Garden</figcaption>
      </figure>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About</h2>
        <p>
          Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
        </p>
        <p>
          His playful nature and boundless energy keeps me on my toes. I love him so much.
        </p>
      </section>
      <section id="posts">
        <h2>Posts</h2>

        <article>
          <h3>Mr. Whiskers' First Day Home</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
        <article>
          <h3>Mr. Whiskers' First Bath</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
        <article>
          <h3>Mr. Whiskers' First Birthday Party</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
      </section>
    </main>
    <footer>
        <section id="contact">
            <h2>Contact</h2>
            <address>
                <p>Phone: <a href="tel:5555555555">555-555-5555</a></p>
                <p>Email: fake@email.com</p>
            </address>
        </section>
    </footer>

【早年HTML笔记】

标识符 id 和分组 class

特殊字符 和 链接

script 元素：此元素用于嵌入可执行代码。

搜索引擎优化（描述）和社交分享

元描述是什么？是怎么影响搜索引擎优化的？

开放图标签的作用是什么，它们如何影响 SEO？

多媒体集成

HTML 音频和视频元素

媒体元素和优化

优化媒体资产的常见方法有哪些？

图像许可证有哪些不同类型，它们如何工作？

什么是 SVG，什么时候应该使用它们？

什么是替换元素，有哪些示例？

如何使用 iframe （inline frame）元素将视频嵌入到您的页面上？

锚元素中target属性

有哪些不同的链接状态，为什么它们很重要？

总结

什么时候应该在 惯用文本元素 上使用强调元素？

什么时候应该在 引起注意元素 上使用强元素？

什么是描述列表，何时应该使用它们？

如何在 HTML 中显示缩写？

如何在 HTML 中显示地址？

如何在 HTML 中显示时间和日期？----time元素

上标与下标

在 HTML 中表示计算机代码？

HTML 文本注释元素详解

特殊字符和链接

什么时候应该在惯用文本元素上使用强调元素？

什么时候应该在引起注意元素上使用强元素？