最近一直在看《html5与css3权威指南》这本书,后续会将看完本书的一些笔记详细的记录下来。
新增的主体结构元素
1.1 article元素代表文档、页面或应用程序中独立完整的,可以独自被外部引用的内容。
- 有它自己的标题,有时还有自己的脚注。
- 可以嵌套使用。内层内容原则上需要与外层内容想关联。
1.2 section元素对网站或应用程序中页面上的内容进行分块。
- 通常由内容及其标题组成。
- 当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。
article元素可以看成是一种特殊种类的section,比section更强调独立性。即section元素强调分段或分块,article强调独立性。
具体来说,如果一块内容独立,完整使用article,将一块内容分为几段使用section。
section使用禁忌
- 不要将section用作设置样式的页面容器,那是div的工作。
- 如果article元素,aside或nav更符合条件,不要用section。
- 不要为没有标题的内容区块使用section元素。
1.3 nav元素 用作页面导航的链接组。一个页面可以有多个nav。
1.4 aside元素 当前页面或文字的附属信息部分。
它可以包含与当前页面或主要内容相关的引用,侧边栏,广告,导航条,以及其他类似的有别于主要内容的部分。
1.5 time元素与微格式
微格式是一种利用html的class属性来对网页添加附加信息的方法。
time元素表示24小时中的某个时刻或某个日期,表示时刻时允许带时差,它可以定义很多格式的日期和时间。eg:
<time datatime ="2013-08-15">2013年08月15日</time> <time datatime ="2013-08-15T20:00">2013年08月15日晚上8点</time> <time datatime ="2013-08-15T20:00+09:00">2013年08月15日晚上8点的美国时间</time>
1.6 pubdate属性 一个可选的,boolean值的属性,它可以用到article元素中的time元素上,表明哪个time元素代表了通知的发布日期。
新增的非主体结构元素
2.1 header元素 具有引导和导航作用的结构元素。通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,如数据表格,搜索表单或者相关的logo图片。
2.2hgroup元素 将标题及其子标题进行分组的元素。一个内容区块的标题及其子标题算一组。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>hgroup元素示例</title> </head> <article> <header> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> <p><time datetime="2010-03-20">2010年10月29日</time></p> </header> <p>文章正文</p> </article>
2.3 footer元素可以作为其上层父级内容区块或一个根区块的脚注。
2.4 address元素 呈现联系信息。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>address元素示例</title> </head> <address> <a href=http://***>张三</a> <a href=http://***>王二</a> <a href=http://***>李四</a> </address>
相关推荐
html5结构图canvas绘制组织结构图框架代码 html5结构图canvas绘制组织结构图框架代码
HTML5结构图图解,用图片描述跟容易表达清楚详细的内容,意思也更加明白
第4章---使用HTML5结构标签ppt课件(全).ppt
HTML 5结构元素 这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。有了它们,代码编写者不再需要为id的命名...
...
...
html5知识结构图html5知识结构图html5知识结构图html5知识结构图
HTML 5结构元素 这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。有了它们,代码编写者不再需要为id的命名...
1.3 HTML的基本结构 5 1.3.1 HTML文件的编写方法 5 1.3.2 文件开始标签<html> 7 1.3.3 文件头部标签<head> 7 1.3.4 文件标题标签<title> 7 1.3.5 文件主体标签<body> 7 1.3.6...
一个关于html5的技术讲解文档,主要目录如下: 第1章 主要结构 [head] 使用新的html 5结构化元素 使用css样式化html 5 何时使用新的html 5结构化元素 小结 第2章 文本 构造主要内容区域 添加博客...
使用html5编写的博客结构,非常适合初学者下载下来学习
本文从页面的doctype说起,到用HTML 5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知,如果你有兴趣,那就打开你的IDE,写上一段由HTML...
一、html5页面结构 二、html5标记 三、html5结构化语义元素 四、表单 五、html5媒体元素:audio和video 六、html5绘图API 七、html5 Canvas
HTML5化学分子结构动画特效是一款HTML55化学分子动画,Canvas分子结构背景。
html5+ECharts绘制的一款企业内部组织结构图代码,集团公司组织架构图。支持画辅助线、保存为图片等功能。
HTML5网状结构节点动画特效是一款基于canvas绘制网状节点跟随鼠标悬停背景动画特效。
HTML5_canvas动态画出视图树,HTML5_canvas绘制动态树视图 类似结构图的形式,点击新增节点即可以自动生成 树状图形,可通过删除节点删除树节点。
认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf认识HTML5网页结构.pdf
1.如何理解HTML5结构语义化? 2.html5的新特性? 3.请描述一下cookies,sessionStorage和localStorage的区别? 4.浏览器的渲染机制一般分为几个步骤? …… 二.CSS面试题 1.display: none; 与visibility: hidden;的区别 ...