HTML5系列之启动篇--语义化标签
2016-09-11 10:22
453 查看
切面试的时候,经常都被问到H5的东西,想了一下,还是总结总结吧。之前听人说H5很牛,其实因为很多是配合了CSS3才形成了那么炫酷的效果,买了一本H5的书,才发现最开始认识的H5还是很初级,特别在应用上面,往往就知道几个语义化标签、一些新增的表单元素及属性,还有画布,但是H5真的只有这些吗?我想不是的。闲话不说了,回归正题啦~~~~
2、结构图:
3、标签元素:
1)header:标题,可重复使用;
2)hgroup:对区段(section)的标题进行组合;
3)nav:页面的链接区域,主要的导航区域;
4)section:定义大块的内容,如关键的文章区块,当然区块可以有自己的标题、导航;
5)article:标记独立可发布的内容,如博客文章等;
6)aside:页面中独立于主要内容的区域,如边栏之类的;
7)mark:展示文档中应被标记或者突出显示的文本,CHROME默认是黄色的填充色
8)figure:独立的流内容,比如图像、图表、照片、代码等,与主内容有关,但删除后对主文档不会有其他影响;
9)figcaption:figure的标题内容;
10)footer:页尾区域,通过包含链接、版权信息等
(一)语义化标签
1、作用:方便搜索引擎或辅助技术(如屏幕阅读器)更好理解页面;2、结构图:
3、标签元素:
1)header:标题,可重复使用;
2)hgroup:对区段(section)的标题进行组合;
<header> <hgroup> <h1>my name </h1> <h2>my slogan</h2> </hgroup> </header>
3)nav:页面的链接区域,主要的导航区域;
<nav> <ul> <li>demo1</li> <li>demo2</li> <li>demo3</li> </ul> </nav>
4)section:定义大块的内容,如关键的文章区块,当然区块可以有自己的标题、导航;
5)article:标记独立可发布的内容,如博客文章等;
<section> <header> <h1>title</h1> <p>publish by Jole</p> </header> <article> blog content </article> </section>
6)aside:页面中独立于主要内容的区域,如边栏之类的;
7)mark:展示文档中应被标记或者突出显示的文本,CHROME默认是黄色的填充色
8)figure:独立的流内容,比如图像、图表、照片、代码等,与主内容有关,但删除后对主文档不会有其他影响;
9)figcaption:figure的标题内容;
<figure> <img src="1.jpg" width="304" height="228"> <figcaption>FLOGE IMG</figcaption> </figure>
10)footer:页尾区域,通过包含链接、版权信息等
相关文章推荐
- 转html5语义化标签总结一
- HTML5中 b 和 i 标签将语义化
- HTML5的新语义化的标签
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- Android笔记系列--Activity四种启动模式,常用Flag和标签
- html5系列之nop标签
- Html5 学习系列(三)增强型表单标签
- 第85天:HTML5语义化标签
- HTML语义化:HTML5新标签——template
- HTML5语义化标签
- html5语义化标签总结二
- html5学习系列之ef类标签
- HTML5语义化标签的应用
- html5语义化标签
- html5语义化标签
- html5学习系列之cd标签
- HTML5 新元素标签系列:HTML5 页面中用的重设样式表(CSS)
- html5语义化标签
- html5中的语义化标签
- html5语义化标签使用规范