2025-09-04 HTML2——常用标签与属性

文章目录

1 文本标签
- 1.1 标题 (`<h1>` - `<h6>`)
- 1.2 段落 (`<p>`)
- 1.3 文本格式化
- 1.4 列表
- - 1.4.1 无序列表 (`<ul>`)
  - 1.4.2 有序列表 (`<ol>`)
- 1.5 表格 (`<table>`)
2 属性
- 2.1 属性值
- 2.2 全局属性
- 2.3 特定元素的属性
- 2.4 布尔属性
- 2.5 自定义属性
- 2.6 事件处理属性
3 带有属性的标签
- 3.1 链接 (`<a>`)
- 3.2 图像 (`<img>`)

为简洁显示，以下示例均为 <body>...</body> 中的内容。

1 文本标签

1.1 标题 (`<h1>` - `<h6>`)

标题标签用于定义不同级别的标题。

标签：<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
作用：
- <h1> 定义最高级别的标题，字体最大、最粗。
- <h6> 定义最低级别的标题，字体最小。
- 数字越小，标题级别越高，字体越大。
显示效果：浏览器会根据标签的级别，自动调整字体大小和加粗效果。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

1.2 段落 (`<p>`)

段落标签用于创建段落文本。

标签：<p>
作用：定义一个段落，将文本内容包裹在其中。
显示效果：段落文本的字体比标题小，且默认不加粗。

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

1.3 文本格式化

这些标签用于改变文本的样式，增强表达力。

加粗：
- <b>：用于加粗文本，无语义含义。
- <strong>：同样用于加粗文本，但具有重要性或强调的语义含义。在实际开发中，更推荐使用 <strong>。
斜体：
- <i>：用于斜体文本，无语义含义。
- <em>：同样用于斜体文本，但具有强调的语义含义。
其他格式：
- <u>：下划线。
- <s>：删除线。
- <sub>：上标。
- <sup>：下标。

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

1.4 列表

列表标签用于组织和展示结构化的信息。

1.4.1 无序列表 (`<ul>`)

标签：<ul>（根元素）和 <li>（列表项）
作用：创建一个没有特定顺序的列表，每个列表项前通常会显示一个圆点。

<h4>无序列表:</h4>
<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>

1.4.2 有序列表 (`<ol>`)

标签：<ol>（根元素）和 <li>（列表项）
作用：创建一个有特定顺序的列表，列表项前通常会显示数字。

<ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol><ol start="50"><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>

1.5 表格 (`<table>`)

表格标签用于创建表格，清晰地展示结构化数据。

标签：
- <table>：表格的根元素。
- <tr>：定义表格中的行（Table Row）。
- <th>：定义表头单元格（Table Header），通常文字会加粗居中。
- <td>：定义数据单元格（Table Data）。
作用：将数据以行和列的形式进行排列。
属性：
border：可以在 <table> 标签中添加 border 属性来给表格添加边框，例如 <table border="1">。

<p>每个表格从一个 table 标签开始。 每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始。
</p><h4>一列:</h4>
<table border="1"><tr><td>100</td></tr>
</table><h4>一行三列:</h4>
<table border="1"><tr><td>100</td><td>200</td><td>300</td></tr>
</table><h4>两行三列:</h4>
<table border="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr>
</table>

2 属性

属性是 HTML 元素提供的附加信息，通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。

属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。

2.1 属性值

属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

使用双引号：

<a href="https://www.runoob.com">Link</a>

使用单引号：

<a href='https://www.runoob.com'>Link</a>

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

或者：

<a href="https://www.runoob.com?q='search'">Link</a>

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

下面列出了适用于大多数 HTML 元素的属性：

属性名	适用元素	说明
`id`	所有元素	为元素指定唯一的标识符。
`class`	所有元素	为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
`style`	所有元素	直接在元素上应用 CSS 样式。
`title`	所有元素	为元素提供额外的提示信息，通常在鼠标悬停时显示。
`data-*`	所有元素	用于存储自定义数据，通常通过 JavaScript 访问。
`href`	`<a>`, `<link>`	指定链接的目标 URL。
`src`	`<img>`, `<script>`, `<iframe>`	指定外部资源（如图片、脚本、框架）的 URL。
`alt`	`<img>`	为图像提供替代文本，当图像无法显示时显示。
`type`	`<input>`, `<button>`	指定输入控件的类型（如 `text`, `password`, `checkbox` 等）。
`value`	`<input>`, `<button>`, `<option>`	指定元素的初始值。
`disabled`	表单元素	禁用元素，使其不可交互。
`checked`	`<input type="checkbox">`, `<input type="radio">`	指定复选框或单选按钮是否被选中。
`placeholder`	`<input>`, `<textarea>`	在输入框中显示提示文本。
`target`	`<a>`, `<form>`	指定链接或表单提交的目标窗口或框架（如 `_blank` 表示新标签页）。
`readonly`	表单元素	使输入框只读。
`required`	表单元素	指定输入字段为必填项。
`autoplay`	`<audio>`, `<video>`	自动播放媒体。
`onclick`	所有元素	当用户点击元素时触发 JavaScript 事件。
`onmouseover`	所有元素	当用户将鼠标悬停在元素上时触发 JavaScript 事件。
`onchange`	表单元素	当元素的值发生变化时触发 JavaScript 事件。

