HTML5新增的非主体结构元素
2016-03-17 14:23
453 查看
1.header元素:
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格,搜索表单或相关的logo图片。header元素可以出现多次。
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header元素</title>
</head>
<body>
<header>
<h1>IT最新技术</h1>
<a href="http://www.baidu.com">百度</a>
<nav>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">开发</a></li>
</ul>
</nav>
</header>
</body>
</html>
2.footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。
3.hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,比如一个内容区块的标题及其子元素算一组。
4.address元素
address元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字,他们的网站链接,电子邮箱,真实地址,电话号码等。address应该不止用来呈现电子邮箱或真实地址,还用来展示文档相关的联系人的所有联系信息。
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格,搜索表单或相关的logo图片。header元素可以出现多次。
[html] view
plain copy
print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header元素</title>
</head>
<body>
<header>
<h1>IT最新技术</h1>
<a href="http://www.baidu.com">百度</a>
<nav>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">开发</a></li>
</ul>
</nav>
</header>
</body>
</html>
2.footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。
3.hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,比如一个内容区块的标题及其子元素算一组。
4.address元素
address元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字,他们的网站链接,电子邮箱,真实地址,电话号码等。address应该不止用来呈现电子邮箱或真实地址,还用来展示文档相关的联系人的所有联系信息。
相关文章推荐
- HTML5 - 使用<time>标注日期和时间
- HTML5 - 页面结构相关的新语义元素汇总
- HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)
- HTML5 - 让老浏览器支持新语义元素的几种方法
- html5 图片转base64预览显示
- HTML5 - 在线检测网页在各种浏览器下的效果
- HTML5 - 使用Geolocation(地理定位)获取用户的位置
- HTML5 - 用<figure/>添加插图和图题
- HTML5新增的主体结构元素
- HTML5 - 简单的上下布局页面样例
- HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)
- HTML5 - 使用polyfill(腻子脚本)填补旧浏览器对html5的支持缺陷
- HTML5 - 各大浏览器对html5的支持情况
- 使用ionic框架的<ion-scroll>进行水平滚动时,导致页面难以上下滑动的解决方案
- 关于html5不支持frameset的解决方法
- 第一次
- html/html5
- html5响应式布局案例
- html5拖放本地资源
- html5拖放