H5学习笔记2：HTML5新增结构元素

最新推荐文章于 2021-07-09 09:47:10 发布

博客工具人

最新推荐文章于 2021-07-09 09:47:10 发布

阅读量488

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_42583552/article/details/109128748

版权

1.主体结构元素

1. article

通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题，并放在 header 标签中，article 元素可以互相嵌套，使用频率极高，强调独立性，多注意下与 header 标签的使用

2. section

section元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个元section元素通常由内容以及标题组成

<html>
<body>

<section>
<h1>WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
</p>
</section>

</body>
</html>

事实上，在HTML5中，article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。

3. nav

nav元素用于定义导航链接的内容，可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其它部分

<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

4. aside元素

定义article元素以外的内容，其内容与article的内容相关。

元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，aside元素有两种使用方法：

被包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在article之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

<body>
<header>
    <h1>My Blog</h1>
</header>
<article>
    <h1>My Blog Post</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <aside>
        <h1>Glossary</h1>
        <dl>
            <dt>Lorem</dt>
            <dd>ipsum dolor sit amet</dd>
        </dl>
    </aside>
</article>
<aside>
    <h2>Blogroll</h2>
    <ul>
        <li><a href="#">My Friend</a></li>
        <li><a href="#">My Other Friend</a></li>
        <li><a href="#">My Best Friend</a></li>
    </ul>
</aside>
</body>

5. time

定义时间和日期，

time属性中的datetime属性指定机器读取的日期和时间，time元素的内容显示在网页上，datetime属性中的大写字母T表示时间，Z表示UTC标准时间
pudate属性，表示article元素的发布时间，pudate属性是一个可选的布尔值

<!DOCTYPE HTML>
<html>
<body>
<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>
<p>
我在 <time datetime="2010-02-14" pubdate>情人节</time> 有个约会。
</p>
</body>
</html>

6. pubdate元素
pubdate元素可以用在article元素里的time上，来表示当前网页的发布时间。

2.非主体结构

header元素：

header元素常放置在整个页面或页面内的一个内容区块的标题部分。是一种具有引导和导航作用的结构元素。
footer元素

文档中的页脚部分。
hgroup元素：

hgroup元素用于对网页或区段(section)的标题进行组合。

<hgroup>
  <h1>Welcome to my Blog</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

address元素：

通常放置联系信息之类。

<address>
Written by <a href="123456@example.com">adamm</a>.<br> 
address:<br>
Example.com<br>
china<br>
</address>

main元素：

main规定文档主要内容或应用程序的主体部分；

只能在整个页面中最多出现一次；

不能是以下标签的子标签：article、aside、footer、header 或 nav。

标签中的主体内容应该是页面中唯一的，且不会在其他页面中重复出现的内容。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单；

博客工具人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
H5学习笔记2：HTML5新增结构元素

1.主体结构元素1. article通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题，并放在 header 标签中，article 元素可以互相嵌套，使用频率极高，强调独立性，多注意下与 header 标签的使用2. sectionsection元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个元section元素通常由内容以及标题组成<html><body><section><h1>WWF</h1>
复制链接

扫一扫