HTML5的结构学习(2) --- 新增的非主体结构元素
除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素:
1.header
解释:一种具有引导和导航作用的结构元素。
用途:通常用来放置整个页面或者页面内某一内容区块的标题部分。如标题名称、logo图片等。
<header><h1>大标题</h1></header> <article> <header><h1>文章内容标题</h1></header> <p>正文内容</p> </article>
在html5中一个header元素至少要包含一个heading元素(h1~h5)或者新增的hgroup元素。
<header> <hgroup> <h1>Paper的博客</h1> <a href="xxx"> xxx </a> <a href="#">[订阅]</a> <a href="#">[手机订阅]</a> </hgroup> <nav> <ul> <li>首页</li> <li>博文目录</li> <li>图片</li> <li>关于我</li> </ul> </nav> </header>
2.hgroup
解释:是将标题和其子标题分组的元素
用途:包含一组标题
<article> <header> <hgroup> <h1>主标题</h1> <h2>子标题</h2> </hgroup> <p> <time datetime="2014/09/19"> 2014年9月19日 </time> </p> </header> <p>正文内容</p> </article>
注意:文章只有一个标题时不需要使用hgroup
3.footer
解释:作为上层父级区块或者根区块的一个注脚
用途:一般用来包括作者或者链接的相关信息,网站版权等等注脚信息。
<footer> <ul> <li>版权信息</li> <li>站点地图</li> <li>联系方式</li> </ul> </footer>
注意:footer元素同时也可以存在于section和article区块中,用来表示section区块或者article内容的注脚信息。
4.address
解释:用来在文档中呈现联系信息
用途:用来表示文档作者的名字、网站链接、邮件地址和电话号码等。
比如说网站中的友情链接:
<aside> <address> <a href="xxx">同志a</a> <a href="xxx">同志b</a> <a href="xxx">同志c</a> </address> </aside>
HTML5的结构学习(2) --- 新增的非主体结构元素的更多相关文章
- HTML5新增的主体元素和新增的非主体结构元素
HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...
- HTML5新增的非主体结构元素
-------------------siwuxie095 HTML5 新增的非主体结构元素 1.header 元素 ...
- [html5]学习笔记一 新增的非主体结构元素
html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素. 1.header元素 header元素是一种具有引导和导航作用的结构元素, ...
- HTML5的结构学习(1) --- 新增的主体结构元素
1.article 元素 解释:代表文档.页面和应用程序中独立的.完整的.可以被独自引用的内容. 主要用途:博客中的文章.评论,贴吧中的帖子,或者独立的插件等. article中可以包含多种元素例 ...
- HTML5的结构学习(3) --- 综合运用
前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读 ...
- html5中新增的非主体结构的元素
html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...
- html5中新增非主体结构元素
1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...
- H5非主体结构元素
1.header元素:页面中一个内容区块或整个页面的标题: 具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含数据表格.搜索表单或相关的logo图片. 一个网页 ...
- html5的结构
目录 一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素 二.新增的非主体结构 ...
随机推荐
- (原)opencv直线拟合fitLine
转载请注明出处 http://www.cnblogs.com/darkknightzh/p/5486234.html 参考网址: http://blog.csdn.net/thefutureisour ...
- 数据库操作CURD
JDBCCURD操作实例 19. 五 / J2EE / 没有评论 代码目录结构: domain javabean: util 工具类 jdbcUtil是连接数据mysql数据库的工具类 ...
- float的理解
1.浮动包裹性——浮动具有让元素按displya:inline-block显示(如果没有设置宽度和高度,则它可以显示的尽量窄高 度尽量小).2.浮动破坏性——浮动元素漂浮在标准流之上(但没有脱离文档流 ...
- 关于《Cocos2d-x建工程时避免copy文件夹和库》的更新
在前几篇博文中大概了解了Cocos2d-x引擎的基本结构后打算开始实际操作,便在网上转载了一篇关于VS新建Cocos2d-x项目的文章.今天实际操作的时候发现博主使用的引擎版本和我的不一致(<C ...
- 傻瓜式硬盘重装win7系统图文加视频教程
标准适用环境: win7系统还能用,但是想重装win7系统.[当然win7进不去也可以在PE进行] 其它 需要工具: win7 ISO镜像 | [ w ...
- C#设置标记方法等为否决的不可用
C#如何标记类里面的方法或者类为否决的,不可使用.在VS IDE编辑器中使用此方法或者类时会用绿色的波浪线标记这个语句,当移动鼠标到这句代码上时,会出现[否决的]方法名,警告“方法名称”已过时: ...
- C#开发SQLServer的Geometry和Geography存储
原文:C#开发SQLServer的Geometry和Geography存储 SQL Server2008推出后最大的变化就是提供了支持空间数据存储的Geometry和Geography,这个也是如果将 ...
- Vitamio视频播放
activity代码 package com.hck.player.ui; import io.vov.utils.StringUtils; import io.vov.vitamio.LibsChe ...
- Android 圆形按钮实现
项目中用到的圆形按钮,做个半天,用sharp形式实现,样式代码如下: <Button android:id="@+id/btn_5" android:layout_width ...
- UVA 712-S-Trees(满二叉树的简单查询)
题意:给一棵满二叉树,叶子节点赋予权值,0或者1,对于每个查询输出叶子节点的权值,每个查询0代表往左走,1代表往右走,这题坑的地方是层的访问顺序,如第二组测试,由上到下依次是x3,x1,x2,假如给一 ...