HTML5 | 标签

HTML5是一种新的HTML版本，它引入了许多新的标记，以便更好地支持现代应用程序和多媒体内容。本文将介绍一些常见的HTML5标记。

1. 常用标签

1.1 <section>

<section> 标记用于将文档分成多个区域。通常，在每个区域内使用 <h1> - <h6> 标记来表示区域的标题。

示例代码：

<section>
  <h1>第一个区域</h1>
  <p>这是第一个区域的内容。</p>
</section>
<section>
  <h1>第二个区域</h1>
  <p>这是第二个区域的内容。</p>
</section>

1.2 <article>

<article> 标记用于表示一篇独立的文章。可以在每篇文章中使用 <header> 和 <footer> 标记来表示文章的标题和脚注。可以在多个地方使用 <article> 标记，但是不应该在另一个 <article> 标记内嵌套。

示例代码：

<article>
  <header>
    <h1>这是文章标题</h1>
  </header>
  <p>这是文章的内容。</p>
  <footer>
    <p>这是脚注。</p>
  </footer>
</article>

1.3 <main>

<main> 标记用于表示文档中的主要内容。一个文档只应该有一个 <main> 标记。

示例代码：

<main>
  <h1>网站主页</h1>
  <p>这是网站主页的内容。</p>
</main>

1.4 <nav>

<nav> 标记用于表示提供导航链接的部分。

示例代码：

<nav>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
  </ul>
</nav>

1.5 <aside>

<aside> 标记用于表示与页面内容相关的侧边信息。

示例代码：

<aside>
  <h2>侧边栏标题</h2>
  <p>这是侧边栏的内容。</p>
</aside>

2. 新增标签

2.1 <datalist>

<datalist> 标记用于定义可选的选项列表。当用户在输入框中输入内容时，浏览器会自动显示与输入内容相关的选项列表。

示例代码：

<label for="myInput">选择一个数字:</label>
<input id="myInput" list="numbers">
<datalist id="numbers">
  <option value="1">
  <option value="2">
  <option value="3">
  <option value="4">
  <option value="5">
</datalist>

2.2 <progress>

<progress> 标记用于表示一个任务的完成进度。

示例代码：

<progress value="50" max="100"></progress>

2.3 <time>

<time> 标记用于表示日期和时间。

示例代码：

<time datetime="2019-01-01">2019年1月1日</time>

结语

HTML5引入的这些新的标记可以帮助开发者更好地表示页面的结构和内容，并提高用户体验。我们应该在实际开发过程中充分利用它们。