Post

Web HTML

Posted
By Cc 33 min read

什么是 HTML

HTML，全称为 HyperText Markup Language（超文本标记语言）

  • 是一种用于创建和设计网页的标准标记语言。HTML 的主要功能是定义网页的结构和内容，它通过一系列的标签（tags）来描述文本、图像、链接、表格、表单等页面元素

  • 基本概念

    1. 标记语言：HTML 是一种标记语言，它使用标签来标记不同类型的内容。这些标签告诉浏览器如何显示网页内容
    2. 超文本：超文本是一种包含链接的文本，可以通过点击链接从一个文档跳转到另一个文档

  • HTML 与 XHTML

    HTML (Hypertext Markup Language) 和 XHTML (Extensible Hypertext Markup Language) 之间有以下几个主要区别:

    1. 语法规则:

      • HTML 语法相对宽松,允许一些错误的标记。
      • XHTML 严格遵循 XML 语法规则,要求所有标签都必须正确闭合,属性值必须用引号括起来等。

    2. 大小写规范:

      • HTML 标签和属性名可以是大写或小写。
      • XHTML 标签和属性名必须使用小写。

    3. 空元素的书写:

      • HTML 中的空元素(如 <br> 和 <img>)可以使用开始标签和结束标签,也可以仅使用开始标签。
      • XHTML 中的空元素必须使用自闭合标签,如 <br /> 和 <img />。

    4. 文档结构:

      • HTML 文档可以省略一些必需的元素,如 <html> 和 <body> 等。
      • XHTML 文档必须包含 <html> 根元素,并且 <head> 和 <body> 元素也是必需的。

    5. MIME 类型:

      • HTML 文档的 MIME 类型通常为 text/html。
      • XHTML 文档的 MIME 类型通常为 application/xhtml+xml。

    6. 兼容性:

      • HTML 被所有浏览器广泛支持。
      • XHTML 在某些较老的浏览器上可能不太兼容,需要特殊的处理。

总的来说, XHTML 相比 HTML 更加严格和规范,这有助于提高代码的可读性和可维护性,但同时也增加了开发的复杂度。随着 HTML5 的普及,XHTML 的使用已经逐渐减少,大多数现代网页都采用 HTML5 标准。

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>页面标题</title>
  </head>
  <body>
    <h1>这是一个主标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>

  • 解释

    1. <!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档
    2. <html>：根元素，包含所有的 HTML 内容
    3. <head>：头部元素，包含页面的元数据（metadata），如文档的字符集、标题、链接到 CSS 样式表等
    4. <title>：定义网页标题，会显示在浏览器的标签上
    5. <body>：主体元素，包含页面的主要内容，如文本、图像、链接等

标签分类

类型 主要作用
结构性标签 定义文档的基本结构和布局
文本格式标签 用于文本的格式化和排版
列表标签 定义各种类型的列表结构
表格标签 创建和管理表格结构
表单标签 创建和处理用户输入的表单
媒体标签 嵌入和管理媒体内容，如图像、音频和视频
元数据标签 提供关于文档的元数据，如描述、关键词、样式和链接等
脚本和编程标签 嵌入脚本和编程代码，提供动态行为
内联框架标签 在页面内嵌入其他文档或内容
样式标签 定义文档的样式和外观
交互标签 提供用户交互功能，如可展开的详细信息和对话框
语义标签 提供清晰的语义信息，帮助搜索引擎和开发者理解内容结构

结构性标签

结构性标签 示例 作用
<html> <html>...</html> 定义 HTML 文档的根元素
<head> <head>...</head> 包含文档的元数据，如标题、样式、脚本等
<title> <title>Page Title</title> 定义文档的标题，显示在浏览器标签页上
<body> <body>...</body> 包含文档的主要内容
<header> <header>...</header> 定义文档或节的头部内容，通常包含导航链接和标题
<footer> <footer>...</footer> 定义文档或节的底部内容，通常包含版权信息和联系信息
<section> <section>...</section> 定义文档中的一个节，通常包含主题相关的一组内容
<article> <article>...</article> 定义文档中的独立内容单元，适用于博客文章、新闻等
<nav> <nav>...</nav> 定义导航链接的部分
<main> <main>...</main> 定义文档的主体内容，主要内容部分
<aside> <aside>...</aside> 定义页面内容之外的侧边栏内容，通常包含相关信息或广告
<div> <div>...</div> 定义文档中的一个通用容器，无特定语义意义，用于布局和样式

