文章目录
为简洁显示，以下示例均为
<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 属性设置为 "_blank", 链接将在新窗口打开。</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>
