一文掌握：HTML标签使用全攻略，打造完美网页布局！

Caleb-niu

于 2024-08-26 17:24:20 发布

阅读量314

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_48576413/article/details/141569339

版权

HTML（超文本标记语言）是构建网页的基石。通过不同的标签，HTML定义了网页的结构和内容。了解各种HTML标签的用法是前端开发的基础。本文将回顾HTML中常见标签的用法，并介绍它们在实际开发中的应用。

一、结构性标签

<!DOCTYPE html>

这个标签声明文档类型，并指定HTML5标准。它应该是HTML文档的第一行。
```
<!DOCTYPE html>
```
<html>

HTML文档的根元素，包含了整个网页的内容。
```
<html lang="en">
  
</html>
```

<head>

包含文档的元数据，如标题、字符集声明、链接到CSS文件等。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

包含网页的主要内容部分，如文本、图片、链接等。

<body>
  <h1>欢迎来到我的网站</h1>
  <p>这里是内容。</p>
</body>

二、文本标签

<h1> 至 <h6>

标题标签，用于定义从大到小的六级标题。
```
<h1>主标题</h1>
<h2>副标题</h2>
```
<p>

段落标签，用于定义文本段落。
```
<p>这是一个段落。</p>
```

<a>

链接标签，用于定义超链接。

<a href="https://www.example.com">访问示例网站</a>

<strong> 和 <em>

强调和加重文本的标签。<strong>用于强调重要性，<em>用于强调语气。
```
<strong>重要</strong>
<em>强调</em>
```

<blockquote>

块级引用标签，用于引用外部来源的内容。

<blockquote>
  <p>这是一个引用的内容。</p>
</blockquote>

<code> 和 <pre>

<code>标签用于展示代码，<pre>标签用于保持代码格式。
```
<pre>
  <code>
    console.log('Hello, world!');
  </code>
</pre>
```

三、列表标签

<ul> 和 <ol>

无序列表（<ul>）和有序列表（<ol>）用于展示列表项。

<ul>
  <li>无序列表项 1</li>
  <li>无序列表项 2</li>
</ul>

<ol>
  <li>有序列表项 1</li>
  <li>有序列表项 2</li>
</ol>

<dl>, <dt>, <dd>

定义列表，用于定义词汇与描述。
```
<dl>
  <dt>术语</dt>
  <dd>定义</dd>
</dl>
```

四、表格标签

<table>

表格标签，用于创建表格。

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

<tr>, <th>, <td>

表格行（<tr>）、表头单元格（<th>）、普通单元格（<td>）用于定义表格的结构。
```
<tr>
  <th>表头</th>
  <td>数据</td>
</tr>
```

五、表单标签

<form>

表单标签，用于创建用户输入的表单。

<form action="/submit" method="post">
  <input type="text" name="name" placeholder="你的名字">
  <input type="submit" value="提交">
</form>

<input>, <textarea>, <button>

用户输入控件，包括文本框（<input>）、文本区域（<textarea>）和按钮（<button>）。

<input type="text" name="username" placeholder="用户名">
<textarea name="message" placeholder="留言"></textarea>
<button type="button">点击我</button>

<select>, <option>

下拉菜单和选项，用于创建选择列表。

<select name="options">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
</select>

六、媒体标签

<img>

图像标签，用于在网页中嵌入图片。
```
<img src="image.jpg" alt="描述文本">
```

<audio> 和 <video>

媒体标签，用于嵌入音频和视频文件。

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

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

七、语义化标签

<header>, <footer>, <main>, <section>, <article>, <aside>, <nav>

这些标签用于定义页面的不同区域，提高网页的语义性和可读性。

<header>
  <h1>网站标题</h1>
  <nav>导航菜单</nav>
</header>

<main>
  <section>
    <article>
      <h2>文章标题</h2>
      <p>文章内容</p>
    </article>
  </section>
</main>

<footer>
  <p>页脚内容</p>
</footer>

八、HTML5 新标签

<details> 和 <summary>

用于创建可展开的内容区域。

<details>
  <summary>点击展开</summary>
  <p>详细内容</p>
</details>

<figure> 和 <figcaption>

用于为图像或图表提供说明文本。

<figure>
  <img src="diagram.png" alt="图表">
  <figcaption>图表说明</figcaption>
</figure>

<progress> 和 <meter>

用于显示进度条和测量值。

<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>

结论

了解和掌握HTML标签的使用是每个前端开发者的基本技能。从基础的结构性标签到高级的HTML5新标签，这些标签帮助我们构建和组织网页内容。熟练运用这些标签，不仅能提高开发效率，还能提升网页的语义性和可访问性。在实际开发中，根据需求选择合适的标签和属性，将使你的网页更具结构性和表现力。

Caleb-niu

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一文掌握：HTML标签使用全攻略，打造完美网页布局！

HTML（超文本标记语言）是构建网页的基石。通过不同的标签，HTML定义了网页的结构和内容。了解各种HTML标签的用法是前端开发的基础。本文将回顾HTML中常见标签的用法，并介绍它们在实际开发中的应用。
复制链接

扫一扫