HTML5

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)，也就是链接
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

VSCode自动完成HTML骨架：英文输入状态下按 !+Tab

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>

HTML5标签&元素(功能排序)

☯基础

1. <!DOCTYPE html>

这是文档类型声明，告知浏览器该文档使用的是 HTML5 标准。它处于 HTML 文档的开头位置，帮助浏览器正确解析和渲染页面。

2. <html lang='en'>

  • <html> 标签是 HTML 文档的根标签，所有的 HTML 内容都要包含在这个标签内。
  • lang='en' 是 html 标签的一个属性，表明该文档使用的语言是英语（en 代表英语）。这对搜索引擎和屏幕阅读器等辅助设备有帮助，方便它们识别和处理页面内容。

3. 包含文档的元数据/信息 <head> 标签，用于存放文档的元数据，这些数据不会直接显示在页面上，但对页面的展示、搜索引擎优化、浏览器兼容性等方面起着重要作用。

主要作用

  • 提供元数据：能够包含像字符编码、页面描述、关键词等元数据，以此辅助浏览器和搜索引擎正确解析和索引页面。
  • 引入外部资源：可用于引入外部的 CSS（层叠样式表）文件、JavaScript 文件、字体文件等，进而对页面的样式和功能进行定义。
  • 设置页面标题：能通过 <title> 标签设置页面的标题，该标题会显示在浏览器的标题栏或者标签页上。

代码解释

  • <meta charset="UTF-8">：此标签设定了文档的字符编码为 UTF - 8。UTF - 8 是一种广泛使用的字符编码，能够支持世界上大部分的字符集，确保页面中的文本能正确显示。
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">：这个标签是针对 Internet Explorer 浏览器的，告诉 IE 浏览器使用最新的渲染引擎来渲染页面，以保证页面在 IE 浏览器中的兼容性和显示效果。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：该标签用于优化页面在移动设备上的显示效果。width=device-width 表示页面的宽度将根据设备的屏幕宽度进行调整；initial-scale=1.0 意味着页面初始的缩放比例为 1.0，即不进行缩放。
  • <title>Document</title>：<title> 标签定义了页面的标题，这个标题会显示在浏览器的标签栏或者窗口标题栏上，同时也会被搜索引擎抓取，对页面的 SEO 有一定影响。

常见元素

<title>：定义页面的标题。

<meta>：提供关于 HTML 文档的元数据，像字符编码、页面描述、关键词等。

<link>：引入外部的 CSS 文件。

<script>：引入外部的 JavaScript 文件或者嵌入内联脚本。

<head> 标签在 HTML 文档里起到了为页面提供必要信息以及引入外部资源的作用，对于页面的正确显示和搜索引擎优化意义重大。

4. <body> 标签

<body> 标签用于包含页面上所有可见的内容，像文本、图片、链接、表单等。在这段代码里，<body> 标签为空，意味着页面暂时没有实际的可见内容。

5. </html>

这是 <html> 标签的结束标签，标志着 HTML 文档的结束。
注：代码框里只保留了body标签里的代码(除包含CSS样式的head标签)

6. 注释 <!--...--> 标签用于在源代码中插入注释。注释不会在浏览器中显示。

<!-- 这是一条注释。注释不会在浏览器中显示。 -->

<p>这是一个段落。</p>
7.标题是通过 <h1> - <h6> 等标签进行定义的。 
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

8.段落是通过 <p> 标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

9.单行换行<br>标签，用于在文档中强制进行换行。它是一个自闭合标签，不需要结束标签。

<p>这是第一行。<br>这是第二行。</p>
浏览器会将<br>标签之前的内容显示在一行，然后在<br>标签之后进行换行，将后续内容显示在下一行。
<br>标签常用于诗歌、地址、电话号码等需要按行显示的文本内容中，以确保文本在页面上按照预期的格式进行排版。
10.水平分割线<hr>标签(horizontal rule)水平规则的意思。主要用途是在网页上创建一条水平分割线，以此来分隔不同的内容板块，让页面结构更加清晰，增强可读性。
    <p>这是页面顶部的内容。</p>
    <hr>
    <p>这是页面中部的内容。</p>
    <hr>
    <p>这是页面底部的内容。</p>

在上述代码中，<hr> 标签将页面内容划分成了三个部分，在页面上会呈现出两条水平分割线。

使用 CSS 来定制 <hr> 标签的样式：

