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" ...
随机推荐
- 快速入门SaltStack
导读 SaltStack是基于Python开发的一套C/S架构配置管理工具(功能不仅仅是配置管理,如使用salt-cloud配置AWS EC2实例),它的底层使用ZeroMQ消息队列pub/sub方式 ...
- flask 链接 url_for()
通常html的文件都放在template里面,那么静态的文件放在哪呢?staitc里面 调用 url_for('static', filename='css/styles.css', _externa ...
- SCP 和 rsync限速以及用法
rsync限速以及用法 -- :: 标签:限速 rsync 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xficc.blog. ...
- 腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版
腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版 时间:2015-01-18 01:41来源:linux.it.net.cn 作者:IT #由于上文装过yum groupinstall ...
- Thread.Sleep vs. Task.Delay
We use both Thread.Sleep() and Task.Delay() to suspend the execution of a program for some given tim ...
- [转载] C++ 突破私有成员访问限制
最后一个方式 模板尚未弄清楚. 我们在写代码的时候,按约定都是把成员数据放到private访问区中,然后在通过相应的函数来存取.那又有什么样的代码可以突破访问权限来直接操作类中private区段中的成 ...
- 开源工作流 Bonita BPM （JAVA）
Bonita BPM 开源工作流 Bonita BPM (JAVA) http://www.bonitasoft.com/
- C语言也能干大事1
今天看了个视频,叫C语言也能干大事,写了第一个WIN项目的代码,感觉特别好,就像以前刚刚学会写C语言一样, 然后就恶搞出一个东西,最后的结果就是这个东西退出不了了
- Android常用控件
Android 中使用各种控件(View) DatePicker - 日期选择控件 TimePicker - 时间选择控件 ToggleButton - 双状态按钮控件 EditText - 可编辑 ...
- 3. javacript高级程序设计-基本概念
1.1 语法 ECMAScript借鉴了C和其他类C语言的语法 1.1.1 区分大小写 ECMAScript中的一切(变量,函数和操作符)都是区分大小写的,变量test和Test是不同的变量 1.1. ...