《Head First HTML与CSS》笔记——12 HTML5标记（关于博客的布局）

前言

这一章先介绍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视频作为退路

小结