文本格式标签

文本格式标签 示例 作用
<h1> - <h6> <h1>This is a heading</h1> 定义标题的级别，<h1> 表示最高级标题，<h6> 表示最低级标题。
<p> <p>This is a paragraph.</p> 定义段落，用于组织文本内容。
<a> <a href="https://example.com">Link</a> 定义超链接，允许用户点击跳转到指定的 URL。
<span> <span style="color:red;">Text</span> 定义行内文本样式，可以通过 CSS 或内联样式设置。
<em> <em>This text is emphasized.</em> 强调文本，通常以斜体显示，表示语气或重要性的强调。
<strong> <strong>This text is strong.</strong> 重要文本，通常以粗体显示，表示比周围文本更为重要。

列表标签

列表标签 示例 作用
<ul> <ul> <li>Item 1</li> <li>Item 2</li> </ul> 创建无序列表，列表项将显示为项目符号或其他符号。
<ol> <ol> <li>Item 1</li> <li>Item 2</li> </ol> 创建有序列表，列表项将按照数字或字母顺序排列。
<li> <ul> <li>Item 1</li> <li>Item 2</li> </ul> 定义列表中的一个项目，通常嵌套在<ul> 或<ol> 中。
<dl> <dl> <dt>Term 1</dt> <dd>Description 1</dd> <dt>Term 2</dt> <dd>Description 2</dd> </dl> 创建描述列表，用于表示术语及其相应的描述。
<dt> <dl> <dt>Term 1</dt> <dd>Description 1</dd> <dt>Term 2</dt> <dd>Description 2</dd> </dl> 定义描述列表中的术语。
<dd> <dl> <dt>Term 1</dt> <dd>Description 1</dd> <dt>Term 2</dt> <dd>Description 2</dd> </dl> 定义描述列表中术语的描述。

表格标签

表格标签 示例 作用
<table> <table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table> 创建表格，用于展示数据和信息。
<tr> <table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table> 定义表格中的一行（行），必须嵌套在<table> 标签内。
<td> <table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table> 定义表格中的一个单元格（列），必须嵌套在<tr> 标签内。
<th> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </table> 定义表格中的表头单元格，通常加粗居中显示。
<thead> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </tbody> </table> 定义表格的头部内容，包含一组表头行，通常放置在表格内部的最前面。
<tbody> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </tbody> </table> 定义表格的主体内容，包含一组表格行，用于显示实际数据。
<tfoot> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Footer</td> </tr> </tfoot> </table> 定义表格的尾部内容，通常包含一些总结或附加信息。
<caption> <table> <caption>Table Caption</caption> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table> 定义表格的标题，通常放置在表格之前或之后，并且只能出现一次。
<col> <table> <colgroup> <col span="2"> </colgroup> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table> 定义表格中一列或多列的属性，通常与<colgroup> 元素一起使用。
<colgroup> <table> <colgroup> <col span="2"> </colgroup> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table> 定义表格中一组列的属性，通常与<col> 元素一起使用。

表单标签

表单标签 示例 作用
<form> <form action="/submit" method="post"> ... </form> 创建一个表单，用于收集用户输入。
<input> <input type="text" name="username"> 定义一个输入控件，可以是文本框、单选框、复选框等。
<textarea> <textarea name="message">Enter your message here.</textarea> 定义一个多行文本输入框。
<button> <button type="submit">Submit</button> 定义一个按钮，用于提交表单数据或执行其他操作。
<select> <select name="country"> <option value="USA">USA</option> <option value="UK">UK</option> </select> 定义一个下拉菜单，供用户选择一个或多个选项。
<option> <select name="country"> <option value="USA">USA</option> <option value="UK">UK</option> </select> 定义下拉菜单中的一个选项。
<label> <label for="username">Username:</label> <input type="text" id="username" name="username"> 定义一个标签，用于标识输入字段的含义。
<fieldset> <fieldset> <legend>Personal Information</legend> ... </fieldset> 定义一个字段集，用于将相关表单元素组合在一起。
<legend> <fieldset> <legend>Personal Information</legend> ... </fieldset> 定义字段集的标题，描述相关表单元素的目的或组合。
<datalist> <input list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> </datalist> 定义一个输入框的预定义选项列表。
<optgroup> <select> <optgroup label="Group 1"> <option value="Item 1">Item 1</option> </optgroup> </select> 定义一个选项组，用于在下拉菜单中组织选项。

