HTML5 – 1.基础

时间 2019-11-06

标签 html5 html 基础栏目 HTML5 繁體版

原文原文链接

新网页结构

1.<header> 定义了文档的头部区域

2.<nav>标签订义导航连接的部分。html

3.<article>定义页面独立的内容区域。html5

4.<section>定义文档中的节（section、区段）浏览器

5.<aside>定义页面的侧边栏内容。ide

6.<footer>定义 section 或 document 的页脚。搜索引擎

7.<hgroup> 标签标签用于对网页或区段（section）的标题进行组合。编码

8.<footer>定义一个文档底部。spa

9.<address>定义文档做者或拥有者的联系信息。.net

1.article

<article> 标签规定独立的自包含内容。3d

一篇文章应有其自身的意义，应该有可能独立于站点的其他部分对其进行分发。代理

<article> 元素的潜在来源：

论坛帖子
报纸文章
博客条目
用户评论

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <h1>个人ARTICLE</h1>
        <p>建立时间：<time datetime="2015-07-12" pubdate="pubdate">2015-07-12</time></p>
    </header>
    <section>
        <h2>读者评论：</h2>
        <article>
            <header>
                <h3>读者：A</h3>
                <p>
                    <time datetime="2015-07-12 10:28:04" pubdate="pubdate">1小时前</time>
                </p>
            </header>
            <p>
                写的很好！
            </p>
        </article>
        <article>
            <header>
                <h3>读者：002</h3>
                <p>
                    <time datetime="2015-07-12 09:28:04" pubdate="pubdate">2小时前</time>
                </p>
            </header>
            <p>
               通常般拉
            </p>
        </article>
    </section>
    <footer>
        <small>参考footer!!~</small>
    </footer>
</body>
</html>

2.section
定义和用法

<section> 标签订义文档中的节（section、区段）。好比章节、页眉、页脚或文档中的其余部分。

section 不单单是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用 div 。通常来讲，当元素内容明确地出如今文档大纲中时，section 就是适用的。

<article>
        <hgroup>
            <h1>苹果</h1>
            <h2>可口的,美味的水果!</h2>
        </hgroup>
        <p>苹果是苹果的苹果树的果实。</p>
        <section>
            <h1>红色的美味</h1>
            <p>这些明亮的红苹果是最多见的发如今许多超市。</p>
        </section>
        <section>
            <h1>绿苹果</h1>
            <p>这些多汁、绿苹果作苹果馅饼的馅。</p>
        </section>
    </article>

HTML5 中 div section article 的区别
http://www.qianduan.net/html5-differences-in-the-div-section-article/

3.aside

定义和用法

<aside> 标签订义其所处内容以外的内容。

aside 的内容应该与附近的内容相关。

<!DOCTYPE html>
<html>
<head>
    <meta charset="en" />
    <title></title>
</head>
<body>
    <p>我和个人家人今年夏天参观了Epcot中心。</p>
    <aside>
        <h4>Epcot中心</h4>
        Epcot中心是一个主题公园在佛罗里达州的迪斯尼世界。
    </aside>
</body>
</html>

4.nav

定义和用法

<nav> 标签订义导航连接的部分。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <h1>NAV使用方法</h1>
 9     <nav>
10         <ul>
11             <li>
12                 <a href="nav.html">首页</a>
13             </li>
14         </ul>
15         <ul>
16             <li>
17                 <a href=" aside.html">aside页面</a>
18             </li>
19         </ul>
20     </nav>
21 </body>
22 </html>

nav的用法

time

定义和用法

<time> 标签订义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素可以以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理可以把生日提醒或排定的事件添加到用户日程表中，搜索引擎也可以生成更智能的搜索结果。

属性	值	描述
datetime	datetime	规定日期 / 时间。不然，由元素的内容给定日期 / 时间。
pubdate	pubdate	指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <time datetime="2008-02-14">情人节</time>
 9     <time datetime="2008-02-14">2月14</time>
10     <time datetime="2008-02-14">今天的时间</time>
11     <time datetime="2015-07-12T22:00">2015年7月12日晚上10点</time>
12     <time datetime="2015-07-12T22:00Z">UTC标准时间2015年7月12日晚上10点</time>
13     <time datetime="2015-07-12T22:00+8:00">中国时间2015年7月12日晚上10点</time>
14 </body>
15 </html>

TIME格式介绍

5.pubdate

定义和用法

pubdate 属性指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期。

<article>
<time datetime="2011-06-22" pubdate="pubdate"></time>
Hello world. This is an article....
</article>

6.header

标签订义及使用说明

<header> 标签订义文档或者文档的一部分区域的页眉。

<header> 元素应该做为介绍内容或者导航连接栏的容器。

在一个文档中，您能够定义多个 <header> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另外一个 <header> 元素内部。

7.hgroup

定义和用法

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

8.footer

定义和用法

<footer> 标签订义文档或节的页脚。

<footer> 元素应当含有其包含元素的信息。

页脚一般包含文档的做者、版权信息、使用条款连接、联系信息等等。

您能够在一个文档中使用多个 <footer> 元素。

9.address

定义和用法

<address> 标签订义文档或文章的做者/拥有者的联系信息。

若是 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

若是 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

<address> 元素中的文本一般呈现为斜体。大多数浏览器会在 address 元素先后添加折行。

HTML5 – 1.基础

新网页结构

1.<header> 定义了文档的头部区域

2.section 定义和用法

HTML5 中 div section article 的区别

3.aside

定义和用法

定义和用法

定义和用法

定义和用法

标签订义及使用说明

定义和用法

定义和用法

定义和用法

2.section
定义和用法