HTML5和CSS3基础教程(第8版）-读书笔记(4)

第16章 表单

表单有两个基本组成部分：访问者在页面上可以看见并填写的控件、标签和按钮的集合；以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本。

基本的表单字段类型包括文本框、单选按钮、复选框、下拉菜单、更大的文本区域。

16.2　创建表单

每个表单都以 form 开始标签开始，以form 结束标签结束。两个标签之间是组成表单的说明标签、控件和按钮。每个控件都有一个 name属性，用于在提交表单时对数据进行识别。访问者通过你提供的提交按钮提交表单——触发提交按钮时，他们填写的数据就会发送至服务器上处理数据的脚本。

<form method="formmethod" action="script.url">

创建表单的内容（包括一个提交按钮）

</form>

其中，formmethod 是get 或者 post，script.url 是提交表单时要运行的脚本在服务器上的位置。

可以对 form 元素应用 novalidate属性，关闭表单的 HTML5 验证特性。

method="get" 与method="post" 的区别

如果对表单使用 method="get"，那么表单提交后，表单中的数据会显示在浏览器的地址栏里。通常，如果你希望表单提交后从服务器得到信息，就使用get。由于数据出现在URL 中，因此用户可以保存搜索查询，或者将查询发给朋友。

如果对表单使用 method="post"，那么提交表单后，表单中的数据不会显示在浏览器的地址栏里，这样更为安全。同时，比起 get，使用 post 可以向服务器发送更多的数据。通常，post用于向服务器存入数据，而非获取数据。因此，如果需要在数据库中保存、添加和删除数据，就应选择post。

通常，如果不确定使用哪一种，就使用post，这样数据不会暴露在URL 中。

16.4　对表单元素进行组织

如果表单上有很多信息需要填写，可以使用fieldset 元素将相关的元素组合在一起，使表单更容易理解。还可以使用 legend 元素为每个 fieldset 提供一个标题（caption），用于描述每个组的目的，有时这些描述还可以使用 h1 ～ h6 标题。

16.5　创建文本框

创建文本框：

如果需要，输入用于让访问者识别文本框的标签，例如

<label for="idlabel">Last Name:</label>。

输入<input type="text" name=" dataname" />，这里的dataname是用于让服务器（和脚本）识别输入数据的文本。有以下可选属性：

• id="idlabel"，这里的idlabel 跟label元素中for 属性的文本一样。这跟具有显式文本框的label 元素关联。
• value="default"， default 是这个字段中最初显示的数据，如果访问者没有输入别的内容的话，这一数据将被发送到服务器。
• placeholder=" hinttext"， hinttext 是这个字段中最初显示的数据，用于指导用户的输入。当input元素获得焦点时，这些文本将会消失，让用户输入内容。
• required="required"，表示仅在这个字段有值的情况下才能提交表单。
• autofocus或autofocus= "autofocus" （在HTML5中这两种方法均可）。如果这是第一个拥有此属性的表单控件，input 元素在页面加载时会默认获得焦点。
• size="n" 定义文本框的大小， n 是需要设置的文本框宽度，以字符为单位。也可以使用 CSS 设置输入框的宽度。
• maxlength="n"， n 是该文本框允许输入的最大字符数。

默认情况下，大多数浏览器会保存用户输入的文本，这样就可以在日后节省用户输入的时间。可以通过对 input 添加 autocomplete="off"来关闭这一特性。如果将它用于 form 元素，例如，<form method="post" action="process.php" autocomplete="off">），那么其中的每个字段都会这样。

分隔表单元素：对各个表单元素进行分隔有很多方法。我们大多数情况下使用 p 元素，还有一些情况下使用 div 元素（譬如嵌套 p 的情况）。此外，有的人使用ol或ul来组织表单的元素。

16.6　为表单组件添加说明标签

标签 （label）是描述表单字段用途的文本。

label 元素有一个特殊的属性：for。如果 for 的值与一个表单字段的 id 的值相同，

该 label 就与该字段显式地关联起来了。这对提升表单的可用性和可访问性都有帮助。

id、for 和 name 属性的命名习惯：对于包含多个单词的值，我们在 for 和 id 中使用连字符（-）分隔各个单词，在name 中使用下划线（_）。

16.7　创建密码框

密码框是通过带有type="password"的input标签表现出来的。

密码框提供的唯一保护措施就是防止其他人看到用户输入的密码。如果要真正地保护密码，可以使用安全服务器（https://）。

16.8　创建电子邮件框、搜索框、电话框和 URL 框

电子邮件、电话和 URL 这几种输入类型是 HTML5 中新增的。它们看起来同文本框很相似，但却有一些小而有用的特性，用于帮助验证和输入内容。

• 电子邮件框，通过带有type="email"的input标签表现出来的。
• 搜索框，通过带有type="search"的input标签表现出来的。
• 电话框，通过带有type="tel"的input标签表现出来的。
• URL框，通过带有type="url"的input标签表现出来的。

电子邮件框也可以使用 multiple 属性，这样就可以输入多个电子邮件地址（以逗号分隔不同的地址）。

浏览器不会检查输入的电子邮件地址或URL是否真实存在，它只检查格式是否正确。

这些输入类型也支持 autocomplete 属性

16.9　创建单选按钮

创建单选按钮的步骤：

(1) 如果需要，输入单选按钮的介绍文本。

(2) 输入<input type=" radio" name=" radioset" id="idlabel" />。其中，

name=" radioset"，这里的radioset用于识别发送至服务器的数据，同时用于将多个单选按钮联系在一起，确保同一组中最多只有一个被选中。

id="idlabel"，这里的idlabel对应在第 (3) 步中创建的 for 属性值。

输入value="data"，这里的data 是该单选按钮被选中（无论是被默认选中还是被访问者选中）时要发送给服务器的文本

如果需要，输入checked或者checked= "checked" 让该单选按钮在页面打开时默认处于激活状态（两种方法在 HTML5 中均可）。在一组单选按钮中，只能对一个按钮添加这一属性。

（3）输入<label for="idlabel">radio label </label>，其中，idlabel 与第 (2) 步中单选按钮的 id 值相同，radio label 则用于让访问者识别该单选按钮。radio label 的值通常与value 的值相同，但这并不是必需的。

推荐使用 fieldset 嵌套每组单选按钮，并用 legend 进行描述。

16.10　创建复选框

在一组单选按钮中，只允许选择一个答案；但在一组复选按钮中，访问者可以选择任意数量的答案。

复选框，通过带有type=" checkbox"的input标签表现出来的。

16.11　创建文本区域

<textarea name="" id="" cols="30" rows="10">输入文本区域默认文本</textarea>，其中

输入 id="idlabel"，这里的idlabel跟label元素中的 for 属性值相同。

输入 name="dataname"，这里的dataname 是用于让服务器（和脚本）识别输入数据的文本。

如果需要，输入maxlength="n"，这里的n 是可以输入的最大字符数。

输入 cols="n"，这里的n 是文本区域的宽度（以字符为单位）。

输入 rows="n"，这里的n 是文本区域的高度（以行为单位）。

16.12　创建选择框

选择框非常适合向访问者提供一组选项，从而允许他们从中选取。它们通常呈现为下拉菜单的样式。如果允许用户选择多个选项，选择框就会呈现为一个带滚动条的项目框。

1.创建选择框的步骤：

如果需要，输入描述菜单的文本

<select name="dataname" id="idlabel">

<option value="optiondata"></option>

</select>

如果需要，输入 size="n"，这里的n代表选择框的高度（以行为单位）。

如果需要，输入 multiple 或者multiple="multiple"，从而允许访问者选择一个以上的菜单选项。

在option中，如果需要，输入 selected 或者selected="selected"，指定该选项被默认选中。

如果有一个选项很多的特别大的菜单，可能需要对这些选项进行分组，分别放入不同的类别。

2. 对选择框选项进行分组

把希望放在同一子菜单中的一组选项option 元素包含于<optgroup label="submenutitle"> </optgroup>中，这里的submenutitle 是子菜单的标题。

16.13　让访问者上传文件

<form method="post" action="show-data.php" enctype="multipart/form-data">

...

<label for="picture">Picture:</label>

<input type="file" id="picture" name="picture" />

<p class="instructions">Maximum size of 700k. JPG, GIF or PNG.</p>

...

</form>

要让访问者能够上传文件，必须正确地设置enctype属性，创建input type="file"元素。对 input 使用 multiple 属性可以允许上传多个文件（这里并没有包含该属性）。

对于允许上传的表单，不能使用 get方法。

16.14　创建隐藏字段

隐藏字段可以用于存储表单中的数据，但它不会显示给访问者。可以认为它们是不可见的文本框。它们通常用于存储先前的表单收集的信息，以便将这些信息同当前表单的数据一起交给脚本进行处理。

<input type="hidden" name="dataname" value="data" />

不要将密码、信用卡号等敏感信息放到隐藏字段中。即便它们不会显示到网页中，访问者也可以通过查看 HTML 源代码看到它们。

16.15　创建提交按钮

访问者输入的信息如果不发送到服务器，就没什么用。应该总是为表单创建提交按钮，让访问者可以将信息交给你。提交按钮可能呈现为文本、可能是图像，也可能是两者的结合。

1. 创建提交按钮

<input type="submit" value="submit message">，这里的submit message 是将要出现在按钮上的文本。

2. 创建带图像的提交按钮

有时设计师会创建一些超出 CSS3 能力（如渐变、阴影、圆角等）的按钮样式。这时，可以使用仅包含图像的input元素来提交表单。

<input type="image" src="data:image.url" alt="description">

3. 创建结合文本和图像的提交按钮

使用 button 元素可以创建包含其他HTML 元素（而并非仅包含简单的文本值或图像）的按钮。（如果要使用 button 元素，注意考虑 IE8 之前的IE的兼容性问题）

<button type="submit" >

···出现在图像左侧的文字

<img src="data:image.url" alt="alternate text " />

···出现在图像右侧的文字

</button>

如果有多个提交按钮，可以为每个按钮设置 name 属性和 value 属性，从而让脚本知道用户按下的是哪个按钮。否则，最好省略name 属性。

可以使用button元素创建不包含图像的提交按钮。任何时候，如果你的表单需要一个以上的提交按钮，就应避免使用 button元素，因为针对这种情况，不同浏览器的行为并不完全一致。

表单还可以有重置按钮，用于将表单数据还原为页面加载时（在访问者填写表单之前）的样子。创建重置按钮可以使用<input type="reset" />或<button type= "reset">Reset</button>。

16.16　禁用表单元素

在某些情况下，你可能不想让访问者使用表单中的某些部分。禁用表单元素的方法：在表单元素的开始标签后输入 disabled或者 disabled="disabled"

禁用表单元素的值不会发送到服务器，如果使用键盘在页面中导航，它也会被跳过。

16.17　根据状态为表单设置样式

CSS 提供了一些根据表单元素状态设置其样式的伪类。其中的大多数都是 CSS3 新增的。

选择器          应用              浏览器支持情况

:focus  获得焦点的字段              IE8+及其他

:checked 选中的单选按钮或复选框       IE9+ 及其他

:disabled 具有disabled 属性的字段     IE9+及其他

:enable 与:disabled 相反              IE9+及其他

:required 具有required 属性的字段     IE10+、Safari 5+及其他

:optional 与:required 相反             IE10+、Safari 5+及其他

:invalid 其值与 pattern 属性给出的模式不匹配的字段；或值不是有效电子邮件格式的电子邮件框，值不是有效URL格式的URL框，以及任何标记为 required 但值为空的字段（参见提示）   IE10+、Safari 5+及其他

:valid 与:invalid 相反     IE10+、Safari 5+及其他

第17章 视频、音频和其他多媒体

17.2　视频文件格式

HTML5 支持三种视频文件格式：

• Ogg Theora 使用的文件扩展名为 .ogg或 .ogv，支持它的浏览器包括 Firefox 3.5+、Chrome 4+、Opera 10.5+ 以及Android 版 Firefox。
• MP4（H.264）使用的文件扩展名为.mp4 或 .m4v，支持它的浏览器包括Safari 3.2+、Chrome 4-?（参见提示）、Internet Explorer 9+、iOS（Mobile Safari）和 Android 2.1+、Android 版Chrome、Android 版 Firefox 和 Opera Mobile 11+。
• WebM 使用的文件扩展名为 .webm，支持它的浏览器包括 Firefox 4+、Chrome 6+、Opera 10.6+、Android2.3+、Android版Chrome、Android版Firefox和Opera Mobile 14。

在有的浏览器中，如果没有设置正确的 MIME 类型，媒体文件就不会播放。如果你的网站运行在 Apache Web 服务器上（很可能是它），可以通过 .htaccess 文件设置 MIME 类型。它是一个文本文件，通常与主页一起位于网站的根目录。

这是可以在.htaccess 文件中添加的MIME类型（可以使用文本编辑器编辑该文件）。

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

AddType audio/ogg .ogg

AddType audio/mp3 .mp3

17.3　在网页中添加单个视频

要在 HTML5 网页中添加视频，需要使用新的video 元素。

输入<video src=" my-video.ext"></video>，这里的my-video.ext 是视频文件的位置、名称和扩展名。

默认情况下，视频会暂停在第一帧，目前我们得到的视频没有播放按钮，也就是不能观看！

video元素有下列属性：

• src（源） 指定视频文件的URL
• autoplay（自动播放） 当视频可以播放时立即开始播放
• controls（控件） 添加浏览器为视频设置的默认控件
• muted（静音） 让视频静音
• loop（循环） 让视频循环播放
• poster（海报） 指定视频加载时要显示的图像（而不显示视频的第一帧）。接受所需图像文件的URL
• width（宽度） 视频的宽度（以像素为单位），通常默认为300
• height（高度） 视频的高度（以像素为单位），通常默认为150
• preload（预加载） 告诉浏览器要加载的视频内容的多少。可以是以下三个值：
• none 表示不加载任何视频
• metadata 表示仅加载视频的元数据（如长度、尺寸等）
• auto 表示让浏览器决定怎样做（这是默认的设置）

17.4　为视频添加控件和自动播放

1. 为视频添加控件

<video src="my-video.ext" controls> </video>

2. 为视频添加自动播放

<video src="my-video.ext" autoplay controls></video>

17.5　  为视频指定循环播放和海报图像

1. 为视频添加自动播放和循环播放

<video src="my-video.ext" autoplay loop></video>

2. 为视频指定海报图像

<video src="my-video.ext" controls poster="my-poster.jpg"></video>，其中，my-poster.jpg

是想用做海报图像的图像。

17.6　阻止视频预加载

如果认为用户观看视频的可能性较低（如该视频并不是页面的主要内容），那么可以告诉浏览器不要预先加载该视频。这样能节省带宽，尤其对于移动设备用户来说好处多多。

<video src="my-video.ext " preload="none" controls></video>

preload 的默认值是auto。这会让浏览器具有用户将要播放该视频的预期，从而做好准备，让视频可以很快进入播放状态。浏览器会预先加载大部分视频甚至整个视频。

17.7　使用多种来源的视频和备用文本

要获得所有兼容HTML5的浏览器的支持，至少需要提供两种格式的视频：MP4和WebM。这时就要用到 HTML5 的source 元素了。通常，source 元素用于定义一个以上的媒体元素。

<video width="369" height="208" controls>

<source src="my-video.mp4" type="video/mp4">

<source src="my-video.webm"type= "video/webm">

···为旧浏览器输入备用链接或者备用文本信息

</video>

当浏览器发现 video 元素时，首先会查看该元素本身是否定义了 src。如果没有，就会检查 source 元素。浏览器会逐个查看这些来源，直到找到它可以播放的一个来源。一旦找到这样一个，就会播放它并忽略其他的来源。

既不识别 video 元素又不识别 source 元素的浏览器（即不支持 HTML5 的浏览器）在解析文档时会完全忽略这些标签，它只会显示在 video 元素结束标签之前输入的文本。

17.9　音频文件格式

HTML5 也支持大量不同的音频文件格式（编解码器）。

• gg Vorbis 使用的文件扩展名为.ogg，支持它的浏览器包括 Firefox 3.5+、Chrome 5+和Opera 10.5+。
• MP3 使用的文件扩展名为 .mp3，支持它的浏览器包括 Safari 5+、Chrome 6+、Internet Explorer 9+和 iOS。
• WAV 使用的文件扩展名为 .wav，支持它的浏览器包括 Firefox 3.6+、Safari 5+、Chrome 8+和Opera 10.5+。
• AAC 使用的文件扩展名为 .aac，支持它的浏览器包括 Safari 3+、Internet Explorer 9+、iOS 3+和 Android 2+。
• MP4 使用的文件扩展名为 .mp4，支持它的浏览器包括 Safari 3+、Chrome 5+、Internet Explorer 9+、iOS 3+ 和Android 2+。
• Opus 使用的文件扩展名是 .opus。这是一种新的音频文件格式，在本书写作之时只有Firefox 支持。

确保获得所有兼容HTML5 的浏览器的支持。对于音频，最好的两种格式是 Ogg Vorbis和 MP3。

17.10　在网页中添加带控件的单个音频文件

在网页中添加带控件的单个音频文件的步骤：

‰ <audio src=" my-audio.ext" controls> </audio>，其中的my-audio.ext 是音频文件的位置、名称和扩展名。

可用于 audio 元素的属性

• src（源） 指定音频文件的URL
• autoplay（自动播放） 当音频可以播放时立即开始播放
• controls（控件） 添加浏览器为音频设置的默认控件
• muted（静音） 让音频静音
• loop（循环） 让音频循环播放
• preload（预加载） 告诉浏览器要加载的音频内容的多少。可以是以下三个值：
• none 表示不加载任何音频；metadata 表示仅加载音频的元数据（如长度）；auto表示让浏览器决定怎样做（这是默认的设置）

17.11　自动播放、循环和预加载音频

1. 为音频文件添加控件并让其自动播放

<audio src="my-audio.ext" autoplay controls></audio>，这里的my-audio.ext 指向你的音频文件。如果省略 controls 属性，音频文件会自动播放，但不会显示在浏览器页面上。

2. 让音频文件循环播放

<audio src="my-audio.ext" loop controls></audio>

3. 让浏览器仅预加载音频元数据

<audio src="my-audio.ext " preload="metadata" controls></audio>

可以对 audio 元素包含 autoplay、loop 和 preload 属性的任意组合。注意，包含autoplay属性会覆盖preload属性的设置，因为只有加载音频文件才能播放。

17.12　提供带备用内容的多个视频源

<audio controls>

<source src="piano.ogg" type="audio/ogg">

<source src="piano.mp3" type="audio/mp3">

<p>

Your browser doesn't support HTML5 audio, but you can

<a href="piano.mp3">download the audio file</a> (MP3, 1.3 MB).

</p>

</audio>

type 属性可以帮助浏览器判断它是否能播放某个文件。对音频文件来说，其总是 audio/ 加上格式本身，包括 audio/ogg、audio/mp3、audio/aac、audio/wav 和audio/mp4。

17.13　添加具有备用Flash的视频和音频

除了可以提供下载链接作为备用方案，还可以（或许可以说应该）嵌入一个能播放MP4 视频文件的 Flash 备用播放器。

Internet Explorer 8 等浏览器会忽略audio和 source 元素，直接使用备用 Flash 播放器。

17.14　高级多媒体

使用 canvas 元素及相应的 JavaScript API可以在网页上描制并创建动画。

人们关注的另一项与HTML5有关的技术是 SVG（Scalable Vector Graphic，可缩放矢量图形）。

第18章 表格

18.1　结构化表格

<table>

<caption>输入对表格的描述</caption>

<thead> <!-- 表格头部 -->

<tr>

<th scope="col">列标题单元格</th>

<th scope="col">1962</th>

<th scope="col">1963</th>

</tr>

</thead>

<tbody> <!-- 表格主体 -->

<tr>

<th scope="row">行标题单元格Q1</th>

<td>$145</td>

<td>$167</td>

</tr>

<tr>

<th scope="row">Q2</th>

<td>$140</td>

<td>$159</td>

</tr>

... [Q3 and Q4 rows] ...

</tbody>

<tfoot> <!-- 表格尾部 -->

<tr>

<th scope="row">TOTAL</th>

<td>$595</td>

<td>$648</td>

</tr>

</tfoot>

</table>

其中，<th scope="scopetype"> 是开始标题单元格（scopetype 可以是 col、row、colgroup 或 rowgroup）

如果包含了 caption 元素，那么它必须是table中的第一个元素

如果包含了 thead 或 tfoot，则必须包含 tbody。tbody 不能位于 thead 之前。一个 table 只能拥有一个 thead 和一个 tfoot，但可以有多个 tbody 元素。

如果 table 是嵌套在 figure 元素内除 figcaption 以外的唯一元素，则可以省略caption，使用 figcaption 对表格进行描述。注意，不要在 table 中嵌套figcaption，而应跟往常一样将 figcaption放在 figure 中。

可以通过 scope 属性指定 th 为一组列的标题（使用scope="colgroup"），或者为一组行的标题（使用scope="rowgroup"）。

18.2　让单元格跨越多列或多行

可以通过 colspan 和 rowspan 属性让 th或 td 跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量。

如果创建了一个跨越两列的单元格，在该行就应该少定义一个单元格；如果创建了一个跨越三列的单元格，在该行就应该少定义两个单元格，以此类推。

如果创建了一个 rowspan 等于 2的单元格，就不需要定义下一行中该单元格对应的单元格了；如果创建了一个 rowspan 等于 3的单元格，就不需要定义下面两行中该单元格对应的单元格了，以此类推。