媒体标签

媒体标签 示例 作用
<img> <img src="image.jpg" alt="Image"> 嵌入图像，用于在网页中显示图片。
<audio> <audio src="audio.mp3" controls></audio> 嵌入音频，用于在网页中播放音频文件。
<video> <video src="video.mp4" controls></video> 嵌入视频，用于在网页中播放视频文件。
<source> <video controls> <source src="movie.mp4" type="video/mp4"> </video> 定义多媒体文件的来源，为<video> 和<audio> 提供备选资源。
<track> <video controls> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> </video> 为<audio> 和<video> 元素定义外部文本轨道。
<embed> <embed src="flash.swf" width="400" height="300"> 嵌入外部应用程序或媒体资源，如 Flash 动画。
<object> <object data="movie.swf" width="400" height="300"></object> 嵌入外部资源，如插件、多媒体内容或其他资源。
<param> <object data="movie.swf"> <param name="autoplay" value="true"> </object> 为<object> 元素指定参数。
<iframe> <iframe src="https://example.com" width="600" height="400"></iframe> 嵌入另一个 HTML 页面或媒体内容，通常用于显示第三方内容。

元数据标签

元数据标签 示例 作用
<meta> <meta charset="UTF-8"> 定义 HTML 文档的元数据，如字符集、描述、关键词等。
<link> <link rel="stylesheet" href="styles.css"> 定义文档与外部资源之间的关系，如链接到样式表、图标等。
<title> <title>Page Title</title> 定义文档的标题，显示在浏览器的标题栏或标签页上。
<base> <base href="https://www.example.com/"> 定义页面中所有相对链接的基本 URL，用于指定页面中的所有相对链接的基础 URL。
<style> <style> body { color: red; } </style> 定义文档的样式信息，通常放置在<head> 标签内部，用于设置文档的样式和布局。

脚本和编程标签

脚本和编程标签 示例 作用
<script> <script src="script.js"></script> 嵌入客户端脚本，通常用于引入外部 JavaScript 文件或在页面内部编写 JavaScript 代码。
<noscript> <noscript>Sorry, your browser does not support JavaScript.</noscript> 提供在不支持 JavaScript 的情况下显示的备选内容。
<template> <template> <p>This is a template.</p> </template> 定义一个 HTML 模板，用于客户端 JavaScript 代码中动态生成 HTML 内容。
<canvas> <canvas id="myCanvas" width="200" height="100"></canvas> 定义一个画布，用于通过 JavaScript 绘制图形、动画或其他图像操作。

内联框架标签

内联框架标签 示例 作用
<iframe> <iframe src="https://www.example.com" width="600" height="400"></iframe> 嵌入另一个 HTML 页面或媒体内容，通常用于显示第三方内容，如嵌入其他网页、广告、地图等。

<iframe> 标签允许在当前 HTML 文档中嵌入其他 HTML 文档或媒体内容，创建了一种内联的框架结构，使得内容可以在框架中独立显示

样式标签

样式标签 示例 作用
<style> <style> body { color: red; } </style> 定义文档的样式信息，通常放置在<head> 标签内部，用于设置文档的样式和布局。
<link> <link rel="stylesheet" href="styles.css"> 将外部样式表链接到 HTML 文档，使得可以从外部导入样式定义，提高代码的可维护性和复用性。

交互标签

交互标签 示例 作用
<details> <details> <summary>Click me</summary> <p>Details content goes here.</p> </details> 定义一个可展开的详细内容块，用户可以点击摘要部分来展开或收起详细内容。
<summary> <details> <summary>Click me</summary> <p>Details content goes here.</p> </details> 定义<details> 元素的摘要部分，通常为一个可点击的标题，用于触发详细内容的展开或收起。
<dialog> <dialog open>This is a dialog.</dialog> 定义一个对话框，用于显示提示、警告或需要用户输入的信息。

