HTML5的结构学习(1) --- 新增的主体结构元素
1.article 元素
解释:代表文档、页面和应用程序中独立的、完整的、可以被独自引用的内容。
主要用途:博客中的文章、评论,贴吧中的帖子,或者独立的插件等。
article中可以包含多种元素例如:
<article> <header>日记随笔</header> <p>发表日期: <time pubdate="pubdate">2014/09/18</time> </p> <p>今天早上下雨,天气很冷需要加衣服</p> <footer>我的博客</footer> </article>
同时article中也可以嵌入article:
<html> <head></head> <body> <article> <h1>日志列表</h1> <section> <article> <header> 日记随笔 </header> <p>发表日期: <time pubdate="pubdate">2014/09/18</time> </p> <p>今天早上下雨,天气很冷需要加衣服...</p> </article> <article> <header> 日记随笔 </header> <p>发表日期: <time pubdate="pubdate">2014/09/18</time> </p> <p>今天早上下雨,天气很冷需要加衣服...</p> </article> </section> </article> </body> </html>
2.section元素
解释:用于网站或者应用程序中的内容进行分块。一个section元素通常由标题和内容组成。
用途:划分不同内容区块。
section就是用于内容的分段,例如:
<article> <h1>NBA 球队</h1> <p>NBA用东西区共有30支球队组成</p> <section> <h2>金州勇士队</h2> <p>金州勇士队位于美国奥克兰。。。。。。</p> </section> <section> <h2>洛杉矶湖人队</h2> <p>洛杉矶湖人队位于美国娱乐中心洛杉矶。。。。。。</p> </section> </article>
NBA球队介绍首先是一段独立的内容,因而使用article元素,而每支球队的介绍是彼此并列需要使用分段,所以使用section分隔。
其实这里的article 和section就算互换使用也未尝不可(article可以看做一种特殊的section),主要是看这段元素在你当前的网页中强调的是什么,强调独立性使用article,强调分段使用section。
可以访问https://gsnedders.html5.org/outliner/检查你代码结构中没有section 标题的部分,不要为没有标题的内容区块使用section标签。
注意:section并非一个普通的容器元素,当一个容器元素需要直接被定义样式或者脚本定义行为时,推荐使用的是div。
3.nav元素
解释:页面导航的链接组
用途:页面导航
nav元素就是用于包裹页面导航元素,例如:
<nav> <ul> <li>主页</li> <li>我的博客</li> <li>论坛</li> ..... </ul> </nav>
注意:不要使用menu元素代替nav
4.aside元素
解释:用来表示当前页面和文章的附属信息部分
用途:用于与当前页面相关的引用、边侧栏、广告和导航条。
aside主要有两种用法:
1.被包含在article中作为主要内容的分属信息部分,其中内容可以是与当前文章相关的参考资料、名词解释。
例如:
<header> <h1>HTML5新元素</h1> </header> <article> <h1>aside标签的使用</h1> <p>aside标签同article一样都是HTML5中新加入的元素,但是一般用于与主体内容相关元素。如名词解释、引用等等。。。。。。。</p> <aside> <h1>名词解释</h1> <dl> <dt>article</dt> <dd>HTML5新元素,用于表示独立元素</dd> </dl> </aside> </article>
2.在article元素之外使用,作为页面或者站点全局的附属信息部分使用。例如友情连接、广告和其他文章列表。
<aside> <h1>本周热门文章</h1> <ul> <li> <span>0</span><a href="....">iPhone6 回事目前技术上最先进的手机吗?</a> </li> <li> <span>1</span><a href="....">Git工作流指南:集中式工作流</a> </li> <li> <span>2</span><a href="....">图解KMP算法(Javascript实现)</a> </li> ... </ul> </aside>
HTML5的结构学习(1) --- 新增的主体结构元素的更多相关文章
- HTML5的结构学习(2) --- 新增的非主体结构元素
除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...
- HTML5的结构学习(3) --- 综合运用
前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读 ...
- html5新增的主体结构元素
1. article 主体结构元素 通常是一篇文章.一个页面.一个独立完整的内容模块一般会带个标题,并放在 header 标签中,article 元素可以互相嵌套,使用频率极高,强调独立性,多注意下 ...
- html5中新增非主体结构元素
1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...
- HTML5中新增的主体结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以使一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内 ...
- HTML5图形绘制学习(1)-- Canvas 元素简介
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...
- HTML5学习笔记一:新增主体结构元素
Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML&g ...
- html5的结构
目录 一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素 二.新增的非主体结构 ...
- [html5]学习笔记一 新增的非主体结构元素
html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素. 1.header元素 header元素是一种具有引导和导航作用的结构元素, ...
随机推荐
- 简单的php数据库操作类代码(增,删,改,查)
这几天准备重新学习,梳理一下知识体系,同时按照功能模块划分做一些东西.所以.mysql的操作成为第一个要点.我写了一个简单的mysql操作类,实现数据的简单的增删改查功能. 数据库操纵基本流程为: 1 ...
- Windows7上FTP服务器建立
1. FTP服务器建立 注意:千万不能使用FTP和ftp建立用户,否则无法登陆ftp服务器. 1.1本地机器上创建一个用户 这个用户是用来登录到FTP的.我的电脑右键->管理->本地用户和 ...
- php ajax 同时验证 用户名 密码
今天写了一个程序分享给大家,该程序是ajax密码和用户名验证问题 第一步 先在数据库里建立一张表 有3个字段 为 id name pass 第二步 写html页面,需要引入jq库 请到官网自行下载 & ...
- automation studio 6.0 破解版 32位
破解软件在iso文件的patch目录下 链接:http://pan.baidu.com/s/1o8KR7rc 密码:y87g
- LFS,编译自己的Linux系统 - 完成准备工作
$LFS 确保环境变量$LFS已被定义. 定义:export LFS=/mnt/lfs 检查:echo $LFS 建立目录 $LFS/tools $LFS/tools目录用于存放和编译一些临时使用的工 ...
- 常用两种数据交换格式之XML和JSON的比较
目前,在web开发领域,主要的数据交换格式有XML和JSON,对于XML相信每一个web developer都不会感到陌生: 相比之下,JSON可能对于一些新步入开发领域的新手会感到有些陌生,也可能你 ...
- Keil C51 中指针的使用
指针是C语言中比较难的一个内容,Keil C51在指针方面有和标准C不一样的地方,今天看了一些资料学习了一下Keil C51 中指针的使用. keil51的指针,包含两种指针:普通指针,兼容标准C:内 ...
- Qt浅谈之二十App自动重启及关闭子窗口(六种方法)
一.简介 最近因项目需求,Qt程序一旦检测到错误,要重新启动,自己是每次关闭主窗口的所有子窗口但有些模态框会出现问题,因此从网上总结了一些知识点,以备以后的应用. 二.详解 1.Qt结构 int ma ...
- Android ListView实现圆角
首先呢,我们还是看几个示图: 这种带有圆角的listview' 看起来很棒吧,确实是这样,其实也不能这么说,主要方形太多了,斯通见惯就不值钱了,“物以稀为贵嘛”. 就好比学java都搞androd,很 ...
- vc++ ODBC
http://book.51cto.com/art/200807/80054.htm http://www.cnblogs.com/xrong/archive/2013/04/14/3020240.h ...