HTML5 – 1.基础
新网页结构
1.<header> 定义了文档的头部区域
2.<nav>标签定义导航链接的部分。
3.<article>定义页面独立的内容区域。
4.<section>定义文档中的节（section、区段）
5.<aside>定义页面的侧边栏内容。
6.<footer>定义 section 或 document 的页脚。
7.<hgroup> 标签标签用于对网页或区段（section）的标题进行组合。
8.<footer>定义一个文档底部。
9.<address>定义文档作者或拥有者的联系信息。
<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.基础的更多相关文章
- HTML5零基础学习Web前端需要知道哪些？
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- 第一章：HTML5的基础
HTML5基础 1.DoctYpe声明 <!DCTYPE html>必须放在第一行. <title> <title> 百度</title> <me ...
- HTML5/CSS3基础
1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...
- HTML5的基础学习
课前预习:HTML又被叫做超文本标记语言,它不是编程语言,是web中最微不足道的,但又是web中最微不足道的基石, 对零基础学习HTML的人员来说先认识HTML的标签和字体是必不可少的,万丈高楼平地起 ...
- front-end——HTML5/CSS3基础
概述 1.什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页,随着互联网技术的发展,html5,css3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完 ...
- 来吧，HTML5之基础标签(上)
什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签 定义超链接, ...
- html5画布基础
canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...
- html5系列.基础知识
兼容性问题 创建一个html5页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JavaScript判断是否是手机mobile登录
在页面代码中加入以下js,即可利用JavaScript判断是否是手机mobile登录! <script type="text/javascript" src="${ ...
- 字符串驱动技术—— MethodAddress , MethodName , ObjectInvoke
首先看一段Delphi帮助中的介绍(After Delphi 6 ): Returns the address of a published method. class function Method ...
- asp.net mvc 入门资料
七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC http://www.cnblogs.com/powertoolsteam/p/MVC_one.html 无废话MVC入门教程 ...
- neutron 网络配置flat模式
使用flat模式,直接使用物理网络的子网,配置如下:
- Random Pick Index
Given an array of integers with possible duplicates, randomly output the index of a given target num ...
- 【leetcode】Binary Tree Zigzag Level Order Traversal
Binary Tree Zigzag Level Order Traversal Given a binary tree, return the zigzag level order traversa ...
- Linux之绝处逢生------SysRq
参考: http://www.linuxfly.org/post/545/ http://www.jb51.net/article/13525.htm 做法: 未雨绸缪 # " > / ...
- MMO可见格子算法
看注释吧,写的很清楚了 using System; using System.Collections.Generic; using System.Diagnostics; using System.L ...
- windows8 安装TortoiseSVN后的反应
因为工作需要,昨天安装了TortoiseSVN 64位版,没有马上重启. 随后,IIS中打开页面后浏览器一片空白,没有网页,没有地址,什么都没有.这时还没想到可能是TortoiseSVN的问题.后来实 ...