标签:enter highlight hyper ati 联系人 footer 联系 ext 属性
视频来源:麦子学院 讲师:朱朝兵
header元素表示页面中的一个内容区块或者整个页面的标题 nav元素表示页面中导航链接部分 article元素表示页面中一块与上下文不相关的独立内容,比如一篇文章中的文章?【表示理解无能】 section元素表示页面中的一块内容区块,比如章节的页眉页脚,也可以和Hn等一起使用,标示出文档的结构,不带标题的内容区块不建议使用section aside元素表示article元素的内容之外的,和内容相关的辅助信息 footer元素表示页面或者页面中一块区域的页脚,比如文章创建时间,作者,联系方式等等
<article>
<header>
<h1>article元素的使用方法</h1>
<p>创建时间:<time pubdate >2017/11/27</time></p>
<!-- 使用pubdate属性,表示这个时间是当前内容的发布日期(比如<time>所在的<article>) -->
</header>
<p><b>Article</b>是一个独立的区域</p>
<section>
<h2>读者评论</h2>
<article>
<header>
<h3>读者:Yolo</h3>
<p><time pubdate datetime="2017-11-27 18:39">两小时前</time></p>
</header>
<p>很精彩的文章!</p>
</article>
</section>
<footer>
<p><small>版权所有</small></p>
</footer>
</article>
<article> <h1>产品</h1> <p>产品列表</p> <section> <h2>产品A</h2> <p>产品A的介绍</p> </section> <section> <h2>产品B</h2> <p>产品B的介绍</p> </section> </article>
*当一段内容比较独立时使用article,当想把独立内容划分为几段时用section
使用方法一、作为主要内容的附属信息部分
<header> <h1>国庆节去成都看熊猫</h1> </header> <article> <h2>大熊猫基地</h2> <p>大熊猫基地有很多大熊猫</p> <aside> <h3>名词解释:</h3> <dl> <dt>大熊猫</dt> <dd>大熊猫是国家一级保护动物</dd> <dt>大熊猫基地</dt> <dd>大熊猫基地在四川卧龙</dd> </dl> </aside> </article>
使用方法二、作为全局页面站点的附属信息
<aside>
<h1>网站公告:</h1>
<p>国庆节放假通知</p>
<p>中秋节放假通知</p>
</aside>
1、传统的导航条 2、侧边栏导航 3、内页导航 4、翻页操作
<p>发布时间:<time datetime="2017-11-27" pubdate>2017年11月27日</time></p>
*用来给机器识别的,便于搜索引擎,爬虫解析
<style type="text/css">
*{margin: 0;padding: 0}
body{font-family: ‘微软雅黑‘;text-align: center;}
a{
color: #f60;
text-decoration: none;
}
nav{
height: 48px;
background: #f60;
}
nav li{
background: #000;
float: left;
border-radius: 5px;
list-style: none;
padding: 5px 10px;
margin:10px;
}
</style>
<header> <hgroup> <h1>HTML5视频教程</h1> <a href="">手机版</a> <a href="">论坛</a> </hgroup> <nav> <ul> <li><a href="">首页</a></li> <li><a href="">手机版</a></li> <li><a href="">论坛</a></li> </ul> </nav> </header>
hgroup是将标题和它的子标题进行分组的元素,hgroup元素一般会把h1-h6元素进行分组。比如在一个内容区块的标题和它的子标题是一组。通常情况下,文章只有一个主标题时,是不需要hgroup元素的
<article> <header> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> <p>发布时间:<time datetime="2017-11-27">2017年11月27日</time></p> </header> <p>文章正文</p> </article>
footer元素
<style type="text/css"> *{margin: 0;padding: 0;} body{ font-family: ‘微软雅黑‘; text-align: center; } a{ text-decoration: none; color: #555; } </style> <div class="footer"> <p> <a href="">版权信息</a> | <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">站点地图</a> | </p> <p>麦子学院版权所有</p> </div>
*也可以为article元素或者section元素添加footer元素,注脚
address元素用来在页面中呈现联系信息,包括文档的作者,邮箱、地址、电话信息等,也可以用来展示和文章相关的联系人的所有联系信息
标签:enter highlight hyper ati 联系人 footer 联系 ext 属性
原文地址:http://www.cnblogs.com/yolo-bean/p/7905675.html