前言
这一章先介绍HTML5的内容,然后会在前一章的基础上讲解博客的布局
重新考虑HTML结构
在上一章中,不同的模块使用<div>来区分。标准委员会经过仔细研究人们使用<div>元素的习惯,增加了一些新元素来表示这些结构。
HTML5 中的结构
用新的HTML5元素建立博客内容
将上一章设计的Web页面,中间模块的内容改为一个博客内容。下图是博客的设计:
设计博客的元素:
为博客增加一个日期:
添加导航
效果:
在博客中加入视频
可以把视频看作是<img>元素,提供一个src属性来引用视频。不过,视频的元素叫<video>。
视频<video>元素和它的属性
虽然Flash同样可以提供视频技术,不过在一些移动设备上并不支持Flash。
- 对于HTML视频,每个浏览器中提供的控件都不同。
- autoplay让视频自动播放,如果删掉,那么用户必须点击播放才能看到视频。
- controls属性是一个布尔值。如果有这个属性,浏览器就会为视频显示增加内置的控件。
- src属性与<img>元素的src很类似,这是一个url,告诉video元素在哪里查找源文件。
- poster:如果删除autoplay属性,单机播放之前就会看到这个图像。由浏览器显示哪一帧。
- loop:决定视频是否自动重新播放。
- width, height 属性会设置视频显示区(也称“视窗”)的宽和高,如果指定一个海报,海报图像会缩放到你指定的宽度和高度。
preload用于细粒度地控制视频如何加载,来实现优化。如果preload设置为“none”,表示用户播放视频前不下载视频。
关于视频格式
Flash视频作为退路
小结