HTML5史上最全标签和标签属性整理

这篇文章距离上次修改已过431天，其中的内容可能已经有所变动。

HTML5标签和属性的列表是非常庞大的，因此我无法在一篇文章中全部涵盖。但我可以提供一些常用的HTML5标签和一些常用属性的例子。

常用HTML5标签:

<header>：页面或区段的头部
<nav>：导航链接
<section>：文档中的一个区段
<article>：独立的文章内容
<aside>：侧边内容
<footer>：页面或区段的底部
<details>：展开或收起内容来提供细节
<dialog>：对话框或窗口
<figure>：媒体内容和它的标题
<mark>：需要标记的文本
<time>：日期或时间
<canvas>：绘图
<video>：视频
<audio>：音频
<source>：媒体资源，用于<video>和<audio>
<progress>：任务进度
<meter>：已知范围内的数值
<datalist>：输入域的预定义选项
<keygen>：表单密钥生成器
<output>：不是输入的结果

常用HTML5属性:

placeholder：输入字段的占位文本
required：表单元素需要输入才能提交表单
pattern：用于输入验证的正则表达式
min 和 max：数值输入的最小值和最大值
step：数值输入的合法间隔
autofocus：页面加载时自动聚焦
multiple：允许输入域有多个值
form：将输入域关联到特定表单

例子:




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Example</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h1>Article Title</h1>
                <time datetime="2021-01-01">January 1st, 2021</time>
            </header>
            <p>This is an article about something interesting...</p>
            <footer>
                <mark>Highlighted text</mark>
            </footer>
        </article>
    </section>
    <aside>
        <details>
            <summary>Click to see details</summary>
            <p>This is the detail content.</p>
        </details>
    </aside>
    <footer>
        <p>Copyright &copy; 2021</p>
    </footer>
</body>
</html>

这个例子展示了一些常用的HTML5标签和属性，以及它们的基本用法。

HTML5史上最全标签和标签属性整理

评论已关闭

推荐阅读