常用的html标签如何分类

常用的HTML标签可以分为：结构标签、文本格式化标签、列表标签、链接和图像标签、表格标签、表单标签、嵌入内容标签、脚本和样式标签。HTML标签是网页开发的基础，了解和掌握这些标签对于任何前端开发者都是至关重要的。下面，我们将详细介绍每一类标签，并探讨如何在实际开发中使用它们。

一、结构标签

HTML文档的结构标签用于定义网页的整体布局和各个部分的层次关系。常用的结构标签有<html>、<head>、<body>、<header>、<footer>、<nav>、<section>、<article>、<aside>和<div>等。

1. `<html>`

<html>标签是所有HTML文档的根元素，表示整个HTML文档。

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

2. `<head>`

<head>标签包含文档的元数据，如文档的标题、字符集声明、样式表链接、脚本引用等。

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="John Doe">
</head>

3. `<body>`

<body>标签包含网页的主要内容，如文本、图像、链接、表格等。

<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>

4. 其他结构标签

<header>：定义文档或一个部分的头部。
<footer>：定义文档或一个部分的尾部。
<nav>：定义导航链接的部分。
<section>：定义文档中的一个区域。
<article>：定义独立的内容区域。
<aside>：定义与主内容相关的侧边内容。
<div>：用于分割文档的区域或块，是一个通用的容器标签。

<header>
  <h1>Welcome to My Website</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<section>
  <h2>About Me</h2>
  <p>This is a section about me.</p>
</section>
<article>
  <h2>Article Title</h2>
  <p>This is an article.</p>
</article>
<aside>
  <h2>Related Links</h2>
  <p>Here are some related links.</p>
</aside>
<footer>
  <p>Footer content here.</p>
</footer>

二、文本格式化标签

文本格式化标签用于定义文本的外观，包括字体、样式、大小等。常见的文本格式化标签有<p>、<h1>~`

、、、、、、、、、、_{、^{`等。

1. 标题标签 <h1> ~ <h6>

标题标签用于定义不同级别的标题，<h1>是最高级别的标题，<h6>是最低级别的标题。

<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>

2. 段落标签 <p>

<p>标签用于定义段落。

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

3. 其他文本格式化标签

<b>：定义加粗文本。
<i>：定义斜体文本。
<u>：定义下划线文本。
<strong>：定义加粗文本，表示更强的强调。
<em>：定义斜体文本，表示强调。
<small>：定义小号文本。
<mark>：定义标记或高亮文本。
<del>：定义删除线文本。
<ins>：定义插入文本。
<sub>：定义下标文本。
<sup>：定义上标文本。

<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>

三、列表标签
列表标签用于定义有序或无序的列表。常见的列表标签有<ul>、<ol>、<li>、<dl>、<dt>、<dd>等。

1. 无序列表 <ul> 和列表项 <li>

<ul>标签定义无序列表，<li>标签定义列表项。

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

2. 有序列表 <ol> 和列表项 <li>

<ol>标签定义有序列表，<li>标签定义列表项。

<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Have breakfast</li>
</ol>

3. 定义列表 <dl>、定义术语 <dt> 和术语定义 <dd>

<dl>标签定义定义列表，<dt>标签定义术语，<dd>标签定义术语的描述。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

四、链接和图像标签
链接和图像标签用于在网页中添加超链接和图像。常见的标签有<a>和<img>。

1. 链接标签 <a>

<a>标签用于定义超链接。

<a href="https://www.example.com">This is a link</a>

2. 图像标签 <img>

<img>标签用于定义图像。

<img src="image.jpg" alt="Description of image">

五、表格标签
表格标签用于定义表格结构。常见的表格标签有<table>、<tr>、<th>、<td>、<caption>、<thead>、<tbody>、<tfoot>等。

1. 表格结构

<table>标签定义表格，<tr>标签定义表格行，<th>标签定义表头单元格，<td>标签定义表格数据单元格。

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>30</td>
</tr>
</table>

2. 表格其他标签

<caption>：定义表格标题。
<thead>：定义表头。
<tbody>：定义表格主体。
<tfoot>：定义表格尾部。

<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
</table>

六、表单标签
表单标签用于定义用户输入的表单。常见的表单标签有<form>、<input>、<label>、<textarea>、<select>、<option>、<button>等。

1. 表单结构

