第五篇 HTML页面基本组成之标签元素大杂烩

_语义错误

已于 2022-02-02 16:05:35 修改

阅读量1.1k

点赞数 1

文章标签： vue.js html 前端

于 2022-01-28 22:12:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66451927/article/details/122728541

版权

本文详细介绍了HTML5中的一系列重要标签，包括<header>、<footer>、<time>、<aside>、<article>、<hgroup>、<section>、<figure>、<video>、<mark>、<progress>、<meter>、<wbr>、<input>、<datalist>和<address>。这些标签分别用于定义页面头部、页脚、日期时间、辅助内容、独立内容、标题分组、文档段落、图像及视频、高亮文本、进度条、度量、换行机会、输入字段、下拉选项和联系信息，是构建结构化HTML页面的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、header 标签

概念：<header>标签定义文档或者文档的一部分区域的页眉。<header> 元素作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 <header> 元素。

注意：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

代码：

<header>
        <h1>header 标签</h1>
        <p>注意：header 标签不能被放在 footer、address 或者另一个 header 元素内部。</p>
    </header>

运行结果：

二、footer 标签

概念：<footer> 标签定义文档或者文档的一部分区域的页脚。典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个 <footer> 元素。假如使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用<address>标签。

代码：

<footer>
        <p>footer 标签</p>
        <p><time pubdate datetime="022-01-28"></time></p>
        <p>作者：hurary</p>
    </footer>

运行结果：

三、time 标签

概念：<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，对时间进行一个标准，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<time>标签有两个属性：

（1）datetime 属性：datetime 属性规定日期或时间。在该元素的内容中未指定日期或时间时，使用该属性。

语法：<time datetime="YYYY-MM-DDThh:mm:ssTZD">

YYYY - 年 (例如 2022)
MM - 月 (例如 01 表示 January)
DD - 天 (例如 01)
T - 必需的分隔符，若规定时间的话
hh - 时 (例如 18 表示 6.00pm)
mm - 分 (例如 09)
ss - 秒 (例如 03)
TZD - 时区标识符 (Z 表示祖鲁，也称为格林威治时间，常用的有PRC（中国）UTC（西方时间）)

（2）pubdate属性：指示 <time> 元素中的时间是文档最新的发布日期

代码：

<p>time标签</p>
    <p>每天晚上 <time>11:00</time> 前睡觉减少脱发。</p>
    <p>祝你<time datetime="2022-10-05T05:10:05PRC">生日</time>快乐</p>
    <p><time pubdate datetime="022-01-28"></time></p>

运行结果：

四、aside 标签

概念：<aside> 标签是用来做辅助区域内容标注，<aside> 标签常定义 <article> 标签外的内容，

aside 的内容应该与附近的内容相关。

代码：

 <article>
        <p>
            article 标签里p标签的内容
        </p>
        <aside>
            <h4>aside 标签</h4>
            <p>这里的 aside 标签是用来做内容标注</p>
        </aside>
    </article>

运行结果：