2_H5新标签

作者: Zd_silent | 来源:发表于2016-11-29 16:37 被阅读27次

header footer

header元素（标签）

用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等

通常会放在文章的头部

footer元素（标签）

通常会放在页面的页脚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{height:708px;}
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: blue;}
        #div0{width: 100%;height: 80%;background: yellow;}
        #div1{width: 20%;height: 100%;background: red;float: left;}
        #div2{width: 80%;height: 100%;background: DarkGray;float: left;}
    </style>
</head>
<body>
    <header>我是头</header>
    <div id="div0">
        <div id="div1">我是左侧栏</div>
        <div id="div2">我是右侧边栏</div>
    </div>
    <footer>我是尾</footer>
</body>
</html>

header_footer.png

article元素（标签）

用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等.

article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素，如果只是一段内容的话应该使用section元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <article>
        <header>
            <h3>文章标题</h3>
            <h5>作者：MM</h5>
        </header>
        <p>我是正文*******************<br>*******************<br>*******************<br></p>
        <article>
            <header><h4>网友1</h4></header>
            <p>评论1</p>
            <footer>今天</footer>
        </article>
        <article>
            <header><h4>网友2</h4></header>
            <p>评论2</p>
            <footer>明天</footer>
        </article>
        <footer>
            <p>网页尾部</p>
        </footer>
    </article>
</body>
</html>

Article.png

section元素（标签）

用来定义文章中的章节(通常应该有标题和段落内容)
用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上的内容分块。
section元素可以定义文档的主体内容。
用一句话来概括它的作用就是给内容分段，给页面分区
注意他与div的区别，div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。

article元素和section元素的区别

语义不同

article元素更强调内容的独立性
section元素更强调内容的关联性
article元素是独立完整的内容，section元素页面内容分块

相同点

本质上都是带有语义的div块元素
分别可以看作<div id="section">和<div id="article">

aside元素

aside元素通常用来设置侧边栏。
用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x</title>
    <style type="text/css">
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: yellow;float: left;}
        aside{width: 20%;height: 80%;background: DarkGray;float: left;}
        section{width: 80%;height: 80%;background: Pink;float: left;}
    </style>
</head>
<body style="margin:0;height:708px">
    <header>header</header>
    <aside>aside</aside>
    <section>section</section>
    <footer>footer</footer>
</body>
</html>

aside.png

nav元素

用来定义目录、导航栏、超链接
并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
在文章页面中，nav还可以用来给一个文字做一个目录的超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x</title>
    <style type="text/css">
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: yellow;float: left;}
        aside{width: 20%;height: 80%;background: DarkGray;float: left;}
        section{width: 80%;height: 80%;background: Pink;float: left;}
        nav{width: 100%;height: 50%;background: #e0ffff;text-align: center;padding: 1px}
        li{display: inline;}
        a{text-decoration: none;}
    </style>
</head>
<body style="margin:0;height:708px">
    <header>
        header
        <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">木木</a></li>
            <li><a href="">屎蛋</a></li>
            <li><a href="">逗逗</a></li>
        </ul>
    </header>
    <aside>aside</aside>
    <section>section</section>
    <footer>footer</footer>
</body>
</html>

nav.png

time元素

微格式的概念

HTML5中的微格式，是一种利用HTML5中的新标签对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。

HTML5中的微格式是为了简化浏览器对数据的提取，方便搜索引擎的搜索.

time元素

time是HTML5新增的元素
time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间
datetime属性中日期与时间之间要用"T"文字分隔，"T"表示时间。请注意倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那个日期是文章、新闻的发表日期。

time元素示例

<time datetime="2016-11-30"> 2016年11月30日</time>
<time datetime="2016-11-30T20:00"> 2016年11月30日晚上8点</time>
<time datetime="2016-11-30T20:00Z"> 2016年11月30日晚上8点</time>
<time datetime="2016-11-30T20:00+09:00">美国时间2016年11月30日8点</time>
<time datetime="2016-11-30" pubdata="pubdata">文章发表于2016年11月30日</time>

hgroup元素

通常用来给标题分组，通常放在header中；但是并非强制要求，也不是绝对的。

address元素

通常用用来说明作者的联系信息，例如名字，E-mail，电话，地址等
address元素中的内容会以斜体显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        hgroup{background: yellow}
    </style>
</head>
<body>
    <header>
        <hgroup>
            <h1>主</h1>
            <h1>副</h1>
        </hgroup>
    </header>
    <address>
        我家住在黄土高坡
    </address>
</body>
</html>

hgroup_address.png

新布局的优点

更注重于内容而不是形式
对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可读性。
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容
代码更加的简洁洁

figure元素

figure/figcaption都是HTML5中新增的元素
figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等

figcaption元素

用来给figure元素定义标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        head{}
    </style>
</head>
<body style="background: #FFB6C1" >
    <h2>我是标题</h2>
    <p>===========================</p>
    <figure>
        <img src="p1.jpg" alt="" width="300"><img src="p1.jpg" alt="" width="300">
    </figure>
    <figcaption>我的作品1</figcaption>
    <figure>
        <img src="p3.jpg" width="300"><img src="p4.jpg" width="300">
    </figure>
    <figcaption>我的作品2</figcaption>
</body>
</html>

figure_figcaption.png

网友评论

本文标题：2_H5新标签

本文链接：https://www.haomeiwen.com/subject/kdtzpttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！