HTML5学习之路（2）

来源：互联网发布：民营经济数据编辑：程序博客网时间：2024/05/19 07:41

写本文的主要意图主要供自己学习巩固之用，如有错误望大家指正。

今天来了解一下HTML5中新增的结构元素，其又分为两类：

Ⅰ.主体结构元素（article、section、nav、aside、time）

Ⅱ.非主体结构元素（header、hgroup、footer、address）

主体结构元素

article

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。他可以是一篇博客或者报刊中的文章，一篇论坛贴帖子、一段用户评论或独立的插件，或其它任何独立的内。
注:
①article元素是可以嵌套使用的
②article元素可以用来表示插件
③article元素一般会带个标题，并放在 header 元素中

例如：

<body>    <article>        <header>            <h1>好好学习天天向上</h1>            <p>少壮不努力老大徒伤悲</p>        </header>        <p>成就梦想放眼未来</p>        <footer>hugejinfan</footer>    </article>    <article>        <h1>插件</h1>        <object data="" type="">            <embed src="#" type="" width="600" height="100"></embed>        </object>    </article></body>

section

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

注意：
①不要将section元素作为设置样式的页面容器
②如果article元素、aside元素、nav元素要更符合使用条件，那不要使用section元素
③没有标题元素不要使用sction元素

例如：

<body>    <section>        <h1>交通工具</h1>        <p>代步</p>    </section>    <article>        <h1>水果</h1>        <p>富含维生素</p>        <section>            <h2>香蕉</h2>            <p>很好吃</p>        </section>        <section>            <h2>芒果</h2>            <p>美味</p>        </section>    </article><!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->    <section>        <h1>水果</h1>        <p>富含维生素</p>        <article>            <h2>水蜜桃</h2>            <p>香甜</p>        </article>        <article>            <h2>火龙果</h2>            <p>好吃</p>        </article>    </section></body>

nav

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。
nav元素的应用场景：

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

例如：

<!--传统导航条（要达到理想样式还需自行修改样式表部分）-->    <style>        nav ul{            list-style: none;        }        li{            float:left;        }        a{            text-decoration: none;            display: block;        }        </style>    </head>    <body>        <nav>            <ul>                <li><a href="#">主页</a></li>                <li><a href="#">项目展示</a></li>                <li><a href="#">联系我们</a></li>            </ul>        </nav>      </body>...

aside

aside元素用来表示当前页面或文章的附属信息部分，他可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他有区别于主要内容的部分。
在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。

time

time元素代表 24 小时中的某个时刻或某个日期。表示时刻时允许带时间差，可定义很多格式的日期和时间。
例如：

<time datetime="2016-06-15">2016年6月15日</time><!--日期与时间之间要用时间分隔符"T"分隔--><time datetime="2016-06-15T18:00">2016年6月15日</time><!--"+"后的时间表示时间差--><time datetime="2016-06-15T18:00+04:00">2016年6月15日</time>

非主题结构元素

header元素是一种有引导和导航的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
例如：

<header>    <h1>文章标题</h1></header><article>    <header>        <h1>标题</h1>    </header>    <p>内容</p></article>

hgroup

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如内容区块的标题及其子元素算一组。

注：
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup

例如：

<header>    <hgroup>        <h1>我是苹果</h1>        <h2>我是香蕉</h2>        <h3>我是大枣</h3>    </hgroup>    <p>都是水果</p></header>

footer元素可以作为其上层父级内容区块或是一个区块的脚注。footer通常包括其他相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

例如：

<article>    <p>内容</p>    <footer>        <ul>            <li>about1</li>            <li>about2</li>            <li>about3</li>        </ul>    </footer></article>

address

address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、电子邮箱、电话号码等。

注：
address元素不应该用于描述通讯地址，除非它是联系信息的一部分。
address元素通常连同其他信息被包含在<footer>元素中。

例如：

<address>    <ul>        <li>作者：<a href="#">xx</a></li>        <li>联系方式：<a href="#">xx-xxxxx</a></li>        <li>地址：<a href="#"></a>xx</li>    </ul></address>

0 0