新网页结构

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

2.<nav>标签定义导航链接的部分。

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

4.<section>定义文档中的节(section、区段)

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

6.<footer>定义 section 或 document 的页脚。

7.<hgroup> 标签标签用于对网页或区段(section)的标题进行组合。

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

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

1.article

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

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

<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> 标签定义导航链接的部分。

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1>NAV使用方法</h1>
<nav>
<ul>
<li>
<a href="nav.html">首页</a>
</li>
</ul>
<ul>
<li>
<a href=" aside.html">aside页面</a>
</li>
</ul>
</nav>
</body>
</html>

nav的用法

time

定义和用法

<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

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

属性 描述
datetime datetime 规定日期 / 时间。否则,由元素的内容给定日期 / 时间。
pubdate pubdate 指示 <time> 元素中的日期 / 时间是文档(或 <article> 元素)的发布日期。
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<time datetime="2008-02-14">情人节</time>
<time datetime="2008-02-14">2月14</time>
<time datetime="2008-02-14">今天的时间</time>
<time datetime="2015-07-12T22:00">2015年7月12日晚上10点</time>
<time datetime="2015-07-12T22:00Z">UTC标准时间2015年7月12日晚上10点</time>
<time datetime="2015-07-12T22:00+8:00">中国时间2015年7月12日晚上10点</time>
</body>
</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. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  2. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  3. 第一章:HTML5的基础

    HTML5基础 1.DoctYpe声明 <!DCTYPE html>必须放在第一行. <title> <title> 百度</title> <me ...

  4. HTML5/CSS3基础

    1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...

  5. HTML5的基础学习

    课前预习:HTML又被叫做超文本标记语言,它不是编程语言,是web中最微不足道的,但又是web中最微不足道的基石, 对零基础学习HTML的人员来说先认识HTML的标签和字体是必不可少的,万丈高楼平地起 ...

  6. front-end——HTML5/CSS3基础

    概述 1.什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页,随着互联网技术的发展,html5,css3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完 ...

  7. 来吧,HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  8. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  9. html5系列.基础知识

    兼容性问题 创建一个html5页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. UITabBarController的使用和坑

    本人apem 说到UITabBarController, 最首要的坑就是tabbar的图片不显示的问题 1. tabbar上的图片一定要2套以上, 例如一个uitabbaritem的image是 se ...

  2. Android学习笔记(九)——布局和控件的自定义

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! View是 Android中一种最基本的 UI组件,它可以在屏幕上绘制一块矩形区域,并能响应这块区域的各种事件 ...

  3. PyCharm 入手第一记

    因为我是忠实的Linux用户,所以一下操作是在Linux下的完成,除了下载,因为Linux的下载着实有点让人捉急. PyCharm 下载地址: http://www.jetbrains.com/pyc ...

  4. 【MavenWeb】初探:创建一个Maven Web项目

    第一步:创建一个Simple的Maven项目 直接点下一步,把name上面的几个部分填写好,直接Finish即可. 就可以看到如下的结构: 注意点1:如果按照网上的其他一些做法来创建,你会发现少了sr ...

  5. css3 transition effect(其它效果)

    http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 /************* ...

  6. CentOS6.5安装Tab增强版:bash-completion

    CentOS6.5安装Tab增强版:bash-completion,可补全命令参数: 因为CentOS官方源并不带有bash-completion的包,所以,为了可用yum安装,增加epel的源, 首 ...

  7. Flatten 2D Vector

    Implement an iterator to flatten a 2d vector. For example, Given 2d vector = [ [1,2], [3], [4,5,6] ] ...

  8. MQTT V3.1----publish解读

    客户端/服务器的发布消息行为,与PUBLISH相关的消息类型: PUBLISH 客户端发布消息经由服务器分发到所有对应的订阅者那里.一个订阅者可以订阅若干个主题(Topic name),但一个PUBL ...

  9. 【leetcode】Convert Sorted List to Binary Search Tree

    Convert Sorted List to Binary Search Tree Given a singly linked list where elements are sorted in as ...

  10. OPCServer Modbus使用和配置

    一,安装KEPware.Enhanced.OPC.DDE.KEPServer.(PLC数据传送给KEPServer,开发的程序用OPCServer读KEPServer) 设置ip地址后面是指的plc站 ...