【HTML5】主要的元素

最新推荐文章于 2023-06-04 14:30:37 发布

Super_Tyr

最新推荐文章于 2023-06-04 14:30:37 发布

阅读量551

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Super_Tyr/article/details/103841142

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

基于上一篇，我个人是不太喜欢长文的，但是呢，说清楚一个东西，还想文章短小是矛盾的，我尽力克服，写出长的清楚的应该是重要的，起码我自己看起来要清楚。再者，为啥html5标签要认真学学呢？我是这样想的，一个合理的网页骨架，然后搭配css3，应该可能是最高效，最好用的一种最佳实践吧

1、Html5新增的主体结构元素

article元素

语义标签自然让人想到语义代表的内容就放在该语义标签下，不过我想设计者的初衷是通过语义标签明确内容，但是呢ariticle一词原意就是文章，所以很容易联想到article元素适合的就是网页中正文的内容，比如新闻、通知的正文，不过这个字面意思的范畴就比较狭隘了，另一种表示就是代表文档，页面或程序中独立完整可以独立被外部引用的内容，注意关键词是独立、可引用的内容，所以可以是用户评论、论坛帖子、报刊文章、独立插件（不是特别理解）、或其他任何独立的内容。这样的范畴就比较准确了。

ariticle是可以嵌套使用的，可以包含header、footer、ariticle、h1等元素

section元素

section是章节、部分、分段的意思，类似与小说中的一章，是有个小标题和正文的，所以section一般常由其内容及其标题组成，用于对内容进行分块；当一个容器要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section元素。

nav元素

意思就是导航，是一个可以用作页面导航的连接组，还是将ul>li>a 放置在nav下，可以理解为class为nav的div

nav元素的应用场景：

传统导航条
侧边栏导航
页内导航
翻页导航

html5中不要使用menu元素代替nav

aside元素

aside元素表示当前页面或文章的附属信息部分，包含与当前页面相关的引用、侧边栏、广告、导航条，简单来说就是一般位于正文侧边或网页侧边的内容。

time元素与微格式

暂时就理解是放文章发布时间的，有一个datetime属性，示例如下

<time datetime="2020-01-05">2020-01-05</time>
<time datetime="2020-01-05T16:00">2020-01-05</time>
<time datetime="2020-01-05T16:00Z">2020-01-05</time>
<time datetime="2020-01-05T16:00+18:00">2020-01-05</time>

注意：T后就是时间几点，+ 就是时差，z表示机器编码是UTC标准时间（世界标准时间）

pubdate属性 发布日期，可选的Boolean类型的属性，为什么不直接用当前的时间呢，是因为当页面出现多个time元素时，通过此属性可以唯一标识发布时间。

2、Html5新增的非主体结构元素

具有引导和导航作用的结构元素，放页面内容区块的标题，也可以包含其他内容，例如数据表格、搜索表单、或相关的logo图片

，可以在页面出现多次，具体的页面结构中，我理解是可以放导航上的一块，也可以包含nav，还有正文上面的一块，就是article下的header等。

书面这样解释：可以作为其上层父级内容区块或是一个跟区块的脚注。通常包含相关区块的脚注信息，很容易想到，以前做的网页底部就是footer，也可以写某一区块的底部的脚注信息，如文章底部的一些必要信息。

hgroup元素

将其标题及其子标题进行分组的元素，简单就是把标题和子标题都放一块，就是包含一组标题的元素

address元素

顾名思义是地址，但能表示的不止是地址，可以理解为关于我们或者联系方式相关的所有信息，解释是用来在文档中呈现联系信息，包括网站链接、电子邮箱、真实地址、电话号码等。

网页编排规则

显式编排内容区域块，明确使用section等标签

隐式编排内容区域块

标题分级

不同区域块使用相同标题

一种典型的编排如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>nav元素</title>
</head>
<body>
<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">简介</a></li>
        </ul>
    </nav>
</header>
<article>
    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章副标题</h2>
    </hgroup>
    <p>文章正文</p>
    <section>
        <div>
            <article>
                <h1>评论标题</h1>
                <p>评论正文</p>
            </article>
        </div>
    </section>

</article>

<footer>
    <small>版权所有</small>
</footer>
</body>
</html>