常用的html标签如何分类汇总

常用的HTML标签可以根据其用途和功能进行分类，包括结构标签、文本格式化标签、链接和导航标签、列表标签、图像和多媒体标签、表格标签、表单标签、以及脚本和样式标签。其中，结构标签是最为基础和重要的，它们用于定义网页的整体布局和框架。下面将详细介绍结构标签的应用和特点。

结构标签包括 <html>、<head>、<body>、<header>、<footer>、<nav>、<section>、<article>、<aside>、<div> 等。它们主要用于构建网页的基本框架和结构，使网页内容更有条理和层次感。例如，<header> 标签通常用于定义网页的头部区域，包含网站的标志、导航菜单等信息；<section> 标签用于定义网页中的一个独立部分，方便内容的组织和管理；而 <div> 标签则是一个通用的容器，用于包裹其他标签，便于CSS样式的应用和JavaScript的操作。

一、结构标签

结构标签是HTML文档的骨架，决定了网页的整体布局和结构。它们包括：

1、`<html>`

<html> 标签是所有HTML文档的根元素，所有其他标签都包含在这个标签内。它标识了文档的开始和结束。

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

2、`<head>`

<head> 标签包含了网页的元数据（metadata），例如文档的标题、字符集、样式表和脚本的链接等。

<head>
    <meta charset="UTF-8">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
</head>

3、`<body>`

<body> 标签包含了网页的主体内容，是用户在浏览器中看到的部分。所有可见的内容都应该放在 <body> 标签内。

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph.</p>
</body>

4、`<header>`

<header> 标签定义了文档或文档的一部分的头部区域，通常包含导航链接、网站标志和标题信息。

<header>
    <h1>Website Logo</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

5、`<footer>`

<footer> 标签定义了文档或文档的一部分的底部区域，通常包含版权信息、联系信息和社交媒体链接。

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

6、`<nav>`

<nav> 标签用于定义导航链接的集合，是一个专门用于导航的容器。

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

7、`<section>`

<section> 标签用于定义文档中的一个独立部分，通常有自己的标题。

<section>
    <h2>About Us</h2>
    <p>We are a company that values excellence and innovation.</p>
</section>

8、`<article>`

<article> 标签用于定义文档中的一篇独立的内容，通常有自己的标题和内容。

<article>
    <h2>Article Title</h2>
    <p>This is the main content of the article.</p>
</article>

9、`<aside>`

<aside> 标签定义了与主内容相关的辅助内容，通常用于侧边栏。

<aside>
    <h2>Related Articles</h2>
    <ul>
        <li><a href="#article1">Article 1</a></li>
        <li><a href="#article2">Article 2</a></li>
        <li><a href="#article3">Article 3</a></li>
    </ul>
</aside>

10、`<div>`

<div> 标签是一个通用的容器，用于包裹其他标签，便于CSS样式的应用和JavaScript的操作。

<div class="container">
    <h2>Section Title</h2>
    <p>This is a paragraph within a div container.</p>
</div>

二、文本格式化标签

文本格式化标签用于对网页中的文本进行格式化，使其更加美观和易于阅读。常见的文本格式化标签包括：

1、`<h1>` – `<h6>`

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

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

2、`<p>`

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

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

3、`<b>`

<b> 标签用于加粗文本，但不表示强调。

<b>This text is bold.</b>

4、`<i>`

<i> 标签用于使文本斜体，但不表示强调。

<i>This text is italic.</i>

5、`<strong>`

<strong> 标签用于加粗文本，并表示强调。

<strong>This text is strong.</strong>

6、`<em>`

<em> 标签用于使文本斜体，并表示强调。

<em>This text is emphasized.</em>

7、`<br>`

<br> 标签用于插入换行符。

<p>This is a paragraph.<br>This is a new line.</p>

8、`<hr>`

<hr> 标签用于插入水平线，通常用于分隔内容。

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

9、`<blockquote>`

<blockquote> 标签用于定义块引用。

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

10、`<code>`

<code> 标签用于定义代码片段。

<code>console.log('Hello, world!');</code>

三、链接和导航标签

链接和导航标签用于创建可点击的链接，帮助用户在网页之间导航。常见的链接和导航标签包括：

1、`<a>`

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

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

2、`<nav>`

<nav> 标签用于定义导航链接的集合。

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

四、列表标签

列表标签用于创建有序或无序的列表。常见的列表标签包括：

1、`<ul>`

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

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

2、`<ol>`

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

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

3、`<li>`

<li> 标签用于定义列表项。

<ul>
    <li>List item</li>
</ul>

五、图像和多媒体标签

图像和多媒体标签用于在网页中插入图片、视频和音频。常见的图像和多媒体标签包括：

1、`<img>`

<img> 标签用于插入图片，src 属性指定图片的路径，alt 属性提供图片的替代文本。

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

2、`<video>`

<video> 标签用于插入视频，可以包含多个 <source> 标签以支持不同格式。

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

3、`<audio>`

<audio> 标签用于插入音频，可以包含多个 <source> 标签以支持不同格式。

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

六、表格标签

表格标签用于在网页中创建表格。常见的表格标签包括：

1、`<table>`

<table> 标签用于定义表格。

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

2、`<tr>`

<tr> 标签用于定义表格行。

<tr>
    <td>Data 1</td>
    <td>Data 2</td>
</tr>

3、`<th>`

<th> 标签用于定义表格头部单元格。

<tr>
    <th>Header 1</th>
    <th>Header 2</th>
</tr>

4、`<td>`

<td> 标签用于定义表格数据单元格。

<tr>
    <td>Data 1</td>
    <td>Data 2</td>
</tr>

七、表单标签

表单标签用于创建交互式表单，允许用户输入数据并提交给服务器。常见的表单标签包括：

1、`<form>`

<form> 标签用于定义表单。

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

2、`<input>`

<input> 标签用于定义不同类型的输入字段。

<input type="text" id="name" name="name">
<input type="password" id="password" name="password">
<input type="submit" value="Submit">

3、`<label>`

<label> 标签用于定义表单控件的标签。

<label for="name">Name:</label>
<input type="text" id="name" name="name">

4、`<textarea>`

<textarea> 标签用于定义多行文本输入。

<textarea id="message" name="message"></textarea>

5、`<button>`

<button> 标签用于定义按钮。

<button type="submit">Submit</button>

八、脚本和样式标签

脚本和样式标签用于在网页中插入脚本和样式。常见的脚本和样式标签包括：

1、`<script>`

<script> 标签用于插入客户端脚本，例如JavaScript。

<script>
    console.log('Hello, world!');
</script>

2、`<style>`

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

<style>
    body {
        background-color: lightblue;
    }
</style>

3、`<link>`

<link> 标签用于链接外部样式表。

<link rel="stylesheet" href="styles.css">

通过以上的分类汇总，我们可以更好地理解和使用HTML标签，创建出结构清晰、内容丰富和功能强大的网页。在实际项目中，使用如研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助团队更高效地管理和协作，提升开发效率和项目质量。

常用的html标签如何分类汇总

一、结构标签

1、<html>

2、<head>

3、<body>

4、<header>

5、<footer>

6、<nav>

7、<section>

8、<article>

9、<aside>

10、<div>

二、文本格式化标签

1、<h1> – <h6>

2、<p>

3、<b>

4、<i>

5、<strong>

6、<em>

7、<br>

8、<hr>

9、<blockquote>

10、<code>

三、链接和导航标签

1、<a>

2、<nav>

四、列表标签

1、<ul>

2、<ol>

3、<li>

五、图像和多媒体标签

1、<img>

2、<video>

3、<audio>