HTML 常用标签

在 HTML 中，有许多常用标签用于构建网页内容，以下是一些主要的常用标签介绍：

一、标题标签

标题标签用于定义不同级别的标题，从<h1>到<h6>，重要性依次递减。例如：

html"><h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

<h1>标签通常用于表示页面最重要的标题，而<h6>则用于相对次要的标题层次。每个标题标签所包含的文字都会独占一行，并且随着数字增大，标题字体逐渐变小。

二、段落标签

<p>标签用于定义段落文本。例如：

html"><p>这是一段文本内容，它在网页上以段落的形式呈现。段落标签可以将文本进行合理的分段，使页面布局更加清晰易读。</p>

三、换行标签

<br />是换行标签，它用于在文本中强制换行。比如：

html">第一行<br />第二行

这样就会在“第一行”和“第二行”之间产生换行效果，而不需要像段落标签那样有较大的间距。

四、文本格式化标签

字体加粗：可以使用<strong>或<b>标签。例如：

html"><strong>这段文字加粗显示</strong>
<b>这也是加粗的文字</b>

字体倾斜：<em>或<i>标签可实现字体倾斜。例如：

html"><em>这段文字倾斜显示</em>
<i>这同样是倾斜的文字</i>

字体加删除线：<del>或<s>标签用于添加删除线。例如：

html"><del>这段被删除线划过的文字</del>
<s>这行文字也有删除线</s>

字体加下划线：<ins>或<u>标签可给文字添加下划线。例如：

html"><ins>带有下划线的文字</ins>
<u>这串文字也有下划线</u>

五、`<div>`和`<span>`标签

<div>标签常用于对页面进行布局划分，它是一个块级元素，意味着<div>内的文本内容独占一行。例如：

html"><div><p>这是 div 中的一段文字</p><p>这是 div 中的另一段文字</p>
</div>

<span>标签是内联元素，一行可以有多个<span>。例如：

html"><span>第一个 span 元素</span><span>第二个 span 元素</span>

六、图像标签

<img />是用于插入图像的单标签。它有多个重要属性：

src：指定图像的源文件路径，例如<img src="image.jpg" />，这里的“image.jpg”就是图像的文件名或网络路径。
alt：当图像无法显示时，用于替代图像显示的文本描述，如<img src="image.jpg" alt="这是一张美丽的图片" />。
title：当鼠标悬停在图像上时显示的提示文本，例如<img src="image.jpg" title="图片详情" />。
width和height：用于设置图像的宽度和高度，如<img src="image.jpg" width="300" height="200" />。

七、超链接标签

超链接标签<a>用于创建链接到其他页面、文件或同一页面内特定位置的链接。其基本格式为：

html"><a href="链接目标" target="链接打开方式">文本信息</a>

其中，href属性是必须的，用于指定链接的目标地址。例如：

html"><a href="https://www.example.com">点击跳转到示例网站</a>

target属性表示网页的跳转方式，常见的值有“_self”（在当前窗口打开，默认值）和“_blank”（在新窗口打开），如：

html"><a href="https://www.example.com" target="_blank">在新窗口打开示例网站链接</a>

超链接可以分为多种类型：

外部链接：链接到其他网站的链接，如上述示例。
内部链接：链接到同一网站内其他页面的链接，例如<a href="about.html">关于我们</a>。
空链接：当href属性值为“#”时，创建空链接，可用于添加 JavaScript 行为或作为占位符，如<a href="#">点击此处无实际跳转</a>。
下载链接：通过设置href为文件的路径，当用户点击时可下载文件，如<a href="document.pdf">下载文档</a>。
网页元素链接：可以链接到页面内的某个特定元素，需要先给目标元素设置id属性，然后在链接的href中使用“#元素 id”，例如：

html"><div id="section1">这是目标区域</div>
<a href="#section1">跳转到目标区域</a>

锚点链接：类似于网页元素链接，可用于在长页面中快速导航到特定位置。

八、表格标签

表格标签用于创建表格结构，大致格式如下：

html"><table><tr><td>文本信息 1</td><td>文本信息 2</td></tr>
</table>

其中，<table>标签定义整个表格，<tr>标签表示表格的行，<td>标签表示表格的单元格。例如：

html"><table><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>25</td></tr>
</table>

还有一些特殊的表格标签：

表头单元格标签：使用<th>标签代替<td>标签来定义表头单元格，会使文字加粗并居中显示，例如：

html"><table><tr><th>列名 1</th><th>列名 2</th></tr><tr><td>数据 1</td><td>数据 2</td></tr>
</table>

表格结构标签：可以使用<thead>标签定义表格头部，<tbody>标签定义表格主体，使表格结构更清晰，例如：

html"><table><thead><tr><th>表头 1</th><th>表头 2</th></tr></thead><tbody><tr><td>数据 1</td><td>数据 2</td></tr></tbody>
</table>

合并单元格：跨行合并使用rowspan = "合并单元格的个数"属性，跨列合并使用colspan = "合并单元格的个数"属性。例如：

html"><table><tr><td rowspan="2">合并两行的单元格</td><td>普通单元格</td></tr><tr><td>普通单元格</td></tr>
</table>

九、列表标签

无序列表：<ul>标签表示 HTML 页面中的无序列表，其中的<li>标签来存放列表项。例如：

html"><ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul>

无序列表默认的列表项标记是实心圆点，也可以通过 CSS 样式进行修改。
2. 有序列表：<ol>标签表示 HTML 页面中的有序列表，同样使用<li>标签存放列表项。例如：

html"><ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>

有序列表默认的列表项标记是数字序号，也可通过 CSS 定制。
3. 自定义列表：<dl>标签表示定义列表，<dt>标签定义名字，<dd>标签定义名字解释。例如：

html"><dl><dt>HTML</dt><dd>超文本标记语言，用于构建网页结构。</dd><dt>CSS</dt><dd>层叠样式表，用于美化网页样式。</dd>
</dl>

十、表单标签

表单标签用于收集用户信息并提交到服务器。它由表单域、表单控件和提示信息三部分组成。

表单域：使用<form>标签来定义表单域，包含以下重要属性：

action：指定表单数据提交的目标 URL，例如<form action="submit.php">，表示表单数据将提交到“submit.php”页面进行处理。
method：指定提交数据的方式，常见的值有“get”（将数据附加在 URL 后发送，适合少量非敏感数据）和“post”（将数据放在请求体中发送，适合大量或敏感数据），如<form method="post">。
name：给表单命名，方便在 JavaScript 等脚本中引用，如<form name="myForm">。

表单控件：

input 输入表单元素：有多种类型，如文本框（type="text"）、密码框（type="password"）、单选按钮（type="radio"）、复选框（type="checkbox"）、提交按钮（type="submit"）、重置按钮（type="reset"）等。例如：

html"><input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="checkbox" name="hobby" value="reading">阅读
<input type="submit" value="提交">
<input type="reset" value="重置">

select 下拉表单元素：用于创建下拉菜单，例如：

html"><select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option>
</select>

textarea 文本域元素：用于输入多行文本，例如：

html"><textarea name="message" rows="5" cols="30">请在此输入留言</textarea>