语义标签

语义标签 示例 作用
<header> <header>Header content goes here.</header> 定义文档或节的头部，通常包含网站的标志、导航链接等。
<footer> <footer>Footer content goes here.</footer> 定义文档或节的底部，通常包含版权信息、联系信息等。
<nav> <nav>Navigation links go here.</nav> 定义导航链接的区域，用于包含页面的主要导航链接。
<section> <section>Section content goes here.</section> 定义文档中的一个节，通常包含一组相关的内容。
<article> <article>Article content goes here.</article> 定义文档中的一个独立内容单元，如博客文章、新闻等。
<main> <main>Main content goes here.</main> 定义文档的主要内容区域，通常包含页面的核心内容。
<aside> <aside>Aside content goes here.</aside> 定义文档中的附属内容，通常包含与主要内容相关的辅助信息，如侧边栏、广告等。
<figure> <figure> <img src="image.jpg" alt="Image"> <figcaption>Figure caption goes here.</figcaption> </figure> 定义一组相关的媒体内容和它们的标题，如图片、图表、视频等。
<figcaption> <figure> <img src="image.jpg" alt="Image"> <figcaption>Figure caption goes here.</figcaption> </figure> 定义<figure> 元素中媒体内容的标题，通常出现在图片、图表等媒体内容的下方。
<details> <details> <summary>Click me</summary> <p>Details content goes here.</p> </details> 定义一个可展开的详细内容块，用户可以点击摘要部分来展开或收起详细内容。
<summary> <details> <summary>Click me</summary> <p>Details content goes here.</p> </details> 定义<details> 元素的摘要部分，通常为一个可点击的标题，用于触发详细内容的展开或收起。
<mark> <p>This is <mark>highlighted</mark> text.</p> 定义需要突出显示的文本内容，通常以黄色或其他醒目的颜色显示。
<time> <p>Meeting is scheduled for <time datetime="2022-05-01T08:30">tomorrow</time> at 8:30 AM.</p> 定义日期或时间信息，使得浏览器和搜索引擎能够更好地理解并处理。
<abbr> <p>This is an <abbr title="abbreviation">abbr</abbr> tag.</p> 定义缩写或首字母缩略词，title 属性用于提供完整的解释或含义。
<blockquote> <blockquote> <p>This is a quotation.</p> <footer>Author</footer> </blockquote> 定义长的引用内容，通常以缩进或其他样式显示，并包含引用的来源或作者。
<cite> <p><cite>Reference</cite></p> 定义文本的引用来源，通常用于引用书籍、文章或其他作品的名称。
<q> <p><q>This is a short quotation.</q></p> 定义短的内联引用，通常用于引用短语或一两句话的引用。
<address> <address>Contact information goes here.</address> 定义联系信息，通常用于包含作者、所有者或相关组织的联系信息。

