HTML5标签大全 - Python技术站

HTML5标签大全攻略

HTML5标签大全包含了许多常用的标签以及一些新增的标签，我们可以根据自己的需要来选择使用。下面是HTML5标签大全的完整攻略。

所有HTML5标签

文档类型声明

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5标签大全</title>
</head>
<body>
</body>
</html>

根元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5标签大全</title>
</head>
<body>

</body>
</html>

头部标签

<head>
    <meta charset="UTF-8">
    <title>HTML5标签大全</title>
    <base href="http://www.example.com/">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>

Section标签

<section>
    <h1>Section 标题</h1>
    <p>这是 Section 内容</p>
</section>

Article标签

<article>
    <h1>Article 标题</h1>
    <p>这是 Article 内容</p>
</article>

Nav标签

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</nav>

Aside标签

<aside>
    <h2>相关文章</h2>
    <ul>
        <li><a href="#">文章1</a></li>
        <li><a href="#">文章2</a></li>
        <li><a href="#">文章3</a></li>
    </ul>
</aside>

Header标签

<header>
    <h1>这是头部</h1>
    <nav>
        <ul>
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
    </nav>
</header>

Footer标签

<footer>
    <p>版权信息</p>
</footer>

Address标签

<address>
    <p>联系方式</p>
</address>

Main标签

<main>
    <h1>Main 标题</h1>
    <p>Main 内容</p>
</main>

Figure标签

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

Caption标签

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>表格1</td>
        <td>表格2</td>
        <td>表格3</td>
    </tr>
</table>

Details标签

<details>
    <summary>Details标题</summary>
    <p>Details内容</p>
</details>

Dialog标签

<dialog open>
    <h2>Dialog 标题</h2>
    <p>Dialog 内容</p>
    <button>确定</button>
    <button>取消</button>
</dialog>

Progress标签

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

Meter标签

<meter value="0.6">60%</meter>

示例说明

下面是两个标签的使用示例。

Section标签示例

Section 标签用于表示文档或应用程序中的一个区域。

<section>
    <h1>Section 标题</h1>
    <p>这是 Section 内容</p>
</section>

可以看到，Section 标签包含一个标题和一些内容。

Figure标签示例

Figure 标签用于表示一段独立的内容，如图像，图表，照片或代码清单。

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

可以看到，Figure 标签包含一张图片和图片说明。这样可以使图片和图片说明更加紧密地联系在一起。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5标签大全 - Python技术站