<head>
    <meta charset="UTF-8">
    <style>
        hr {
            border: none;
            height: 2px;
            background-color: #ccc;
            width: 80%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <p>这是一段文本。</p>
    <hr>
    <p>这是另一段文本。</p>
</body>

在这个例子里，通过 CSS 把分割线的边框去掉，设置了高度、背景颜色、宽度和外边距，使分割线看起来更美观。

☯格式化

11.HTML4首字母缩写 <acronym> 标签，用于表示首字母缩写词或者首字母缩略词的标签。借助这个标签，你可以把一段文本标记为首字母缩写词，并且通过 title 属性提供其完整的展开形式。当用户将鼠标悬停在该缩写词上时，完整的展开形式就会显示出来。HTML5已经不推荐使用它了

<p>这里有一个缩写词 <acronym title="World Wide Web">WWW</acronym>。</p>

在这个例子中，WWW 被标记为缩写词，它完整的展开形式是 “World Wide Web”。当用户把鼠标悬停在 WWW 上时，“World Wide Web” 就会显示出来。

12.HTML5首字母缩写 <abbr> 标签，同 <acronym>  标签

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

13.详细信息 <address> 标签，用于呈现文档或文章的联系信息。这些信息可以包含作者姓名、电子邮箱地址、物理地址、电话号码等。

主要特点

  • 语义化：<address> 标签为内容赋予语义，表明这部分内容是联系信息，有助于搜索引擎和屏幕阅读器理解网页结构。
  • 样式：浏览器默认会将 <address> 标签内的文本以斜体显示，不过你可以通过 CSS 来修改样式。
  • 范围：通常来说，<address> 标签应放置在 <article> 或者 <body> 标签内部，用来表示文章作者或者整个文档的联系信息。
<article>
        <h2>Article Title</h2>
        <p>Article content goes here...</p>
        <address>
            Written by <a href="mailto:author@example.com">Author Name</a><br>
            Visit us at:<br>
            Example.com<br>
            123 Street Name<br>
            City, State ZIP Code<br>
            Country
        </address>
    </article>

14.字体加粗 <b> 标签，是用来把文本设置为粗体显示的形式呈现，以此来突出显示某些内容。不过，它并不具备额外的语义，仅仅是改变文本的外观。

  <p>这是一段普通文本，<b>这里的文本会以粗体显示</b>。</p>

在这个示例中，<b> 标签内的文本 “这里的文本会以粗体显示” 会在浏览器里以粗体形式呈现。

15.字体加粗<big> 标签，是让文本显示得比周围文本更大。不过，它属于HTML 4.01中的呈现性标签，(HTML5已废弃)

<p>这是普通大小的文本。<big>这是使用 big 标签变大的文本。</big></p>

不推荐使用的原因

  • 缺乏语义：<big> 标签仅关注文本的显示大小，没有传达任何关于文本内容的语义信息，这不利于搜索引擎理解页面内容以及屏幕阅读器为残障人士提供准确的信息。
  • 样式与结构分离原则：现代 Web 开发倡导将样式和结构分离，<big> 标签将样式（字体大小）直接嵌入到 HTML 结构中，使得代码的可维护性和可扩展性变差。

替代方案

在现代Web开发中，建议使用CSS来控制文本的字体大小，这样能更好地遵循样式与结构分离的原则。
<style>
        .bigger-text {
            font-size: larger;
        }
    </style>
</head>

<body>
    <p>这是普通大小的文本。<span class="bigger-text">这是使用 CSS 变大的文本。</span></p>
</body>

在这个示例中，通过定义一个名为 bigger-text 的CSS类，将其中的文本字体大小设置为 larger，从而实现了与 <big> 标签类似的效果。

16.双向隔离 <bdi> Bidirectional Isolate）标签，是HTML5引入的一个新标签，它的主要作用是在文本中创建一个隔离的区域，使得其中的文本方向（从左到右或者从右到左）能够独立于周围的文本进行设置。这在处理包含不同书写方向文本的多语言网页时非常有用。

使用场景

  • 多语言内容展示：当网页中同时存在从左到右书写（如英语、中文）和从右到左书写（如阿拉伯语、希伯来语）的文本时，使用 <bdi> 标签可以确保每种语言的文本方向正确显示，避免方向冲突。
  • 动态内容显示：在显示用户输入的动态内容时，由于用户输入的语言和书写方向可能不同，使用 <bdi> 标签可以防止用户输入的文本影响周围文本的布局。
  <p>以下是不同语言的姓名显示：</p>
    <ul>
        <li>英语姓名：<bdi>John Doe</bdi></li>
        <li>阿拉伯语姓名：<bdi>محمد علي</bdi></li>
    </ul>

在这个例子中，<bdi> 标签分别包裹了英语姓名和阿拉伯语姓名。由于英语是从左到右书写，阿拉伯语是从右到左书写，<bdi> 标签会确保每种语言的姓名按照其正确的书写方向显示，而不会受到周围文本方向的影响。

注意事项

  • <bdi> 标签本身并不改变文本的方向，它只是创建一个隔离区域，让浏览器根据文本内容自动确定其方向。
  • 在使用 <bdi> 标签时，要确保文本内容包含

    原理

    在 HTML 里，文本方向通常由文档的语言设置或者内容自身的特性决定。对于从左到右书写的语言（像英语、中文），文本默认从左向右显示；而对于从右到左书写的语言（如阿拉伯语、希伯来语），文本默认从右向左显示。<bdo> 标签能打破这种默认规则，让你手动指定文本的显示方向。

    使用场景

    • 特定文本方向需求：当你有部分文本的显示方向与文档整体方向不一致时，可借助 <bdo> 标签实现特定的显示效果。
    • 排版设计：在一些特殊的排版设计中，可能需要强制文本按特定方向显示，此时就可以使用该标签。
    足够的信息，以便浏览器正确判断其书写方向。如果文本内容较少，可能需要使用 dir 属性来明确指定方向。例如：<bdi dir="rtl">محمد علي</bdi> ，其中 rtl 表示从右到左。

17.双向覆盖 <bdo> (Bidirectional Override)标签，它的作用是覆盖当前文本的默认文本方向，强制文本按照指定的方向进行显示。

原理

在 HTML 里，文本方向通常由文档的语言设置或者内容自身的特性决定。对于从左到右书写的语言（像英语、中文），文本默认从左向右显示；而对于从右到左书写的语言（如阿拉伯语、希伯来语），文本默认从右向左显示。<bdo> 标签能打破这种默认规则，让你手动指定文本的显示方向。

使用场景

  • 特定文本方向需求：当你有部分文本的显示方向与文档整体方向不一致时，可借助 <bdo> 标签实现特定的显示效果。
  • 排版设计：在一些特殊的排版设计中，可能需要强制文本按特定方向显示，此时就可以使用该标签。

<bdo> 标签有一个必需属性 dir，其值可以是 ltr（从左到右）或 rtl（从右到左）。

<!-- 正常从左到右显示的文本 -->
    <p>这是正常从左到右显示的文本。</p>
    <!-- 使用 bdo 标签强制文本从右到左显示 -->
    <p><bdo dir="rtl">这是被强制从右到左显示的文本。</bdo></p>
    <!-- 对于英文单词，从右到左显示会改变字母顺序 -->
    <p><bdo dir="rtl">Hello</bdo></p>

在这个例子中，第一个 <p> 标签内的文本按默认的从左到右方向显示；第二个 <p> 标签里，<bdo> 标签的 dir 属性设为 rtl，使得文本从右到左显示；第三个 <p> 标签展示了英文单词在从右到左显示时字母顺序的改变。

注意事项

  • 合理使用 <bdo> 标签，因为过度使用可能会使文本的可读性变差。
  • 要确保 dir 属性的值设置正确，否则可能无法达到预期的显示效果

18.块引用 <blockquote> 标签，用于表示一段从其他来源引用的内容，通常会在视觉上与周围的文本区分开来，以表明其引用的性质。

作用和特点

  • 语义化表示引用：它明确地向浏览器和搜索引擎传达了其中的内容是引用自其他地方，有助于提高文档的语义准确性和可访问性。
  • 默认样式：浏览器通常会为 <blockquote> 标签应用一些默认的样式，如左右两侧有一定的缩进，以使其在页面上更明显地与普通文本区分开。不过，这些样式可以通过 CSS 进行自定义修改。

使用场景

  • 引用文章或书籍内容：在撰写博客、文章或文档时，如果需要引用其他文章、书籍中的段落，可以使用 <blockquote> 标签。
  • 引用名人名言：当要展示名人的话语或具有权威性的言论时，适合用 <blockquote> 标签来突出显示。
  • 引用法律条文或政策规定：在相关的法律文档、政策解读页面中，引用具体的法律条文或政策内容时可使用该标签。
<p>以下是一段来自马丁·路德·金《我有一个梦想》的演讲内容：</p>
    <blockquote>
        I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self - evident, that all men are created equal."
    </blockquote>
    <p>这段话激励着无数人追求平等和自由。</p>

在这个例子中，<blockquote> 标签包裹了马丁・路德・金演讲中的一段话，使其在页面上清晰地呈现为引用内容，与周围的文本有明显的区分。

相关属性

  • cite：该属性用于指定引用内容的来源地址或出处信息。虽然它不会直接在页面上显示，但对于搜索引擎和屏幕阅读器等工具来说，能够提供额外的元数据，有助于更好地理解引用内容的背景和来源。例如：<blockquote cite="https://www.example.com/speech.html">...</blockquote>。

19.HTML4居中 <center> 标签，用于将内容居中显示的标签。它被广泛运用，能够让文本、图像、表格等元素在水平方向上处于父元素的中间位置。(HTML5已废弃)

<center>
        <h1>这是居中的标题</h1>
        <p>这是居中的段落文本。</p>
        <img src="https://picsum.photos/200" alt="示例图片">
    </center>

在这个例子中，标题、段落文本以及图片都会在页面中水平居中显示。

注意事项

不过，HTML 4.01 起 <center> 标签就已被弃用，HTML5 则完全不支持该标签。这主要是因为它将内容的显示样式（居中显示）和结构（HTML 标签）混在一起，违背了网页设计中结构与样式分离的原则。如今，若要实现内容居中显示，建议采用CSS来达成。CSS提供了更多的灵活性和精确控制，能让代码更具可维护性。
<head>
    <style>
        .centered {
            text-align: center;
        }

        .centered img {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="centered">
        <h1>这是居中的标题</h1>
        <p>这是居中的段落文本。</p>
        <img src="https://picsum.photos/200" alt="示例图片">
    </div>
</body>

在这个CSS示例中，text-align: center 使文本内容水平居中，而 display: block 和 margin: 0 auto 的组合让图片在水平方向上居中显示。

20.引用 <cite> 标签，定义创意作品的标题（例如书籍、诗歌、歌曲、电影、绘画、雕塑等）。通常以斜体呈现。

 <p>在 <cite>《哈姆雷特》</cite> 中，莎士比亚探讨了人性、道德和复仇等主题。</p>

语义含义

<cite> 标签具有明确的语义，它向浏览器、搜索引擎和屏幕阅读器等表明，标签内的内容是一个作品的引用。这有助于提升页面的可访问性和搜索引擎优化（SEO），因为搜索引擎能够更好地理解页面内容的结构和含义。

在引用作品时，通常可以结合 <a> 标签为作品名称添加链接，指向作品的相关页面，方便用户进一步了解。

<p>你可以阅读 <a href="https://example.com/book/hamlet"><cite>《哈姆雷特》</cite></a> 的在线版本。</p>

在这个示例中，<cite> 标签包裹的作品名称《哈姆雷特》被嵌套在 <a> 标签内，形成一个指向该作品在线版本的链接。

21.计算机代码 <code> 标签，是一个语义化标签，主要用于表示计算机代码片段。它向浏览器和搜索引擎传达该部分文本是代码内容，浏览器默认会将其内容以等宽字体显示，以此和普通文本区分开来。

使用场景

  1. 展示代码示例：当你在网页上展示编程语言代码，如 Python、JavaScript、HTML 等时，可以使用 <code> 标签。
  2. 命令行指令：显示命令行中的命令或脚本时，也适合使用该标签。
<p>下面是一个简单的 Python 代码示例：</p>
    <code>print("Hello, World!")</code>

在这个例子中，<code> 标签包裹的 print("Hello, World!") 会以等宽字体显示，表明这是一段代码。

结合其他标签

<code> 标签通常会和 <pre> 标签一起使用。<pre> 标签可以保留文本中的空格和换行符，适合展示多行代码。

<p>以下是一个多行的 JavaScript 代码示例：</p>
    <pre>
        <code>
function greet() {
    let message = "Hello, World!";
    console.log(message);
}
greet();
        </code>
    </pre>

在这个例子中，<pre> 标签确保代码的格式被正确保留，<code> 标签则表明这是代码内容。

注意事项

  • <code> 标签主要用于语义化，只是简单表明文本是代码，没有提供语法高亮等功能。若需要语法高亮，可以借助第三方库，像 Prism.js 或者 highlight.js。
  • 为了保证代码在不同浏览器和设备上的显示效果一致，通常会结合 CSS 来设置代码的样式。

22.删除线 <del> 标签，表示文档中已经被删除的文本内容。它会给被标记的文本添加删除线样式，以此向用户表明这些内容已被移除或不再有效。同时，<del> 标签还具有语义化的作用，能让浏览器、搜索引擎等更好地理解文档内容的变更情况。

使用场景

  • 文档修订：在撰写文章、报告等文档时，若对内容进行修改，可使用 <del> 标签标记删除的部分，这样能清晰展示修订的过程。
  • 价格对比：在电商网站中，展示商品价格时，若商品有原价和现价，可使用 <del> 标签标记原价，突出显示价格的变化。
 <!-- 文档修订示例 -->
    <p>这是最初的句子，<del>后面这部分内容被删除了</del>。</p>
    <!-- 价格对比示例 -->
    <p>该商品原价 <del>$100</del>，现价 $80。</p>

在上述例子中，第一个 <p> 标签里，<del> 标签标记了被删除的文本；第二个 <p> 标签里，<del> 标签标记了商品的原价，通过删除线样式突出了价格的调整。

相关属性

 

  • cite：该属性用于指定一个 URL，这个URL指向说明文本被删除原因的文档。虽然它不会直接在页面上显示，但能为搜索引擎和其他工具提供额外的元数据。例如：<del cite="https://example.com/revision-notes.html">这部分内容被删除</del>。
  • datetime：此属性用于指定文本被删除的日期和时间，格式需遵循 ISO 8601 标准。比如：<del datetime="2025-04-20T12:00:00">这部分内容于指定时间被删除</del> 。

23.文本斜体<dfn> 标签，（Definition 之意）用于标识术语的首次定义，为文档提供语义化信息，方便浏览器、搜索引擎以及屏幕阅读器等理解内容。

  <p><dfn title="超文本标记语言">HTML</dfn> 是构建网页的基础。</p>

24.文本斜体 <em> 标签，是强调文本内容。

语义含义

<em> 标签着重强调其包含的文本内容，和单纯视觉样式上的变化不同，它有明确的语义，即表明这部分文本比周围文本更为重要。在屏幕阅读器读取页面时，<em> 标签内的文本通常会以不同的语调或语气来突出强调，方便残障人士更好地理解内容。
<p>你 <em>必须</em> 按时完成这项任务。</p

在这个例子中，“必须” 一词被 <em> 标签包裹，强调了按时完成任务的必要性。在浏览器里，<em> 标签内的文本默认会以斜体显示。

25.字体设置 <font> 标签，用于设置文本的字体、大小和颜色等样式。(HTML5已废弃)

 <!-- 设置字体颜色为红色 -->
    <font color="red">这是红色字体的文本。</font>
    <br>
    <!-- 设置字体大小为 5 -->
    <font size="5">这是大小为 5 的字体文本。</font>
    <br>
    <!-- 设置字体为 Arial -->
    <font face="Arial">这是 Arial 字体的文本。</font>

在这个例子中，分别使用 color 属性设置字体颜色，size 属性设置字体大小，face 属性设置字体类型。

不推荐使用的原因

  • 违反结构与样式分离原则：<font> 标签将样式信息直接嵌入到 HTML 结构中，这使得代码的维护和修改变得困难。如果需要统一修改字体样式，就必须逐个修改所有 <font> 标签。
  • 缺乏灵活性：它提供的样式设置选项有限，无法满足现代网页设计多样化的需求。

替代方案

如今，建议使用 CSS 来控制文本的字体样式，因为 CSS 能更好地实现结构与样式的分离，并且提供了更丰富、灵活的样式设置选项。
<head>
    <style>
        /* 设置字体颜色为红色 */
        .red-text {
            color: red;
        }

        /* 设置字体大小为 24px（近似于原 size="5"） */
        .large-text {
            font-size: 24px;
        }

        /* 设置字体为 Arial */
        .arial-text {
            font-family: Arial;
        }
    </style>
</head>

<body>
    <p class="red-text">这是红色字体的文本。</p>
    <p class="large-text">这是大小为 24px 的字体文本。</p>
    <p class="arial-text">这是 Arial 字体的文本。</p>
</body>

在这个CSS示例中，通过定义不同的类名，并在HTML元素中引用这些类名，实现了与 <font> 标签相同的文本样式设置效果，同时使代码更易于维护和扩展。

26.倾斜字体 <i> 标签，最初是用来将文本以斜体形式显示，不过在 HTML5 中，它被赋予了新的语义，用于表示一段与正常文本在风格或语气上不同的文本，不一定局限于视觉上的斜体效果。

常见使用场景

  • 专业术语：在介绍专业领域知识时，标记专业术语，能突出其专业性。
<p>在天文学中，<i>黑洞</i>是一种引力极强的天体。</p>

  • 外来词汇：对于非母语的外来词汇。
<p>“<i>Bon appétit</i>” 是法语中祝人用餐愉快的表达。</p>

  • 思想、小说、电影等名称：标记书籍、电影、歌曲等作品的名称，起到强调和区分的作用。
<p>我最喜欢的小说是 <i>《百年孤独》</i>。</p>

  • 角色的话语：在戏剧、故事等情境里，用来表示角色的话语或内心独白。
<p><i>他轻声说道：“我一定会回来的。”</i></p>

结合 CSS 使用

    <style>
        i {
            color: blue;
            font-style: normal; 
        }
    </style>
</head>

<body>
    <p>这是一段包含 <i>特殊文本</i> 的段落。</p>
</body>

在这个例子中，通过CSS将 <i> 标签内的文本颜色设置为蓝色，同时取消了斜体样式。

27.插入新增 <ins> Inserted标签，它用于表明文档中新增的文本内容。与 <del> 标签（用于表示被删除的文本）相对应，<ins> 标签有助于清晰展示文档内容的更新和修改情况。

视觉呈现

通常情况下，浏览器会给 <ins> 标签内的文本添加下划线样式，以此和文档中的其他文本相区分，使用户能直观地识别出新增的内容。不过，这种默认样式可以通过 CSS 进行修改。

语义化作用

<ins> 标签具有语义化功能，它能向搜索引擎、屏幕阅读器等工具传达这部分文本是新插入的信息，有助于提高文档的可访问性和搜索引擎优化（SEO）效果。

使用场景

  • 文档修订：在编辑文章、报告、合同等文档时，使用 <ins> 标签标记新添加的内容，方便查看修订历史。
  • 版本更新说明：在软件更新日志、网页内容更新说明中，用 <ins> 标签展示新增加的功能或内容。
 <!-- 文档修订示例 -->
    <p>原句子是“今天天气不错”，修改后变为“今天<ins>阳光明媚，</ins>天气不错”。</p>

    <!-- 版本更新说明示例 -->
    <p>此版本<ins>新增了数据备份功能</ins>，提升了系统的安全性。</p>

相关属性

  • cite：该属性可指向一个解释文本插入原因的文档的 URL。虽然它不会直接在页面上显示，但能为搜索引擎和其他工具提供额外的信息。例如：<ins cite="https://example.com/reason-for-insertion">新增的文本</ins>
  • datetime：此属性以 ISO 8601 格式指定文本插入的日期和时间。例如：<ins datetime="2025-04-21T15:00:00">新增的文本</ins>

28.键盘输入内容 <kbd> 标签，属于语义化标签，其用途是表示用户通过键盘输入的内容，例如按键名称、快捷键组合等。浏览器一般会将 <kbd> 元素内的文本以等宽字体呈现，并且常常会应用特定的样式（像添加边框、改变背景颜色等），以此与普通文本区分开来。

使用场景

  • 技术文档：在撰写软件使用说明、编程教程这类技术文档时，可借助 <kbd> 元素清晰地表明需要用户按下的按键。
  • 网站帮助页面：网站的帮助页面中，若要指导用户进行操作，也能使用 <kbd> 元素。
<p>若要复制文本，可按下 <kbd>Ctrl</kbd> + <kbd>C</kbd>（在 Mac 系统中是 <kbd>Command</kbd> + <kbd>C</kbd>）。</p>
    <p>按 <kbd>Enter</kbd> 键来确认输入。</p>

在上述示例中，<kbd> 标签分别包裹了 Ctrl、C、Command、Enter 等按键名称，使这些按键信息更加突出，便于用户识别。

结合 CSS 自定义样式

<head>
    <style>
        kbd {
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px 5px;
            margin: 0 2px;
        }
    </style>
</head>

<body>
    <p>保存文件请按下 <kbd>Ctrl</kbd> + <kbd>S</kbd>。</p>
</body>

在这个例子里，CSS样式为 <kbd> 标签添加了背景色、边框、圆角以及内边距，让其在页面上更加醒目。

29.文本高亮 <mark> 标签，主要用于高亮显示文本，通常用来标记那些需要引起用户特别关注的内容。

<p>在这份文档中，<mark>重要信息</mark> 会被高亮显示。</p>

在上述代码里，“重要信息” 这几个字会在浏览器中以黄色背景显示，以此突出显示，吸引用户的注意力。

结合 CSS 自定义样式

<head>
<style>
        mark {
            background-color: lightgreen;
            color: black;
        }
    </style>
</head>

<body>
    <p>这里的 <mark>重点内容</mark> 采用了自定义的高亮样式。</p>
</body>

在这个示例中，通过 CSS 将 <mark> 标签的背景颜色设置为浅绿色，文本颜色设置为黑色，从而改变了默认的高亮显示效果。

30.范围标量仪表 <meter> 标签，表示一个已知范围的标量值，或者分数值。它可以将数据以可视化的形式呈现，通常表现为一个进度条或仪表盘，能让用户直观地了解数据在一定范围内的相对位置。

适用场景

  • 磁盘使用情况：显示磁盘的已用空间和总空间的比例。
  • 投票结果：展示各个选项在总投票数中的占比。
  • 考试成绩：呈现学生的考试分数在满分中的占比。
 <!-- 显示磁盘使用情况 -->
    <p>磁盘使用情况：</p>
    <meter value="2" min="0" max="5">40%</meter>

    <!-- 显示投票结果 -->
    <p>选项 A 的投票结果：</p>
    <meter value="0.75" min="0" max="1">75%</meter>

    <!-- 显示考试成绩 -->
    <p>考试成绩：</p>
    <meter value="80" min="0" max="100">80 分</meter>

属性说明

  • value：必需属性，用于指定当前的数值。
  • min：可选属性，定义范围的最小值，默认值为 0。
  • max：可选属性，定义范围的最大值，默认值为 1。
  • low：可选属性，定义低值区间的上限。
  • high：可选属性，定义高值区间的下限。
  • optimum：可选属性，定义最优值。浏览器会根据这个值来决定进度条的颜色，以表示当前值是处于好、中、差的哪个范围。
  • form：可选属性，规定 <meter> 元素所属的一个或多个表单。

样式定制

<meter> 标签的外观可以通过 CSS 进行定制。不同浏览器对 <meter> 标签的默认样式可能有所不同，因此在定制样式时需要考虑兼容性。

<head>
    <style>
        meter {
            width: 200px;
        }

        meter::-webkit-meter-bar {
            background: #eee;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
            border-radius: 3px;
        }

        meter::-webkit-meter-optimum-value {
            background: #86CC00;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <p>定制样式的磁盘使用情况：</p>
    <meter value="2" min="0" max="5">40%</meter>
</body>

在这个示例中，通过CSS对 <meter> 标签的外观进行了定制，包括宽度、背景颜色、阴影和圆角等。需要注意的是，不同浏览器可能需要使用不同的前缀来实现相同的效果。

31.格式化文本 <pre> 标签，用于定义预格式化的文本。其内部文本会按照原有的格式显示，像空格、换行等都会被保留，不会因为浏览器的默认格式设置而改变。

使用场景

  • 代码展示：在网页上呈现代码时，使用 <pre> 标签能保证代码的格式正确，包括缩进、换行等细节。
  • 诗歌或文本段落：对于有特定格式要求的诗歌、文本段落，使用 <pre> 标签可以保持其原有的排版样式。
 <p>以下是一段 Python 代码：</p>
    <pre>
def greet():
    print("Hello, World!")

greet()
    </pre>

在这个例子中，<pre> 标签包裹的 Python代码会按照原有的缩进和换行格式显示在页面上

结合其他标签

<pre> 标签常常和 <code> 标签一起使用，<code> 标签用于表明文本是代码内容，<pre> 标签则用于保留代码的格式。

<p>以下是一个简单的 JavaScript 函数：</p>
    <pre>
        <code>
function add(a, b) {
    return a + b;
}
        </code>
    </pre>

在这个例子中，<code> 标签表明文本是代码，<pre> 标签确保代码的格式被正确保留。

注意事项

  • <pre> 标签内的文本会按照原格式显示，若文本中有大量空格和换行，可能会使页面布局变得混乱，需要谨慎使用。
  • 为了保证代码在不同浏览器和设备上的显示效果一致，通常会结合CSS来设置 <pre> 标签的样式，例如设置字体、背景颜色等。

32.任务完成进度 <progress> 标签，用来展示任务的完成进度。它是一种可视化的组件，能够让用户直观地了解任务的进展状况。

<progress value="50" max="100"></progress>

在这个例子中，value 属性代表已经完成的任务量，max 属性代表任务的总量。因此，上述代码所展示的进度条就表示任务完成了 50%。

属性说明

  • value：该属性为必需项，它表示当前已经完成的任务量。此值必须介于 0 和 max 属性值之间。
  • max：这个属性也是必需项，它代表任务的总量。默认值为 1。
  • form：此属性可选，它规定了 <progress> 元素所属的一个或多个表单。
    <progress id="myProgress" value="0" max="100"></progress>
    <button onclick="updateProgress()">Start Progress</button>

    <script>
        function updateProgress() {
            let progressBar = document.getElementById('myProgress');
            let width = 0;
            let interval = setInterval(frame, 100);

            function frame() {
                if (width >= 100) {
                    clearInterval(interval);
                } else {
                    width++;
                    progressBar.value = width;
                }
            }
        }
    </script>

在这个示例中，点击 “Start Progress” 按钮，进度条就会开始动态更新，直至达到 100%。

33.内联引用&双引号 <q> 标签，用于标记简短的内联引用。它表明其中的内容是从其他来源引用而来的简短语句。浏览器通常会自动为 <q> 标签内的内容添加引号。

<p>莎士比亚曾说：<q>不如意的婚姻好比是座地狱，一辈子鸡争鹅斗，不得安生，相反的，选到一个称心如意的配偶，就能百年谐和，幸福无穷。</q></p>

在上述代码里，引用的莎士比亚的话被 <q> 标签包裹，浏览器会默认给其添加引号。

属性说明

  • cite：该属性是可选的，它用于指定引用内容的来源 URL。虽然浏览器不会对这个属性的值进行特别的显示处理，但它有助于搜索引擎和屏幕阅读器理解引用的出处。
<p>乔布斯曾说：<q cite="https://example.com/jobs-quote">活着就是为了改变世界，难道还有其他原因吗？</q></p>

与 <blockquote> 标签的区别

<q> 标签主要用于简短的内联引用，而 <blockquote> 标签用于较长的块级引用。<blockquote> 通常会使引用内容另起一段，并且浏览器可能会对其进行缩进显示。
<!-- 使用 <q> 标签的简短引用 -->
<p>孔子说：<q>三人行，必有我师焉。</q></p>

<!-- 使用 <blockquote> 标签的块级引用 -->
<blockquote>
  <p>故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</blockquote>

在这个例子中，孔子的话用 <q> 标签处理，而孟子的话用 <blockquote> 标签处理。

34.文字注音或注释 <rp> 标签，<rp> 标签通常和 <ruby>、<rt> 标签一起使用。<ruby> 标签包含要注释的基础文本，<rt> 标签包含注音或注释内容，而 <rp> 标签在不支持 <ruby> 元素的浏览器中，用来包裹括号，以此提供更好的回退显示。

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
  字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

在支持 <ruby> 元素的浏览器里，会正常显示基础文本和注音；而在不支持的浏览器中，会显示为 “漢 (かん) 字 (じ)” 。

35.文字注音或注释 <rt> 标签,用于配合 <ruby> 元素的重要标签，主要用于为东亚文字（如中文、日文、韩文等）添加注音或注释。<ruby> 元素创建了一个 ruby 注释容器，而 <rt> 标签则包含了具体的注音或注释内容。

<ruby>
  明日 <rt>あした</rt>
</ruby>

在这个例子中，<ruby> 标签将基础文本 “明日” 和对应的注音 “あした” 组合在一起。在支持 <ruby> 元素的浏览器中，“あした” 会显示在 “明日” 的上方，以提供发音提示。

结合多个字符使用

当需要为多个字符分别添加注音时，可以这样写：
<ruby>
  東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>

这里，<rp> 标签是为了在不支持 <ruby> 元素的浏览器中提供替代显示，当浏览器支持时，“とうきょう” 会正常显示在 “東京” 上方；不支持时，会显示类似 “東京 (とうきょう)” 的形式。

实际应用场景

在教育领域，特别是语言学习材料中，<rt> 标签非常有用。例如在学习日语、中文拼音等时，可以方便地为文字添加发音注释，帮助学习者正确发音。同时，在一些古籍或生僻字较多的文本中，也可以使用 <rt> 标签为读者提供读音和释义。

 36. 文字注音或注释 <ruby> 标签，用来展示东亚文字（像中文、日文、韩文）的注音或注释的功能标签。在东亚语言中，一些文字的发音可能比较复杂，或者有特殊的读法，这时就可以用 <ruby> 标签为这些文字添加注音或解释。

基本结构与用法

<ruby> 标签一般和 <rt>、<rp> 标签一起使用。<ruby> 包裹要注释的基础文本，<rt> 包含注音或注释内容，<rp> 在不支持 <ruby> 的浏览器中提供括号等替代显示。
<ruby>
  你 <rp>(</rp><rt>nǐ</rt><rp>)</rp>
  好 <rp>(</rp><rt>hǎo</rt><rp>)</rp>
</ruby>

在支持 <ruby> 的浏览器中，“nǐ” 会显示在 “你” 的上方，“hǎo” 显示在 “好” 的上方；在不支持的浏览器中，会显示为 “你 (nǐ) 好 (hǎo)”。

各标签作用

  • <ruby>：作为容器，把基础文本和对应的注音或注释关联起来。
  • <rt>：用来放置注音或注释的具体内容。
  • <rp>：在不支持 <ruby> 的浏览器里，包裹括号，保证文本信息能正常呈现。

应用场景

  • 语言学习：在语言教材、学习网站里，给汉字、日文假名、韩文谚文等添加注音，辅助学习者正确发音。
  • 古籍阅读：为古籍中的生僻字、多音字标注读音，方便读者理解。
  • 文化传播：在介绍东亚文化的网页中，对特定词汇添加注释，促进文化交流。

37.删除线 <s> 标签，用于表示内容已不再准确或不再相关，但不会影响文档的语义结构。简单来说，就是给文本加上删除线，以此表明该文本在当前语境下已失效或者被否定。

<p>这款手机原价 <s>$500</s>，现在只需 $300。</p>

在上述代码里，$500 被 <s> 标签包裹，在浏览器中显示时，$500 会带有删除线，用来表示这个价格已经不再适用，当前适用的价格是 $300。

样式设置

默认情况下，浏览器会给 <s> 标签内的文本添加删除线样式。如果需要自定义样式，可以借助CSS来实现。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom S Tag Style</title>
    <style>
        s {
            color: red;
            text-decoration: line-through wavy;
        }
    </style>
</head>

<body>
    <p>这个旧方案 <s>已经不可行</s>，我们需要新方案。</p>
</body>

在这个示例中，通过CSS把 <s> 标签内文本的颜色设置为红色，并且将删除线样式改为波浪线。

38.计算机输出 <samp> 标签，是一个语义化标签，用于表示计算机程序或系统产生的样本输出。也就是说，它用来展示程序运行后所返回的结果、系统提示信息等内容。浏览器通常会以等宽字体来显示 <samp> 标签内的文本，以此和普通文本区分开来。

使用场景

  • 技术文档：在编写软件使用手册、编程教程等技术文档时，可使用 <samp> 标签展示程序的输出结果，帮助读者更好地理解程序的运行效果。
  • 代码示例：在网页上展示代码示例时，使用 <samp> 标签显示代码运行后的预期输出，使读者能够清晰地看到代码的实际作用
<p>运行以下 Python 代码：</p>
    <pre>
        <code>
print("Hello, World!")
        </code>
    </pre>
    <p>程序的输出结果为：<samp>Hello, World!</samp></p>

在这个例子中，<samp> 标签包裹的 Hello, World! 表示程序运行后的输出结果，与代码部分形成对比，让读者能够清晰地看到代码的实际输出。

结合其他标签

<samp> 标签常与 <pre> 和 <code> 标签一起使用。<pre> 标签用于保留文本的格式，<code> 标签用于表示代码内容，而 <samp> 标签用于表示代码的输出结果。

<p>以下是一个简单的 JavaScript 程序，用于计算两个数的和：</p>
    <pre>
        <code>
let num1 = 5;
let num2 = 3;
let sum = num1 + num2;
console.log(sum);
        </code>
    </pre>
    <p>程序在控制台的输出结果为：<samp>8</samp></p>

在这个例子中，<pre> 和 <code> 标签用于展示 JavaScript 代码，而 <samp> 标签用于展示代码的输出结果 8。

注意事项

  • <samp> 标签主要用于语义化，它只是表明文本是程序的样本输出，没有提供语法高亮等功能。如果需要对输出结果进行更复杂的样式设置，可以结合CSS来实现。

  • 为了确保输出结果在不同浏览器和设备上的显示效果一致，通常会结合CSS来设置 <samp> 标签的样式。

39.字体变小 <small> 主要用于呈现旁注和附属细则等次要信息，通常浏览器会将其内容显示为比正常文本小一号的字体。

语义含义

<small> 标签有明确的语义，它表明标签内的内容是不太重要的辅助信息，像法律声明、版权信息、注释等。这有助于搜索引擎和屏幕阅读器等理解页面结构和内容的主次关系。
<head>
<style>
        small {
            color: gray;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>这是主要内容。<small>这是次要的补充信息。</small></p>
</body>

在这个例子中，通过CSS将 <small> 标签内的文本颜色设置为灰色，字体大小设置为12像素，改变了默认的显示效果。

40.删除线 <strike> 标签，用于给文本添加删除线，以此表示该文本内容已不再准确、不再相关或者已被弃用。(HTML5已废弃)

<p>之前的计划是<strike>本周完成项目</strike>，现在需要推迟。</p>

在上述代码中，“本周完成项目” 被 <strike> 标签包裹，在浏览器中显示时，这部分文本会带有删除线，表明原本的计划已不再适用。

41.字体加粗 <strong> 标签，用于表示内容具有重要性，通常浏览器会将其包含的文本以粗体形式显示，但它的核心作用并非单纯的样式呈现，而是赋予内容语义上的强调。

语义含义

<strong> 标签传达了文本内容的重要性，比如关键信息、警示内容等。屏幕阅读器等辅助设备在处理 <strong> 标签时，会用特殊的语音语调来突出其重要性，帮助残障人士更好地理解页面内容。同时，搜索引擎也能借助 <strong> 标签识别页面的关键信息，对页面的语义理解和 SEO 优化有一定帮助。
 <p>请 <strong>务必</strong> 在提交表单前检查所有信息。</p>

在上述代码里，“务必” 一词被 <strong> 标签包裹，强调了检查信息的重要性。在浏览器中，“务必” 会以粗体显示。

<style>
        .bold-text {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p>这是一段普通文本，<span class="bold-text">这里的文本会以粗体显示</span>。</p>
</body>

在这个示例中，通过 CSS 的 font-weight: bold; 属性来实现文本加粗，而不是使用 <b> 标签。

结合 CSS 使用

<style>
        strong {
            color: red;
            font-weight: normal;
        }
    </style>
</head>

<body>
    <p>请注意 <strong>这个重要提示</strong>。</p>
</body>

在这个例子中，通过 CSS 将 <strong> 标签内的文本颜色设置为红色，同时取消了粗体样式。43.加载内容模版 <template> 标签，用于创建一个 HTML 内容模板，这个模板里的内容在页面初次加载时不会显示，不过可以在后续通过 JavaScript 动态地将其内容添加到文档中。

42.上标上标 <sup> 标签，于把文本显示为上标，也就是将文本显示在基线之上，并且字号通常会比正常文本小。它在数学公式、脚注引用、化学方程式等场景中较为常用。

<p>2的3次方可以写作 2<sup>3</sup>。</p>

在上述代码中，“3” 被 <sup> 标签包裹，在浏览器中显示时，“3” 会显示在 “2” 的右上角，呈现为上标形式。

应用场景

  • 数学公式：用于表示指数、幂运算等。

<p>根据勾股定理，a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>。</p>

  • 脚注引用：在文章中引用脚注时，可以使用 <sup> 标签标记脚注的序号。
<p>地球是我们的家园<sup>1</sup>。</p>

  • 化学方程式：用于表示离子的电荷数等。
<p>硫酸根离子写作 SO<sub>4</sub><sup>2-</sup>。</p>

样式设置

默认情况下，浏览器会将 <sup> 标签内的文本显示为上标样式。如果需要自定义样式，可以使用 CSS 来实现。
<head>
    <style>
        sup {
            color: red;
            font-size: 0.8em;
        }
    </style>
</head>

<body>
    <p>2的3次方可以写作 2<sup>3</sup>。</p>
</body>

在这个示例中，通过CSS将 <sup> 标签内文本的颜色设置为红色，并且将字号设置为正常文本的 0.8 倍。

43.下标下标 <sub> 标签，把文本显示为下标，也就是将文本显示在基线之下，并且字号通常比正常文本小。该标签常用于数学公式、化学方程式、脚注等场景。

<p>水的化学式是 H<sub>2</sub>O。</p>

在上述代码中，“2” 被 <sub> 标签包裹，在浏览器中显示时，“2” 会显示在 “H” 的右下角，呈现为下标形式。

应用场景

  • 化学方程式：用于表示分子中原子的数量。

<p>二氧化碳的化学式是 CO<sub>2</sub>。</p>

  • 数学公式：在数学里，下标可用于区分变量或者表示数列中的项。
<p>等差数列的通项公式是 a<sub>n</sub> = a<sub>1</sub> + (n - 1)d。</p>

自定义样式，可使用 CSS 来实现

<head>
    <style>
        sub {
            color: blue;
            font-size: 0.8em;
        }
    </style>
</head>

<body>
    <p>水的化学式是 H<sub>2</sub>O。</p>
</body>

在这个示例中，通过CSS把 <sub> 标签内文本的颜色设置为蓝色，并且将字号设置为正常文本的 0.8 倍。

44.加载内容模版 <template> 标签，用于创建一个 HTML 内容模板，这个模板里的内容在页面初次加载时不会显示，不过可以在后续通过 JavaScript 动态地将其内容添加到文档中。

基本概念

<template> 标签就像是一个容器，能够存放任意的 HTML 代码，包括文本、图片、表单等。但其中的内容不会在页面加载时直接渲染，它处于一种 “隐藏” 状态，直到被 JavaScript 调用。
    <!-- 定义一个模板 -->
    <template id="myTemplate">
        <div>
            <h2>这是模板中的标题</h2>
            <p>这是模板中的段落内容。</p>
        </div>
    </template>
    <!-- 用于插入模板内容的容器 -->
    <div id="target"></div>

    <script>
        // 获取模板元素
        const template = document.getElementById('myTemplate');
        // 获取目标容器元素
        const target = document.getElementById('target');
        // 克隆模板内容
        const clone = document.importNode(template.content, true);
        // 将克隆的内容添加到目标容器中
        target.appendChild(clone);
    </script>

在上述代码中，首先定义了一个带有 id 为 myTemplate 的 <template> 标签，里面包含了一些HTML内容。接着通过JavaScript获取该模板元素，使用 document.importNode() 方法克隆模板内容，最后把克隆的内容添加到 id 为 target 的 <div> 元素中，这样模板内容就会显示在页面上。

应用场景

  • 动态生成页面内容：当需要根据用户的操作或者数据动态生成页面元素时，<template> 标签就非常有用。例如，在一个电商网站中，根据商品列表动态生成商品卡片。
  • 提高代码复用性：把一些常用的 HTML 结构封装在 <template> 标签中，在需要的地方通过 JavaScript 调用，避免代码重复。

45.日期时间范围 <time> 标签，用来表示日期、时间或者时间范围，它不仅能在页面上以用户友好的方式显示时间，还能为搜索引擎和辅助设备（如屏幕阅读器）提供机器可读的时间信息，从而提升页面的语义化和可访问性。

<p>会议将在 <time datetime="2024-11-15T09:30">2024 年 11 月 15 日 9:30</time> 开始。</p>

在上述代码中，<time> 标签包裹了人类可读的时间文本 “2024 年 11 月 15 日 9:30”，同时通过 datetime 属性提供了机器可读的时间格式 “2024-11-15T09:30”。这里的 “T” 是日期和时间的分隔符。

datetime 属性

datetime 属性是 <time> 标签的关键属性，它用于指定时间的机器可读格式。其格式需要遵循特定的标准，以下是一些常见的示例：
  • 具体日期：datetime="2024-11-15"
  • 具体时间：datetime="09:30"
  • 日期和时间：datetime="2024-11-15T09:30"
  • 带有时间区间：datetime="2024-11-15T09:30/2024-11-15T11:00" 表示从 2024 年 11 月 15 日 9:30 到 11:00 的时间段

应用场景

  • 新闻文章：在新闻报道中标记文章的发布时间或者事件发生的时间，有助于搜索引擎理解文章的时效性。
<article>
    <h2>重要新闻标题</h2>
    <p><time datetime="2024-11-15T14:00">2024 年 11 月 15 日 14:00</time> 发生了一件重大事件。</p>
    <!-- 文章内容 -->
</article>

日程安排：在日程表或者活动安排页面中，使用 <time> 标签明确每个活动的时间。

<ul>
    <li><time datetime="2024-11-16T08:00">2024 年 11 月 16 日 8:00</time> - 健身活动</li>
    <li><time datetime="2024-11-16T10:30">2024 年 11 月 16 日 10:30</time> - 商务会议</li>
</ul>

不使用 datetime 属性的情况

若不需要提供机器可读的时间信息，也可以不使用 datetime 属性，仅使用 <time> 标签来包裹时间文本。

<p>活动在 <time>明天下午 3 点</time> 开始。</p>

不过这种情况下，<time> 标签的主要作用就是语义化，对搜索引擎和辅助设备的帮助相对较小。

46.打字机文本 <tt> 标签，用于把文本呈现为等宽字体样式，也就是每个字符宽度一致，过去常用来展示代码、命令之类需要精确对齐的内容。(HTML5已废弃)

<p>这是普通文本。</p>
<p><tt>这是使用 &lt;tt&gt; 标签的等宽文本。</tt></p>

在这个例子中，第一行文本是普通样式，第二行文本因为使用了 <tt> 标签，会以等宽字体呈现

如果想展示代码或者等宽字体文本，建议使用 <code> 标签或者借助 CSS 来设置字体样式，像 font-family: monospace 就能实现等宽字体效果。

<head>
    <style>
        code {
            font-family: monospace;
        }
    </style>
</head>

<body>
    <p>这是普通文本。</p>
    <p><code>这是使用 &lt;code&gt; 标签和 CSS 的等宽文本。</code></p>
</body>

47.下划线 <u> 标签，用于为文本添加下划线样式。最初，它主要用于标记需要着重强调的文本，不过现在它的语义和用途有所变化。

<p>这是一段包含 <u>下划线文本</u> 的段落。</p>

在浏览器中显示时，“下划线文本” 这几个字会带有下划线。

语义与使用建议

  • 早期语义：在早期的 HTML 中，<u> 标签用于标记需要着重强调的文本，就像用下划线在纸质文档中标记重点内容一样。
  • 现代语义：如今，HTML 标准更强调语义化，而 <u> 标签的语义变得有些模糊。由于下划线在网页中通常与超链接关联（超链接文本默认带有下划线），为了避免混淆，不建议使用 <u> 标签来单纯强调文本。如果是为了强调文本，推荐使用 <em>（表示强调）或 <strong>（表示更强烈的强调）标签。
  • 适用场景：<u> 标签现在更适合用于标记拼写错误的文本、人名中的特殊名称等。
<p>你把 “苹果” 写成了 <u>“平果”</u>，这是一个拼写错误。</p>

CSS 来实现

 <style>
        u {
            text-decoration: underline dotted red;
        }
    </style>
</head>

<body>
    <p>这是一段包含 <u>自定义下划线文本</u> 的段落。</p>
</body>

在这个示例中，通过CSS将 <u> 标签内文本的下划线样式设置为红色的点状线。

48.自定义变量 <var> 标签，是一个语义化标签，主要用于表示变量。这里的变量可以是数学表达式、编程代码里的变量，也可以是其他需要表示可变值的地方。浏览器通常会将 <var> 标签内的文本以斜体形式显示，以此和普通文本区分开来，但你也可以通过CSS来改变其显示样式。

使用场景

  1. 数学公式：在展示数学公式时，使用 <var> 标签来表示公式中的变量，让公式结构更加清晰。
  2. 编程示例：在编程教程、代码示例中，用 <var> 标签标记变量名，使代码的解释更加明确。
  3. 技术文档：在撰写技术文档时，对于一些代表可变值的术语，使用 <var> 标签进行标注。
 <!-- 数学公式示例 -->
    <p>在勾股定理中，公式为 <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>，其中 <var>a</var> 和 <var>b</var> 是直角边，<var>c</var> 是斜边。</p>

    <!-- 编程示例 -->
    <p>以下是一个简单的 Python 代码示例：</p>
    <pre>
        <code>
<var>x</var> = 5
<var>y</var> = 3
<var>sum</var> = <var>x</var> + <var>y</var>
print(<var>sum</var>)
        </code>
    </pre>
    <p>在上述代码中，<var>x</var>、<var>y</var> 和 <var>sum</var> 都是变量。</p>

在这些示例中，<var> 标签分别包裹了数学公式中的变量 a、b、c 以及 Python 代码中的变量 x、y、sum，使这些变量在文本中更加突出，便于读者识别。

结合 CSS 自定义样式

虽然浏览器有默认的 <var> 标签样式，但你也能通过CSS来自定义样式，以契合网站的整体风格。

<head>
    <style>
        var {
            color: #007BFF;
            font-style: normal;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p>在函数 <var>f(x)</var> 中，<var>x</var> 是自变量。</p>
</body>

在这个例子里，CSS样式为 <var> 标签设置了蓝色文本颜色、正常字体样式和加粗字体粗细，让其在页面上更加醒目。

49.可选换行位置 <wbr>（Word Break Opportunity) 标签，它的作用是在文本中指定一个位置，当浏览器需要对文本进行换行时，可以在此处进行换行操作，不过并不是强制换行。

<p>这是一个很长的单词：supercalifragilisticexpialidocious，<wbr>即使它很长，浏览器也能在合适的地方换行。</p>

在这个例子中，<wbr> 标签插入到 “supercalifragilisticexpialidocious” 单词内部，当浏览器显示这段文本时，如果空间不足，就可能会在 <wbr> 标签处进行换行。

应用场景

  • 处理长单词或 URL：在网页中遇到长单词、长 URL 或者长数字序列时，为了避免它们溢出容器，可使用 <wbr> 标签指定换行位置。
<p>这是一个很长的 URL：https://www.example.com/this/is/a/very/long/url/that/might/need/to/be/broken<wbr>_up/for_display_purposes。</p>
  • 适应不同屏幕尺寸：在响应式设计里，不同屏幕尺寸下文本的布局可能不同，使用 <wbr> 标签能让文本在不同屏幕上更好地换行显示。

与其他换行相关标签的区别

  • <br> 标签：<br> 标签会强制换行，不管当前容器空间是否足够；而 <wbr> 标签只是提供一个可选的换行位置，只有在必要时才会换行。
  • CSS 的 word-break 和 overflow-wrap 属性：CSS 属性是全局设置文本换行规则，而 <wbr> 标签可以在特定位置精确控制换行。 

 ☯表单和输入

50. 表单 <form> 标签，其作用是让用户输入数据。表单是用户与网页进行交互的关键工具，可用于收集用户信息，例如注册信息、搜索查询、调查问卷答案等。

主要特点

  • 表单元素容器：<form> 标签是众多表单元素的容器，像 <input>、<textarea>、<select>、<button> 等都能包含在内。
  • 数据提交：借助 action 和 method 属性，<form> 标签可把用户输入的数据提交到指定的服务器端脚本进行处理。

属性

  • action：指定表单数据提交的 URL 地址，也就是服务器端用于处理表单数据的脚本地址。
  • method：规定表单数据提交的 HTTP 方法，常用的有 GET 和 POST。
    • GET：会把表单数据附加到 URL 后面，适合提交少量数据，比如搜索表单。
    • POST：会把表单数据放在 HTTP 请求体中提交，适合提交大量数据或者包含敏感信息的数据。
  • target：指定表单提交后响应结果的显示方式，取值有 _blank（在新窗口打开）、_self（在当前窗口打开）等。
  • enctype：当表单包含文件上传时，用于指定表单数据的编码类型，常用的是 multipart/form-data。
   <form action="submit.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br>
        <input type="submit" value="提交">
    </form>

在这个示例中：
    • 构建了一个简单的登录表单。
    • action 属性指定表单数据要提交到 submit.php 脚本。
    • method 属性指定使用 POST 方法提交数据。
    • 表单包含两个输入框（用户名和密码）和一个提交按钮。

注意事项

  • 每个表单元素都要有 name 属性，这样服务器才能识别表单数据。
  • 对于敏感信息（如密码），建议使用 POST 方法提交。
  • 若表单包含文件上传，要把 enctype 属性设置为 multipart/form-data。

51.表单输入数据 <input> 标签，主要用于创建各种表单输入字段，让用户能够输入数据。它属于空标签，意味着它没有结束标签，仅需一个开始标签即可。

主要特点

  • 多功能性：<input> 标签可通过 type 属性创建不同类型的输入字段，例如文本框、密码框、复选框、单选框、文件选择框等。
  • 数据收集：作为表单的关键组成部分，<input> 标签用于收集用户输入的数据，随后将这些数据提交到服务器进行处理。

属性

  • type：这是 <input> 标签最重要的属性，用于指定输入字段的类型。常见的取值有：name：为输入字段指定一个名称，服务器会依据这个名称来识别和处理表单数据。
    • text：创建一个单行文本输入框，用于输入普通文本。
    • password：创建一个密码输入框，输入的内容会以掩码形式显示。
    • radio：创建一个单选框，用户只能从一组单选框中选择一个选项。
    • checkbox：创建一个复选框，用户可以选择一个或多个选项。
    • submit：创建一个提交按钮，用于提交表单数据。
    • reset：创建一个重置按钮，用于清空表单中的所有输入内容。
    • file：创建一个文件选择框，允许用户选择本地文件进行上传。
    • hidden：创建一个隐藏的输入字段，该字段不会显示在页面上，但会随表单数据一起提交。
  •  
  • value：为输入字段设置一个初始值。对于 text、password 等类型，它是输入框中的默认文本；对于 radio、checkbox 等类型，它是该选项的值。
  • placeholder：为输入字段提供一个提示信息，当输入框为空时显示，输入内容后提示信息会消失。
  • required：这是一个布尔属性，若设置该属性，则表示该输入字段为必填项，用户必须输入内容才能提交表单。
  • disabled：这也是一个布尔属性，若设置该属性，则输入字段会被禁用，用户无法对其进行操作。
 <form action="submit.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" required><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required><br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br>
        <input type="checkbox" id="agree" name="agree" value="yes">
        <label for="agree">我同意相关条款</label><br>
        <input type="file" id="file" name="file"><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

在这个示例中：
  • 构建了一个包含多种输入字段的表单。
  • 有单行文本输入框、密码输入框、单选框、复选框、文件选择框、提交按钮和重置按钮。
  • 每个输入字段都有相应的 name 属性，方便服务器识别和处理数据。

注意事项

  • 每个输入字段都要有 name 属性，这样服务器才能正确处理表单数据。
  • 对于 radio 和 checkbox 类型，要确保同一组选项的 name 属性值相同。
  • 若使用 required 属性，要确保在客户端和服务器端都进行验证，以保证数据的完整性。

52.表单文本输入 <textarea> 标签，用于创建一个多行的文本输入区域，这使得用户能够输入和编辑多行文本内容，比如评论、反馈信息、文章草稿等。

主要特点

  • 多行输入：与 <input type="text"> 不同，<textarea> 可以容纳多行文本，适合需要输入较长文本的场景。
  • 可调整大小：在现代浏览器中，用户通常可以通过拖动 <textarea> 右下角的小方块来调整其大小，不过这一行为可以通过CSS进行控制。

属性

  • name：为文本区域指定一个名称，服务器会依据这个名称来识别和处理表单数据。
  • rows：指定文本区域显示的行数，这会影响文本区域的初始高度。
  • cols：指定文本区域显示的列数，也就是每行显示的字符数，它会影响文本区域的初始宽度。
  • placeholder：为文本区域提供一个提示信息，当文本区域为空时显示，输入内容后提示信息会消失。
  • required：这是一个布尔属性，若设置该属性，则表示该文本区域为必填项，用户必须输入内容才能提交表单。
  • disabled：这也是一个布尔属性，若设置该属性，则文本区域会被禁用，用户无法对其进行操作。
  • readonly：同样是布尔属性，设置后文本区域内容为只读，用户不能修改，但可以选择和复制其中的文本。
<form action="submit.php" method="post">
        <label for="message">留言:</label><br>
        <textarea id="message" name="message" rows="4" cols="50" placeholder="请输入您的留言" required></textarea><br>
        <input type="submit" value="提交">
    </form>

在这个示例中：
  • 构建了一个包含 <textarea> 元素的表单。
  • rows 属性设置为 4，意味着文本区域初始显示 4 行；cols 属性设置为 50，表示每行显示 50 个字符。
  • placeholder 属性给出了提示信息，告知用户在此输入留言内容。
  • required 属性表明该文本区域为必填项。

注意事项

  • 要确保 <textarea> 有 name 属性，这样服务器才能正确处理提交的数据。
  • 虽然 rows 和 cols 属性可以设置文本区域的初始大小，但在不同浏览器和设备上，实际显示可能会有差异，可通过CSS来精确控制样式。
  • 若需要对用户输入的内容进行格式化处理，要在服务器端进行相应的验证和清理，以防止安全问题。

53.按钮<button> 标签，用于创建一个可点击的按钮元素，它常被用于表单提交、触发 JavaScript 函数或者执行其他交互操作。

主要特点

  • 可交互性：用户能够点击按钮，从而触发与之关联的操作。
  • 内容灵活性：<button> 标签内可以包含文本、图像或者其他 HTML 元素，这使按钮的样式和内容有更多的自定义空间。

属性

  • type：指定按钮的类型，常见取值如下：name：为按钮指定一个名称，在表单提交时，按钮的 name 和 value 属性值会一同被发送到服务器。
    • submit：这是默认值。当按钮处于表单内时，点击此按钮会提交表单数据到服务器。
    • reset：点击该按钮会将表单内所有输入字段重置为初始值。
    • button：此类型按钮本身没有默认行为，需要通过 JavaScript 来为其绑定事件处理程序。
  • name：为按钮指定一个名称，在表单提交时，按钮的 name 和 value 属性值会一同被发送到服务器。
  • value：定义按钮的值，在表单提交时会作为数据发送给服务器。
  • disabled：这是一个布尔属性，若设置该属性，按钮将变为禁用状态，用户无法点击它。
  • form：指定按钮所属的表单，即便按钮不在表单元素内部，也能通过这个属性关联到指定的表单。
<form action="submit.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br>
        <button type="submit">提交表单</button>
        <button type="reset">重置表单</button>
    </form>
    <button type="button" onclick="alert('你点击了这个按钮！')">点击我</button>

在这个示例中：
  • 第一个按钮 type="submit"，处于表单内，点击它会把表单数据提交到 submit.php。
  • 第二个按钮 type="reset"，点击后会将表单中的输入字段重置为初始值。
  • 第三个按钮 type="button"，通过 onclick 事件绑定了一个 JavaScript 函数，点击时会弹出一个提示框。

注意事项

  • 要明确按钮的 type 属性，避免出现不符合预期的行为。
  • 对于需要执行复杂操作的按钮，通常使用 type="button"，再通过 JavaScript 来实现具体功能。
  • 若在表单中使用按钮，要确保 name 和 value 属性设置正确，以便服务器正确处理表单数据。

54.下拉列表框 <select> 标签，用于创建一个下拉列表框，用户可以从预定义的选项中选择一个或多个值。它是表单中常用的元素之一，能让用户方便地从多个选项中做出选择。

主要特点

  • 提供选项：<select> 标签通常与 <option> 标签配合使用，<option> 标签定义了下拉列表中的每个选项。
  • 可选择性：用户可以通过点击下拉箭头展开列表，然后选择一个或多个选项。
  • 数据提交：当表单提交时，所选选项的值会被发送到服务器进行处理。

属性

  • name：为下拉列表指定一个名称，服务器会依据这个名称来识别和处理表单数据。
  • multiple：这是一个布尔属性，若设置该属性，用户可以选择多个选项。通常，在选择多个选项时，用户需要按住 Ctrl 键（在 Windows 系统中）或 Command 键（在 Mac 系统中）。
  • size：指定下拉列表中可见选项的数量。如果不设置该属性，默认只显示一个选项。
  • disabled：这也是一个布尔属性，若设置该属性，下拉列表会被禁用，用户无法对其进行操作。
  • required：同样是布尔属性，设置后表示该下拉列表为必填项，用户必须选择一个选项才能提交表单。
<form action="submit.php" method="post">
        <label for="fruit">选择一种水果:</label>
        <select id="fruit" name="fruit">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="cherry">樱桃</option>
            <option value="date">枣</option>
        </select><br>
        <label for="colors">选择多种颜色（按住 Ctrl 选择）:</label>
        <select id="colors" name="colors" multiple size="3">
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="blue">蓝色</option>
            <option value="yellow">黄色</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
在这个示例中：
  • 第一个 <select> 标签创建了一个普通的下拉列表，用户只能选择一种水果。
  • 第二个 <select> 标签设置了 multiple 属性，允许用户选择多种颜色，同时 size 属性设置为 3，使得列表中初始显示 3 个选项。

注意事项

  • 每个 <option> 标签都要有 value 属性，这样服务器才能正确识别用户选择的值。
  • 若使用 multiple 属性，服务器端需要能够处理多个选中的值。
  • 可以使用CSS对 <select> 标签进行样式设置，不过不同浏览器对下拉列表的样式渲染可能存在差异。

55.选项分组 <optgroup> 标签，用于将 <select> 元素中的 <option> 标签进行分组，让下拉列表的选项有更清晰的结构，便于用户查找和选择。

主要特点

  • 分组显示：<optgroup> 标签能够把相关的选项组合在一起，在下拉列表中以分组形式呈现。
  • 视觉区分：每个分组可以有自己的标签，这有助于用户快速识别不同的选项组。

属性

  • label：该属性是必需的，用于为选项组提供一个标签，这个标签会显示在下拉列表中，作为选项组的标题。
  • disabled：这是一个布尔属性，若设置该属性，整个选项组会被禁用，其中的选项用户都无法选择。
 <form action="submit.php" method="post">
        <label for="cities">选择一个城市:</label>
        <select id="cities" name="cities">
            <optgroup label="亚洲城市">
                <option value="tokyo">东京</option>
                <option value="beijing">北京</option>
                <option value="singapore">新加坡</option>
            </optgroup>
            <optgroup label="欧洲城市">
                <option value="london">伦敦</option>
                <option value="paris">巴黎</option>
                <option value="rome">罗马</option>
            </optgroup>
            <optgroup label="美洲城市">
                <option value="newyork">纽约</option>
                <option value="losangeles">洛杉矶</option>
                <option value="toronto">多伦多</option>
            </optgroup>
        </select><br>
        <input type="submit" value="提交">
 </form>
在这个示例中：
  • <select> 元素内包含了三个 <optgroup> 标签，分别代表亚洲城市、欧洲城市和美洲城市。
  • 每个 <optgroup> 标签都有 label 属性，用于显示选项组的名称。
  • 每个选项组里都有多个 <option> 标签，代表具体的城市选项。

注意事项

  • <optgroup> 标签必须嵌套在 <select> 标签内部。
  • 虽然 <optgroup> 标签本身不能被选中，但它能为用户提供清晰的选项分组信息。
  • 可通过CSS对 <optgroup> 标签的样式进行调整，不过不同浏览器对其样式的渲染可能存在差异。

56.选项 <option> 标签，主要用于定义 <select> 元素（下拉列表）、<optgroup> 元素（选项组）或者 <datalist> 元素（提供输入建议的列表）中的一个选项。用户可以从这些选项里选择一个或多个值，所选的值会随表单数据一同提交到服务器。

主要特点

  • 定义选项内容：<option> 标签内部的文本会作为选项的显示内容呈现给用户。
  • 关联值：借助 value 属性，<option> 标签能为每个选项设定一个值，此值会在表单提交时被发送到服务器。

属性

  • value：该属性用于指定选项的值，在表单提交时，这个值会被发送到服务器。若未设置 value 属性，选项的文本内容会被当作值发送。
  • selected：这是一个布尔属性，若设置该属性，该选项在页面加载时会默认被选中。
  • disabled：同样是布尔属性，设置后此选项会变为禁用状态，用户无法选择该选项。
  • label：用于为选项提供一个更简短的标签，部分浏览器会用这个标签替代选项的文本内容来显示。不过，大多数情况下直接使用选项的文本即可。
<form action="submit.php" method="post">
        <label for="languages">选择一种编程语言:</label>
        <select id="languages" name="languages">
            <option value="python">Python</option>
            <option value="java" selected>Java</option>
            <option value="javascript">JavaScript</option>
            <option value="csharp" disabled>C#</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
在这个示例中：
  • <select> 元素创建了一个下拉列表，包含四个 <option> 标签，分别代表不同的编程语言。
  • value 属性为每个选项设定了对应的值，在表单提交时会将这些值发送到 submit.php。
  • selected 属性让 Java 选项在页面加载时默认被选中。
  • disabled 属性使 C# 选项变为禁用状态，用户无法选择。

注意事项

  • 为保证服务器能准确识别选项，建议为每个 <option> 标签设置 value 属性。
  • 若需要在页面加载时默认选中某个选项，可使用 selected 属性。
  • 当某个选项不可用时，可使用 disabled 属性将其禁用。

57.表单元素关联 <label> 标签，用于为表单元素（如 <input>、<textarea>、<select> 等）定义标注。它能提升表单的可用性和可访问性，让用户更清晰地理解每个表单元素的用途。

主要特点

  • 关联表单元素：<label> 标签可以和一个表单元素相关联，用户点击 <label> 标签时，与之关联的表单元素会获得焦点，这为用户操作提供了更大的点击区域，尤其在移动设备上很方便。
  • 提升可访问性：对于屏幕阅读器等辅助设备来说，<label> 标签能更准确地描述表单元素的用途，有助于视障用户理解表单内容。

属性

  • for：该属性用于指定 <label> 标签关联的表单元素的 id 值。通过设置 for 属性和表单元素的 id 一致，就能建立起两者的关联。
  • form：此属性指定 <label> 标签所属的表单，即便 <label> 不在表单元素内部，也能通过这个属性关联到指定的表单。
 <form action="submit.php" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="提交">
    </form>

注意事项

  • 确保 <label> 标签的 for 属性值和关联表单元素的 id 值完全一致，否则无法建立正确的关联。
  • <label> 标签不仅可以放在表单元素之前，也可以放在之后，或者将表单元素包裹在 <label> 标签内部，同样能实现关联效果。
<label>
    <input type="checkbox" name="remember"> 记住我
</label>

在这种情况下，无需使用 for 和 id 属性，点击 “记住我” 文本时，复选框也会被选中或取消选中。

58.表单元素分组 <fieldset> 标签，用于将表单内相关的元素进行分组，从而在视觉上把表单划分成不同的逻辑区域，让表单结构更清晰，增强用户体验。它通常和 <legend> 标签一起使用，<legend> 标签可为 <fieldset> 分组提供一个标题。

主要特点

  • 分组显示：<fieldset> 标签把相关的表单元素组合在一起，使表单布局更有条理，用户能更方便地理解表单内容。
  • 样式控制：可以通过CSS对 <fieldset> 标签进行样式设置，比如添加边框、背景色等，实现对一组表单元素的整体样式控制。

属性

  • disabled：这是一个布尔属性，若设置该属性，<fieldset> 内的所有表单元素都会被禁用，用户无法对其进行操作。
  • form：指定 <fieldset> 所属的表单，即便 <fieldset> 不在表单元素内部，也能通过这个属性关联到指定的表单。
  • name：为 <fieldset> 指定一个名称，在某些情况下可用于标识该分组。
 <form action="submit.php" method="post">
        <fieldset>
            <legend>个人信息</legend>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name"><br>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age"><br>
        </fieldset>
        <fieldset>
            <legend>联系方式</legend>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email"><br>
            <label for="phone">电话:</label>
            <input type="tel" id="phone" name="phone"><br>
        </fieldset>
        <input type="submit" value="提交">
    </form>

在这个示例中：
  • 第一个 <fieldset> 标签把姓名和年龄输入框分组，<legend> 标签为其添加了 “个人信息” 标题。
  • 第二个 <fieldset> 标签将邮箱和电话输入框分组，<legend> 标签给出 “联系方式” 标题。
  • 这样的分组让表单的不同部分界限清晰，用户能更轻松地理解每个部分的内容。

注意事项

    • <fieldset> 标签要嵌套在 <form> 标签内部，以确保分组内的表单元素能随表单一起提交。
    • 虽然 <fieldset> 标签默认会显示一个边框，但不同浏览器对其样式的渲染可能存在差异，可通过CSS行统一设置。
    • 若需要禁用一组表单元素，可使用 disabled 属性，但要注意这会禁用 <fieldset> 内的所有元素。

59.定义<fieldset>元素的标题 <legend> 标签，主要用于为 <fieldset> 元素定义标题，也就是给表单中的一组相关元素提供一个说明性的标签，帮助用户更好地理解表单的结构和每个部分的用途。

主要特点

  • 语义化：<legend> 标签为 <fieldset> 分组赋予了明确的语义，使代码更具可读性，也有利于搜索引擎和屏幕阅读器理解表单内容。
  • 视觉区分：在页面上，<legend> 标签的内容通常会显示在 <fieldset> 边框的左上角，作为该分组的标题，起到视觉上区分不同表单区域的作用。

属性

<legend> 标签没有特有的属性，但它支持全局属性，例如 class、id、style 等，可借助这些属性对其进行样式设置和操作。
<form action="submit.php" method="post">
        <fieldset>
            <legend>登录信息</legend>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username"><br>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password"><br>
        </fieldset>
        <input type="submit" value="提交">
    </form>

在这个示例中：
  • <fieldset> 标签把用户名和密码输入框组合成一个逻辑分组。
  • <legend> 标签为这个分组添加了 “登录信息” 标题，让用户能清楚知道这部分表单的用途。

注意事项

  • <legend> 标签必须作为 <fieldset> 标签的第一个子元素，这样才能正确显示为分组的标题。
  • 可通过 CSS 对 <legend> 标签的样式进行定制，例如修改字体、颜色、大小等，不过不同浏览器对其默认样式的渲染可能存在差异。

60.为<input>预定义选项列表 <datalist> 标签，为 <input> 元素提供预定义的选项列表。当用户在输入框输入内容时，会出现一个下拉列表，其中包含 <datalist> 中定义的选项，用户既能从列表中选择选项，也能自行输入其他内容。这一功能为用户输入提供了便利，同时保证输入的内容具有一定的规范性。

主要特点

  • 提供输入建议：<datalist> 可以为输入框提供一组建议选项，帮助用户快速输入内容。
  • 灵活性：用户既可以从建议列表中选择选项，也可以输入列表以外的内容。

属性

<datalist> 标签本身没有特定的属性，但它需要和 <input> 元素配合使用，通过 <input> 元素的 list 属性来建立关联。
<label for="fruit">选择或输入一种水果:</label>
    <input type="text" id="fruit" name="fruit" list="fruits">
    <datalist id="fruits">
        <option value="苹果">
        <option value="香蕉">
        <option value="橙子">
        <option value="葡萄">
    </datalist>
在这个示例中：
  • <input> 元素的 list 属性值为 "fruits"，与 <datalist> 元素的 id 值一致，这样就建立了两者的关联。
  • 当用户在输入框输入内容时，会出现一个下拉列表，其中包含 “苹果”、“香蕉”、“橙子” 和 “葡萄” 这些选项。
  • 用户可以从列表中选择选项，也可以输入其他水果名称。

注意事项

    • <datalist> 元素必须有一个唯一的 id，并且 <input> 元素的 list 属性值要与之对应，这样才能正确关联。
    • <datalist> 中的 <option> 标签用于定义具体的选项，value 属性指定选项的值。
    • 不同浏览器对 <datalist> 的样式渲染可能存在差异，可以使CSS进行样式调整。

61.计算或用户操作的结果 <output> 标签，用于展示计算或用户操作的结果。它是 HTML5 新增的元素，为网页开发者提供了一种直接且语义化的方式来显示动态内容。

主要特点

  • 语义化展示：<output> 标签明确表示其内容是某种计算或操作的输出结果，增强了代码的可读性和可维护性，也有助于屏幕阅读器等辅助设备理解页面内容。
  • 动态更新：常与 JavaScript 结合使用，能根据用户输入或其他事件动态更新显示内容。

属性

  • for：该属性用于指定产生输出结果的相关元素，值为一个或多个元素 id 的列表，元素 id 之间用空格分隔。这有助于明确输出结果与哪些输入元素相关。
  • form：指定 <output> 元素所属的表单，即便 <output> 不在表单元素内部，也能通过这个属性关联到指定的表单。
  • name：为 <output> 元素指定一个名称，在表单提交时，其值会被发送到服务器。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" id="a" value="0"> +
        <input type="number" id="b" value="0"> =
        <output name="result" for="a b">0</output>
    </form>
在这个示例中：
  • 表单内有两个数字输入框 a 和 b，以及一个 <output> 元素。
  • oninput 事件监听输入框的输入变化，当用户在输入框中输入数字时，会触发 JavaScript 代码 result.value=parseInt(a.value)+parseInt(b.value)，该代码将两个输入框的值相加，并把结果赋值给 <output> 元素的 value 属性，从而实时更新显示的计算结果。
  • <output> 元素的 for 属性值为 "a b"，表明输出结果与 id 为 a 和 b 的输入元素相关。

注意事项

    • 要确保 <output> 元素的 for 属性值与相关输入元素的 id 正确对应，以便清晰展示输出与输入的关联。
    • 若要在表单提交时将 <output> 元素的值发送到服务器，需设置 name 属性。
    • <output> 元素的样式可通过CSS进行定制，以满足页面设计需求。

 ☯框架

62.框架式页面布局 <frame>(HTML5已废弃)&<iframe> 标签，可在一个网页里显示多个 HTML 文档。借助框架，你能够把浏览器窗口划分成多个独立的区域，每个区域都能显示不同的 HTML 页面。这在过去构建具有复杂布局和多模块内容的网页时较为常用。它就像是在网页里创建了一个小窗口，在这个窗口中可以显示其他网页、视频、地图等内容。

属性

  • src：该属性指定要在框架中显示的 HTML 文件的 URL。
  • name：为框架指定一个名称，其他框架中的链接可以通过这个名称来指定目标框架。
  • frameborder：设置框架的边框，值为 0 表示无边框，1 表示有边框。
  • marginwidth：指定框架内容与左右边框之间的间距。
  • marginheight：指定框架内容与上下边框之间的间距。
  • scrolling：控制框架是否显示滚动条，取值有 yes（始终显示）、no（始终不显示）和 auto（根据内容需要显示）。
<frameset cols="20%,80%">
    <iframe src="menu.html" name="menuFrame">
    <iframe src="content.html" name="contentFrame">
</frameset>
<iframe src="URL" title="描述信息"></iframe>

常见属性及用法

  1. 宽度和高度设置
    可以使用 width 和 height 属性来设置 <iframe> 的尺寸，单位可以是像素（px）或百分比（%）
<iframe src="https://www.bilibil.com" width="800" height="600" title="示例页面"></iframe>

  1. 边框设置
    使用 frameborder 属性来控制边框的显示，值为 0 表示无边框，1 表示有边框（不过该属性已逐渐被弃用，建议使用 CSS 来设置边框样式）。
<iframe src="https://www.example.com" width="800" height="600" frameborder="1" title="示例页面"></iframe>

  1. 滚动条设置
    scrolling 属性用于控制滚动条的显示情况，取值有 yes（始终显示）、no（始终不显示）和 auto（根据内容需要显示）。
<iframe src="https://www.w3school.com.cn/" width="800" height="600" scrolling="auto" title="示例页面"></iframe>

  1. 对齐方式设置
    使用 align 属性可以设置 <iframe> 在页面中的对齐方式，如 left、right、top 等，但该属性也已逐渐被弃用，建议使用 CSS 进行布局。
<iframe src="https://www.runoob.com/" width="800" height="600" align="left" title="示例页面"></iframe>

  1. 名称设置
    name 属性为 <iframe> 指定一个名称，可用于链接的 target 属性，使链接在该 <iframe> 中打开。
<iframe src="http://www.cninfo.com.cn/new/index" width="800" height="600" name="myFrame" title="示例页面"></iframe>
  <a href="https://www.weimiaotj.cn/" target="myFrame">在 iframe 中打开新页面</a>

注意事项

  • 同源策略：由于浏览器的同源策略限制，如果 <iframe> 嵌入的网页与当前页面的协议、域名或端口不同，可能会受到一些访问限制，如无法直接访问 <iframe> 内的内容。
  • 安全问题：嵌入外部网页时要注意安全，避免嵌入来自不可信源的网页，以防遭受跨站脚本攻击（XSS）等安全威胁。
  • 响应式设计：为了使 <iframe> 在不同设备上都能有良好的显示效果，建议使用 CSS 媒体查询和相对单位（如百分比）来设置其尺寸。

63.窗口划分框架 <frameset> 标签(HTML5已废弃)，用于把浏览器窗口划分成多个框架，每个框架都能显示不同的 HTML 文档。

主要用途

在早期的网页设计中，<frameset> 标签可创建复杂的页面布局，把浏览器窗口分割成多个独立的区域，每个区域都能加载不同的 HTML 文件，从而实现多模块内容的展示。

属性

  • rows：用于水平分割窗口，该属性值是一个由逗号分隔的数值列表，每个数值代表一个框架的高度，可以使用像素（px）、百分比（%）或相对单位（*）来指定高度。例如，rows="20%,80%" 表示将窗口水平分割成两个框架，上面框架占 20% 的高度，下面框架占 80% 的高度；rows="100px,*" 表示上面框架高度为 100 像素，下面框架占据剩余的高度。
  • cols：用于垂直分割窗口，属性值同样是由逗号分隔的数值列表，每个数值代表一个框架的宽度，单位与 rows 属性相同。例如，cols="25%,75%" 表示将窗口垂直分割成两个框架，左边框架占 25% 的宽度，右边框架占 75% 的宽度。
  • border：设置框架边框的宽度，单位是像素。
  • frameborder：控制框架边框的显示，值为 0 表示无边框，1 表示有边框。
  • bordercolor：指定框架边框的颜色，可以使用颜色名称（如 red）、十六进制值（如 #FF0000）或 RGB 值（如 rgb(255,0,0)）。
<frameset cols="20%,80%">
    <frame src="menu.html" name="menuFrame">
    <frame src="content.html" name="contentFrame">
</frameset>
在这个示例中：
  • <frameset> 标签通过 cols="20%,80%" 将浏览器窗口垂直分割成两个框架，左边框架占 20% 的宽度，右边框架占 80% 的宽度。
  • 第一个 <frame> 标签的 src 属性指定要在左边框架中显示的 menu.html 文件，name 属性为该框架命名为 menuFrame。
  • 第二个 <frame> 标签指定在右边框架中显示 content.html 文件，name 属性为 contentFrame。

不推荐使用的原因1

  • 可访问性问题：框架会使屏幕阅读器等辅助设备难以理解页面结构，对残障人士访问网页造成困难。
  • 搜索引擎优化（SEO）问题：搜索引擎在索引框架页面时可能会遇到困难，从而影响页面的搜索排名。
  • 维护困难：框架式布局会使代码结构变得复杂，给页面的维护和更新带来不便。

替代方案

现在，推荐使用 HTML5 的 <iframe> 元素或者 CSS 布局（如 Flexbox、Grid）来实现类似的页面布局效果。<iframe> 同样可以在页面中嵌入其他 HTML 文档，并且在可访问性和兼容性方面表现更好。而 CSS 布局则能提供更灵活、更易于维护的页面结构。

64.窗口框替代 <noframes> 标签，用于在浏览器不支持框架（<frame> 和 <frameset>）或者用户禁用了框架显示功能时，向用户提供替代内容的元素。由于框架技术已被 HTML5 弃用，如今 <noframes> 标签也很少使用，但了解其用法仍有一定意义。

基本用法

<noframes> 标签必须嵌套在 <frameset> 标签内部使用，当浏览器不支持框架或者框架被禁用时，<noframes> 标签内的内容会显示给用户；如果浏览器支持并启用了框架，<noframes> 标签内的内容则不会显示。
<frameset cols="20%,80%">
    <frame src="menu.html" name="menuFrame">
    <frame src="content.html" name="contentFrame">
    <noframes>
        <body>
            <p>您的浏览器不支持框架或者已禁用框架显示功能。请使用支持框架的浏览器或者启用框架显示功能来查看此页面。</p>
            <p>您也可以直接访问以下页面：</p>
            <ul>
                <li><a href="menu.html">菜单页面</a></li>
                <li><a href="content.html">内容页面</a></li>
            </ul>
        </body>
    </noframes>
</frameset>

 ☯图像

65.图像 <img> 标签，用于在网页中显示图像。它是一个空标签，意味着只有开始标签，没有结束标签。

基本用法

<img> 标签最基础的使用只需设置 src 属性，该属性指定要显示图像的文件路径或者 URL。
<img src="https://www.w3school.com.cn//i/photo/tulip.jpg" alt="上海鲜花港 - 郁金香" />

常用属性

alt 属性：用于为图像提供替代文本描述。当图像无法加载（如文件路径错误、网络问题）时，浏览器会显示 alt 属性的文本内容；同时，这个文本也有助于屏幕阅读器等辅助设备向视障用户描述图像信息。

<img src="example.jpg" alt="这是一张示例图片">

width 和 height 属性：这两个属性用于设置图像的宽度和高度，单位可以是像素（px）或者百分比（%）。若只设置其中一个属性，另一个属性会按比例自动调整。

<img src="example.jpg" width="300" height="200">

title 属性：为图像提供额外的提示信息。当鼠标悬停在图像上时，会显示 title 属性的内容。

<img src="example.jpg" title="点击查看大图">

loading 属性：用于控制图像的加载方式，有三个可选值：

  • eager：默认值，图像会立即加载。
  • lazy：图像会在即将进入浏览器视口时才开始加载，这有助于提高页面的加载性能，特别是在有大量图像的页面中。
<img src="example.jpg" loading="lazy">

响应式图像

为了让图像在不同设备和屏幕尺寸下都能有良好的显示效果，可以使用 srcset 和 sizes 属性来实现响应式图像
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
    sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 2000px"
    src="https://www.w3school.com.cn//i/photo/tulip.jpg" alt="响应式图像">
  • srcset 属性列出了不同尺寸的图像文件以及对应的宽度（以 w 为单位）。
  • sizes 属性根据不同的屏幕宽度范围，指定应该使用的图像宽度。
  • src 属性提供了一个默认的图像文件，用于不支持 srcset 和 sizes 属性的浏览器。

注意事项

  • 图像格式：常见的网页图像格式有 JPEG、PNG、GIF 等，要根据图像的特点和使用场景选择合适的格式。
  • 文件路径：确保 src 属性的文件路径正确，否则图像将无法显示。
  • 性能优化：为了提高页面加载速度，可对图像进行压缩处理，并且合理使用 loading、srcset 和 sizes 属性。

66.图像映射 <map> 标签，与 <img> 标签配合使用，能够在图像上创建可点击的区域，这些区域被称为图像映射。图像映射可让用户通过点击图像的不同部分来执行不同的操作，例如跳转到不同的网页。

基本结构

<map> 标签需要和 <img> 标签关联，借助 <img> 标签的 usemap 属性指定要使用的 <map> 元素的名称（name 属性）。<map> 标签内包含多个 <area> 标签，这些 <area> 标签用于定义图像上的可点击区域。
<!-- 定义图像，并通过 usemap 属性关联到名为 myMap 的图像映射 -->
    <img src="https://picsum.photos/300/200" alt="示例图像" usemap="#myMap">

    <!-- 定义图像映射 -->
    <map name="myMap">
        <!-- 定义一个矩形可点击区域 -->
        <area shape="rect" coords="0,0,100,100" href="https://www.example1.com" alt="区域 1">
        <!-- 定义一个圆形可点击区域 -->
        <area shape="circle" coords="200,100,50" href="https://www.example2.com" alt="区域 2">
        <!-- 定义一个多边形可点击区域 -->
        <area shape="poly" coords="250,0,300,50,275,100" href="https://www.example3.com" alt="区域 3">
    </map>

代码解释

  1. <img> 标签：usemap 属性的值为 #myMap，这表明该图像要使用 name 属性为 myMap 的 <map> 元素来创建图像映射。
  2. <map> 标签：name 属性为 myMap，用于定义图像映射。
  3. <area> 标签：
    • shape 属性：指定可点击区域的形状，常见取值有 rect（矩形）、circle（圆形）、poly（多边形）。
    • coords 属性：根据 shape 属性的值，指定区域的坐标。
      • 对于 rect，坐标格式为 x1,y1,x2,y2，分别表示矩形左上角和右下角的坐标。
      • 对于 circle，坐标格式为 x,y,r，其中 x 和 y 是圆心的坐标，r 是半径。
      • 对于 poly，坐标格式为 x1,y1,x2,y2,x3,y3...，表示多边形各个顶点的坐标。
    • href 属性：指定点击该区域后要跳转的 URL。
    • alt 属性：为该区域提供替代文本描述，作用与 <img> 标签的 alt 属性类似。

注意事项

  • 要确保 <img> 标签的 usemap 属性值与 <map> 标签的 name 属性值一致，这样才能正确关联图像和图像映射。
  • 坐标值是相对于图像左上角的，原点坐标为 (0,0)。
  • 不同浏览器对图像映射的支持可能存在细微差异，在使用时要进行充分测试。

67.可点击区域 <area> 标签，用于在 HTML 图像映射里定义可点击的区域。图像映射是一种特殊的图像，在这个图像上的不同区域可以链接到不同的目标页面或执行其他操作。

基本使用步骤

  1. 创建 <img> 标签：先在 HTML 中插入要使用的图像，并通过 usemap 属性关联到一个 <map> 元素。
  2. 定义 <map> 标签：使用 <map> 标签创建一个图像映射，为其设置 name 属性，这个属性值要和 <img> 标签的 usemap 属性值相对应。
  3. 添加 <area> 标签：在 <map> 标签内部添加 <area> 标签，定义图像上的可点击区域。

常用属性及示例

1. shape 属性

该属性用于指定可点击区域的形状，有以下常见取值：
  • rect：表示矩形区域。
  • circle：表示圆形区域。
  • poly：表示多边形区域。
  • default：表示整个图像区域。

2. coords 属性

根据 shape 属性的值，指定区域的坐标：
  • 若 shape 为 rect，坐标格式是 x1,y1,x2,y2，分别代表矩形左上角和右下角的坐标。
  • 若 shape 为 circle，坐标格式是 x,y,r，其中 x 和 y 是圆心坐标，r 是半径。
  • 若shape为 poly，坐标格式是 x1,y1,x2,y2,x3,y3...，代表多边形各个顶点的坐标。

3. href 属性

指定点击该区域后要跳转的 URL。

4. alt 属性

为该区域提供替代文本描述，当图像无法显示或者用户使用屏幕阅读器时，这个描述会被读取。

代码解释参考map标签案例

代码解释

  • <img> 标签中的 usemap="#myMap" 把图像和 name 为 myMap 的 <map> 元素关联起来。
  • 在 <map> 元素里，有三个 <area> 标签：
    • 第一个 <area> 定义了一个矩形区域，坐标从 (0,0) 到 (100,100)，点击该区域会跳转到 https://www.example1.com。
    • 第二个 <area> 定义了一个圆形区域，圆心坐标是 (200,100)，半径为 50，点击会跳转到 https://www.example2.com。
    • 第三个 <area> 定义了一个多边形区域，由三个顶点 (250,0)、(300,50) 和 (275,100) 构成，点击会跳转到 https://www.example3.com。

68.画布 <canvas> 标签，它就像是一块 “画布”，允许你通过 JavaScript 在网页上动态地绘制图形、图像、动画以及进行视频处理等操作。

基本概念

<canvas> 本身只是一个占位符，默认情况下它是一个透明的矩形区域，没有任何内容。你需要使用 JavaScript 来操作 <canvas> 的绘图 API 才能在这个 “画布” 上绘制各种图形和元素。

主要用途

  • 图形绘制：能够绘制各种基本图形，像矩形、圆形、线条、弧线等，还能绘制复杂的自定义图形。
  • 动画制作：借助 JavaScript 实现图形的移动、变形、淡入淡出等动画效果。
  • 游戏开发：开发简单的 2D 游戏，例如贪吃蛇、俄罗斯方块等。
  • 数据可视化：将数据以图表（如柱状图、折线图、饼图）等形式展示出来。
  • 图像处理：对图像进行裁剪、缩放、滤镜等处理。

基本使用步骤

  1. 创建 <canvas> 元素：在 HTML 文件中添加 <canvas> 标签，并设置其宽度和高度。
<canvas id="myCanvas" width="400" height="300"></canvas>
  1. 获取 <canvas> 元素和绘图上下文：在 JavaScript 中，使用 document.getElementById() 方法获取 <canvas> 元素，然后通过 getContext() 方法获取绘图上下文。绘图上下文是一个对象，它提供了一系列用于绘图的方法和属性。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
  1. 使用绘图上下文进行绘制：利用绘图上下文的方法和属性来绘制图形。例如，绘制一个红色的矩形：
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);

示例：如何在 <canvas> 上绘制一个简单的圆形：

<canvas id="myCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置填充颜色
        ctx.fillStyle = 'blue';

        // 开始绘制路径
        ctx.beginPath();

        // 绘制圆形
        ctx.arc(200, 150, 50, 0, 2 * Math.PI);

        // 填充路径
        ctx.fill();
    </script>

代码解释

  • <canvas> 标签定义了一个宽度为 400 像素、高度为 300 像素的画布。
  • JavaScript 代码中，首先获取 <canvas> 元素和 2D 绘图上下文。
  • 接着设置填充颜色为蓝色，开始绘制路径，使用 arc() 方法绘制一个圆心坐标为 (200, 150)、半径为 50 像素的圆形。
  • 最后使用 fill() 方法填充圆形路径。

注意事项

  • 浏览器兼容性：虽然现代浏览器对 <canvas> 标签的支持良好，但在一些旧版本的浏览器中可能存在兼容性问题。在使用时，可以通过检查 getContext() 方法是否返回 null 来判断浏览器是否支持 <canvas>。
  • 性能问题：在进行复杂的图形绘制和动画处理时，可能会影响页面的性能。可以通过合理优化代码、减少重绘和回流等方式来提高性能。
  • 坐标系统：<canvas> 的坐标系统原点 (0, 0) 位于画布的左上角，X 轴向右为正，Y 轴向下为正。在绘制图形时，要注意坐标的正确使用。

69.标题或描述 <figcaption> 标签，主要用于为 <figure> 元素添加标题或描述信息。<figure> 元素通常用于在文档中展示一些独立的内容，如图像、图表、代码片段等，而 <figcaption> 则为这些内容提供了一个明确的说明，增强了页面的可读性和可访问性。

主要用途

  • 为图像添加说明：当 <figure> 元素包含一张图片时，<figcaption> 可以为图片提供标题、拍摄信息、相关解释等内容。
  • 为图表或示意图提供描述：对于复杂的图表或示意图，使用 <figcaption> 可以帮助用户更好地理解其含义和用途。
  • 解释代码片段：如果 <figure> 中包含代码示例，<figcaption> 可以对代码的功能、用途或实现思路进行简要说明。

基本语法

<figcaption> 标签必须作为 <figure> 元素的子元素使用，通常放在 <figure> 元素内部的开头或结尾位置。
<figure>
  <img src="https://pcsdata.baidu.com/thumbnail/32cccb540pba982916cd688bad448c9d?fid=3657813188-16051585-482569125489907&rt=pr&sign=FDTAER-yUdy3dSFZ0SVxtzShv1zcMqd-L44iQ2yhVUWmo%2F4G1LaaiLhpbDQ%3D&expires=2h&chkv=0&chkbd=0&chkpc=&dp-logid=521940813436123267&dp-callid=0&time=1746194400&bus_no=26&size=c1600_u1600&quality=100&vuk=-&ft=video"alt="示例图片">
  <figcaption>这是一张示例图片，展示了一个美女的图片。</figcaption>
</figure>
<figure>
    <img src="https://picsum.photos/300/200" alt="随机图片">
    <figcaption>这是一张随机生成的示例图片。</figcaption>
</figure>

为代码片段提供解释

<figure>
    <pre>
        <code>
function add(a, b) {
    return a + b;
}
        </code>
    </pre>
    <figcaption>这是一个简单的 JavaScript 函数，用于计算两个数的和。</figcaption>
</figure>

注意事项

  • 语义化：使用 <figcaption> 标签可以提高代码的语义化程度，有助于搜索引擎理解页面内容，同时也方便屏幕阅读器等辅助设备为残障人士提供更好的服务。
  • 位置灵活性：<figcaption> 标签在 <figure> 元素内的位置可以根据设计需求调整，既可以放在内容之前，也可以放在内容之后。
  • 内容简洁性：<figcaption> 中的内容应该简洁明了，能够准确概括 <figure> 元素所包含内容的主要信息。

 70.内容单元 <figure> 标签，主要用于在文档中表示一个独立的内容单元，这个内容单元通常是一个图像、图表、代码片段、视频、音频等，并且可以带有一个可选的标题（通过 <figcaption> 标签提供）。

主要用途

  • 独立内容展示：<figure> 元素能将一些独立的内容从文档的主要文本流中分离出来，使其具有独立性和自包含性。这样可以让页面结构更加清晰，便于理解和维护。
  • 提供上下文关联：与周围的文本相比，<figure> 所包含的内容通常是一个相对独立的实体，但它又与文档的主题相关。通过使用 <figure> 元素，可以明确地表达这种关联。
  • 便于样式设计：由于 <figure> 元素是一个独立的容器，开发者可以更方便地对其进行样式设计，比如添加边框、阴影、内边距等，以突出显示其中的内容。

基本语法

<figure> 元素可以单独使用，也可以与 <figcaption> 元素结合使用来为内容添加标题。
<figure>
  <img src="/i/photo/tulip.jpg" alt="郁金香" style="width:300px">
  <figcaption>图 1 - 郁金香，百合科，多年生草本植物。</figcaption>
</figure>
<figure>
    <pre>
        <code>
function add(a, b) {
    return a + b;
}
        </code>
    </pre>
    <figcaption>这是一个简单的 JavaScript 函数，用于计算两个数的和。</figcaption>
</figure>

注意事项

  • 语义化：<figure> 元素的主要目的是提供语义化的标记，因此在使用时应确保所包含的内容确实是一个独立的、与文档主题相关的实体。
  • <figcaption> 的使用：<figcaption> 是可选的，但如果需要为 <figure> 中的内容提供说明或标题，建议使用它。<figcaption> 可以放在 <figure> 元素内部的开头或结尾位置。
  • 兼容性：<figure> 是 HTML5 元素，现代浏览器都对其提供了良好的支持，但在一些旧版本的浏览器中可能需要进行适当的处理或使用 JavaScript 进行兼容性修复。

71.图像资源容器 <picture> 标签，它为开发者提供了一种灵活的方式来根据不同的设备特性（如屏幕尺寸、分辨率、浏览器支持情况等）展示不同的图像资源。

主要用途

  • 响应式图像：在不同屏幕尺寸的设备上，根据设备的特性（如屏幕宽度、像素密度等），展示最合适的图像。比如在移动设备上显示小尺寸的图像以节省带宽，在高分辨率的大屏幕设备上显示高分辨率的图像以保证图像质量。
  • 图像格式兼容性：不同浏览器对图像格式的支持有所差异，<picture> 标签可以根据浏览器支持情况，提供不同格式的图像。例如，现代浏览器支持 WebP 格式，它具有更好的压缩率和图像质量，而一些旧浏览器可能不支持，这时可以提供 JPEG 或 PNG 等常见格式的图像作为替代。

基本语法

<picture> 标签通常包含多个 <source> 标签和一个 <img> 标签。<source> 标签用于指定不同的图像资源和适用条件，<img> 标签则作为默认的图像显示，当所有 <source> 标签的条件都不满足时，会显示 <img> 标签指定的图像。
<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="示例图像">
</picture>

属性及解释

  • <source> 标签的属性：
    • media：该属性用于指定媒体查询条件，当浏览器窗口的尺寸满足该条件时，会使用该 <source> 标签指定的图像资源。例如，media="(min-width: 1200px)" 表示当浏览器窗口宽度大于等于 1200 像素时，使用该 <source> 标签指定的图像。
    • srcset：指定图像资源的 URL。可以提供多个图像资源，每个资源后面可以跟一个宽度描述符（如 1x、2x 等），用于表示不同像素密度下应使用的图像。例如，srcset="image-1x.jpg 1x, image-2x.jpg 2x" 表示在普通屏幕上使用 image-1x.jpg，在高分辨率屏幕上使用 image-2x.jpg。
    • type：指定图像的 MIME 类型，用于告诉浏览器该图像的格式。例如，type="image/webp" 表示该图像是 WebP 格式。浏览器会根据自身对图像格式的支持情况，选择合适的图像资源。
  • <img> 标签的属性：
    • src：指定默认的图像资源，当所有 <source> 标签的条件都不满足时，会显示该图像。
    • alt：为图像提供替代文本描述，当图像无法显示时，浏览器会显示该文本内容，同时也有助于屏幕阅读器等辅助设备向视障用户描述图像信息。
<picture>
    <source media="(min-width: 1200px)" type="image/webp" srcset="large.webp">
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" type="image/webp" srcset="medium.webp">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <source type="image/webp" srcset="small.webp">
    <img src="small.jpg" alt="示例图像">
</picture>
在这个示例中，首先会根据浏览器窗口的宽度和对 WebP 格式的支持情况，选择最合适的图像资源。如果浏览器窗口宽度大于等于 1200 像素且支持 WebP 格式，会显示 large.webp；如果不支持 WebP 格式，则显示 large.jpg。以此类推，直到找到合适的图像资源，如果所有 <source> 标签的条件都不满足，会显示 small.jpg。

注意事项

  • 浏览器兼容性：虽然现代浏览器对 <picture> 标签的支持较好，但在一些旧版本的浏览器中可能存在兼容性问题。在使用时，可以通过特性检测来确保兼容性。
  • 图像资源管理：使用 <picture> 标签时，需要准备多个不同尺寸和格式的图像资源，这会增加服务器的存储和管理成本。因此，需要合理规划图像资源，避免资源浪费。

72.SVG图形的容器 <svg> 标签，用于在 HTML 文档中直接嵌入可缩放矢量图形（Scalable Vector Graphics，简称 SVG）。SVG 是一种基于 XML 语法的图像格式，与传统的位图（如 JPEG、PNG）不同，SVG 图像由数学公式描述图形的形状、颜色和位置等信息，因此具有以下显著特点：

主要特点

  • 可缩放性：SVG 图像可以在不损失质量的情况下进行任意缩放，无论在高分辨率的屏幕上还是小尺寸的设备上，都能清晰显示。
  • 基于 XML 语法：SVG 图像使用 XML 标记语言来描述图形，这使得它具有良好的可读性和可编辑性，开发者可以通过代码直接创建和修改 SVG 图像。
  • 交互性：可以为 SVG 元素添加 JavaScript 事件处理程序，实现交互效果，如点击、鼠标悬停等。
  • 动画效果：SVG 支持动画，通过 SVG 的动画元素（如 <animate>、<animateTransform> 等）或 JavaScript 可以创建各种动画效果。
  • 体积小：由于 SVG 图像是由数学公式描述的，文件体积通常比位图小，尤其是对于简单的图形。

基本语法

在 HTML 中使用 <svg> 标签创建 SVG 图像，需要指定 width 和 height 属性来设置 SVG 图像的宽度和高度，也可以使用 viewBox 属性来定义 SVG 图像的可视区域。
<svg width="200" height="200" viewBox="0 0 100 100">
    <!-- 在这里添加 SVG 图形元素 -->
</svg>

常见图形元素

  • <rect>：用于绘制矩形。
<svg width="200" height="200">
    <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

 在这个示例中，x 和 y 属性指定矩形的左上角坐标，width 和 height 属性指定矩形的宽度和高度，fill 属性指定矩形的填充颜色。

  • <circle>：用于绘制圆形。
<svg width="200" height="200">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

 cx 和 cy 属性指定圆心的坐标，r 属性指定圆的半径，fill 属性指定圆的填充颜色。

  • <line>：用于绘制直线。
<svg width="200" height="200">
    <line x1="10" y1="10" x2="90" y2="90" stroke="green" stroke-width="2" />
</svg>

 x1 和 y1 属性指定直线的起点坐标，x2 和 y2 属性指定直线的终点坐标，stroke 属性指定直线的颜色，stroke-width 属性指定直线的宽度。

 包含多种图形示例

<svg width="200" height="200" viewBox="0 0 100 100">
    <rect x="10" y="10" width="30" height="30" fill="blue" />
    <circle cx="70" cy="30" r="20" fill="red" />
    <line x1="10" y1="80" x2="90" y2="80" stroke="green" stroke-width="2" />
</svg>

注意事项

  • 兼容性：现代浏览器对 SVG 的支持较好，但在一些旧版本的浏览器中可能存在兼容性问题。在使用时，需要进行充分的测试。
  • 性能优化：对于复杂的 SVG 图像，可能会影响页面的性能。可以通过优化 SVG 代码、减少不必要的元素和属性等方式来提高性能。
  • 安全问题：由于 SVG 可以包含 JavaScript 代码，因此在使用外部 SVG 文件时需要注意安全问题，避免遭受跨站脚本攻击（XSS）。

 ☯音频/视频

 73.网页中嵌入音频 <audio> 标签，主要功能是在网页中嵌入音频内容，让开发者能够轻松地在网页上播放音频文件，而无需依赖第三方插件（如 Flash）。

基本语法

在 HTML 中使用 <audio> 标签时，需要指定要播放的音频文件的路径，通过 src 属性来实现。 

<audio src="example.mp3" controls></audio>
在上述代码里，src 属性指定了音频文件的路径，这里是 example.mp3；controls 属性是一个布尔属性，添加该属性后，浏览器会显示音频播放器的控制条，用户可以通过控制条进行播放、暂停、调节音量等操作。

常用属性

  • src：该属性用于指定要播放的音频文件的 URL，可以是相对路径或绝对路径。
<audio src="https://example.com/audio.mp3" controls></audio>
  • controls：布尔属性，添加此属性后，浏览器会显示音频播放器的控制条。若不添加该属性，音频播放器将不会显示控制条，用户无法直接操作播放、暂停等。
  • autoplay：同样是布尔属性，若添加该属性，音频会在页面加载完成后自动播放。不过，由于自动播放可能会影响用户体验，很多浏览器对此有一定限制，例如要求用户与页面有过交互操作后才允许自动播放。
<audio src="example.mp3" autoplay controls></audio>
  • loop：布尔属性，添加该属性后，音频会在播放结束后自动循环播放。
<audio src="example.mp3" loop controls></audio>
  • preload：该属性用于指定浏览器如何预先加载音频文件，有三个可选值：
    • none：不预先加载音频文件。
    • metadata：只预先加载音频的元数据（如时长、比特率等）。
    • auto：浏览器自行决定是否预先加载音频文件以及加载多少内容。默认值为 auto。
<audio src="example.mp3" preload="metadata" controls></audio>

支持多种音频格式

不同浏览器对音频格式的支持有所不同，为了确保音频能在各种浏览器中正常播放，可以在 <audio> 标签内使用多个 <source> 标签来提供不同格式的音频文件。

<audio controls>
    <source src="example.mp3" type="audio/mpeg">
    <source src="example.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>
在这个例子中，浏览器会依次尝试加载 example.mp3 和 example.ogg 文件，根据自身对音频格式的支持情况选择合适的文件进行播放。如果所有 <source> 标签指定的音频文件都无法播放，浏览器会显示 <audio> 标签内的文本内容，提示用户浏览器不支持音频播放。

结合 JavaScript 控制音频播放

可以使用 JavaScript 来控制 <audio> 元素的播放、暂停、音量等操作。
<audio id="myAudio" src="example.mp3"></audio>
    <button onclick="playAudio()">播放</button>
    <button onclick="pauseAudio()">暂停</button>
    <script>
        const audio = document.getElementById('myAudio');
        function playAudio() {
            audio.play();
        }
        function pauseAudio() {
            audio.pause();
        }
    </script>

在上述代码中，通过 JavaScript 获取 <audio> 元素，然后定义了 playAudio() 和 pauseAudio() 两个函数，分别用于播放和暂停音频。通过点击按钮调用相应的函数来控制音频的播放状态。

注意事项

  • 版权问题：在网页中使用音频文件时，要确保拥有合法的版权，避免侵权行为。
  • 浏览器兼容性：虽然现代浏览器对 <audio> 标签的支持较好，但不同浏览器对音频格式的支持存在差异，需要提供多种格式的音频文件以确保兼容性。
  • 性能优化：对于较大的音频文件，要合理使用 preload 属性，避免不必要的带宽消耗。

 74.多个资源选项 <source> 标签，在 HTML 里常和 <picture>、<audio>、<video> 这些元素搭配使用，其作用是为这些元素提供多个资源选项，浏览器会依据自身能力和当前环境来挑选最合适的资源。

与 <picture> 标签配合

在响应式网页设计里，<picture> 标签和 <source> 标签结合，能根据不同的设备特性（像屏幕尺寸、分辨率、浏览器支持情况等）展示不同的图像资源。
<picture>
    <source media="(min-width: 1200px)" type="image/webp" srcset="large.webp">
    <source media="(min-width: 768px)" type="image/webp" srcset="medium.webp">
    <source type="image/webp" srcset="small.webp">
    <img src="small.jpg" alt="示例图像">
</picture>
  • media 属性：指定媒体查询条件，当浏览器窗口尺寸符合该条件时，就会使用此 <source> 标签指定的图像资源。例如 media="(min-width: 1200px)" 表示当窗口宽度大于等于 1200 像素时使用对应图像。
  • type 属性：指明图像的 MIME 类型，让浏览器知晓图像格式。例如 type="image/webp" 表示图像是 WebP 格式。
  • srcset 属性：指定图像资源的 URL。可以提供多个图像资源，每个资源后面可跟宽度描述符（如 1x、2x 等），用于表示不同像素密度下应使用的图像。

与 <audio> 标签配合

在网页中嵌入音频时，不同浏览器对音频格式的支持有差异，使用 <source> 标签能提供多种音频格式的文件，确保音频在各种浏览器中都能正常播放。
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

  • src 属性：指定音频文件的 URL。
  • type 属性：指明音频的 MIME 类型，帮助浏览器判断是否支持该音频格式。浏览器会按顺序尝试加载 <source> 标签指定的音频文件，直到找到支持的格式。

与 <video> 标签配合

和音频类似，不同浏览器对视频格式的支持也不同，使用 <source> 标签可以提供多种视频格式的文件。
<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

  • src 属性：指定视频文件的 URL。
  • type 属性：指明视频的 MIME 类型，方便浏览器选择合适的视频格式进行播放。

注意事项

  • 浏览器兼容性：虽然现代浏览器对 <source> 标签的支持良好，但在一些旧版本浏览器中可能存在兼容性问题，使用时需进行测试。
  • 资源管理：提供多个资源选项会增加服务器的存储和管理成本，要合理规划资源，避免浪费。

75.文本轨道 <track> 标签，它主要与 <audio> 和 <video> 标签配合使用，用于为音视频添加字幕、章节描述、提示信息等文本轨道。借助 <track> 标签，用户可以实现更丰富的音视频交互体验，同时也提升了音视频内容的可访问性。

主要用途

  • 添加字幕：为视频添加不同语言的字幕，方便不同语言背景的用户理解视频内容。
  • 提供章节描述：在长视频中，为每个章节添加描述信息，用户可以快速定位到感兴趣的章节。
  • 给出提示信息：在音频或视频播放过程中，提供一些关键时间点的提示信息，如重要事件、场景切换等。

常用属性

  • src：该属性用于指定包含文本轨道数据的文件的 URL，这个文件通常是 WebVTT（Web Video Text Tracks）格式，它是一种用于定义音视频文本轨道的标准格式。
  • kind：指定文本轨道的类型，常见取值有以下几种：
    • subtitles：表示字幕，通常用于显示与对话或音频内容对应的文本，可翻译为不同语言。
    • captions：表示隐藏字幕，除了显示对话内容外，还会包含一些声音效果的描述，适用于听力障碍用户。
    • descriptions：表示描述信息，用于为视力障碍用户提供视频内容的文本描述。
    • chapters：表示章节信息，用于将视频划分为不同的章节，并提供每个章节的标题和描述。
    • metadata：表示元数据，用于存储与音视频相关的其他信息，这些信息通常不会直接显示给用户。
  • srclang：指定文本轨道的语言，使用双字母的 ISO 639-1 语言代码，如 zh 表示中文，en 表示英文。
  • label：为文本轨道提供一个友好的名称或标签，这个标签会显示在浏览器的字幕选择菜单中，方便用户识别不同的文本轨道。
  • default：布尔属性，如果设置了该属性，表示该文本轨道是默认启用的，当音视频开始播放时，会自动显示该文本轨道的内容。
<video controls width="640" height="360">
    <source src="example.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English Subtitles">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文字幕" default>
    您的浏览器不支持视频播放。
</video>

代码解释

  • <video> 标签用于嵌入视频，controls 属性显示视频播放器的控制条。
  • <source> 标签指定要播放的视频文件。
  • 第一个 <track> 标签提供了英文的字幕文件 subtitles_en.vtt，kind 属性为 subtitles，表示这是一个字幕轨道，srclang 为 en 表示语言是英文，label 为 English Subtitles 用于在字幕选择菜单中显示。
  • 第二个 <track> 标签提供了中文的字幕文件 subtitles_zh.vtt，同样是字幕轨道，语言为中文，label 为 中文字幕，并且设置了 default 属性，表示该字幕轨道是默认启用的。

注意事项

  • WebVTT 文件格式：确保提供的文本轨道文件是正确的 WebVTT 格式，文件内容需要遵循 WebVTT 的语法规则，否则字幕可能无法正常显示。
  • 浏览器兼容性：虽然现代浏览器对 <track> 标签和 WebVTT 格式的支持较好，但在一些旧版本的浏览器中可能存在兼容性问题，在使用时需要进行充分测试。
  • 字幕文件管理：要保证字幕文件的路径和文件名正确，并且字幕文件的内容与音视频内容的时间轴匹配，以确保字幕能在正确的时间显示。

76.网页中嵌入视频 <video> 标签，它的主要作用是在网页中嵌入视频内容，让开发者能够直接在网页上播放视频，而无需依赖第三方插件（如 Flash）。

基本语法

在 HTML 里使用 <video> 标签时，要指定视频文件的路径，通过 src 属性实现，还可以添加 controls 属性来显示视频播放器的控制条。
<video src="example.mp4" controls></video>

在上述代码中，src 属性指定了视频文件的路径，这里是 example.mp4；controls 属性是布尔属性，添加该属性后，浏览器会显示视频播放器的控制条，用户能通过控制条进行播放、暂停、调节音量等操作。

常用属性

  • src：指定要播放的视频文件的 URL，可以是相对路径或绝对路径。
<video src="https://example.com/video.mp4" controls></video>
  • controls：布尔属性，添加后会显示视频播放器的控制条，方便用户操作。若不添加该属性，视频播放器不会显示控制条，用户无法直接操作播放、暂停等。
  • autoplay：布尔属性，添加该属性后，视频会在页面加载完成后自动播放。不过，由于自动播放可能影响用户体验，很多浏览器对此有限制，比如要求用户与页面有过交互操作后才允许自动播放。
<video src="example.mp4" autoplay controls></video>
  • loop：布尔属性，添加该属性后，视频会在播放结束后自动循环播放。
<video src="example.mp4" loop controls></video>
  • preload：指定浏览器如何预先加载视频文件，有三个可选值：
    • none：不预先加载视频文件。
    • metadata：只预先加载视频的元数据（如时长、分辨率等）。
    • auto：浏览器自行决定是否预先加载视频文件以及加载多少内容。默认值为 auto。
<video src="example.mp4" preload="metadata" controls></video>
  • poster：该属性指定一个图像的 URL，在视频加载或未播放时，会显示这个图像作为视频的封面。
<video src="example.mp4" poster="poster.jpg" controls></video>
  • width 和 height：设置视频播放器的宽度和高度，单位可以是像素（px）或百分比（%）。
<video src="example.mp4" width="640" height="360" controls></video>

支持多种视频格式

不同浏览器对视频格式的支持有所不同，为确保视频能在各种浏览器中正常播放，可以在 <video> 标签内使用多个 <source> 标签来提供不同格式的视频文件。
<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>
在这个例子中，浏览器会依次尝试加载 example.mp4 和 example.webm 文件，根据自身对视频格式的支持情况选择合适的文件进行播放。如果所有 <source> 标签指定的视频文件都无法播放，浏览器会显示 <video> 标签内的文本内容，提示用户浏览器不支持视频播放。

结合 JavaScript 控制视频播放

可以使用 JavaScript 来控制 <video> 元素的播放、暂停、音量等操作。
<video id="myVideo" src="example.mp4"></video>
    <button onclick="playVideo()">播放</button>
    <button onclick="pauseVideo()">暂停</button>
    <script>
        const video = document.getElementById('myVideo');
        function playVideo() {
            video.play();
        }
        function pauseVideo() {
            video.pause();
        }
    </script>
在上述代码中，通过 JavaScript 获取 <video> 元素，然后定义了 playVideo() 和 pauseVideo() 两个函数，分别用于播放和暂停视频。通过点击按钮调用相应的函数来控制视频的播放状态。

注意事项

  • 版权问题：在网页中使用视频文件时，要确保拥有合法的版权，避免侵权行为。
  • 浏览器兼容性：虽然现代浏览器对 <video> 标签的支持较好，但不同浏览器对视频格式的支持存在差异，需要提供多种格式的视频文件以确保兼容性。
  • 性能优化：对于较大的视频文件，要合理使用 preload 属性，避免不必要的带宽消耗。

 ☯链接

77.超链接 <a> 标签，用于创建超链接的重要元素，超链接能让用户在不同网页、不同页面区域或者其他资源之间进行跳转。其中，href 属性是 <a> 标签的核心属性，它指定了链接的目标地址，可以是一个网页的 URL、文件路径、电子邮件地址等；“链接文本” 则是显示在网页上供用户点击的文本内容。

<a href="http://www.w3school.com.cn">W3School网链接</a>

链接到同一页面的特定位置

可以通过给页面中的元素设置 id 属性，然后使用 <a> 标签的 href 属性加上 # 和元素的 id 值来实现页面内的跳转。
<!-- 定义一个目标位置 -->
<h2 id="section2">第二部分</h2>

<!-- 创建一个指向该位置的链接 -->
<a href="#section2">跳转到第二部分</a>
当用户点击 “跳转到第二部分” 这个链接时，页面会滚动到 id 为 section2 的 <h2> 元素所在的位置。

链接到文件

<a href="document.pdf">下载 PDF 文件</a>
点击 “下载 PDF 文件” 链接，浏览器会尝试下载 document.pdf 文件，如果浏览器支持直接打开该文件类型，也可能会在浏览器中直接打开。

发送电子邮件

<a href="mailto:example@example.com">发送邮件</a>

点击 “发送邮件” 链接，会打开邮件客户端，收件人地址会自动填写为 example@example.com。

常用属性

  • target：该属性用于指定链接的打开方式，常见取值如下：
    • _self：默认值，在当前窗口或标签页中打开链接。
    • _blank：在新窗口或新标签页中打开链接。
<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>
  • title：为链接提供额外的提示信息，当鼠标悬停在链接上时，会显示 title 属性的内容。
<a href="https://www.example.com" title="这是一个示例网站">访问示例网站</a>

  • rel：指定当前文档与链接文档之间的关系，常见的值有 nofollow、noopener、noreferrer 等。nofollow 告诉搜索引擎不要追踪该链接；noopener 和 noreferrer 主要用于安全方面，防止新打开的页面通过 window.opener 访问原页面。
<a href="https://www.example.com" rel="nofollow">访问示例网站</a>

注意事项

  • URL 正确性：要确保 href 属性中的 URL 正确无误，否则链接将无法正常工作。
  • 用户体验：使用合适的链接文本，让用户清楚知道点击链接后会跳转到哪里。同时，合理使用 target 属性，避免不必要地打开过多新窗口或标签页，影响用户体验。
  • 安全问题：在使用 target="_blank" 时，建议同时使用 rel="noopener noreferrer" 来提高安全性，防止潜在的安全风险。

78.当前文档与外部资源的连接 <link> 标签，HTML 里的一个空标签（即只有开始标签，没有结束标签），它主要用于在 HTML 文档和外部资源之间建立关联，放于<head>标签中。

主要用途

  • 引入外部样式表：这是 <link> 标签最常见的用途，通过它可以将外部的 CSS 文件引入到 HTML 文档中，从而为网页应用样式。
  • 设置网站图标：能将指定的图标文件关联到 HTML 文档，使该图标显示在浏览器的标签页、书签栏等位置。
  • 关联其他资源：还可以关联其他类型的资源，如 RSS 订阅源、网站的备用版本等。

常用属性及示例

1. href 属性

该属性用于指定外部资源的 URL，可以是相对路径或绝对路径。

2. rel 属性

rel 属性定义了当前文档与被链接资源之间的关系，常见取值如下：
  • stylesheet：表明被链接的资源是一个外部样式表。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入外部样式表</title>
    <link rel="stylesheet" href="styles.css">
</head>
在这个例子中，styles.css 是一个外部的 CSS 文件，通过 <link> 标签引入后，该文件中的样式规则会应用到 HTML 文档的元素上。
  • icon：表示被链接的资源是网站的图标。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入外部样式表</title>
    <link rel="icon" href="favicon.ico">>
</head>
这里的 favicon.ico 是网站的图标文件，引入后该图标会显示在浏览器的标签页上。
  • alternate：表示被链接的资源是当前文档的备用版本，如不同语言版本、RSS 订阅源等。
<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS Feed">

此例中，rss.xml 是一个 RSS 订阅源文件，用户可以通过点击该链接订阅网站的 RSS 内容。

3. type 属性

type 属性指定被链接资源的 MIME 类型，虽然该属性在 HTML5 中不是必需的，但建议使用，以确保浏览器正确识别资源类型。例如，引入 CSS 样式表时，type 属性值通常为 text/css；引入 RSS 订阅源时，type 属性值为 application/rss+xml。
<link rel="stylesheet" type="text/css" href="styles.css">

4. media 属性

media 属性用于指定样式表应用的媒体类型或媒体查询条件。通过设置该属性，可以根据不同的设备特性（如屏幕尺寸、分辨率等）应用不同的样式。
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
在这个例子中，mobile.css 样式表只会在屏幕宽度小于等于 768 像素的设备上应用。

注意事项

  • 路径正确性：要保证 href 属性中的路径正确，否则浏览器无法找到对应的资源。
  • 性能优化：尽量减少不必要的外部资源引入，以提高页面的加载速度。同时，可以对 CSS 文件进行合并和压缩，减少 HTTP 请求。
  • 兼容性：不同浏览器对 <link> 标签的某些属性和特性的支持可能存在差异，使用时要进行充分测试。

79.导航链接 <nav> 标签，HTML5 引入的一个语义化标签，它主要用于定义网页中的导航链接部分，也就是包含一组导航链接的区域。这些链接通常指向网站内的其他页面、页面内的特定部分或者其他相关网站。

主要作用

  • 增强语义：使用 <nav> 标签可以让代码的语义更加清晰，搜索引擎和屏幕阅读器等辅助设备能够更好地理解网页的结构，知道哪些内容是导航部分，从而提高网站的可访问性和搜索引擎优化（SEO）效果。
  • 便于样式设计：<nav> 标签作为一个独立的容器，方便开发者对导航区域进行统一的样式设计，例如设置背景颜色、字体样式、布局等。

基本用法

<nav> 标签通常包含多个 <a> 标签，用于创建导航链接。
<nav>
    <a href="index.html">首页</a>
    <a href="about.html">关于我们</a>
    <a href="services.html">服务项目</a>
    <a href="contact.html">联系我们</a>
</nav>

应用场景

  • 全局导航：通常位于网页的顶部或侧边栏，提供网站主要页面的链接，方便用户在不同页面之间进行切换。
<header>
    <nav>
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">解决方案</a>
        <a href="#">新闻资讯</a>
        <a href="#">联系我们</a>
    </nav>
</header>
  • 分页导航：在包含大量内容的页面中，用于实现分页功能，让用户可以在不同页面之间切换。
<nav>
    <a href="page1.html">&lt; 上一页</a>
    <a href="page2.html">第 2 页</a>
    <a href="page3.html">第 3 页</a>
    <a href="page4.html">第 4 页</a>
    <a href="page2.html">下一页 &gt;</a>
</nav>

  • 面包屑导航：显示用户在网站中的当前位置，通常位于页面的顶部或内容区域的上方，帮助用户了解自己所处的页面层次结构。
<nav aria-label="面包屑导航">
    <ol>
        <li><a href="index.html">首页</a></li>
        <li><a href="products.html">产品</a></li>
        <li><a href="smartphones.html">智能手机</a></li>
        <li>某款智能手机型号</li>
    </ol>
</nav>

注意事项

  • 并非所有链接都需要 <nav> 标签：<nav> 标签主要用于重要的导航链接组，而不是所有的链接都需要用 <nav> 标签包裹。例如，文章中的普通超链接就不需要使用 <nav> 标签。
  • 辅助设备支持：为了提高可访问性，建议为 <nav> 标签添加 aria-label 属性，为导航区域提供一个描述性的标签，方便屏幕阅读器等辅助设备识别导航的用途。

 ☯列表

80.列表式菜单 <menu> 标签，在 HTML 中有不同的使用场景和含义，它既可以用于创建列表式菜单，也能用于定义命令菜单。

HTML4 及早期用法

在 HTML4 及早期版本中，<menu> 标签主要用于创建无序列表式的菜单，功能和 <ul> 标签类似。但由于缺乏独特的语义和样式特点，它并不常用
<menu>
    <li>菜单项 1</li>
    <li>菜单项 2</li>
    <li>菜单项 3</li>
</menu>

HTML5 中的语义和用法

在 HTML5 中，<menu> 标签有了新的语义和用途，主要用于定义命令菜单，可包含一组用户可以执行的操作或命令。常见的应用场景有上下文菜单、工具栏等。

上下文菜单

当用户在页面上右键点击时弹出的菜单，使用 <menu> 标签结合 contextmenu 属性来实现。
<p id="myParagraph" contextmenu="myContextMenu">右键点击我查看菜单</p>
    <menu id="myContextMenu" type="context">
        <menuitem label="复制" onclick="copyText()"></menuitem>
        <menuitem label="粘贴" onclick="pasteText()"></menuitem>
    </menu>
    <script>
        function copyText() {
            alert('已复制文本');
        }
        function pasteText() {
            alert('已粘贴文本');
        }
    </script>

在上述代码中，<p> 元素的 contextmenu 属性值与 <menu> 元素的 id 相匹配，当用户右键点击 <p> 元素时，会弹出定义好的上下文菜单。<menuitem> 标签用于定义菜单项，label 属性显示菜单项的文本，onclick 属性指定点击菜单项时执行的 JavaScript 函数。

工具栏菜单

可以用 <menu> 标签创建一个工具栏，包含一系列操作按钮。
 <menu type="toolbar">
        <button onclick="saveFile()">保存</button>
        <button onclick="printPage()">打印</button>
        <button onclick="undoAction()">撤销</button>
    </menu>
    <script>
        function saveFile() {
            alert('文件已保存');
        }
        function printPage() {
            window.print();
        }
        function undoAction() {
            alert('操作已撤销');
        }
    </script>

这里 <menu> 标签的 type 属性值为 toolbar，表示这是一个工具栏菜单，内部包含多个 <button> 元素作为操作按钮。

注意事项

  • 浏览器兼容性：虽然 <menu> 标签在 HTML5 中有了新的语义和用途，但浏览器对其支持情况并不一致，尤其是 <menuitem> 标签，部分浏览器可能不支持。在使用时，需要进行充分的测试。
  • 替代方案：由于浏览器兼容性问题，在实际开发中，开发者通常会使用 <ul>、<div>等元素结合 CSS 和 JavaScript 来实现菜单和工具栏的功能。

81.无序列表 <ul>&<dir>(HTML4已废弃) 标签，用于创建无序列表的元素，无序列表中的每个列表项没有特定的顺序编号，通常以项目符号（如圆点、方块等）来标记。

基本语法

<ul> 标签需要与 <li> 标签配合使用，<li> 标签用于定义列表中的每个项目。
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

 在上述代码中，<ul> 标签定义了一个无序列表的范围，里面包含了三个 <li> 标签，分别代表列表中的三个项目。在浏览器中显示时，每个列表项前会默认显示一个圆点作为项目符号。

常见用途

  • 导航菜单：在网页设计中，常使用 <ul> 标签创建导航菜单，通过 CSS 样式对列表进行布局和美化，让用户可以方便地在不同页面之间切换。
<nav>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="about.html">关于我们</a></li>
        <li><a href="services.html">服务项目</a></li>
        <li><a href="contact.html">联系我们</a></li>
    </ul>
</nav>
  • 信息列举：当需要列举一系列相关信息时，使用 <ul> 标签可以使内容更加清晰易读。比如列举产品的特点、优势等。
<h2>产品特点</h2>
<ul>
    <li>高性能处理器</li>
    <li>大容量电池</li>
    <li>高清显示屏</li>
</ul>

样式设置

  • 项目符号样式：可以使用 CSS 的 list-style-type 属性来改变项目符号的样式，常见取值有 disc（圆点，默认值）、circle（空心圆）、square（方块）、none（不显示项目符号）等。
<style>
    ul {
        list-style-type: square;
    }
</style>
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

自定义项目符号：除了使用预定义的项目符号样式，还可以使用 CSS 的 list-style-image 属性来指定自定义的图像作为项目符号。

<style>
    ul {
        list-style-image: url('bullet.png');
    }
</style>
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

嵌套列表

<ul> 标签可以进行嵌套，在一个列表项中可以再包含一个新的无序列表或有序列表，从而创建更复杂的列表结构。
<ul>
    <li>一级列表项 1</li>
    <li>一级列表项 2
        <ul>
            <li>二级列表项 1</li>
            <li>二级列表项 2</li>
        </ul>
    </li>
    <li>一级列表项 3</li>
</ul>

注意事项

  • 语义正确：<ul> 标签用于表示无顺序关系的列表项集合，如果列表项之间有明确的顺序关系，应该使用 <ol> 标签创建有序列表。
  • 结构清晰：在嵌套列表时，要保证列表结构清晰，避免出现混乱的嵌套情况，影响代码的可读性和维护性。

82.有序列表 <ol> 标签，用于创建有序列表的元素。与 <ul> 标签创建的无序列表不同，有序列表中的每个列表项有特定的顺序编号，编号形式可以是数字、字母、罗马数字等。

基本语法

<ol> 标签需要和 <li> 标签配合使用，<li> 标签用来定义列表中的每个项目。
<ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ol>

 在上述代码中，<ol> 标签定义了一个有序列表的范围，里面包含三个 <li> 标签，分别代表列表中的三个项目。在浏览器中显示时，每个列表项前会按顺序显示数字编号，从 1 开始。

常见用途

  • 步骤说明：当需要按顺序描述一系列步骤时，使用 <ol> 标签可以让步骤更加清晰明了。例如，菜谱中的烹饪步骤、操作指南中的操作步骤等。
<h2>制作蛋糕的步骤</h2>
<ol>
    <li>准备所需材料，如面粉、鸡蛋、糖等。</li>
    <li>将鸡蛋分离出蛋清和蛋黄。</li>
    <li>打发蛋清至硬性发泡。</li>
    <li>将蛋黄与其他材料混合搅拌均匀。</li>
    <li>将打发的蛋清与蛋黄糊混合。</li>
    <li>将混合好的面糊倒入模具中。</li>
    <li>放入烤箱烤制。</li>
</ol>

  • 排行榜单：在展示排行榜、排名等内容时，使用 <ol> 标签能直观地体现出各项的顺序。
<h2>电影票房排行榜</h2>
<ol>
    <li>《电影 A》</li>
    <li>《电影 B》</li>
    <li>《电影 C》</li>
</ol>

样式设置

  • 编号类型：可以使用 CSS 的 list-style-type 属性改变编号的类型，常见取值有 decimal（十进制数字，默认值）、lower-alpha（小写字母）、upper-alpha（大写字母）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）等。
<style>
    ol {
        list-style-type: upper-roman;
    }
</style>
<ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ol>

  • 起始编号：通过 <ol> 标签的 start 属性可以指定列表的起始编号。例如，让列表从 5 开始编号：
<ol start="5">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ol>

嵌套列表

和 <ul> 标签一样，<ol> 标签也可以进行嵌套，在一个列表项中可以再包含一个新的有序列表或无序列表，从而创建更复杂的列表结构。
<ol>
    <li>一级列表项 1</li>
    <li>一级列表项 2
        <ol>
            <li>二级列表项 1</li>
            <li>二级列表项 2</li>
        </ol>
    </li>
    <li>一级列表项 3</li>
</ol>

注意事项

  • 语义正确：<ol> 标签用于表示有顺序关系的列表项集合，如果列表项之间没有顺序要求，应该使用 <ul> 标签创建无序列表。
  • 结构清晰：在嵌套列表时，要确保列表结构清晰，避免出现混乱的嵌套情况，影响代码的可读性和维护性。

 83.列表项 <li> 标签，用于定义列表项的标签，它常与 <ul>（无序列表）、<ol>（有序列表）以及 <menu>（菜单列表）标签配合使用，在网页中构建各种列表结构。

基本功能

<li> 标签的主要功能是将内容组织成列表形式，方便用户阅读和理解相关信息。根据与之配合的父标签不同，列表会呈现出不同的样式：
    • 与 <ul> 搭配：创建无序列表，列表项通常以项目符号（如圆点、方块等）标记。
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

 与 <ol> 搭配：创建有序列表，列表项会按顺序编号，编号形式可以是数字、字母或罗马数字等。

<ol>
    <li>第一步：打开文档</li>
    <li>第二步：编辑内容</li>
    <li>第三步：保存文档</li>
</ol>

 与 <menu> 搭配：在 HTML 中用于定义菜单列表，不过 <menu> 标签的使用场景相对较少，且部分浏览器对其支持存在差异。

列表嵌套

<li> 标签支持嵌套，即一个列表项中可以再包含新的列表，从而构建出复杂的多层次列表结构。
<ol>
    <li>主列表项 1</li>
    <li>主列表项 2
        <ul>
            <li>子列表项 1</li>
            <li>子列表项 2</li>
        </ul>
    </li>
    <li>主列表项 3</li>
</ol>

样式设置

虽然 <li> 标签本身没有太多特定属性用于样式设置，但可以通过 CSS 对列表项进行丰富的样式定制，例如改变项目符号样式、编号类型、字体、颜色、间距等。
    • 改变项目符号或编号样式：使用 CSS 的 list-style-type 属性，在无序列表中可以将项目符号设置为方块、空心圆等，在有序列表中可以将编号设置为字母、罗马数字等。
<style>
    ul {
        list-style-type: square;
    }
    ol {
        list-style-type: upper-roman;
    }
</style>
<ul>
    <li>无序列表项 1</li>
    <li>无序列表项 2</li>
</ul>
<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
</ol>

 自定义项目符号：使用 CSS 的 list-style-image 属性可以指定自定义的图像作为项目符号。

<style>
    ul {
        list-style-image: url('bullet.png');
    }
</style>
<ul>
    <li>自定义项目符号列表项 1</li>
    <li>自定义项目符号列表项 2</li>
</ul>

注意事项

  • 语义正确：确保根据列表项之间的关系选择合适的父标签。如果列表项没有顺序要求，使用 <ul> 标签；如果有顺序要求，则使用 <ol> 标签。
  • 结构清晰：在进行列表嵌套时，要保证结构清晰，避免出现混乱的嵌套情况，以提高代码的可读性和维护性。

84.定义描述列表 <dl> 标签，用来创建定义列表的。定义列表和普通的无序列表（<ul>）、有序列表（<ol>）不同，它主要用于呈现术语及其对应的定义。

结构组成

  • <dl>：代表定义列表的开始与结束。
  • <dt>：代表术语（定义的项目）。
  • <dd>：代表术语对应的定义。
<dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，用于创建网页的结构。</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，用于设置网页的外观和样式。</dd>
        <dt>JavaScript</dt>
        <dd>一种脚本语言，用于为网页添加交互性和动态功能。</dd>
    </dl>

代码解释

在上述代码中:
  • <dl> 标签把整个定义列表框了起来。
  • <dt> 标签分别定义了 “HTML”“CSS”“JavaScript” 这些术语。
  • <dd> 标签给出了对应术语的定义。
浏览器会把这段代码渲染成一个定义列表，术语和定义会有清晰的区分。

 85.定义描述列表中的术语/名称 <dt> (definition term)标签，它的用途是在定义列表中标识出要被定义的术语或者项目名称。

与其他标签配合使用

<dt> 标签一般和 <dl>（定义列表）、<dd>（定义描述）标签一起使用，从而构建出一个结构清晰的定义列表。
 <dl>
        <dt>计算机</dt>
        <dd>能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。</dd>
        <dt>智能手机</dt>
        <dd>具有独立的操作系统，可由用户自行安装软件、游戏等第三方服务商提供的程序的手机。</dd>
    </dl>

代码解释

  • <dl> 标签表示定义列表的开始与结束。
  • <dt> 标签定义了要解释的术语，如 “计算机” 和 “智能手机”。
  • <dd> 标签紧跟在 <dt> 之后，用来给出对应术语的定义。
在浏览器中渲染时，<dt> 中的术语通常会以加粗的形式显示，并且与 <dd> 中的定义区分开来，以此形成清晰的列表结构。

 86.描述列表中描述术语/名称 <dd> (definition description)标签，它的主要作用是对 <dt> 标签所定义的术语或项目进行具体的解释、说明或描述。

与其他标签配合使用

<dd> 标签需要和 <dl>（定义列表）、<dt>（定义术语）标签配合使用，来创建一个完整的定义列表。
<dl>
        <dt>人工智能</dt>
        <dd>它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。</dd>
        <dt>区块链</dt>
        <dd>一种分布式账本技术，通过去中心化和去信任的方式集体维护一个可靠数据库的技术方案。</dd>
    </dl>

代码解释

  • <dl> 标签划定了整个定义列表的范围。
  • <dt> 标签定义了要解释的关键术语，这里是 “人工智能” 和 “区块链”。
  • <dd> 标签紧跟在相应的 <dt> 标签之后，对术语进行详细的定义和说明。
在浏览器渲染页面时，<dd> 标签内的内容通常会相对于 <dt> 标签内的术语进行缩进显示，以体现出两者之间的关联和层次结构。

 ☯表格

 87.创建表格 <table> 标签，用于创建表格。表格由行和列构成，能够把数据以结构化的形式呈现出来，便于阅读与理解。

表格结构标签


  • <tr>：代表表格中的一行。
  • <th>：代表表格的表头单元格，一般用于显示列标题，默认以粗体显示。
  • <td>：代表表格的数据单元格，用于存放具体的数据。
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>

代码解释

  • <table> 标签将整个表格内容包裹起来。
  • 第一个 <tr> 行里包含了 <th> 标签，用来定义表格的表头，分别为 “姓名”“年龄”“职业”。
  • 后面的两个 <tr> 行包含了 <td> 标签，用来存放具体的数据，例如 “张三”“25”“程序员” 等。
  • border="1" 是一个 HTML 属性，用于为表格添加边框，使表格结构更加清晰。

除了基本的表格结构标签，还有其他一些标签可用于优化表格结构，例如：

  • <thead>：用于将表格的表头内容分组。
  • <tbody>：用于将表格的主体内容分组。
  • <tfoot>：用于将表格的页脚内容分组。
<table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>程序员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>设计师</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">以上是部分人员信息</td>
            </tr>
        </tfoot>
    </table>
</body>

 在这个示例中，<thead> 标签把表头内容分组，<tbody> 标签把表格主体内容分组，<tfoot> 标签把表格页脚内容分组。colspan="3" 属性让单元格跨越三列。

 88.表格标题 <caption> 标签，为 <table> 元素添加标题。这个标题会显示在表格的上方或下方（默认在上方），主要作用是为表格提供简要的描述或说明，帮助用户快速理解表格的内容。

用法示例

<caption> 标签必须直接放在 <table> 标签之后，这样才能正确关联到对应的表格。
<table border="1">
        <caption>员工信息表</caption>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>技术部</td>
            <td>软件工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>设计部</td>
            <td>UI 设计师</td>
        </tr>
    </table>

 

代码解释

  • <caption> 标签位于 <table> 标签之后，其中的文本 “员工信息表” 就是表格的标题。
  • 后续的 <tr>、<th> 和 <td> 标签用于构建表格的具体内容，包括表头和数据单元格。

标题位置调整

通过 CSS 的 caption-side 属性，你可以调整标题的显示位置，使其显示在表格的下方。
<head>
<style>
        table {
            caption-side: bottom;
        }
    </style>
</head>

<body>
    <table border="1">
        <caption>员工信息表</caption>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>技术部</td>
            <td>软件工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>设计部</td>
            <td>UI 设计师</td>
        </tr>
    </table>
</body>

 在这个例子中，通过 CSS 样式 caption-side: bottom; 将标题显示在了表格的下方。

 89.表格标题单元格 <th> (table header)标签，它的用途是定义表格的表头(标题)，用来标识表格列或者行的主题内容。通常，表头单元格中的文本会以粗体形式显示，并且在视觉上与普通的数据单元格有所区别。

与其他标签配合使用

<th> 标签一般和 <table>（表格）、<tr>（表格行）、<td>（表格数据单元格）标签一起使用。
  <table border="1">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>90</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>85</td>
        </tr>
    </table>

代码解释

  • <table> 标签框定了整个表格的范围。
  • 第一个 <tr> 行里包含了 <th> 标签，定义了表格的表头，分别为 “学号”“姓名”“成绩”。
  • 后续的 <tr> 行包含了 <td> 标签，用于存放具体的数据，例如 “001”“张三”“90” 等。

<th> 标签的属性

  • scope 属性：用来表明表头单元格是列的标题还是行的标题。scope="col" 表示列标题，scope="row" 表示行标题。
<table border="1">
        <tr>
            <th scope="col">学号</th>
            <th scope="col">姓名</th>
            <th scope="col">成绩</th>
        </tr>
        <tr>
            <th scope="row">001</th>
            <td>张三</td>
            <td>90</td>
        </tr>
        <tr>
            <th scope="row">002</th>
            <td>李四</td>
            <td>85</td>
        </tr>
    </table>

 在这个示例中，第一行的 <th> 标签使用 scope="col" 表示是列标题，后续每行的第一个 <th> 标签使用 scope="row" 表示是行标题。


通过 <th> 标签，能让表格的结构和内容更加清晰易懂，方便用户理解表格所呈现的数据。

 90.表格中的行 <tr> (table row)标签，代表表格中的一行。它是构建 HTML 表格的基础标签之一，用于将表格中的数据按行进行组织。

与其他标签配合使用

<tr> 标签通常与 <table>（表格）、<th>（表头单元格）和 <td>（数据单元格）标签配合使用。
 <table border="1">
        <!-- 表头行 -->
        <tr>
            <th>水果名称</th>
            <th>价格（元/斤）</th>
        </tr>
        <!-- 第一行数据 -->
        <tr>
            <td>苹果</td>
            <td>5</td>
        </tr>
        <!-- 第二行数据 -->
        <tr>
            <td>香蕉</td>
            <td>3</td>
        </tr>
    </table>

代码解释

  • <table> 标签定义了整个表格的范围。
  • 第一个 <tr> 标签内包含了 <th> 标签，用于创建表格的表头行，这里的表头是 “水果名称” 和 “价格（元 / 斤）”。
  • 后续的两个 <tr> 标签内包含了 <td> 标签，用于创建表格的数据行，分别展示了苹果和香蕉的名称及对应的价格。

实际作用

<tr> 标签的主要作用是将表格数据按照行的形式进行划分，使得表格能够清晰地展示数据的结构。每一个 <tr> 标签代表表格中的一行，在同一行中可以包含多个 <th> 或 <td> 标签，用于显示不同列的数据。通过组合多个 <tr> 标签，可以构建出包含多行数据的表格，方便用户对数据进行查看和比较。

 91.表格数据单元格 <td> (table data)标签，它的作用是在表格中存放具体的数据，是构成表格内容的基本单元。

与其他标签配合使用

<td> 标签通常和 <table>（表格）、<tr>（表格行）、<th>（表格表头单元格）标签一同使用。
<table border="1">
        <tr>
            <th>城市</th>
            <th>人口（万）</th>
        </tr>
        <tr>
            <td>北京</td>
            <td>2188.6</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>2489.43</td>
        </tr>
    </table>

代码解释

  • <table> 标签划定了整个表格的范围。
  • 第一个 <tr> 行包含 <th> 标签，用于定义表格的表头，分别是 “城市” 和 “人口（万）”。
  • 后续的 <tr> 行包含 <td> 标签，用于存放具体的数据，例如 “北京”“2188.6”“上海”“2489.43” 等。

<td> 标签的属性

  • colspan 属性：允许单元格跨越多个列。
<table border="1">
        <tr>
            <th>城市</th>
            <th>人口（万）</th>
        </tr>
        <tr>
            <td colspan="2">数据来源：官方统计</td>
        </tr>
        <tr>
            <td>北京</td>
            <td>2188.6</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>2489.43</td>
        </tr>
    </table>

 在这个例子中，colspan="2" 让 “数据来源：官方统计” 这个单元格跨越了两列。


  • rowspan 属性：允许单元格跨越多个行。

通过 <td> 标签，能够将各种数据填充到表格中，从而以结构化的形式展示数据，方便用户查看和理解。

92.表格标题内容分组 <thead> 标签，用于对表格的表头内容进行分组。它是 <table> 元素的一部分，与 <tbody>（表格主体内容分组）、<tfoot>（表格页脚内容分组）等标签配合使用，能够让表格的结构更加清晰、语义更加明确，有助于提升代码的可读性和可维护性，同时也有利于屏幕阅读器等辅助设备理解表格结构。

与其他标签配合使用

<thead> 标签通常和 <tr>（表格行）、<th>（表格表头单元格）标签一起使用。
<table border="1">
        <thead>
            <tr>
                <th>产品名称</th>
                <th>单价（元）</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>手机</td>
                <td>3000</td>
                <td>2</td>
            </tr>
            <tr>
                <td>平板电脑</td>
                <td>2000</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>

代码解释

  • <table> 标签框定了整个表格的范围。
  • <thead> 标签将表格的表头内容进行分组，其中包含一个 <tr> 行，该行内有三个 <th> 标签，分别定义了表格的表头 “产品名称”“单价（元）”“数量”。
  • <tbody> 标签对表格的主体数据内容进行分组，包含多个 <tr> 行，每行内有 <td> 标签，用于存放具体的数据。

作用与优势

  • 样式设置：借助 <thead> 标签，可以方便地为表头设置统一的样式。例如，你可以使用 CSS 为 <thead> 里的文本设置字体加粗、背景颜色等样式。
  • 打印与分页：在打印表格时，<thead> 中的内容能够在每一页都显示，保证表头信息的完整性。
  • 语义化：让代码的语义更加清晰，有助于搜索引擎理解表格的结构和内容，提升网站的可访问性。

 93.表格正文内容分组 <tbody> 标签，对表格的主体内容进行分组。它和 <thead>（用于分组表格表头内容）、<tfoot>（用于分组表格页脚内容）一起，都是 <table> 元素的重要组成部分。借助 <tbody> 标签，能让表格的结构更为清晰，语义更加明确，增强代码的可读性与可维护性，同时也便于屏幕阅读器等辅助设备理解表格结构。

与其他标签配合使用

<tbody> 标签一般和 <tr>（表格行）、<td>（表格数据单元格）标签配合使用。
<table border="1">
        <thead>
            <tr>
                <th>书籍名称</th>
                <th>作者</th>
                <th>出版年份</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>《百年孤独》</td>
                <td>加西亚·马尔克斯</td>
                <td>1967</td>
            </tr>
            <tr>
                <td>《哈姆雷特》</td>
                <td>莎士比亚</td>
                <td>1603</td>
            </tr>
        </tbody>
    </table>

代码解释

  • <table> 标签确定了整个表格的范围。
  • <thead> 标签把表格的表头内容分组，其中包含一个 <tr> 行，行内有三个 <th> 标签，分别定义了表格的表头 “书籍名称”“作者”“出版年份”。
  • <tbody> 标签对表格的主体数据内容进行分组，包含多个 <tr> 行，每行内有 <td> 标签，用于存放具体的数据，例如 “《百年孤独》”“加西亚・马尔克斯”“1967” 等。

作用与优势

  • 样式设置：可以针对 <tbody> 标签设置统一的样式，例如背景颜色、字体样式等。而且，还能为 <tbody> 里的不同行设置交替的背景颜色，以提升表格的可读性。
  • 脚本操作：在 JavaScript 里，能够更方便地操作 <tbody> 里的内容，比如动态添加或删除行。
  • 语义化：使代码的语义更加清晰，有助于搜索引擎理解表格的结构和内容，提高网站的可访问性。

 94.表格页脚内容分组 <tfoot> 标签，用于对表格的页脚内容进行分组。它和 <thead>（表头分组）、<tbody>（主体内容分组）一样，都是 <table> 元素的重要组成部分，共同构建出结构清晰、语义明确的表格。

与其他标签配合使用

<tfoot> 标签通常与 <tr>（表格行）、<td>（表格数据单元格）或 <th>（表格表头单元格）标签一起使用。
<table border="1">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>苹果</td>
                <td>5 元/斤</td>
                <td>2 斤</td>
                <td>10 元</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>3 元/斤</td>
                <td>3 斤</td>
                <td>9 元</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总计</td>
                <td>19 元</td>
            </tr>
        </tfoot>
    </table>

代码解释

  • <table> 标签定义了整个表格的范围。
  • <thead> 标签将表格的表头内容分组，包含一个 <tr> 行，其中的 <th> 标签定义了表格的表头信息。
  • <tbody> 标签对表格的主体数据内容进行分组，包含多行 <tr>，每行内的 <td> 标签存放具体的数据。
  • <tfoot> 标签对表格的页脚内容进行分组，这里的页脚展示了商品的总计金额。colspan="3" 表示该单元格跨越三列。

作用与优势

  • 样式设置：可以针对 <tfoot> 标签设置统一的样式，例如设置不同的背景颜色、字体加粗等，以突出页脚内容。
  • 打印与分页：在打印表格时，<tfoot> 中的内容通常会在每一页的底部显示，确保页脚信息的完整性。
  • 语义化：使代码的语义更加清晰，有助于搜索引擎理解表格的结构和内容，同时也方便屏幕阅读器等辅助设备识别表格的页脚信息，提高网站的可访问性。
  • 数据统计：常用于展示表格数据的汇总信息，如总计、平均值等，让用户能快速获取关键的统计数据。

 95.定义表格属性值 <col> 标签，用于为表格中的每一列定义属性。它是 <colgroup> 标签的子标签，<colgroup> 用于对表格的列进行分组，而 <col> 则可以对每一列单独设置样式或属性，这使得你能更方便地为表格的特定列应用统一的样式或属性，而无需为每个单元格重复设置。

基本用法

<col> 标签通常位于 <table> 标签内部，且在 <thead>、<tbody> 和 <tfoot> 之前。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 col 标签的表格示例</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        .col1 {
            background-color: lightblue;
        }

        .col2 {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <table>
        <colgroup>
            <col class="col1">
            <col class="col2">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>程序员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>设计师</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

代码解释

  • <colgroup> 标签对表格的列进行分组，这里包含了三个 <col> 标签，分别对应表格的三列。
  • 第一个 <col> 标签应用了 col1 类，使得该列的所有单元格背景颜色为浅蓝色。
  • 第二个 <col> 标签应用了 col2 类，使得该列的所有单元格背景颜色为浅绿色。
  • 第三个 <col> 标签没有设置类，因此该列使用默认样式。

<col> 标签的属性

  • span 属性：用于指定 <col> 标签应该跨越的列数。例如，<col span="2"> 表示该 <col> 标签的设置将应用于接下来的两列。
  • width 属性：可以设置列的宽度，值可以是像素值、百分比或相对单位。例如，<col width="100"> 表示该列的宽度为 100 像素。

通过使用 <col> 标签，你可以更高效地管理表格列的样式和属性，提高代码的可维护性。
<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>书目</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>HTML 入门</td>
    <td>$39</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>CSS 入门</td>
    <td>$27</td>
  </tr>
</table>

 代码解释：

  • <colgroup> 标签的作用是对表格的列进行分组，便于统一设置列的属性。
  • 第一个 <col> 标签有 span="2" 属性，这意味着它会影响接下来的两列。style="background-color:red" 表示将这两列的背景颜色设置为红色。
  • 第二个 <col> 标签把第三列的背景颜色设置为黄色。
  • <tr> 标签代表表格的一行，这里是表头行。
  • <th> 标签用于定义表头单元格，一般会以粗体显示，并且居中对齐。这里分别定义了 “ISBN”“书目”“价格” 三个表头。
  • <td> 标签用于定义数据单元格，存放具体的数据。这里分别存放了第一本书的 ISBN 编号、书目名称和价格。

 这段代码创建了一个包含表头和两行数据的表格，并且通过 <colgroup> 和 <col> 标签为表格的列设置了不同的背景颜色，让表格更加清晰易读。第一列和第二列的背景颜色为红色，第三列的背景颜色为黄色。

96.表格列分组 <colgroup> 标签，用于对表格中的列进行分组，以便对一组列应用相同的样式或属性。它是一个容器标签，通常包含一个或多个<col>子标签，用于定义具体的列属性。

基本用法

<colgroup>标签位于<table>标签内部，在<thead>、<tbody>和<tfoot>等标签之前。
<table>
    <colgroup>
        <col style="background-color: lightgray;">
        <col style="background-color: lightblue;">
    </colgroup>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

 在这个例子中，<colgroup>包含了两个<col>标签，分别为表格的两列设置了不同的背景颜色。

<colgroup>标签的属性

  • span：用于指定<colgroup>应该跨越的列数。例如，<colgroup span="3">表示该<colgroup>中的设置将应用于接下来的 3 列。
  • width：可以设置列组的宽度，值可以是像素值、百分比或相对单位。例如，<colgroup width="50%">表示该列组的宽度占表格总宽度的 50%。

通过使用<colgroup>标签，可以更方便地对表格中的列进行统一管理和样式设置，提高代码的可维护性和效率。

☯样式和语义

 97.样式 <style> 标签，用于在 HTML 文件中直接嵌入 CSS（层叠样式表）代码，以此来控制网页元素的样式。CSS 可以对网页的外观进行设置，像字体、颜色、布局、大小等。

基本用法

<style> 标签一般放置在 HTML 文件的 <head> 部分，不过也能放在 <body> 部分。
<head>
    <style>
        /* 设置所有段落的文字颜色为红色 */
        p {
            color: red;
        }
        /* 设置所有 h1 标题的背景颜色为黄色 */
        h1 {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>

代码解释

  • <style> 标签包裹了 CSS 代码。
  • p { color: red; } 是一个 CSS 规则，它选中了所有的 <p> 元素，并将它们的文字颜色设置为红色。
  • h1 { background-color: yellow; } 这个规则选中了所有的 <h1> 元素，并把它们的背景颜色设置为黄色。

<style> 标签的属性

  • type：在 HTML5 之前，type 属性用于指定样式表的类型，一般取值为 text/css。不过在 HTML5 里，这个属性是可选的，因为默认的样式表类型就是 text/css。
  • media：用于指定样式表适用的媒体类型，例如 screen（屏幕设备）、print（打印设备）等。
<style media="print">
    /* 仅在打印时应用的样式 */
    body {
        font-size: 12pt;
    }
</style>

优点和局限性

优点

  • 方便性：能直接在 HTML 文件里嵌入 CSS 代码，无需额外创建 CSS 文件，适合小型项目或者简单的样式设置。
  • 局部性：可以在 HTML 文件的特定部分使用 <style> 标签，为该部分的元素设置独特的样式。

局限性

  • 可维护性：当 HTML 文件变得复杂时，大量的 CSS 代码会让

    优点和局限性

    优点

    • 方便性：能直接在 HTML 文件里嵌入 CSS 代码，无需额外创建 CSS 文件，适合小型项目或者简单的样式设置。
    • 局部性：可以在 HTML 文件的特定部分使用 <style> 标签，为该部分的元素设置独特的样式。

    局限性

    • 可维护性：当 HTML 文件变得复杂时，大量的 CSS 代码会让 HTML 文件变得难以阅读和维护。
    • 复用性：CSS 代码不能在多个 HTML 文件中复用，而外部 CSS 文件可以被多个 HTML 文件引用。

    除了使用 <style> 标签嵌入 CSS 代码，还可以通过外部 CSS 文件（使用 <link> 标签引用）或者内联样式（使用 style 属性）来设置元素的样式。 文件变得难以阅读和维护。
  • 复用性：CSS 代码不能在多个 HTML 文件中复用，而外部 CSS 文件可以被多个 HTML 文件引用。

 

除了使用 <style> 标签嵌入 CSS 代码，还可以通过外部 CSS 文件（使用 <link> 标签引用）或者内联样式（使用 style 属性）来设置元素的样式。

 98.块级划分 <div> (division)标签，一个块级元素，也就是 “分区”“划分” 的意思。它主要用于对网页内容进行分组和划分区域，以便于使用 CSS 对这些区域应用样式，或者使用 JavaScript 对其进行操作。

基本用法

<div> 标签本身没有特定的语义，它只是一个容器，可包含文本、图像、表单、列表等各种 HTML 元素。
  <style>
        /* 为 div 设置样式 */
        .my-div {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="my-div">
        <h2>这是一个 div 区域</h2>
        <p>这个 div 区域包含了一个标题和一个段落。</p>
    </div>
    <div class="my-div">
        <img src="https://picsum.photos/200/150" alt="示例图片">
        <p>这个 div 区域包含了一张图片和一个段落。</p>
    </div>
</body>

 

代码解释

  • <div> 标签将相关的内容包裹起来，形成一个独立的区域。
  • class="my-div" 是给 <div> 元素添加了一个类名，通过 CSS 样式表 .my-div 可以为这些 <div> 元素设置统一的样式，如背景颜色、内边距和外边距。
  • 第一个 <div> 包含了一个 <h2> 标题和一个 <p> 段落。
  • 第二个 <div> 包含了一个 <img> 图片和一个 <p> 段落。

作用与优势

  • 样式设置：借助 <div> 标签，可以把相关的元素组合在一起，然后为整个 <div> 应用样式，这样能更方便地控制网页的布局和外观。
  • 布局管理：在网页布局中，<div> 标签是常用的工具。可以使用多个 <div> 元素来创建复杂的网格布局、侧边栏布局、导航栏布局等。
  • 脚本操作：在 JavaScript 里，可以通过 <div> 的 id 或 class 来选择和操作 <div> 元素及其内部的内容，实现动态效果。

注意事项

  • 由于 <div> 标签没有特定的语义，在编写 HTML 代码时，应优先使用具有语义的标签（如 <header>、<nav>、<article>、<section>、<footer> 等），这样有助于搜索引擎理解网页的结构和内容，提升网站的可访问性。只有在没有合适的语义标签时，才使用 <div> 标签进行内容分组。

99.行内容器 <span> 标签，是一个行内元素，用于对文本或其他行内元素进行分组，以便为其应用特定的样式或通过 JavaScript 进行操作。与 <div> 标签（块级元素，会独占一行）不同，<span> 标签不会产生换行，它会在文本流中正常显示，适合对部分文本进行样式设置或操作。

基本用法

<span> 标签本身没有特定的语义，通常需要结合 CSS 或 JavaScript 来实现特定的功能。
<style>
        /* 为 span 设置样式 */
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p>这是一段普通的文本，<span class="highlight">这里使用 span 标签进行了高亮显示</span>。</p>
</body>

代码解释

  • <span> 标签将需要特殊处理的文本部分包裹起来。
  • class="highlight" 为 <span> 元素添加了一个类名，通过 CSS 样式表 .highlight 为该 <span> 内的文本设置了红色字体和加粗样式。

作用与优势

  • 样式设置：可以针对 <span> 内的文本应用特定的样式，而不影响周围的文本。例如，可以改变文本的颜色、字体、大小等。
  • 文本处理：在处理文本时，<span> 标签可以帮助区分不同的文本片段，便于对特定部分进行操作。比如，在一段文章中，将关键词用 <span> 包裹，然后通过 JavaScript 实现点击关键词显示相关信息的功能。
  • 代码组织：使用 <span> 标签可以将相关的文本或元素组合在一起，使代码结构更加清晰，便于维护。

注意事项

同样，由于 <span> 标签没有特定的语义，在编写 HTML 代码时，应优先使用具有语义的标签（如 <strong> 表示重要文本，<em> 表示强调文本等）。只有在没有合适的语义标签时，才使用 <span> 标签进行文本分组。
100.介绍性内容或一组导航链接的容器 <header> 标签，主要用于定义文档、页面、章节或者区域的头部内容。它可以包含一些介绍性或者导航性的信息，为后续内容起到引导作用。

基本用法

<header> 标签可以用在多种场景中，比如整个网页的头部、文章的头部等。

网页全局头部

<header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <!-- 网页主体内容 -->
    <p>这是网页的主要内容。</p>
</body>

 在这个例子中，<header> 标签定义了整个网页的头部，包含网站标题 <h1> 和导航菜单 <nav>。

文章头部

<article>
    <header>
        <h2>文章标题</h2>
        <p>发布时间：2025 年 5 月 6 日</p>
    </header>
    <p>这是文章的具体内容。</p>
</article>

这里的 <header> 标签定义了文章的头部，包含文章标题 <h2> 和发布时间信息。

作用与优势

  • 语义化：<header> 标签让代码语义更清晰，搜索引擎和屏幕阅读器等辅助设备能更好地理解网页结构和内容，提升网站的可访问性和 SEO 效果。
  • 样式设置：使用 <header> 标签便于为头部内容统一设置样式，通过 CSS 可以轻松控制头部的字体、颜色、背景等样式。
  • 代码维护：把头部内容放在 <header> 标签中，使代码结构更清晰，便于后续的维护和修改。

注意事项

  • <header> 标签可以在一个页面中多次使用，比如每个 <article> 或者 <section> 都可以有自己的 <header>。
  • <header> 标签内通常包含标题元素（如 <h1> - <h6>）、导航元素（如 <nav>）、标志或者介绍性文字等，但不应该包含主要的页面内容。

101.包围一个标题和一个或多个<p>元素 <hgroup> 标签，它的用途是把一组标题元素（像 <h1> - <h6>）归为一个整体。这个标签的主要目的是在文档大纲里把标题和副标题组合起来，这样能让页面结构更加清晰，也有利于搜索引擎理解页面内容。

<hgroup>
        <h1>主标题</h1>
        <h2>副标题</h2>
    </hgroup>
    <p>这里是页面的主要内容。</p>

代码解释

在上述代码中，<hgroup> 标签把 <h1> 主标题和 <h2> 副标题组合在一起。如此一来，这两个标题在文档大纲里就被视为一个整体。
不过要注意，在 HTML5.1 规范里，<hgroup> 标签已被废弃。这是因为它可能会让文档大纲变得复杂，而在大多数情况下，我们可以直接使用 <h1> - <h6> 标签来创建清晰的标题结构。现在，建议直接编写标题，无需用 <hgroup> 进行包裹。

102.定义文档或小节的页脚 <footer> 标签，通常，页脚包含文档的一些辅助性信息，这些信息能为用户提供额外参考，也有助于提升页面的可访问性和搜索引擎优化（SEO）。

常见用途

  • 版权信息：声明页面内容的版权归属，例如 “© 2025 Your Company. All rights reserved.”。
  • 联系方式：展示联系邮箱、电话号码等，方便用户与网站运营者沟通。
  • 相关链接：像返回顶部链接、隐私政策、使用条款等页面的链接。
  <!-- 页面主要内容 -->
    <h1>欢迎访问我的网站</h1>
    <p>这是页面的主要内容。</p>

    <!-- 页脚部分 -->
    <footer>
        <p>&copy; 2025 Your Company. All rights reserved.</p>
        <p>联系我们: <a href="mailto:info@example.com">info@example.com</a></p>
        <ul>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">使用条款</a></li>
        </ul>
    </footer>

代码解释

在上述代码里，<footer> 标签包含了版权信息、联系邮箱以及隐私政策和使用条款的链接。这样能让用户快速了解页面的版权情况、如何联系网站运营者以及查看相关规定。

注意事项

  • <footer> 标签可用于整个文档，也可用于文档中的某个节。例如，在一篇文章里，每篇文章都可以有自己的 <footer> 来包含该文章特有的信息。
  • 一个页面可以有多个 <footer> 标签，每个 <footer> 都应该与它所属的内容相关。

103.规定文档的主要内容 <main> 标签，其用途是标识文档的主要内容区域。主要内容区域指的是和文档核心主题直接相关的内容，或是应用程序的核心功能。

 特性

  1. 唯一性：在一个 HTML 文档里，<main> 标签应当只出现一次。它代表的是文档的主要内容，不包含如侧边栏、导航栏、页脚这类重复出现的内容。
  2. 语义化：该标签有助于提升文档的语义结构，让搜索引擎和屏幕阅读器等辅助设备更清晰地理解页面的主要内容，从而增强页面的可访问性和搜索引擎优化（SEO）效果。
  3. 样式与布局：尽管 <main> 标签本身没有默认的样式，但你可以借助 CSS 为其添加样式，进而实现特定的布局效果。
 <!-- 页面头部 -->
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <!-- 主要内容区域 -->
    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is the main content of the article. It contains information about the topic.</p>
            <p>You can add more paragraphs and other HTML elements here.</p>
        </article>
    </main>
    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer

代码解释

在上述示例里，<main> 标签包裹了文章的主要内容，而头部（<header>）和底部（<footer>）则分别包含了网站的导航和版权信息，这些都不属于主要内容。
使用 <main> 标签可以使代码结构更清晰，也方便后续的维护和开发。

104.定义文档中的一个部分 <section> 标签，用于对文档中具有相似主题的内容进行分组，形成独立的逻辑部分。

用途

  • 内容组织：它可以将网页内容按照主题划分为不同的章节，使页面结构更加清晰，便于开发者管理和维护代码，也让用户更容易理解页面的内容布局。
  • 提升可读性：通过使用 <section> 标签，搜索引擎和屏幕阅读器等辅助设备能够更好地识别页面内容的结构和层次，从而提高页面的可访问性和搜索引擎优化（SEO）效果。

与其他标签的区别

  • <div> 标签：<div> 标签是一个通用的容器元素，本身没有语义，主要用于布局和样式的控制。而 <section> 标签具有明确的语义，用于表示文档中的一个章节。
  • <article> 标签：<article> 标签表示一个独立的、完整的内容单元，如一篇文章、博客帖子、新闻报道等，它可以独立于页面的其他部分被理解和分发。而 <section> 标签通常用于对相关内容进行分组，这些内容可能是一个更大整体的一部分。
<!-- 页面头部 -->
    <header>
        <h1>My Website</h1>
    </header>

    <!-- 第一个章节 -->
    <section>
        <h2>Introduction</h2>
        <p>This is the introduction section of the page. It provides some background information about the topic.</p>
    </section>

    <!-- 第二个章节 -->
    <section>
        <h2>Main Content</h2>
        <p>This section contains the main content of the page. It elaborates on the key points related to the topic.</p>
    </section>

    <!-- 第三个章节 -->
    <section>
        <h2>Conclusion</h2>
        <p>This is the conclusion section. It summarizes the main ideas presented in the page.</p>
    </section>

    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>

代码解释

在这个示例中，页面被划分为多个 <section> 元素，每个 <section> 都有一个标题（<h2>），用于描述该章节的主题。每个章节包含与该主题相关的内容，通过这种方式，页面的结构和层次更加清晰。
总的来说，<section> 标签是一个非常有用的 HTML 元素，它可以帮助你更好地组织和呈现网页内容。

105.定义搜索部分 <search> 标签，与搜索功能相关且有语义的元素是 <form> 结合 <input> 标签。

<form> 和 <input> 实现搜索功能

在网页中要实现搜索功能，通常会用 <form> 标签来创建一个表单，同时使用 <input> 标签收集用户输入的搜索关键词。
<!-- 搜索表单 -->
    <form action="#" method="get">
        <input type="search" name="q" placeholder="输入搜索内容">
        <input type="submit" value="搜索">
    </form>

代码解释

  • <form> 标签：用于创建一个表单，action 属性规定了表单数据提交的 URL 地址，method 属性指定了提交数据的方式，get 表示以 URL 参数的形式提交数据。
  • <input type="search">：这是一个特殊类型的 <input> 标签，专门用于搜索框，它具备一些适合搜索场景的特性，像在部分浏览器中会自带清除按钮。
  • <input type="submit">：此为提交按钮，点击它就会把表单数据提交到 action 指定的 URL。
  • laceholder 属性的作用是在表单元素里显示一段提示文本，这段文本会在用户输入内容前显示，当用户开始输入时，提示文本就会消失。它能为用户提供关于输入内容的格式、示例或者要求等方面的提示信息。
虽然没有 <search> 标签，但借助上述标签组合，能够在网页里实现搜索功能并保证语义清晰。

106.定义文章 <article> 标签，用于表示文档、页面、应用程序或网站中一个独立的、完整的且可以独自被外部引用的内容。

用途

  • 独立性：<article> 标签所包含的内容应该具有独立的完整性，能够脱离页面的其他部分而被理解。比如一篇新闻报道、博客文章、论坛帖子、用户评论等，这些内容即使单独拿出来，也能传达完整的信息。
  • 可复用性：由于其独立性，<article> 标签内的内容可以方便地在其他地方复用，例如在搜索引擎结果页面、社交媒体分享等场景中展示。

与其他标签的区别

  • <section> 标签：<section> 标签主要用于将文档内容按照主题进行分组，形成独立的逻辑部分。而 <article> 更强调内容的独立性和完整性。一个 <section> 可以包含多个 <article>，反之则不常见。
  • <div> 标签：<div> 是一个通用的容器元素，本身没有语义，主要用于布局和样式的控制。而 <article> 具有明确的语义，用于表示独立的内容单元。

 

<!-- 页面头部 -->
    <header>
        <h1>My Blog</h1>
    </header>

    <!-- 文章内容 -->
    <article>
        <header>
            <h2>How to Improve Your Coding Skills</h2>
            <p>Posted on <time datetime="2024-01-01">January 1, 2024</time> by John Doe</p>
        </header>
        <p>Improving your coding skills is essential for any developer. Here are some tips...</p>
        <p>First, practice regularly. The more you code, the better you'll become...</p>
        <footer>
            <p>Tags: coding, skills, improvement</p>
        </footer>
    </article>

    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2024 My Blog. All rights reserved.</p>
    </footer>

代码解释

  • <article> 标签：包裹了一篇完整的博客文章，包含文章的标题、发布时间、作者、正文内容和标签等信息。
  • <header> 标签：在 <article> 内部使用，用于标识文章的头部信息，如标题和发布时间。
  • <time> 标签：用于表示具体的时间，datetime 属性提供了机器可读的时间格式。
  • <footer> 标签：在 <article> 内部使用，用于标识文章的底部信息，如标签。
通过使用 <article> 标签，可以使网页的结构更加清晰，提高页面的可访问性和搜索引擎优化（SEO）效果。

<section> 包含多个 <article>

在一个新闻网站页面里，会有一个板块专门展示体育新闻，这一板块就可以用 <section> 标签来表示，而每一条体育新闻都可作为独立完整的内容，使用 <article> 标签来包裹。
 <!-- 体育新闻板块 -->
    <section>
        <h2>体育新闻</h2>
        <!-- 第一条体育新闻 -->
        <article>
            <header>
                <h3>足球比赛结果：A 队获胜</h3>
                <p>发布时间：<time datetime="2024-11-10">2024 年 11 月 10 日</time></p>
            </header>
            <p>在昨晚的足球比赛中，A 队以 3:2 的比分战胜了 B 队……</p>
            <footer>
                <p>标签：足球，比赛结果</p>
            </footer>
        </article>
        <!-- 第二条体育新闻 -->
        <article>
            <header>
                <h3>篮球明星签约新球队</h3>
                <p>发布时间：<time datetime="2024-11-11">2024 年 11 月 11 日</time></p>
            </header>
            <p>著名篮球明星 C 近日与 D 球队达成签约协议……</p>
            <footer>
                <p>标签：篮球，明星签约</p>
            </footer>
        </article>
    </section>

在这个例子中，<section> 代表体育新闻板块，而其中的每一条新闻都用 <article> 包裹，每条新闻都有自己独立的标题、发布时间、正文和标签等，具有完整性和独立性。

<article> 包含 <section> 不常见的原因及示例

<article> 强调内容的独立性和完整性，通常本身就是一个完整的内容单元。而 <section> 是对相关内容进行分组。如果在 <article> 里使用 <section>，会让 <article> 的独立性和完整性显得模糊。不过在某些复杂的长文章中，可能会有这种情况。
例如，一篇关于健康养生的长文章，整体是一个完整的内容单元，用 <article> 包裹。文章内容分为不同的部分，如饮食养生、运动养生、心理调节等，这些部分可以用 <section> 来分组。
  <!-- 健康养生文章 -->
    <article>
        <header>
            <h2>健康养生全攻略</h2>
            <p>发布时间：<time datetime="2024-11-12">2024 年 11 月 12 日</time></p>
        </header>
        <!-- 饮食养生部分 -->
        <section>
            <h3>饮食养生</h3>
            <p>合理的饮食是健康的基础。建议多吃蔬菜水果……</p>
        </section>
        <!-- 运动养生部分 -->
        <section>
            <h3>运动养生</h3>
            <p>适度的运动有助于增强体质。可以选择跑步、游泳等运动……</p>
        </section>
        <!-- 心理调节部分 -->
        <section>
            <h3>心理调节</h3>
            <p>保持良好的心态对健康至关重要。可以通过冥想、旅游等方式放松心情……</p>
        </section>
        <footer>
            <p>标签：健康养生，饮食，运动，心理调节</p>
        </footer>
    </article>

虽然这种情况是可行的，但相对少见，因为大多数时候，具有独立完整内容的 <article> 不需要再进行内部的章节分组。如果出现这种情况，要仔细考虑是否有更合适的结构来组织内容。

107.定义页面内容之外的内容 <aside> 标签，用于表示与页面主要内容间接相关的部分，这些内容通常可以被认为是侧边栏、侧注、广告、友情链接等。

用途

  • 补充信息：<aside> 标签内的内容可以作为主要内容的补充说明，为读者提供额外的背景知识、参考资料等，但并非理解主要内容所必需的信息。
  • 独立内容单元：它包含的内容具有一定的独立性，能够脱离主要内容单独存在。
  • 页面布局：在页面布局中，<aside> 常被用于创建侧边栏，放置一些辅助信息或导航菜单。

与其他标签的区别

  • <article> 标签：<article> 表示独立、完整的内容，如一篇文章、博客帖子等，可以独立于页面其他部分被理解和分发。而 <aside> 内容与主要内容相关度较低，是辅助性的。
  • <section> 标签：<section> 用于将文档内容按主题分组，形成独立的逻辑部分。<aside> 不用于内容分组，而是放置与主要内容关联不大的信息
<head>
<style>
        body {
            display: flex;
        }

        main {
            flex: 3;
            padding: 20px;
        }

        aside {
            flex: 1;
            background-color: #f4f4f4;
            padding: 20px;
        }
    </style>
</head>

<body>
    <!-- 主要内容区域 -->
    <main>
        <article>
            <h2>如何提高编程技能</h2>
            <p>提高编程技能对开发者至关重要。以下是一些建议...</p>
            <p>首先，要定期练习。编码越多，能力就越强...</p>
        </article>
    </main>
    <!-- 侧边栏区域 -->
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">编程学习资源</a></li>
            <li><a href="#">编程社区论坛</a></li>
            <li><a href="#">编程开源项目</a></li>
        </ul>
        <h3>广告</h3>
        <p>快来参加我们的编程培训课程！</p>
    </aside>

代码解释

  • <main> 标签：包裹页面的主要内容，这里是一篇关于提高编程技能的文章。
  • <aside> 标签：创建了一个侧边栏，包含相关链接和广告信息。这些内容与主要文章相关，但并非理解文章核心内容所必需。
  • CSS 样式：使用 flexbox 布局将页面分为主要内容区域和侧边栏区域。
通过使用 <aside> 标签，可以使网页结构更清晰，提高页面的可访问性和搜索引擎优化（SEO）效果。

108.定义用户可查看或隐藏的其他详细信息 <details> 标签，它用于创建一个可折叠的信息区域，用户能够通过交互展开或折叠这个区域来查看或隐藏其中的内容。

用途

  • 信息隐藏与展示：当页面存在一些不是所有用户都需要立即查看的详细信息时，可利用 <details> 标签将这些信息隐藏起来，仅在用户有查看需求时通过点击展开，这样能让页面保持简洁，避免信息过载。
  • 提升用户体验：用户可以自主控制是否查看详细内容，增强了页面的交互性和灵活性。

结构组成

<details> 标签通常会和 <summary> 标签配合使用，<summary> 标签用于定义可折叠区域的标题，也就是用户点击来展开或折叠内容的部分；而 <details> 标签内除 <summary> 之外的其他内容就是隐藏或展示的详细信息。
<details>
        <summary>点击查看更多详情</summary>
        <p>这是隐藏在折叠区域内的详细信息。当你点击上面的标题时，这个区域就会展开显示内容。</p>
        <ul>
            <li>信息项 1</li>
            <li>信息项 2</li>
            <li>信息项 3</li>
        </ul>
    </details>

代码解释

  • <details> 标签：创建了一个可折叠的信息区域。
  • <summary> 标签：定义了折叠区域的标题，用户点击这个标题就能控制 <details> 区域的展开和折叠。
  • 详细内容：<summary> 标签之后的 <p> 标签和 <ul> 标签中的内容就是隐藏的详细信息，在默认情况下是折叠起来的，用户点击标题后会显示出来。

可选属性

  • open：这是一个布尔属性，当给 <details> 标签添加 open 属性时，页面加载完成后该区域会默认展开。
<details open>
    <summary>点击查看更多详情</summary>
    <p>这是默认展开状态下的详细信息。</p>
</details>

通过使用 <details> 标签，可以有效地管理页面上的信息展示，为用户提供更好的浏览体验。

109.定义对话框或窗口 <dialog> 标签，用途是创建对话框或者模态窗口。它为开发者提供了一种便捷的方式来构建交互式的弹出框，可用于显示提示信息、表单或者其他需要用户交互的内容。

主要特性

  1. 显示与隐藏：借助 open 属性能够控制对话框的显示与隐藏。添加 open 属性，对话框就会显示；去掉该属性，对话框则隐藏。
  2. 模态与非模态：可通过 JavaScript 把对话框设置成模态或非模态。模态对话框会阻止用户与页面其他部分交互，直到对话框关闭；非模态对话框则允许用户在对话框显示时与页面其他部分交互。
  3. 事件处理：可以使用 JavaScript 为对话框添加事件处理程序，例如在对话框关闭时执行特定操作。
 <!-- 定义一个对话框 -->
    <dialog id="myDialog">
        <p>这是一个对话框示例。</p>
        <button onclick="closeDialog()">关闭</button>
    </dialog>
    <!-- 用于打开对话框的按钮 -->
    <button onclick="openDialog()">打开对话框</button>

    <script>
        function openDialog() {
            const dialog = document.getElementById('myDialog');
            dialog.showModal();
        }

        function closeDialog() {
            const dialog = document.getElementById('myDialog');
            dialog.close();
        }
    </script>

代码解释

  • 首先定义了一个 <dialog> 元素，其 id 为 myDialog，内部包含一段文本和一个关闭按钮。
  • 页面上有一个 “打开对话框” 的按钮，点击它会触发 openDialog 函数，此函数利用 showModal 方法将对话框以模态形式显示出来。
  • 对话框内的 “关闭” 按钮会触发 closeDialog 函数，该函数使用 close 方法关闭对话框。

浏览器兼容性

大多数现代浏览器都支持 <dialog> 标签，不过在使用时仍需留意不同浏览器的兼容性问题。为了确保在所有浏览器中都能正常显示，可以考虑使用 JavaScript 库或者自定义样式来实现类似功能。
109.定义 <details> 元素的可见标题 <summary> 标签，在不同的语境中，<summary> 标签有不同的含义和用途。

在 HTML 中

  • <summary> 标签是 HTML5 中的新标签，用于为 <details> 元素定义标题。<details> 元素用于描述有关文档或文档片段的详细信息，用户可以点击<summary> 标签来展开或收起<details>中的详细内容。
<details>
  <summary>点击查看详情</summary>
  <p>这里是详细的内容，可以是文本、图片、链接等各种信息。</p>
</details>

在 XML 文档中

  • <summary> 标签通常是自定义的标签，用于对文档或文档中的某个部分进行简短的总结描述。它的具体含义和作用取决于文档的架构和使用场景。
  • 例如，在一个科研论文的 XML 文档中，可能会使用 <summary> 标签来概括论文的主要内容，方便读者快速了解论文的核心要点。

 

在其他一些特定的标记语言或文档格式中，也可能会出现 <summary> 标签，其作用一般都是用于提供内容的摘要或总结信息，以便于快速浏览和理解文档的主要内容。

110.添加给定内容的机器可读的翻译 <data> 标签，它能够把机器可读的数据与用户可读的内容关联起来。

基本作用

此标签可在网页里嵌入机器可读的数据，像产品 ID、日期、代码值等，同时还能为用户展示更具可读性的内容。这样做的好处是，利于搜索引擎、屏幕阅读器等工具获取和解析数据。

语法结构

<data value="machine-readable value">用户可读内容/data>
  • value 属性：该属性必填，它用来指定机器可读的数据，能够是数字、日期、代码等。
  • 标签内容：这部分是用户可读的内容，会在网页上显示出来。
<ul>
  <li><data value="12345">Product A</data></li>
  <li><data value="67890">Product B</data></li>
</ul>

 在上述例子中，<data> 标签里的 value 属性存有产品 ID 这种机器可读的数据，而标签内容则是供用户查看的产品名称。

适用场景

  • 产品列表：可将产品 ID、SKU 等机器可读信息与产品名称等用户可读内容相关联。
  • 日期显示：把机器可读的日期格式（如 YYYY-MM-DD）和用户友好的日期格式（如 January 1, 2024）关联起来。

☯元信息

111.规定文档中所有相对 URL 的基准 URL 和/或目标 <base> 标签，作用是为文档里的所有相对 URL 设定一个基础 URL。简单来说，它会影响页面中链接、图片、脚本等资源的相对路径解析方式。

<base href="基础 URL" target="目标窗口">
  • href 属性：此属性为必需项，它规定了页面上所有相对 URL 的基础 URL。
  • target 属性：这是个可选属性，用于规定在何处打开页面上的所有链接。常见取值有 _blank（在新窗口打开）、_self（在当前窗口打开，这也是默认值）等。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://example.com/" target=_blank>
    <title>Base Tag Example</title>
</head>
<body>
    <a href="page.html">点击访问页面</a>
    <img src="images/pic.jpg" alt="示例图片">
</body>

 

使用注意事项

  • 唯一性：在一个 HTML 文档中，<base> 标签只能使用一次。要是使用多次，只有第一个 <base> 标签会生效。
  • 位置：<base> 标签必须放置在 <head> 标签内部，并且要在引用相对 URL 的元素（像 <a>、<img> 等）之前。

 

<base> 标签在需要统一管理页面相对 URL 的场景下十分有用，例如在网站迁移或者需要调整资源路径时，借助修改 <base> 标签里的 href 属性，就能轻松更新所有相对 URL 的指向。

112.默认字体、颜色或尺寸 <basefont> 标签(HTML5已废弃)

<basefont face="字体名称" size="字号大小" color="颜色">
  • face 属性：用于指定默认字体，你可以填入字体的名称，例如 "Arial" 或者 "Times New Roman"。
  • size 属性：用于设置默认字号，其取值范围是 1 - 7 的整数，数字越大字号越大。
  • color 属性：用来设置默认文本颜色，你既可以使用颜色名称（像 "red"），也可以使用十六进制颜色代码（如 "#FF0000"）。

由于 <basefont> 标签已被弃用，现代 Web 开发中建议使用 CSS（层叠样式表）来设置文本的字体、字号和颜色。CSS 能够更好地实现样式与结构的分离，并且具备更高的灵活性和可维护性。

☯编程

113.客户端脚本 <script> 标签，用于嵌入或者引用 JavaScript 代码的，它能让网页具备动态交互和复杂功能。

主要作用

  • 嵌入内联脚本：可以在 <script> 标签内部直接编写 JavaScript 代码，这些代码会在页面加载时执行。
  • 引入外部脚本：通过 src 属性引入外部的 JavaScript 文件，实现代码的复用和模块化管理。

嵌入内联脚本

<script>
    // 这里编写 JavaScript 代码
    alert('这是一个内联脚本示例');
</script>

引入外部脚本

<script src="script.js"></script>
这里的 script.js 是外部 JavaScript 文件的路径，既可以是相对路径，也可以是绝对路径。

属性介绍

  • src：指定外部 JavaScript 文件的 URL。
  • async：可选属性，值为布尔类型。若设置为 async，脚本会异步加载，也就是在下载脚本的同时，不会阻塞页面的其他部分加载。这适用于那些不依赖于页面其他元素加载完成的脚本。
<script async src="script.js"></script>
  • defer：可选属性，值为布尔类型。设置为 defer 时，脚本会在文档解析完成后、DOMContentLoaded 事件触发前执行，且按照脚本在文档中出现的顺序执行，常用于需要操作 DOM 的脚本。
<script defer src="script.js"></script>
  • type：早期用于指定脚本的 MIME 类型，现在 HTML5 中，如果值是 text/javascript 或省略该属性，浏览器默认将其视为 JavaScript 代码。

执行顺序

  • 内联脚本：按在 HTML 文件中出现的顺序依次执行，会阻塞页面渲染，直到脚本执行完毕。
  • 外部脚本：不使用 async 或 defer 属性时，会在下载完成后立即执行，也会阻塞页面渲染；使用 async 属性，脚本下载完成后会立即执行，不保证执行顺序；使用 defer 属性，脚本会在文档解析完成后按顺序执行。
 <script>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击打招呼</button>
    <script src="another-script.js"></script>
</body>

在这个例子中，内联脚本定义了一个 sayHello 函数，当点击按钮时会调用该函数弹出提示框；同时引入了外部脚本 another-script.js。

114.针对不支持客户端脚本的用户的替代内容 <noscript> 标签，它主要用于在浏览器不支持 JavaScript 或者用户禁用了 JavaScript 时，向用户展示替代内容。

用途

  • 提供替代内容：在某些情况下，网页的部分功能依赖于 JavaScript 实现，若用户浏览器不支持 JavaScript 或者禁用了该功能，页面原本依靠 JavaScript 实现的交互效果就无法正常显示。这时，<noscript> 标签可以提供一些静态的、不需要 JavaScript 支持的内容，以保证用户仍能获取基本的信息。
  • 提升用户体验：通过展示替代内容，避免用户在禁用 JavaScript 时看到空白或无法正常显示的页面，从而提升用户在不同环境下访问网页的体验。

使用方法

<noscript> 标签通常放在 <head> 或 <body> 标签内。当浏览器检测到不支持 JavaScript 或者 JavaScript 被禁用时，会显示 <noscript> 标签内的内容；若 JavaScript 正常运行，则 <noscript> 标签内的内容会被忽略。

在 <head> 标签内使用

    <noscript>
        <style>
            /* 当 JavaScript 被禁用时，隐藏依赖 JavaScript 的元素 */
           .js - dependent {
                display: none;
            }
        </style>
    </noscript>
</head>
<body>
    <div class="js - dependent">
        <p>这是一个依赖 JavaScript 的内容。</p>
    </div>
    <noscript>
        <p>您的浏览器不支持 JavaScript 或已禁用，请启用 JavaScript 以获得更好的体验。</p>
    </noscript>
</body>

在上述代码中，在 <head> 标签内的 <noscript> 标签里设置了 CSS 样式，用于隐藏依赖 JavaScript 的元素。在 <body> 标签内的 <noscript> 标签则向用户提示需要启用 JavaScript。

提供替代链接

 <div id="dynamic - content">
        <!-- 这里是动态加载的内容 -->
    </div>
    <noscript>
        <a href="static - version.html">点击这里查看静态版本的页面</a>
    </noscript>

 此示例中，当 JavaScript 被禁用时，会向用户提供一个链接，引导用户访问静态版本的页面。

总的来说，<noscript> 标签为不支持或禁用 JavaScript 的用户提供了一种备用方案，增强了网页的兼容性和可用性。

115.定义外部资源的容器(嵌入式小程序) <embed> 标签，用于在网页中嵌入外部内容的标签。这些外部内容可以是多媒体文件（如音频、视频）、插件（如 Flash）或者其他类型的文档。

<embed> 标签是一个空标签，意味着它没有闭合标签。

<embed src="your-source-file" type="content-type">

常用属性

  • src：此属性为必需项，它指定了要嵌入的外部文件的 URL 地址。例如，若要嵌入一个视频文件，就需把该视频文件的路径填入 src 属性中。
  • type：该属性指定了嵌入内容的 MIME 类型，其作用是让浏览器知晓如何处理这个文件。例如，对于 MP4 视频，MIME 类型是 video/mp4；对于 PDF 文件，MIME 类型是 application/pdf。
  • width 和 height：这两个属性用来设定嵌入内容的显示宽度和高度。你既可以使用像素值，也能使用百分比。
  • autostart：该属性是布尔值，当设为 true 时，嵌入的内容会在页面加载完成后自动开始播放；设为 false 则不会自动播放。不过，出于用户体验和流量的考虑，现代浏览器可能会限制自动播放。

嵌入视频

<embed src="example.mp4" width="640" height="360">

注意事项

  • 随着技术的发展，一些原本常用的嵌入内容类型（如 Flash）因安全和兼容性问题已逐渐被淘汰。
  • 对于音频和视频，现在更推荐使用 <audio> 和 <video> 标签，因为它们提供了更好的语义和浏览器支持。
  • 若要嵌入 PDF 文件，部分浏览器可能需要用户安装特定的插件或扩展程序才能正常显示。

116.定义外部资源的容器(嵌入式小程序) <object> 标签，用于在网页中嵌入外部资源的标签。这些资源可以是图片、音频、视频、PDF 文件、插件（如 Java Applet 或 Flash 内容）等。

<object data="resource-url" type="mime-type">
  备用内容，当资源无法加载时显示
</object>

常用属性

  • data：该属性为必需项，它指定了要嵌入的外部资源的 URL 地址。
  • type：此属性指定了嵌入资源的 MIME 类型，它能帮助浏览器识别如何处理该资源。例如，对于 PDF 文件，MIME 类型是 application/pdf；对于 MP4 视频，MIME 类型是 video/mp4。
  • width 和 height：这两个属性用于设置嵌入内容的显示宽度和高度，可以使用像素值或百分比。
  • name：为对象指定一个名称，可用于脚本中引用该对象。
  • form：将对象与表单关联起来，这样在提交表单时，对象的数据也会被提交。
<object data="example.pdf" type="application/pdf" width="100%" height="600px">
  你的浏览器不支持直接显示 PDF 文件，请点击下面的链接下载：
  <a href="example.pdf">下载 PDF 文件</a>
</object>
<object data="example.mp4" type="video/mp4" width="640" height="360">
  你的浏览器不支持播放此视频，请尝试更新浏览器或使用其他浏览器。
</object>

与其他标签的比较

  • <embed> 标签：<embed> 标签功能与 <object> 标签类似，不过 <object> 标签的功能更强大，支持更多属性和特性，并且提供了更好的 HTML 标准兼容性。
  • <iframe> 标签：<iframe> 标签主要用于嵌入另一个 HTML 页面，而 <object> 标签可以嵌入多种类型的资源。

注意事项

  • 由于安全和兼容性问题，一些原本常用的嵌入内容类型（如 Flash）已逐渐被淘汰。
  • 在使用 <object> 标签嵌入资源时，要确保提供备用内容，以便在资源无法加载时给用户提供相应的提示。

117.对象的参数 <param> 标签，常和 <object> 或 <applet>（不过 <applet> 现已被弃用）标签配合使用，其用途是给嵌入的对象（像 Java Applet、Flash 动画等）传递参数。借助 <param> 标签，你能够对嵌入对象的行为和外观进行定制。

基本语法

<param> 是个空标签，无需闭合标签，它具备 name 和 value 这两个必要属性。
<param name="parameter-name" value="parameter-value">

属性说明

  • name：该属性指定参数的名称，这是嵌入对象用来识别参数的标识。
  • value：此属性指定参数的值，也就是传递给嵌入对象的具体数据。

与 <object> 标签结合嵌入 Flash 动画并传递参数

<object data="example.swf" type="application/x-shockwave-flash" width="500" height="300">
    <param name="movie" value="example.swf">
    <param name="quality" value="high">
    <param name="loop" value="false">
    你的浏览器不支持 Flash 动画。
</object>
在上述示例中：
    • <object> 标签用于嵌入 Flash 动画文件 example.swf。
    • 第一个 <param> 标签的 name 属性为 movie，value 属性为 example.swf，这一参数告知 Flash 播放器要播放的文件。
    • 第二个 <param> 标签的 name 属性为 quality，value 属性为 high，此参数设定动画的播放质量为高。
    • 第三个 <param> 标签的 name 属性为 loop，value 属性为 false，该参数表明动画播放结束后不进行循环播放。

 HTML全局属性：

1.accesskey属性为元素设置了一个快捷键，以便用户可以通过键盘快速访问该元素。

accesskey 属性的值必须是单字符（一个字母或一个数字）。

警告

使用快捷键可能会遇到困难，因为它们可能与浏览器中的其他快捷键相冲突。

为了避免这个问题，大多数浏览器只有在与 Alt 键一起按下时才会使用快捷键。

顾虑

让快捷键适应所有国际语言是困难的。

accesskey 的值可能不存在于所有键盘上。

由于存在这些顾虑，建议可以不使用快捷键。

①.按钮元素

在按钮上使用 accesskey 属性，用户按下指定的快捷键组合就能激活按钮。
 <button accesskey="s">提交</button>
 <p>按下 Alt + s (Windows/Linux) 或者 Ctrl + Option + s (Mac) 来激活按钮。</p>

②.链接元素

为链接设置 accesskey 属性，用户可通过快捷键快速打开链接。
 <a href="https://www.example.com" accesskey="h">主页</a>
    <p>按下 Alt + h (Windows/Linux) 或者 Ctrl + Option + h (Mac) 来打开链接。</p>

③.输入框元素

为输入框添加 accesskey 属性，用户能通过快捷键快速聚焦到输入框。
<label for="username">用户名:</label>
    <input type="text" id="username" accesskey="u">
    <p>按下 Alt + u (Windows/Linux) 或者 Ctrl + Option + u (Mac) 来聚焦到输入框。</p>
2.class属性用于为 HTML 元素指定一个或多个类名，借助类名能为元素应用 CSS 样式或者用 JavaScript 进行操作。

①.基本使用

你可以给 HTML 元素添加 class 属性，并且指定一个类名。之后，在 CSS 里运用这个类名来定义样式。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Attribute Example</title>
    <style>
        /* 定义一个名为highlight的类 */
        .highlight {
            background-color: yellow;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 为p元素添加highlight类 -->
    <p class="highlight">这段文本有高亮效果。</p>
</body>

在这个例子中，class="highlight" 把 highlight 类赋予了 <p> 元素，接着 CSS 里的 .highlight 选择器为该元素设定了背景颜色和文字颜色。

②.应用多个类

你可以给一个元素添加多个类，不同类名之间用空格分隔。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Classes Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <!-- 为p元素添加多个类 -->
    <p class="highlight bold">这段文本既有高亮效果又加粗了。</p>
</body>

这里的 <p> 元素同时拥有 highlight 和 bold 两个类，因此会应用这两个类所定义的样式。

③.借助 JavaScript 操作类

你能够用 JavaScript 来添加、移除或者切换元素的类。
 <head>
<style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p id="myParagraph">点击按钮来高亮这段文本。</p>
    <button onclick="toggleHighlight()">点击</button>

    <script>
        function toggleHighlight() {
            const paragraph = document.getElementById('myParagraph');
            paragraph.classList.toggle('highlight');
        }
    </script>
</body>

在这个示例中，点击按钮时，toggleHighlight 函数会运用 classList.toggle 方法来切换 <p> 元素的 highlight 类。

3.contenteditable属性 它允许用户直接编辑页面上的元素内容，无需使用传统的表单输入元素。

①.基本用法：可以给任何 HTML 元素添加 contenteditable 属性，将其值设置为 true 或 ""（空字符串），这样该元素的内容就可以被用户编辑。如果设置为 false，则元素不可编辑。

<!-- 可编辑的段落 -->
    <p contenteditable="true">这是一段可编辑的文本。</p>
    <!-- 不可编辑的段落 -->
    <p contenteditable="false">这是一段不可编辑的文本。</p>

②.使用 JavaScript 操作 contenteditable

  <p id="editableParagraph">这是一段初始文本。</p>
    <button onclick="makeEditable()">使其可编辑</button>
    <button onclick="makeNonEditable()">使其不可编辑</button>

    <script>
        function makeEditable() {
            const paragraph = document.getElementById('editableParagraph');
            paragraph.contentEditable = true;
        }

        function makeNonEditable() {
            const paragraph = document.getElementById('editableParagraph');
            paragraph.contentEditable = false;
        }
    </script>

在这个示例中，有两个按钮，分别调用 makeEditable() 和 makeNonEditable() 函数。通过这两个函数，能动态地设置段落元素的 contenteditable 属性。

③.处理 contenteditable 元素的内容变化

可以使用 input 或 change 事件来监听 contenteditable 元素内容的变化

<p contenteditable="true" id="monitorParagraph">编辑这段文本，查看控制台输出。</p>
    <script>
        const paragraph = document.getElementById('monitorParagraph');
        paragraph.addEventListener('input', function () {
            console.log('内容已更新：', this.textContent);
        });
    </script>

在这个示例中，当 contenteditable 元素的内容发生变化时，会触发 input 事件，并在控制台输出更新后的内容。

4.contextmenu 属性 它为元素指定一个上下文菜单，当你在该元素上右键单击时，会显示这个自定义的上下文菜单。

基本步骤

  1. 创建菜单：借助 <menu> 元素创建一个自定义的上下文菜单，同时为其添加 id 属性。
  2. 添加菜单项：使用 <menuitem> 元素在 <menu> 里添加菜单项，并且可以设置 label 属性来显示菜单项的文本，设置 onclick 属性来定义点击菜单项时触发的操作。
  3. 关联元素与菜单：在需要使用该上下文菜单的元素上添加 contextmenu 属性，其值为之前创建的 <menu> 元素的 id。
<!-- 创建一个带有自定义上下文菜单的段落 -->
    <p contextmenu="myContextMenu">右键点击我查看自定义菜单</p>

    <!-- 定义上下文菜单 -->
    <menu type="context" id="myContextMenu">
        <menuitem label="复制" onclick="copyText()"></menuitem>
        <menuitem label="分享" onclick="shareText()"></menuitem>
    </menu>
    
    <p><b>注释：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
    <p><b>注释：</b>目前只有 Firefox 支持 contextmenu 属性。</p>

    <script>
        function copyText() {
            alert('文本已复制');
        }

        function shareText() {
            alert('文本已分享');
        }
    </script>

代码解释

  • 借助 <menu> 元素创建了一个 id 为 myContextMenu 的上下文菜单。
  • 在 <menu> 里使用 <menuitem> 元素添加了两个菜单项，分别是 “复制” 和 “分享”，并且为它们各自定义了点击时触发的函数。
  • 在 <p> 元素上添加了 contextmenu 属性，其值为 myContextMenu，这样当你在该段落上右键单击时，就会显示自定义的上下文菜单。

浏览器兼容性

需要注意的是，contextmenu 属性和 <menuitem> 元素的浏览器兼容性欠佳，部分浏览器可能不支持。在实际运用时，你可以考虑采用 JavaScript 来模拟实现自定义上下文菜单。
5.data-*属性是 HTML5 引入的自定义数据属性，你可以用它给 HTML 元素存储额外的自定义数据，而且不会对标准属性产生影响。

①.基本语法

data-* 属性的名称要以 data- 开头，后面紧跟自定义的名称，名称里只能包含字母、数字、连字符、点、冒号和下划线，并且不能用大写字母。示例如下：
<div id="myDiv" data-name="John" data-age="30">这是一个示例元素</div>

在这个例子中，data-name 和 data-age 就是自定义的数据属性，分别存储了名字和年龄信息。

你可以直接在 HTML 标签里添加 data-* 属性来存储数据，

<button data-action="delete">删除</button>

在这个例子中，data-action 属性存储了按钮的操作类型。

②.在 JavaScript 中访问

<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>

  <ul>
    <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
    <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>
    <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>
  </ul>

  <script>
    function showDetails(animal) {
      var animalType = animal.getAttribute("data-animal-type");
      alert(animal.innerHTML + "是一种" + animalType + "。");
    }
  </script>

③.你可以通过 Element.dataset 属性访问元素的 data-* 属性。

 <div id="myDiv" data-name="John" data-age="30">这是一个示例元素</div>
    <script>
        const div = document.getElementById('myDiv');
        const name = div.dataset.name;
        const age = div.dataset.age;
        console.log(`姓名: ${name}, 年龄: ${age}`);
    </script>

④.在 CSS 中使用

可以借助 attr() 函数在 CSS 里使用 data-* 属性的值。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before {
            content: attr(data-label);
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div data-label="标签:">这是一个示例元素</div>
</body>

在这个例子中，div::before 伪元素的内容通过 attr(data-label) 获取了 data-label 属性的值。

6.dir属性 用于规定元素内容的文本方向。它有三个可能的值：
    • ltr：表示从左到右，这是默认值。
    • rtl：表示从右到左，常用于像阿拉伯语、希伯来语这类从右向左书写的语言。
    • auto：让浏览器依据内容来自动判断文本方向。
<!-- 从左到右 -->
<p dir="ltr">这是从左到右的文本。</p>
<!-- 从右到左 -->
<p dir="rtl">هذا نص من اليمين إلى اليسار.</p>
<!-- 自动判断 -->
<p dir="auto">This is a test. 这是一个测试。</p>

7.draggable属性 能够用来设定某个元素是否可被拖动。该属性具备三个值，分别是：

    • true：表示元素可被拖动。
    • false：表示元素不可被拖动。
    • auto：让浏览器依据元素的默认行为来判定是否可拖动，一般来说，图片、链接默认是可拖动的，而其他元素默认不可拖动。
  <!-- 可拖动的元素 -->
    <div draggable="true" style="width: 100px; height: 100px; background-color: lightblue;">
        可拖动
    </div>
    <!-- 不可拖动的元素 -->
    <div draggable="false" style="width: 100px; height: 100px; background-color: lightcoral;">
        不可拖动
    </div>
    <!-- 由浏览器默认行为决定是否可拖动 -->
    <div draggable="auto" style="width: 100px; height: 100px; background-color: lightgreen;">
        自动判定
    </div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  let data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>
</html>

为了让元素在拖动后能有相应操作，可结合 HTML5 的拖放 API。

<style>
        #dragDiv {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
        }

        #dropDiv {
            width: 200px;
            height: 200px;
            background-color: lightgray;
            margin-top: 20px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div id="dragDiv" draggable="true" ondragstart="drag(event)">
        拖动我
    </div>
    <div id="dropDiv" ondragover="allowDrop(event)" ondrop="drop(event)">
        放置区域
    </div>

    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>

8.dropzone属性 用于定义元素作为拖放目标时的行为和可接受的数据类型的属性。有三个可选值：

    • copy：表示拖放操作将创建被拖动元素的副本。
    • move：表示拖放操作会将被拖动元素从原位置移动到目标位置。
    • link：表示拖放操作会在目标位置创建一个指向被拖动元素的链接。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropzone Example</title>
    <style>
        #dragElement {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            cursor: move;
        }

        #dropTarget {
            width: 200px;
            height: 200px;
            background-color: lightgray;
            margin-top: 20px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div id="dragElement" draggable="true" ondragstart="drag(event)">
        拖动我
    </div>
    <div id="dropTarget" dropzone="copy" ondragover="allowDrop(event)" ondrop="drop(event)">
        放置区域（copy）
    </div>
    <div id="dropTargetMove" dropzone="move" ondragover="allowDrop(event)" ondrop="drop(event)">
        放置区域（move）
    </div>
    <div id="dropTargetLink" dropzone="link" ondragover="allowDrop(event)" ondrop="drop(event)">
        放置区域（link）
    </div>

    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>

</html>

代码解释

  • HTML 部分：
    • 有一个可拖动的元素 dragElement，通过 draggable="true" 使其可被拖动。
    • 有三个不同 dropzone 属性值的放置区域：dropTarget（dropzone="copy"）、dropTargetMove（dropzone="move"）和 dropTargetLink（dropzone="link"）。
  • JavaScript 部分：
    • allowDrop 函数用于阻止浏览器对拖放事件的默认处理，允许元素成为放置目标。
    • drag 函数在拖动开始时设置要传输的数据，这里传输的是被拖动元素的 id。
    • drop 函数在放置操作发生时，获取传输的数据并将对应的元素添加到放置目标中。

注意事项

  • dropzone 属性只是一种提示，浏览器并不一定会严格按照这些值来执行操作。实际的拖放行为还需要通过 JavaScript 来控制和实现。
  • 不同浏览器对 dropzone 属性的支持可能存在差异，在使用时需要进行兼容性测试。
通过 dropzone 属性和 JavaScript 的拖放事件处理函数，你可以实现各种复杂的拖放交互效果。

9.enterkeyhint属性  HTML5 新增的一个属性，用于为虚拟键盘上的回车键提供一个提示，表明按下回车键后预期的操作。这个属性可以提升用户在移动设备或具有虚拟键盘的设备上的输入体验。

支持以下几个常见的值：
    • enter：提示按下回车键会插入换行符，通常用于多行文本输入。
    • done：提示操作已完成，按下回车键会关闭虚拟键盘。
    • go：提示按下回车键会前往某个地方，例如提交表单或跳转到某个页面。
    • next：提示按下回车键会移动到下一个输入字段。
    • previous：提示按下回车键会移动到上一个输入字段。
    • search：提示按下回车键会执行搜索操作。
    • send：提示按下回车键会发送信息。
<form>
        <label for="username">用户名:</label>
        <input type="text" id="username" enterkeyhint="next">
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" enterkeyhint="go">
        <br>
        <label for="message">消息:</label>
        <textarea id="message" enterkeyhint="send"></textarea>
        <br>
        <input type="submit" value="提交">
    </form>

代码解释

  • 用户名输入框：enterkeyhint="next" 提示用户按下回车键后会移动到下一个输入字段（即密码输入框）。
  • 密码输入框：enterkeyhint="go" 提示用户按下回车键后会执行一个前往操作，这里可以理解为提交表单。
  • 消息文本框：enterkeyhint="send" 提示用户按下回车键后会发送消息。

注意事项

  • enterkeyhint 属性只是一个提示，不同的浏览器和设备可能会根据这个提示来调整虚拟键盘上回车键的标签和行为，但并不能保证所有设备都会完全按照提示来执行。
  • 这个属性主要对使用虚拟键盘的移动设备和触摸屏设备有较大的帮助，在传统的桌面键盘上可能没有明显的效果。

10.hidden属性 是一个布尔属性，只要元素存在该属性，无论是否给它赋值，元素都会被隐藏。你可以在任何 HTML 元素上使用 hidden 属性。

 <!-- 显示的段落 -->
    <p>这是一个可见的段落。</p>
    <!-- 隐藏的段落 -->
    <p hidden>这是一个隐藏的段落。</p>

借助 JavaScript 动态地添加或移除 hidden 属性，从而控制元素的显示与隐藏。

<body>
    <button onclick="toggleParagraph()">切换段落显示状态</button>
    <p id="myParagraph">这是一个可以切换显示状态的段落。</p>

    <script>
        function toggleParagraph() {
            const paragraph = document.getElementById('myParagraph');
            if (paragraph.hasAttribute('hidden')) {
                paragraph.removeAttribute('hidden');
            } else {
                paragraph.setAttribute('hidden', '');
            }
        }
    </script>
</body>

在这个示例中，点击按钮时会调用 toggleParagraph 函数，此函数会检查段落元素是否有 hidden 属性，若有则移除该属性让元素显示，若没有则添加该属性使元素隐藏。

11.id属性 是一个非常常用且重要的特性，它为 HTML 元素指定了唯一的标识符。

基本语法：id属性的值必须在整个 HTML 文档中是唯一的，不能重复。在元素的开始标签中使用id属性来为元素命名，格式为id="value"，其中value是你为该元素取的唯一名称。

<p id="myParagraph">这是一个段落。</p>

①.通过 CSS 选择器应用样式：可以使用id选择器（#id值）来为具有特定id的元素设置样式。例如，要为上述id为myParagraph的段落设置红色文本，可以这样写 CSS：

<!DOCTYPE html>
<html>
<head>
<style>
#myParagraph {
  color: red;
}
</style>
</head>
<body>

<p id="myParagraph">这是一个段落。</p>

</body>
</html>

②.通过 JavaScript 获取和操作元素：在 JavaScript 中，可以使用document.getElementById()方法来获取具有指定id的元素，然后对其进行各种操作，如修改内容、样式或添加事件监听器等。

<p id="myParagraph">这是一个段落。</p>
<button onclick="changeText()">点击修改文本</button>

<script>
function changeText() {
  var element = document.getElementById("myParagraph");
  element.textContent = "文本已被修改。";
}
</script>

③.用作锚点链接：id还可以用于创建页面内的锚点链接。在 URL 中使用#id值的形式可以跳转到页面中具有相应id的元素位置。

<a href="#section2">跳转到第二节</a>

<h2 id="section1">第一节</h2>
<p>第一节的内容。</p>

<h2 id="section2">第二节</h2>
<p>第二节的内容。</p>

④.要给元素添加 id 属性，只需在元素标签内写入 id="your_id_name" 即可。这里的 your_id_name 就是你为元素设定的唯一标识符。

<h1 id="main-heading">这是主标题</h1>
    <p id="intro-text">这是介绍段落。</p>
    <button id="click-me">点击我</button>

⑤.在 CSS 里，你可以通过 # 符号搭配 id 名称来选中特定元素并设置样式。

<style>
        #main-heading {
            color: blue;
            font-size: 24px;
        }
        #intro-text {
            color: gray;
            font-size: 16px;
        }
        #click-me {
            background-color: green;
            color: white;
            padding: 10px 20px;
            border: none;
        }
    </style>
</head>
<body>
    <h1 id="main-heading">这是主标题</h1>
    <p id="intro-text">这是介绍段落。</p>
    <button id="click-me">点击我</button>
</body>

⑥.你可以借助 document.getElementById() 方法通过 id 来获取特定元素，进而对其进行操作。

<body>
    <h1 id="main-heading">这是主标题</h1>
    <p id="intro-text">这是介绍段落。</p>
    <button id="click-me">点击我</button>
    <script>
        // 获取元素
        const mainHeading = document.getElementById('main-heading');
        const introText = document.getElementById('intro-text');
        const clickMeButton = document.getElementById('click-me');

        // 修改元素内容
        mainHeading.textContent = '新的主标题';

        // 为按钮添加点击事件监听器
        clickMeButton.addEventListener('click', function() {
            introText.textContent = '点击按钮后更新的介绍段落。';
        });
    </script>
</body>

使用 id 属性的注意事项

  • id 必须是独一无二的，在同一个 HTML 文档里不能有两个元素使用相同的 id。

  • id 名称不能以数字开头，并且不能包含空格，可使用字母、数字、下划线和连字符。

  • 尽管 id 可以用于样式设置，但在 CSS 里使用类（class）来复用样式通常是更好的选择，id 更适合用于 JavaScript 操作和页面的锚点链接。

 inert属性 会禁用一个元素以及其内部的所有元素，称为惰性。这些元素仍然可见，但是它们没有任何功能：按钮和链接不能被点击，输入字段被禁用等等，而且它们会被屏幕阅读器忽略。

<body>
    <button id="toggleButton">切换惰性状态</button>
    <div id="inertDiv">
        <p>这是一个可能变为惰性的段落。</p>
        <input type="text" placeholder="输入内容">
        <button>按钮</button>
    </div>

    <script>
        const toggleButton = document.getElementById('toggleButton');
        const inertDiv = document.getElementById('inertDiv');

        toggleButton.addEventListener('click', () => {
            if (inertDiv.hasAttribute('inert')) {
                inertDiv.removeAttribute('inert');
            } else {
                inertDiv.setAttribute('inert', '');
            }
        });
    </script>
</body>
在这个示例里，有一个按钮和一个包含段落、输入框与按钮的 div 元素。当点击 “切换惰性状态” 按钮时，div 元素的 inert 属性会被切换。若 div 元素存在 inert 属性，
其内部的输入框无法获取焦点，按钮也无法点击；移除 inert 属性后，这些元素就能正常交互了。

使用场景

  • 模态对话框：当模态对话框显示时，可给页面其他部分添加 inert 属性，从而防止用户与对话框之外的元素交互。
  • 禁用表单区域：你可以把 inert 属性应用于表单的某些部分，让这些部分无法使用。

12.inputmode属性 作用是提示浏览器为 <input> 或者 <textarea> 元素开启适配的虚拟键盘，这对使用移动设备输入数据的用户极为有用。

也就是允许您更改手机或平板电脑（任何带有虚拟键盘的设备）上键盘的外观。

①.基本语法

<input inputmode="值">

这里的 “值” 可以是以下几种：

➊.none:意味着不需要虚拟键盘。当元素有自定义的输入方式或者不需要用户输入时，可使用此值。

<input type="hidden" inputmode="none">

➋.text:开启标准的文本输入键盘，这也是默认值。

<input type="text" inputmode="text" placeholder="请输入文本">

➌.decimal:开启带小数点的数字键盘，适合输入小数。

<input type="number" inputmode="decimal" placeholder="请输入小数">

➍.numeric:开启纯数字键盘，适合输入整数。

<input type="tel" inputmode="numeric" placeholder="请输入电话号码">

➎.tel:开启适合输入电话号码的键盘，通常包含数字、符号和特定功能键。

<input type="tel" inputmode="tel" placeholder="请输入电话号码">

➏.search:开启适合搜索的键盘，一般会有 “搜索” 按钮。

<input type="search" inputmode="search" placeholder="请输入搜索内容">

➐.email:开启适合输入电子邮件地址的键盘，通常会有 “@” 和 “.” 等符号。

<input type="email" inputmode="email" placeholder="请输入邮箱地址">

➑.url:开启适合输入 URL 的键盘，通常会有 “/” 和 “.” 等符号。

<input type="url" inputmode="url" placeholder="请输入网址">

②.示例代码：

 <form>
        <label for="textInput">文本输入:</label>
        <input type="text" id="textInput" inputmode="text" placeholder="请输入文本"><br><br>

        <label for="decimalInput">小数输入:</label>
        <input type="number" id="decimalInput" inputmode="decimal" placeholder="请输入小数"><br><br>

        <label for="numericInput">整数输入:</label>
        <input type="tel" id="numericInput" inputmode="numeric" placeholder="请输入整数"><br><br>

        <label for="telInput">电话号码输入:</label>
        <input type="tel" id="telInput" inputmode="tel" placeholder="请输入电话号码"><br><br>

        <label for="searchInput">搜索输入:</label>
        <input type="search" id="searchInput" inputmode="search" placeholder="请输入搜索内容"><br><br>

        <label for="emailInput">邮箱输入:</label>
        <input type="email" id="emailInput" inputmode="email" placeholder="请输入邮箱地址"><br><br>

        <label for="urlInput">网址输入:</label>
        <input type="url" id="urlInput" inputmode="url" placeholder="请输入网址"><br><br>
    </form>

在这个示例中，每个 <input> 元素都使用了不同的 inputmode 属性值，以此展示不同输入模式下的虚拟键盘。你可以在移动设备上打开这个页面，体验不同的输入模式。

13.lang属性  在HTML和XML中，lang 属性用于指定元素内容的语言。这对于屏幕阅读器、搜索引擎以及其他辅助设备和工具来说很重要，因为它们可以根据语言信息提供更合适的服务，比如正确的发音、语法检查等。

①.基本语法

<element lang="language-code">内容</element>

 这里的 language-code 是遵循 ISO 639 标准的语言代码，例如 en 代表英语，zh 代表中文等。对于中文，还可以进一步细分，如 zh-CN 表示简体中文，zh-TW 表示繁体中文。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>English Page</title>
</head>
<body>
    <h1>Welcome to my English page</h1>
    <p>This is a paragraph in English.</p>
</body>
</html>

②.如果页面中存在不同语言的内容，可以在相应的元素上设置 lang 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multilingual Page</title>
</head>
<body>
    <h1>Multilingual Content</h1>
    <p>This is an English paragraph.</p>
    <p lang="fr">Ceci est un paragraphe en français.</p>
    <p lang="zh-CN">这是一段中文内容。</p>
</body>
</html>

③.可以结合 CSS 的属性选择器，根据 lang 属性的值为不同语言的内容设置不同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styled Multilingual Page</title>
    <style>
        p[lang="en"] {
            color: blue;
        }
        p[lang="fr"] {
            color: green;
        }
        p[lang="zh-CN"] {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Styled Multilingual Content</h1>
    <p>This is an English paragraph.</p>
    <p lang="fr">Ceci est un paragraphe en français.</p>
    <p lang="zh-CN">这是一段中文内容。</p>
</body>
</html>

注意事项

  • lang 属性只是一个提示信息，浏览器或其他工具不一定会根据它执行特定的操作，但它有助于提高页面的可访问性和语义化。
  • 在 XML 中，lang 属性同样适用，其使用方式和 HTML 中类似。例如：
<book lang="en">
    <title>An English Book</title>
    <author>John Doe</author>
</book>

14.popover属性 用于创建弹出式元素，像菜单、提示框这类，当用户与之交互时弹出显示，交互结束后隐藏。

<element popover="value">内容</element>
  • auto：当触发元素被激活时，弹出框自动显示或隐藏。
  • manual：需要通过 JavaScript 手动控制弹出框的显示和隐藏。
<head>
<style>
        /* 样式设置 */
        [popover] {
            position: fixed;
            border: none;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            background-color: white;
        }

        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 触发按钮 -->
    <button popovertarget="myPopover">打开弹出框</button>

    <!-- 弹出框 -->
    <div id="myPopover" popover="auto">
        <h2>这是一个弹出框</h2>
        <p>这里可以放置任意内容。</p>
        <button popovertargetaction="close">关闭</button>
    </div>
</body>

代码解释

  1. 弹出框元素：使用 <div> 元素并设置 id 为 myPopover，popover="auto" 表示当触发元素激活时，弹出框会自动显示或隐藏。
  2. 触发按钮：<button> 元素设置 popovertarget="myPopover"，这表明该按钮是弹出框 myPopover 的触发元素，点击按钮时弹出框会显示。
  3. 关闭按钮：在弹出框内部的 <button> 元素设置 popovertargetaction="close"，点击此按钮会关闭弹出框。

手动控制（使用 JavaScript）

如果使用 popover="manual"，则需要通过 JavaScript 来控制弹出框的显示和隐藏。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动控制 Popover</title>
    <style>
        [popover] {
            position: fixed;
            border: none;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            background-color: white;
        }

        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button id="openButton">打开弹出框</button>
    <button id="closeButton">关闭弹出框</button>

    <div id="manualPopover" popover="manual">
        <h2>手动控制的弹出框</h2>
        <p>通过 JavaScript 控制显示和隐藏。</p>
    </div>

    <script>
        const openButton = document.getElementById('openButton');
        const closeButton = document.getElementById('closeButton');
        const popover = document.getElementById('manualPopover');

        openButton.addEventListener('click', () => {
            popover.showPopover();
        });

        closeButton.addEventListener('click', () => {
            popover.hidePopover();
        });
    </script>
</body>

在这个例子中，popover="manual" 表明需要手动控制弹出框。通过 JavaScript 为打开和关闭按钮添加点击事件监听器，分别调用 showPopover() 和 hidePopover() 方法来控制弹出框的显示和隐藏。

15.spellcheck属性 用于指定元素内容是否需要进行拼写检查。它可以应用于可编辑的元素，像 <input>、<textarea> 以及设置了 contenteditable 属性的元素。

<element spellcheck="value">内容</element>
这里的 value 可以是以下几种：
    • true：表示对元素内容进行拼写检查。
    • false：表示不进行拼写检查。
    • 不设置该属性：浏览器会根据自身的默认规则决定是否进行拼写检查。

①.在 <input> 元素上使用

<label for="checkInput">开启拼写检查:</label>
    <input type="text" id="checkInput" spellcheck="true"><br><br>

    <label for="uncheckInput">关闭拼写检查:</label>
    <input type="text" id="uncheckInput" spellcheck="false">

在这个示例中，第一个 <input> 元素开启了拼写检查，当输入错误的单词时，浏览器会用下划线标记出来；第二个 <input> 元素关闭了拼写检查，输入错误的单词时不会有标记。

②.在 <textarea> 元素上使用

<label for="checkTextarea">开启拼写检查:</label>
    <textarea id="checkTextarea" spellcheck="true"></textarea><br><br>

    <label for="uncheckTextarea">关闭拼写检查:</label>
    <textarea id="uncheckTextarea" spellcheck="false"></textarea>

此例中，第一个 <textarea> 元素开启了拼写检查，第二个则关闭了拼写检查，效果与 <input> 元素类似。

③.在contenteditable元素上使用

<div contenteditable="true" spellcheck="true">这是一个可编辑的段落，开启了拼写检查。</div><br><br>
    <div contenteditable="true" spellcheck="false">这是另一个可编辑的段落，关闭了拼写检查。</div>

这里的两个 <div> 元素都设置了 contenteditable="true" 使其可编辑，第一个开启了拼写检查，第二个关闭了拼写检查。

注意事项

  • 不同浏览器对 spellcheck 属性的支持和显示效果可能会有所差异。
  • 拼写检查的语言通常由浏览器的语言设置或元素的 lang 属性决定。
<textarea spellcheck="true" lang="en">This is a textarea with English spellcheck.</textarea>

这样设置后，拼写检查会按照英语的规则进行。

16.style属性 用于在 HTML 元素上直接添加内联样式，可控制元素的外观和布局。

<element style="property1: value1; property2: value2; ...">内容</element>

其中，property 是 CSS 属性名，value 是对应属性的值，多个属性之间用分号分隔。

①.设置文本样式

<p style="color: blue; font-size: 20px; font-style: italic;">这是一段设置了样式的文本。</p>

在这个例子中，文本颜色被设置为蓝色，字体大小为 20 像素，字体样式为斜体。

②.设置背景样式  可以为元素设置背景颜色、背景图片等。

<div style="background-color: lightgray; background-image: url('example.jpg');">这是一个设置了背景样式的 div。</div>

此例中，div 元素的背景颜色为浅灰色，同时设置了背景图片。

③.设置边框样式

<table style="border: 1px solid black;">
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
</table>

④.设置元素的尺寸和位置 可以控制元素的宽度、高度、边距等。

<div style="width: 200px; height: 100px; margin: 10px;">这是一个设置了尺寸和边距的 div。</div>

这个 div 元素的宽度为 200 像素，高度为 100 像素，外边距为 10 像素。

<h1 style="color: green; text-align: center;">标题样式</h1>
    <p style="font-size: 16px; line-height: 1.5;">这是一段普通的段落文本，设置了字体大小和行高。</p>
    <div style="width: 300px; height: 200px; background-color: yellow; border: 2px solid red; margin: 20px auto;">
        这是一个有特定样式的 div 元素。
    </div>

注意事项

  • 内联样式的优先级较高，会覆盖外部 CSS 文件和 <style> 标签中定义的样式。
  • 大量使用 style 属性会使 HTML 代码变得冗长，不利于维护，通常建议将公共样式定义在外部 CSS 文件中，内联样式仅用于特定元素的临时样式调整。

17.tabindex属性 用来指定元素是否可以获得焦点，以及它在按 Tab 键进行焦点切换时的顺序。

<element tabindex="值">内容</element>

①.tabindex="正数"

当 tabindex 的值为正整数时，元素会参与 Tab 键焦点顺序的排序。数值越小，该元素在焦点切换顺序中越靠前。

<button tabindex="2">按钮 2</button>
<button tabindex="1">按钮 1</button>
<button tabindex="3">按钮 3</button>

在这个例子里，按 Tab 键时，焦点会先移动到 tabindex 为 1 的按钮，接着是 tabindex 为 2 的按钮，最后是 tabindex 为 3 的按钮。

<div tabindex="1">W3School</div><br>
<div tabindex="3">Google</div><br>
<div tabindex="2">Microsoft</div>

<script>
// 开始时，将焦点设置在第一个 div 上
document.getElementsByTagName('div')[0].focus();
</script>

<p tabindex="4"><b>注释：</b>请尝试使用键盘上的“Tab”键在元素间导航。</p>

②.tabindex="0"

若 tabindex 的值为 0，元素会参与 Tab 键焦点顺序，但它会被放置在所有有正 tabindex 值元素之后，按照文档流的顺序进行排列。

    <button tabindex="2">按钮 2</button>
    <button tabindex="0">按钮 0</button>
    <button tabindex="1">按钮 1</button>

按 Tab 键时，焦点会先移动到 tabindex 为 1 的按钮，再到 tabindex 为 2 的按钮，最后是 tabindex 为 0 的按钮。

③.tabindex="-1"

当 tabindex 的值为 -1 时，元素可以通过 JavaScript 或其他编程方式获得焦点，但不会参与 Tab 键的焦点切换顺序。

<button id="normalButton">普通按钮</button>
    <button id="hiddenButton" tabindex="-1">隐藏焦点按钮</button>
    <script>
        const hiddenButton = document.getElementById('hiddenButton');
        // 通过 JavaScript 让按钮获得焦点
        hiddenButton.focus(); 
    </script>

在这个示例中，按 Tab 键时焦点不会切换到 tabindex 为 -1 的按钮，但可以通过 JavaScript 代码让它获得焦点。

适用元素

18.tabindex属性 可以用于大多数 HTML 元素，但主要用于那些默认情况下不能获得焦点的元素，像 <div>、<span> 等，使其能够参与焦点管理。
<div tabindex="0">这是一个可以获得焦点的 div。</div>
<span tabindex="0">这是一个可以获得焦点的 span。</span>

在这个例子中，<div> 和 <span> 元素原本不能获得焦点，通过设置 tabindex 属性，它们可以参与焦点切换了。

注意事项

  • 合理使用 tabindex 属性，避免打乱用户习惯的焦点顺序，影响可访问性。
  • 对于表单元素，通常不需要设置 tabindex，因为它们默认就会按照文档流的顺序参与焦点切换。

19.title属性 可应用于所有 HTML 元素。其作用是为元素提供额外的提示信息，当用户将鼠标悬停在元素上时，这些提示信息就会以工具提示的形式显示出来。

<element title="提示信息">内容</element>

①.在链接上使用

<a href="https://www.example.com" title="点击访问示例网站">示例网站</a>

当用户把鼠标悬停在这个链接上时，就会显示 “点击访问示例网站” 的提示信息。

②.在图片上使用

<button title="点击执行操作">操作按钮</button>

鼠标悬停在图片上时，会显示 “这是一张示例图片” 的提示。

③.在按钮上使用

<button title="点击执行操作">操作按钮</button>

④.在输入框上使用

<input type="text" placeholder="请输入内容" title="请输入有效的文本内容">

用户将鼠标悬停在输入框上，会看到 “请输入有效的文本内容” 的提示。

综合示例

    <h1 title="这是页面标题">页面标题</h1>
    <p title="这是一段示例文本">这是一段普通的文本内容。</p>
    <a href="https://www.example.com" title="点击访问示例网站">示例网站</a>
    <img src="example.jpg" alt="示例图片" title="这是一张示例图片">
    <button title="点击执行操作">操作按钮</button>
    <input type="text" placeholder="请输入内容" title="请输入有效的文本内容"

注意事项

  • title 属性中的提示信息要简洁明了，准确传达元素的相关信息。
  • 不同浏览器对 title 属性的显示效果可能略有差异，但基本都是以工具提示的形式呈现。
  • 该属性提供的是辅助信息，不能替代元素本身的主要内容或功能描述。

20.translate属性 用于指示浏览器是否对元素的文本内容进行翻译。这个属性对机器翻译工具和浏览器插件起提示作用，决定是否对特定元素内容进行翻译。

<element translate="值">元素内容</element>
  • yes 或不设置该属性：表明元素内容需要被翻译。
  • no：表示元素内容不需要被翻译。

①.阻止特定元素内容被翻译

 <p>这是一段需要翻译的普通文本。</p>
 <p translate="no">这是一段不需要翻译的文本，比如品牌名、特定术语等。</p>

在这个例子中，第一个 <p> 元素未设置 translate 属性，默认内容会被翻译；第二个 <p> 元素设置了 translate="no"，其内容不会被翻译。

②.在不同元素上使用

<h1 translate="no">品牌名称</h1>
<p>欢迎来到 <span translate="no">OurBrand</span>，这是一个很棒的地方。</p>

此例中，<h1> 元素和 <span> 元素设置了 translate="no"，它们的内容不会被翻译，而 <p> 元素中其他部分内容会根据情况被翻译。

注意事项

  • translate 属性只是一个提示，浏览器或翻译工具不一定会严格遵循该设置。
  • 该属性不会影响用户手动复制粘贴文本后进行的翻译操作。
  • 在实际应用中，对于一些固定的术语、品牌名、代码片段等，可使用该属性避免被错误翻译。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 
 
 
 
 
 
 JAVAScript：

1. document

在 JavaScript 里，document 属于全局对象，代表整个 HTML 文档。借助 document 对象，能够对 HTML 文档的内容、结构和样式进行访问与修改。

2. getElementById('demo')

这是 document 对象的一个方法，其作用是依据元素的 id 属性值来查找 HTML 文档中的元素。在这个例子中，'demo' 即为要查找的元素的 id。若文档中存在 id 为 demo 的元素，该方法会返回这个元素的引用；若不存在，则返回 null。

3.innerHTML

innerHTML 是元素对象的一个属性，它可用于获取或设置元素内部的 HTML 内容。当使用赋值操作符 = 时，就可以把新的 HTML 内容赋给这个元素。
const element = document.getElementById('demo');
element.innerHTML = '<strong>新的内容</strong>';

上述代码会把 id 为 demo 的元素内部的内容替换成 <strong>新的内容</strong>。

与 let 和 var 的对比

  • const：用于声明常量，一旦赋值就不能重新赋值，具有块级作用域。
  • let：用于声明变量，能够重新赋值，同样具有块级作用域。
  • var：早期用于声明变量，可重新赋值，作用域是函数级或者全局级，没有块级作用域。
// const 示例
const num = 10;
// num = 20; // 这行代码会报错，因为 const 声明的常量不能重新赋值

// let 示例
let count = 5;
count = 15; // 可以重新赋值

// var 示例
var name = 'John';
name = 'Jane'; // 可以重新赋值

if (true) {
    let blockVar = 'block scoped with let';
    var functionVar = 'function scoped with var';
}
// console.log(blockVar); // 报错，let 具有块级作用域
console.log(functionVar); // 可以访问，var 没有块级作用域

4.Date() 是 JavaScript 的一个内置函数，它会返回当前的日期和时间的字符串表示。当调用 Date() 函数时，会返回一个包含当前日期和时间信息的字符串，格式类似于 Fri Apr 19 2025 12:34:56 GMT+0800 (中国标准时间)。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
</head>

<body>
    <p id="demo">点击按钮显示当前日期和时间。</p>

样式设置

  • 项目符号样式：可以使用 CSS 的 list-style-type 属性来改变项目符号的样式，常见取值有 disc（圆点，默认值）、circle（空心圆）、square（方块）、none（不显示项目符号）等。

 <summary> 标签

 
posted @ 2025-04-13 18:02  自学小天才  阅读(113)  评论(0)    收藏  举报