<form>标签定义表单，<input>标签定义输入字段。

<form action="/submit" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

2. 其他表单元素

<textarea>：定义多行文本输入。
<select>：定义下拉列表。
<option>：定义下拉列表选项。
<button>：定义按钮。

<form action="/submit" method="post">
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br>
<label for="cars">Choose a car:</label><br>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br><br>
<button type="submit">Submit</button>
</form>

七、嵌入内容标签
嵌入内容标签用于在网页中嵌入外部内容，如视频、音频、对象等。常见的嵌入内容标签有<iframe>、<embed>、<object>、<video>、<audio>等。

1. <iframe>

<iframe>标签用于嵌入另一个HTML文档。

<iframe src="https://www.example.com" width="300" height="200"></iframe>

2. <video>

<video>标签用于嵌入视频内容。

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

3. <audio>

<audio>标签用于嵌入音频内容。

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

八、脚本和样式标签
脚本和样式标签用于在网页中添加脚本和样式。常见的脚本和样式标签有<script>和<style>。

1. <script>

<script>标签用于定义客户端脚本，如JavaScript。

<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('demo').innerHTML = 'Hello, World!';
});
</script>
<p id="demo"></p>

2. <style>

<style>标签用于定义内部CSS样式。

<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>

通过掌握这些常用的HTML标签，前端开发者可以更加有效地构建和管理网页内容。无论是简单的静态页面还是复杂的动态应用，正确使用HTML标签都是实现网页功能和美观的重要基础。

相关问答FAQs：
1. 有哪些常用的HTML标签？

什么是HTML标签？
HTML标签有什么作用？
HTML标签如何使用？

2. 如何分类HTML标签？

HTML标签可以按照功能进行分类吗？
HTML标签可以按照元素类型进行分类吗？
如何选择合适的HTML标签？

3. HTML标签的常见分类有哪些？

哪些HTML标签属于文本标签？
哪些HTML标签属于链接标签？
哪些HTML标签属于图像标签？

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3017085}}

常用的html标签如何分类

一、结构标签

1. `<html>`

2. `<head>`

3. `<body>`

4. 其他结构标签

二、文本格式化标签

1. 标题标签 `<h1>` ~ `<h6>`

2. 段落标签 `<p>`

3. 其他文本格式化标签

三、列表标签

1. 无序列表 `<ul>` 和列表项 `<li>`

2. 有序列表 `<ol>` 和列表项 `<li>`

3. 定义列表 `<dl>`、定义术语 `<dt>` 和术语定义 `<dd>`

四、链接和图像标签

1. 链接标签 `<a>`

2. 图像标签 `<img>`

五、表格标签

1. 表格结构

2. 表格其他标签

六、表单标签

1. 表单结构

2. 其他表单元素

七、嵌入内容标签

1. `<iframe>`

2. `<video>`

3. `<audio>`

八、脚本和样式标签

1. `<script>`

2. `<style>`

相关问答FAQs：

常用的html标签如何分类

一、结构标签

1. <html>

2. <head>

3. <body>

4. 其他结构标签

二、文本格式化标签

1. 标题标签 <h1> ~ <h6>

2. 段落标签 <p>

3. 其他文本格式化标签

三、列表标签

1. 无序列表 <ul> 和 列表项 <li>

2. 有序列表 <ol> 和 列表项 <li>

3. 定义列表 <dl>、定义术语 <dt> 和 术语定义 <dd>

四、链接和图像标签

1. 链接标签 <a>

2. 图像标签 <img>

五、表格标签

1. 表格结构

2. 表格其他标签

六、表单标签

1. 表单结构

2. 其他表单元素

七、嵌入内容标签

1. <iframe>

2. <video>

3. <audio>

八、脚本和样式标签

1. <script>

2. <style>

相关问答FAQs：

1. `<html>`

2. `<head>`

3. `<body>`

1. 标题标签 `<h1>` ~ `<h6>`

2. 段落标签 `<p>`

1. 无序列表 `<ul>` 和列表项 `<li>`

2. 有序列表 `<ol>` 和列表项 `<li>`

3. 定义列表 `<dl>`、定义术语 `<dt>` 和术语定义 `<dd>`

1. 链接标签 `<a>`

2. 图像标签 `<img>`

1. `<iframe>`

2. `<video>`

3. `<audio>`

1. `<script>`

2. `<style>`