每天学一点儿HTML5的新标签
sections部分
(http://www.w3.org/TR/html5/sections.html)
标签:article
article标签用来表示页面中一段完整的可以自我包含的片段,具有可重用的特性。可以是一条贴子、杂志或报纸的文章、一篇博客、一条用户提交的评论,也可以是一个可交互的组件,甚至可以是任意独立的内容条目。
article标签是可以嵌套使用的,比如一篇文章之后的评论就可以嵌套放在表示文章的article元素之内。
范例:
<article> <header> <h1>文章标题</h1> </header> <p>文章正文</p> </article>
标签:section
section标签表示文档或者应用当中的一个章节片断。章节片断可以带有自己的heading。
section可以用来表示文章的章节,一个标签页。一个网站的首页可以通过section分为介绍、新闻、联系方式等等部分。
section可以嵌套使用。
范例:
<article> <header> <h1>标题</h1> </header> <section> <h1>章节一标题</h1> <p>章节一段落</p> </section> <section> <h1>章节二标题</h1> <p>章节二段落</p> </section> </article>
article还是section?
套用HTML5规范里的一句话:A section forms part of something else. An article is its own thing. 意思就是说section总是多次出现的,因为每个section是若干sections的一部分。而article很独立,一个页面可以只有一个article。
标签:nav
nav包含导航链接的片段。
范例:
<nav> <p><a href="/">Home</a> <p><a href="/biog.html">Bio</a> <p><a href="/discog.html">Discog</a> </nav>
标签:aside
aside标签代表与正文内容无关的部分。可以是边栏上引述的文字内容,广告,也可以包含nav元素。判断是否使用aside标签就看其包含的内容是否属于住文档流中。
范例:
<h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>
标签:header
header表示当前所在段落、章节的介绍性信息以及导航链接信息,一般情况下会包含h1-h6,但也可以不包含,也可以使用其他元素来表示其中内容。
强调一点,html中h1-h6是真正的标题(heading),header则是包含介绍性的信息(例如目录、搜索框、logo等),其中可以包含标题,也可以不包含。
范例:
<article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article>
标签:footer
footer标签表示页脚,通常包含文章的作者、相关信息的链接、版权信息等等。footer可以包含整段的附录信息、索引信息、版本更新记录、许可协议。footer通常都是出现在内容的最后,但也不一定。
范例:
<article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article>
标签:address
address标签表示与article或者body所包含内容相关的联系信息。注意address并不是一般意义上的地址,除非这个地址与联系信息相关(例如文章里提到了某个地址,就不能用address标签来描述)。address只得包含联系信息。
范例:
<address> <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, contact persons for the <a href="Activity">W3C HTML Activity</a> </address>
每天学一点儿HTML5的新标签的更多相关文章
- HTML5部分新标签属性及DOM扩展元素
HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...
- HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案
一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...
- HTML5的新标签之一的Canvas
一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 [ ...
- html5的新标签
header,section,footer,aside,nav,main,article,figure 在使用的时候,需要先把这个元素变为块级元素,确保在老的浏览器里面可以使用.因为在浏览器检测到未知 ...
- html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式
html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...
- HTML5的新标签-整体布局
过去:<div class="header"> <div class="hgroup"> <h1>....</h1&g ...
- 学习HTML5之新特性标签一览(详细)
HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...
- HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- HTML5的新语义化的标签
在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...
随机推荐
- Maven 添加jdk编译插件
问题描述: 默认情况下,eclipse的maven项目使用jdk1.5编译,而我们的jdk为1.8每次更改jdk1.5之后,只要maven项目已更新,eclipse就会自动的回到jdk1.8结局方法: ...
- css border-bottom(指定下边线的样式、宽度及颜色)
border-bottom(指定下边线的样式.宽度及颜色) border-bottom: 值: border-bottom-style:值; border-bottom-color: 值; borde ...
- Python3 open()函数参数
open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True, opener=No ...
- 测试运行kafka的时候缺少包的错误
把kafka安装好了,在开启Kafka producer生产者,消费者的时候报这个错误 解决方法: 下载slf4j-1.7.6.ziphttp://www.slf4j.org/dist/slf4j-1 ...
- 解决npm下载包失败的问题
在我朝,用npm直接从官方的镜像下载包,经常会出现网络超时下载失败的问题,具体原因大家都懂,我就不说了. 不过,这些都无法阻挡我们对知识的渴望,一下提供几种我在工作中的解决办法,希望能帮助你. 1.安 ...
- ORM Nhibernate框架在项目中的配置
在项目中使用 Nhibernet 时,一定要将 配置文件 .xml 编译方式设置为 嵌入式资源,否则在运行项目时就会出现错误. 以下是hibernate.cfg.xml 的配置,在配置中使用的是 M ...
- node进阶之用流实现上传文件
内容: 1.文件上传基础 2.node文件处理机制 3.用流实现文件上传 1.文件上传基础 前端代码: <form action="localhost:8080/" meth ...
- 写了个TP5下PHP和手机端通信的API接口校验
写了个PHP和手机端通信的API接口校验 直接发函数吧 public function _initialize() { //定义密码和盐 $password="123456"; $ ...
- 35. CentOS-6.3安装拼音输入法
安装方法: su root yum install "@Chinese Support" // 安装中文输入法 exit 装好后,在“系统-->首选项”就会看到有“ ...
- node 把前台传来的base64码转成图片存放
最近做个人网站头像修改用到了,在做头像修改,先做了一个图片切割,只需要上传你选中部分, 如图 这种需求 应该还是会遇到的, http://pan.baidu.com/s/1boVkn1t 这是裁剪图片 ...