2.2 全局属性

全局属性是所有 HTML 元素都可以使用的属性。

id：为元素指定唯一的标识符。

<div id="header">This is the header</div>

class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。

<p class="text highlight">This is a highlighted text.</p>

style：用于直接在元素上应用 CSS 样式。

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title：为元素提供额外的提示信息，通常在鼠标悬停时显示。

<abbr title="HyperText Markup Language">HTML</abbr>

data-*：用于存储自定义数据，通常通过 JavaScript 访问。

<div data-user-id="12345">User Info</div>

2.3 特定元素的属性

某些属性仅适用于特定的 HTML 元素。

href（用于 <a> 和 <link> 元素）：指定链接的目标 URL。

<a href="https://www.example.com">Visit Example</a>

src（用于 <img>, <script>, <iframe> 等元素）：指定外部资源的 URL。

<img src="image.jpg" alt="An example image">

alt（用于 <img> 元素）：为图像提供替代文本，当图像无法显示时显示。

<img src="image.jpg" alt="An example image">

type（用于 <input> 和 <button> 元素）：指定输入控件的类型。

<input type="text" placeholder="Enter your name">

value（用于 <input>, <button>, <option> 等元素）：指定元素的初始值。

<input type="text" value="Default Value">

disabled（用于表单元素）：禁用元素，使其不可交互。

<input type="text" disabled>

checked（用于 <input type="checkbox"> 和 <input type="radio">）：指定复选框或单选按钮是否被选中。

<input type="checkbox" checked>

placeholder（用于 <input> 和 <textarea> 元素）：在输入框中显示提示文本。

<input type="text" placeholder="Enter your email">

target（用于 <a> 和 <form> 元素）：指定链接或表单提交的目标窗口或框架。

<a href="https://www.example.com" target="_blank">Open in new tab</a>

2.4 布尔属性

布尔属性是指不需要值的属性，它们的存在即表示 true，不存在则表示 false。

disabled：禁用元素。

<input type="text" disabled>

readonly：使输入框只读。

<input type="text" readonly>

required：指定输入字段为必填项。

<input type="text" required>

autoplay（用于 <audio> 和 <video> 元素）：自动播放媒体。

<video src="video.mp4" autoplay></video>

2.5 自定义属性

HTML5 引入了 data-* 属性，允许开发者自定义属性来存储额外的数据。

data-*：用于存储自定义数据，通常通过 JavaScript 访问。

<div data-user-id="12345" data-role="admin">User Info</div>

2.6 事件处理属性

HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。

onclick：当用户点击元素时触发。

<button onclick="alert('Button clicked!')">Click Me</button>

onmouseover：当用户将鼠标悬停在元素上时触发。

<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>

onchange：当元素的值发生变化时触发。

<input type="text" onchange="alert('Value changed!')">

3 带有属性的标签

3.1 链接 (`<a>`)

<a href="URL" target="_blank" rel="noopener" download="example.pdf" title="访问 Example 网站">链接文本</a>

<a> 标签用于创建超链接，它有两个非常重要的属性：

href：指定链接的目标 URL。当用户点击链接时，浏览器会跳转到 href 指定的页面。
target：规定链接的打开方式。
- _blank：在新标签页中打开链接。
- _self：在当前标签页中打开链接（这是默认值）。
- _parent：在父框架中打开链接。
- _top：在整个窗口中打开链接，取消任何框架。
rel：定义链接与目标页面的关系。
- nofollow：表示搜索引擎不应跟踪该链接，常用于外部链接。
- noopener：防止新的浏览上下文（页面）访问window.opener属性和open方法。
- noreferrer：不发送referer header（即不告诉目标网站你从哪里来的）。
- noopener noreferrer：同时使用noopener和noreferrer。
noopener 和 noreferrer防止在新标签中打开链接时的安全问题，尤其是使用 target="_blank" 时。
download：提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名，浏览器会提示下载并保存为指定文件名。
title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。

<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a><p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

3.2 图像 (`<img>`)

<img src="url" alt="some_text" width="304" height="228">

<img> 标签用于在网页中嵌入图片，它是一个单标签。

src：指定图像的路径。可以是本地文件路径，也可以是网络 URL。
alt：定义当图像无法加载时显示的替代文本。这个属性非常重要，有助于搜索引擎优化（SEO）和提升无障碍性。
width 和 height：设置图片的宽度和高度。

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

<p>一个图像:<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
</p><p>一个动图:<img src="hackanm.gif" alt="Computer man" width="48" height="48" />
</p><p>注意插入动图的语法和静态图的语法是一样的。</p>