正文

HTML5标签速查手册：全面解析常用标签及其功能与应用实例

/0 浏览量
0530

HTML5是当前网页开发中最常用的标记语言之一，它带来了许多新的标签和功能，使得网页设计和开发更加高效和强大。本文将全面解析HTML5中一些常用标签及其功能，并通过实例展示它们在实际应用中的使用方法。

1. 基础结构标签

1.1 <html> 标签

功能：定义整个HTML文档。

示例：

<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

1.2 <head> 标签

功能：包含文档的元数据，如标题、字符集、样式表等。

示例：

<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">
</head>

1.3 <body> 标签

功能：包含可见的页面内容。

示例：

<body>
  <h1>页面标题</h1>
  <p>这里是页面内容。</p>
</body>

2. 文档结构标签

2.1 <header> 标签

功能：表示页面或区块的页眉。

示例：

<header>
  <h1>网站标题</h1>
  <nav>
    <!-- 导航链接 -->
  </nav>
</header>

2.2 <nav> 标签

功能：表示页面中的导航链接。

示例：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

2.3 <footer> 标签

功能：表示页面或区块的页脚。

示例：

<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

2.4 <article> 标签

功能：表示页面中的一块与上下文独立的内容。

示例：

<article>
  <h2>文章标题</h2>
  <p>这里是文章内容。</p>
</article>

2.5 <section> 标签

功能：表示页面中的一个内容区块，通常包含一个标题。

示例：

<section>
  <h2>章节标题</h2>
  <p>这里是章节内容。</p>
</section>

2.6 <aside> 标签

功能：表示页面内容的一部分，通常与主内容相关，但可以独立出来。

示例：

<aside>
  <h2>相关链接</h2>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
  </ul>
</aside>

3. 文本内容标签

3.1 <h1> - <h6> 标签

功能：表示标题，其中 <h1> 为最高级别，<h6> 为最低级别。

示例：

<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- ... -->
<h6>六级标题</h6>

3.2 <p> 标签

功能：表示段落。

示例：

<p>这里是段落内容。</p>

3.3 <em> 标签

功能：表示强调的文本。

示例：

<em>这是强调的文本。</em>

3.4 <strong> 标签

功能：表示重要的文本。

示例：

<strong>这是重要的文本。</strong>

3.5 <del> 标签

功能：表示文本被删除。

示例：

<del>这是被删除的文本。</del>

3.6 <ins> 标签

功能：表示文本被插入。

示例：

<ins>这是被插入的文本。</ins>

4. 媒体和嵌入标签

4.1 <img> 标签

功能：表示图像。

示例：

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

4.2 <audio> 标签

功能：表示音频。

示例：

<audio src="audio.mp3" controls></audio>

4.3 <video> 标签

功能：表示视频。

示例：

<video src="video.mp4" controls></video>

4.4 <iframe> 标签

功能：表示嵌入另一个页面。

示例：

<iframe src="http://example.com" width="500" height="300"></iframe>

5. 表格和表单标签

5.1 <table> 标签

功能：表示表格。

示例：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

5.2 <tr> 标签

功能：表示表格中的行。

示例：

<tr>
  <td>内容1</td>
  <td>内容2</td>
</tr>

5.3 <th> 标签

功能：表示表格中的表头单元格。

示例：

<th>标题1</th>

5.4 <td> 标签

功能：表示表格中的标准单元格。

示例：

<td>内容1</td>

5.5 <form> 标签

功能：表示表单。

示例：

<form action="submit.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

5.6 <input> 标签

功能：表示输入字段。

示例：

<input type="text" id="username" name="username">

5.7 <button> 标签

功能：表示按钮。

示例：

<button type="submit">提交</button>

6. 其他常用标签

6.1 <div> 标签

功能：表示一个通用的容器。

示例：

<div>这里是一个容器。</div>

6.2 <span> 标签

功能：表示一个行内元素。

示例：

<span>这是一个行内元素。</span>

6.3 <br> 标签

功能：表示换行。

示例：

<br>

6.4 <hr> 标签

功能：表示水平线。

示例：

<hr>

6.5 <address> 标签

功能：表示联系信息。

示例：

<address>
  <strong>姓名：</strong>张三<br>
  <strong>电话：</strong>1234567890<br>
  <strong>邮箱：</strong>zhangsan@example.com
</address>

6.6 <pre> 标签

功能：表示预格式化的文本。

示例：

<pre>
  这里是预格式化的文本。
</pre>

6.7 <code> 标签

功能：表示计算机代码。

示例：

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

6.8 <samp> 标签

功能：表示计算机代码样本。

示例：

<samp>echo "Hello, world!";</samp>

6.9 <kbd> 标签

功能：表示用户输入。

示例：

<kbd>Ctrl+C</kbd>

6.10 <var> 标签

功能：表示变量。

示例：

<var>age</var>

6.11 <time> 标签

功能：表示日期和时间。

示例：

<time datetime="2023-04-01">2023年4月1日</time>

总结

本文全面解析了HTML5中一些常用标签及其功能，并通过实例展示了它们在实际应用中的使用方法。希望本文能帮助您更好地掌握HTML5标签，从而提高您的网页开发能力。

-- 展开阅读全文 --