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

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

文末有我帮助500多人拿到前端offer的文章！！！

一、结构性标签

1.<!DOCTYPE html>

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

<!DOCTYPE html>

2.<html>

HTML文档的根元素，包含了整个网页的内容。

<html lang="en">
  <!-- 网页内容 -->
</html>

3.<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>

4.<body>

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

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

二、文本标签

1.<h1>至<h6>

标题标签，用于定义从大到小的六级标题。

<h1>主标题</h1>
<h2>副标题</h2>

2.<p>

段落标签，用于定义文本段落。

<p>这是一个段落。</p>

3.<a>

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

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

4.<strong>和<em>

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

<strong>重要</strong>
<em>强调</em>

5.<blockquote>

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

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

6.<code>和<pre>

<code>标签用于展示代码，<pre>标签用于保持代码格式。

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

三、列表标签

1.<ul>和<ol>

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

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

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

2.<dl>,<dt>,<dd>

定义列表，用于定义词汇与描述。

<dl>
  <dt>术语</dt>
  <dd>定义</dd>
</dl>

四、表格标签

1.<table>

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

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

2.<tr>,<th>,<td>

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

<tr>
  <th>表头</th>
  <td>数据</td>
</tr>

五、表单标签

1.`<form>`

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

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

2.<input>,<textarea>,<button>

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

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

3.<select>,<option>

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

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

六、媒体标签

1.<img>

图像标签，用于在网页中嵌入图片。

<img src="image.jpg" alt="描述文本">

2.<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>

七、语义化标签

1.<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 新标签

1.<details>和<summary>

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

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

2.<figure>和<figcaption>

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

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

3.<progress>和<meter>

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

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

结论

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

偏爱前端的晓羽：称作2024很强的前端面试场景题，成功帮助532人拿到offer

给你们推荐一篇我帮助500+名同学完成改造的文章，希望大家看完以后都可以领取到心仪的offer哦