标签完整例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Complete HTML Example</title>
    <style>
      /* CSS样式 */
      body {
        font-family: Arial, sans-serif;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <!-- 结构性标签 -->
    <header>
      <h1>Header</h1>
    </header>

    <!-- 文本格式标签 -->
    <section>
      <h2>Text Formatting</h2>
      <p>This is a paragraph.</p>
      <em>This text is emphasized.</em>
      <strong>This text is strong.</strong>
    </section>

    <!-- 列表标签 -->
    <section>
      <h2>Lists</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
      </ol>
    </section>

    <!-- 表格标签 -->
    <section>
      <h2>Table</h2>
      <table>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
        </tr>
      </table>
    </section>

    <!-- 表单标签 -->
    <section>
      <h2>Form</h2>
      <form action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" /><br /><br />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" /><br /><br />
        <input type="submit" value="Submit" />
      </form>
    </section>

    <!-- 媒体标签 -->
    <section>
      <h2>Media</h2>
      <img src="image.jpg" alt="Image" />
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
      </audio>
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4" />
        Your browser does not support the video element.
      </video>
    </section>

    <!-- 元数据标签 -->
    <section>
      <h2>Metadata</h2>
      <meta name="description" content="This is a description" />
      <meta name="keywords" content="HTML, CSS, JavaScript" />
    </section>

    <!-- 脚本和编程标签 -->
    <section>
      <h2>Scripting and Programming</h2>
      <script>
        document.write("This is JavaScript.");
      </script>
    </section>

    <!-- 内联框架标签 -->
    <section>
      <h2>Inline Frames</h2>
      <iframe src="https://www.example.com" width="600" height="400"></iframe>
    </section>

    <!-- 样式标签 -->
    <section>
      <h2>Styling</h2>
      <p style="color: red;">This text is red.</p>
    </section>

    <!-- 交互标签 -->
    <section>
      <h2>Interactive Elements</h2>
      <details>
        <summary>Click me</summary>
        <p>Details content goes here.</p>
      </details>
    </section>

    <!-- 语义标签 -->
    <section>
      <h2>Semantic Elements</h2>
      <header>
        <h1>Header</h1>
      </header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <main>
        <article>
          <h2>Article Title</h2>
          <p>Article content goes here.</p>
        </article>
      </main>
      <footer>
        <p>Footer</p>
      </footer>
    </section>
  </body>
</html>

标签属性

分类 属性
基本属性 id, class, style, title
链接和导航属性 href, target, download
多媒体属性 src, alt, width, height
表单属性 value, name, type, placeholder, required, disabled, readonly, checked, selected
语义属性 lang, dir, translate
事件属性 onclick, onmouseover, onsubmit, onload
其他常用属性 draggable, hidden, contenteditable, spellcheck

基本属性

属性 描述 示例
id 给元素设置唯一标识符 <div id="main-content"></div>
class 给元素设置类名 <p class="text-large text-bold">这是一段加粗大号文本</p>
style 在标签内部直接设置 CSS 样式 <h1 style="color:red; font-size:36px;">这是一个红色大标题</h1>
title 设置元素的悬停提示文本 <a href="https://www.example.com" title="访问示例网站">示例链接</a>

链接和导航属性

属性 描述 示例
href 指定链接地址 <a href="https://www.example.com">链接文本</a>
target 指定链接打开方式 <a href="https://www.example.com" target="_blank">在新标签页打开</a>
download 指定下载文件名 <a href="file.pdf" download="example.pdf">下载文件</a>

  1. href 属性:

    • 用于指定链接的目标 URL 地址。
    • 可以是绝对地址或相对地址。

  2. target 属性:

    • 用于指定链接在何处打开。
    • 常用值有 _blank(在新标签页打开)、_self(在当前窗口打开)、_parent(在父框架打开)、_top(在最顶层框架打开)。

  3. download 属性:

    • 用于指定下载链接时保存的文件名。
    • 当用户点击下载链接时,浏览器会自动下载并保存文件。

多媒体属性

属性 描述 示例
src 指定图片或视频的来源路径 <img src="image.jpg" alt="示例图片">
alt 提供图片的替代文本描述 <img src="image.jpg" alt="这是一张示例图片">
width 设置图像或视频的宽度 <img src="image.jpg" width="400">
height 设置图像或视频的高度 <img src="image.jpg" height="300">

  1. src 属性:

    • 用于指定图像、视频或音频文件的来源路径。
    • 可以是绝对路径或相对路径。

  2. alt 属性:

    • 用于提供图像的替代文本描述。
    • 当图像无法显示时,浏览器会显示此替代文本。
    • 对于无障碍访问也很重要。

  3. width 和 height 属性:

    • 用于设置图像或视频元素的宽度和高度。
    • 可以使用像素或百分比等单位。

表单属性

好的,下面我来介绍 HTML 表单标签的常用属性:

属性 描述 示例
value 指定表单控件的初始值 <input type="text" value="请输入文本">
name 指定表单控件的名称 <input type="text" name="username">
type 指定表单控件的类型 <input type="email" name="email">
placeholder 提供输入框的提示文本 <input type="text" placeholder="请输入用户名">
required 指定表单控件为必填项 <input type="text" required>
disabled 禁用表单控件 <input type="text" disabled>
readonly 设置表单控件为只读 <input type="text" readonly>
checked 设置单选框/复选框为选中状态 <input type="checkbox" checked>
selected 设置下拉列表项为选中状态 <option value="option1" selected>选项1</option>

语义属性

好的,下面我来介绍 HTML 常见的语义属性:

属性 描述 示例
lang 指定元素的语言 <html lang="zh-CN">
role 指定元素的角色或用途 <nav role="navigation">
aria-label 提供元素的无障碍标签 <button aria-label="关闭">X</button>
aria-describedby 关联元素的无障碍描述 <div id="desc">这是一个重要提示</div><button aria-describedby="desc">查看提示</button>
alt 为图像提供替代文本 <img src="logo.png" alt="公司logo">
figure 和 figcaption 定义含有图像的语义化区块 <figure><img src="image.jpg" alt="示例图片"><figcaption>这是一张示例图片</figcaption></figure>

  1. lang 属性:

    • 用于指定元素的语言,有助于屏幕阅读器正确朗读内容。

  2. role 属性:

    • 用于指定元素的语义化角色,帮助无障碍工具理解页面结构。

  3. aria-label 和 aria-describedby 属性:

    • 用于提供元素的无障碍标签和描述,增强可访问性。

  4. alt 属性:

    • 为图像提供替代文本描述,当图像无法显示时提供备用内容。

  5. figure 和 figcaption 元素:

    • 定义含有图像的语义化区块,将图像和说明文字关联在一起。

事件属性

属性 描述 示例
onclick 点击元素时触发 <button onclick="alert('你点击了我!')">点击我</button>
onmouseover 鼠标移入元素时触发 <div onmouseover="showTooltip()">悬停显示提示</div>
onkeydown 键盘按下时触发 <input type="text" onkeydown="validateInput(event)">
onload 页面或图像加载完成时触发 <body onload="initPage()">
onsubmit 表单提交时触发 <form onsubmit="validateForm(event)">

  1. onclick 属性:

    • 当用户点击元素时触发。
    • 通常用于绑定元素的点击事件处理函数。

  2. onmouseover 和 onmouseout 属性:

    • 当鼠标移入/移出元素时触发。
    • 常用于实现悬停提示等交互效果。

  3. onkeydown 和 onkeyup 属性:

    • 当键盘按下/释放时触发。
    • 可用于实现各种键盘交互功能。

  4. onload 属性:

    • 当页面或图像加载完成时触发。
    • 通常用于初始化页面或执行加载后的操作。

  5. onsubmit 属性:

    • 当表单提交时触发。
    • 可用于对表单数据进行验证和处理。

其他常用属性

  1. class 属性:

    • 用于为元素指定一个或多个类名,以便于应用 CSS 样式和 JavaScript 交互。
    • 可以为一个元素指定多个类名,用空格分隔,如 <div class="container main-content">...</div>。
    • 在 CSS 中,可以使用类选择器 .class-name 来应用样式。
    • 在 JavaScript 中,可以使用 document.getElementsByClassName() 或 element.classList 来查询和操作元素的类名。

  2. id 属性:

    • 为元素提供唯一标识符,可用于精确定位元素。
    • 在 CSS 中,可以使用 ID 选择器 #id-name 来应用样式。
    • 在 JavaScript 中,可以使用 document.getElementById() 来查找元素。
    • 每个 HTML 文档中 id 属性的值应该是唯一的。

  3. style 属性:

    • 用于为元素设置内联 CSS 样式,格式为 属性: 值;。
    • 示例: <p style="color: red; font-size: 16px;">...</p>
    • 内联样式具有最高优先级,但通常不建议过度使用,应该将样式定义在外部 CSS 文件中。

  4. data-* 属性:

    • 用于存储元素的自定义数据属性,以 data- 为前缀。
    • 示例: <div data-item-id="123" data-item-price="9.99">...</div>
    • 在 JavaScript 中,可以使用 element.dataset 属性来读取和操作这些自定义数据。

  5. title 属性:

    • 提供元素的附加说明信息,通常以工具提示的形式显示。
    • 示例: <a href="https://example.com" title="这是一个链接">示例链接</a>
    • 可以使用 CSS 的 ::before 或 ::after 伪元素来自定义工具提示的样式和行为。
Language, Web
Web HTML
This post is licensed under CC BY 4.0 by the author.