HTML 5 标签

HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。HTML 5 是目前使用最广泛的版本。它引入了一些新特性和标签，使开发人员更容易创建现代化的网页，并为不同设备提供更好的支持。

本文将介绍 HTML 5 中最常用、最重要的标签。

头部标签

<meta> 标签

<meta> 标签用于指定 HTML 文档的元数据，包括作者、关键词、描述和字符集等。在搜索引擎优化中，使用正确的 <meta> 标记是非常重要的。

<meta charset="UTF-8">
<meta name="author" content="Your Name">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="A website about HTML, CSS and JavaScript">

<title> 标签

<title> 标签用于指定网页的标题。搜索引擎使用标题来确定网页的主题。

<title>Example Page</title>

<link> 标签

<link> 标签用于指定文档中引用的外部资源，比如样式表、图标或其他文档。

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="alternate" type="application/rss+xml" href="rss.xml">

文本标签

<h1> - <h6> 标签

<h1> 到 <h6> 标签用于指定 HTML 文档的标题。<h1> 表示最高级标题，<h6> 表示最低级标题。搜索引擎通常会将标题作为网页的重要内容。

<h1>My Title</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

<p> 标签

<p> 标签用于指定段落。它是编写网页常用的标签之一。

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

<a> 标签

<a> 标签用于指定超链接。它可以链接到另一个网站、另一份文档或当前文档内的某个部分。

<a href="https://www.example.com">Link to Example</a>
<a href="#top">Back to Top</a>

多媒体标签

<img> 标签

<img> 标签用于指定图像。它可以将图片嵌入网页中。

<img src="image.jpg" alt="A picture of something">

<video> 标签

<video> 标签用于指定视频。它允许开发人员将视频嵌入网页中，并进行播放控制。

<video src="video.mp4" controls>
  Your browser does not support the <code>video</code> element.
</video>

<audio> 标签

<audio> 标签用于指定音频。它允许开发人员将音频嵌入网页中，并进行播放控制。

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

结构标签

<header> 标签

<header> 标签用于定义文档的头部，通常包含网页的标题和一些导航链接等。

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<nav> 标签

<nav> 标签用于定义文档的导航链接。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section> 标签

<section> 标签用于定义 HTML 文档的某个区域，比如一个章节或部分。

<section>
  <h2>Section Title</h2>
  <p>Section content goes here.</p>
</section>

<article> 标签

<article> 标签用于定义独立的文章或内容，通常包含一个标题、一个作者和内容。

<article>
  <h2>Article Title</h2>
  <p>Article content goes here.</p>
  <address>By Author Name</address>
</article>

表格标签

<table> 标签

<table> 标签用于创建 HTML 表格。

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

<thead> 标签

<thead> 标签用于定义表格的表头。

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

<tbody> 标签

<tbody> 标签用于定义表格的主体部分。

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

表单标签

<form> 标签

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

<form action="submit-form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

<input> 标签

<input> 标签用于创建表单中的输入字段，如文本框、单选框、复选框和按钮等。

<input type="text" name="text-input">
<input type="radio" name="radio-group" value="radio-1">
<input type="checkbox" name="checkbox-group" value="checkbox-1">
<input type="submit" value="Submit">

<label> 标签

<label> 标签用于给表单元素定义标签。

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

以上是 HTML 5 中最常用、最重要的标签。在实际开发中，我们会结合这些标签来创建符合需求的网站。