HTML5基础知识(一)---标签
2014-09-01 16:55
316 查看
在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记。 我们将创建一个简单的Web页面,该页面包含一个Header区、一个Navigation区、一个Article区(包含三个部分)、一个Aside区和一个Footer区,使用这种结构可以清楚地展示HTML5中新引入的标记,并且可以使用它们创建一个结构清晰、代码优雅的页面。 Header区 我们将使用标记来创建页面中Header区的内容,一般在这部分添加正副标题,当然也可以包含其他的一些重要信息,代码示意如下: 代码清单1.标记正标题
副标题 ....... 标记中还可以包含标记,用来对到的等级别的标题进行分组,代码如下: 代码清单2.标记 主标题 子标题
.......... Navigation区 使用标记创建Navigation区,代码如下: 代码清单3.标记 标题一 标题二 标题三 Article和Section区 在HTML5出现之前,标签是我们使用非常频繁的标签,它本身没有任何语义,仅仅是作为布局以及样式化所用。 HTML5新增了和标签,其实就是语义化的标签,并且div>section>article,其语义是逐渐增强的,如一段主题性的内容,适用于使用标签,而若其可以脱离上下文,作为独立的一段内容,则可以使用标签。 代码清单4.和标记第一板块
新闻一
新闻起因 新闻经过 新闻结果第二板块
新闻二
新闻一
新闻起因 新闻经过 新闻结果 可以这么认为,、、是特殊的,能使用标签的就尽量不要使用,而和等标签之间也是可以相互嵌套的,就如上述代码所示。 Aside区 使用标记可以创建Aside区,该标记作用是容纳一些补充性内容,这些内容不属于文章的一部分。 代码清单5.标记Some Tips
bla bla bla bla.... Footer区 使用标记来说明页面的页尾信息,代码如下: 代码清单6.标记 © 2014 by zbx,scau 新增标记 图像元素 使用元素来包含图像信息,其中还可以包含,用来对图像的文字补充说明。代码如下所示: 代码清单7.标记 文字说明 媒体元素 HTML5中新增了和标签来对媒体元素进行播放,其中是播放声音内容,而是用来播放视频内容中,在标签中还添加了preload、control、loop和autoplay属性来对音频进行播放控制。 代码清单8.标记 Your browser does not support the audio tag. 代码清单9.标记 Your browser does not support the HTML 'audio' element. source标签的作用就是,若wma格式无法播放,则会尝试播放mp3格式的音乐 代码清单10.标记 ? 1 embed标签的元素可以嵌入到页面中的内容,如上述代码所示。 约定俗成 声明 在HTML5中声明统一为:
相关文章推荐
- HTML5基础知识整理(一)—— 新增标签和属性
- html5基础知识第四章其他标签
- HTML5基础知识汇总_(1)标签结构上的整改
- html5基础知识第二章标签
- java基础56 HTML5的标签知识(网页知识)
- HTML5基础知识汇总_(1)标签结构上的整改
- HTML5 基础知识,第 1 部分
- HTML:基础知识介绍和标签
- HTML基础教程第3课-文字标签属性和文字布局相关知识
- (android 基础知识) android中application标签说明
- (Android 基础知识) ActionBar.Tab---导航Tab(标签)
- 无需编程知识,Wix让你零基础打造HTML5页面
- html5基础知识
- html5基础--audio标签元素
- HTML5基础一:常用布局标签
- The address tag(地址标签)这个是html5的知识!
- HTML5 基础知识
- MVC 基础知识之标签
- 关于HTML5的一些基础知识
- [SEO基础知识] 对于Title标签中常见的分隔符的介绍