HTML5与CSS3基础教程第八版学习笔记16-21章_html/css_WEB-ITnose

第十六章，表单

HTML5引入了新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL以及定制模式验证。

元素：

---- 电子邮件框

---- 搜索框

---- 电话框

---- URL框

以下元素得到部分浏览器支持：

---- 日期

---- 数字

---- 范围

----

Grapes ---- \

Pears ---- 数据列表

Kiwi ---- /

----

下面输入或元素得到更少的支持

---- 颜色

---- 全局日期和时间

---- 局部日期和时间

---- 月

---- 时间

---- 周

---- 输出

属性：

属性	总结
accept	限制用户可上传文件类型
autocomplete	对form元素或特定字段添加autocomplete=“off”，将关闭浏览器的自动填写行为
autofocus	页面加载后将焦点放到该字段
multiple	允许输入多个电子邮件地址，或上传多个文件
list	将datalist与input联系
maxlength	指定textarea的最大字符数，文本框在H5之前就支持此属性
pattern	定义一个用户所输入的文本在提交之前必须遵循的模式
placeholder	出现在文本框中的提示文本
required	在提交表单前必须填写该字段
formnovalidate	关闭H5自动验证功能，应用于提交按钮
novalidate	关闭H5自动验证功能，应用于表单元素

注：Ryan Seddon的H5F（ http://github.com/ryanseddon/H5F）可以为旧浏览器提供模仿H5表单行为的js方案

method=“get”，表单提交后，表单中的数据会显示在浏览器地址栏里，数据大小有限制，获取信息等可公开的操作使用get操作

method=”post”，表单提交后，表达数据不会显示在地址栏，可以发送更多的数据，用于在数据库保存，删除，添加数据等敏感操作使用post

对表单元素进行组织

可以使用fieldset元素将相关元素组合在一起，还可以使用legend元素为每个fieldset提供标题，用于描述每个组的目的，这些描述也可以使用h1~h6。如果需要包含legend元素，则它必须是fieldset的第一个元素。

建议：对于单选按钮，最好总是使用fieldset和legend

label标签有一个特殊的属性：for，当for的值与一个表单字段的id值一样时，该label标签就与该字段显示地关联了起来。

for，id，name属性的值都可以是任意值，但对于包含多个单词的值，for，id会使用连字符（-）分隔单词，而name使用下划线（_）连接。

注：必须建立服务端验证，因为客户端的js验证有可能会被禁用，或者不支持H5的新属性。

http://html5pattern.com有很多有用的模式

创建单选按钮

同一组单选按钮的input元素的name属性必须都一样，type="radio"

创建复选框

同一组复选框的input元素的name属性必须都一样，type="checkbox"

创建选择框

1、创建选择框

使用select元素。size=n代表选择框高度，以行为高度，输入multiple或者multiple="multiple"，可以允许访问者选择多个选项。

在select内部使用option元素表示选项。在option元素中，输入selected或者selected="selected"，指定某个选项默认被选中。

2、对选择框进行分组

对多个分在同一组的option元素使用optgroup元素，label属性是子菜单标题。

如果添加了size属性，那么选择框看起来会更像一个列表，且没有自动选中的选项，若size大于选项数量，访问者可以点击空白处，使所有选项处于未选中状态

让访问者上传文件

必须在form元素里面正确设置enctype属性，创建input type="file"元素

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

创建隐藏字段

input type="hidden"

隐藏字段出现在表单标记中的位置并不重要，因为它们在浏览器中并不可见。

不要将敏感信息放到隐藏字段中，访问者可以通过查看源码看到

创建提交按钮

1、input type="submit"

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

input type="image" src="img.url"

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

使用button元素

    Create Profile

注：如果表单需要一个以上的提交按钮，就应避免使用button元素

Reset

禁用表单元素

为元素添加属性，disabled或disabled="disabled"，禁用表单元素。

根据状态为表单设置样式

伪类

选择器	应用	浏览器支持情况
:focus	获得焦点的字段	IE8+及其他
:checked	选中的单选按钮或复选框	IE9+及其他
:disabled	具有disabled属性的字段	IE9+及其他
:enable	与:disabled相反	IE9+及其他
:required	具有required属性的字段	IE10+、Safari5+及其他
:optional	与:required相反	IE10+、Safari5+及其他
:invalid	其值与pattern属性给出的模式不匹配的字段等非法字段	IE10+、Safari5+及其他
:valid	与:invalid相反	IE10+、Safari5+及其他

第十七章，视频、音频和其他多媒体

视频文件格式

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

1、Ogg Theora使用的文件扩展名为.ogg/.ogv，支持的浏览器：Firefox3.5+、Chrome4+、Opera10.5+以及Android版Firefox

2、MP4（H.264）使用的文件扩展名为.mp4/.m4v，支持的浏览器：Safari3.2+，Chrome4-？，IE9+，iOS（Mobile Safari）和Android2.1+，Android版Chrome，Android版Firefox和Opera Mobile11+

3、WebM使用的文件扩展名为.webm，支持的浏览器：Firefox4+、Chrome6+、Opera10.6+、Android2.3+、Android版Chrome、Android版Firefox和OPera Mobile 14

注：开发者至少要准备两种视频格式（MP4，WebM），才能确保获得所有兼容H5的浏览器的支持。

在网页中添加单个视频

使用video元素，

video属性

属性	描述
src	视屏URL
autoplay	视频可播放时自动播放
controls	添加浏览器为视频设置的默认控件
muted	静音
loop	循环
poster	指定视频加载时所要显示的图像（而不是视频第一帧），接受所需图像的URL
width	视频宽度，默认300
height	视频高度，默认150
preload	告诉浏览器要加载视频内容的多少 none：不加载任何视频 metadata：仅加载视频元数据（长度、尺寸等） auto：让浏览器决定怎么做

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

使用controls、autoplay属性

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

使用autoplay、loop、poster属性，最好加上controls，不然会一直循环播放不能暂停，这会让用户非常火大。

阻止视频预加载

使用preload属性

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

为了获得所有兼容HTML5的浏览器的支持，至少要准备两种视频格式：MP4、WebM

可以使用source元素做到这一点。

一个video元素可以包含任意个source元素。

source的属性

名称	描述
src	视屏来源URL
type	用于指定视频类型，帮助浏览器决定是否能播放 该属性的值反映的是视频格式，即编解码器， 如video/mp4,video/webm,video/ogg
media	用于为视频来源指定CSS3媒体查询，从而为不同屏幕尺寸设备指定不同的视频

音频文件格式

HTML5支持大量不同格式的音频文件格式

1、Ogg Vorbis扩展名.ogg，支持浏览器：Firefox3.5+、Chrome5+、Opera10.5+

2、MP3扩展名.mp3，支持浏览器：Safari5+、Chrome6+、IE9+、iOS

3、WAV扩展名.wav，支持浏览器：Firefox3.6+、Safari5+、Chrome8+、Opera10.5+

4、AAC扩展名.aac，支持浏览器：Safari3+、IE9+、iOS3+和Android2+

5、MP4扩展名.mp4，支持浏览器：Safari3+、Chrome5+、IE9+、iOS3+，Android2+

6、Opus扩展名.opus，支持浏览器：Firefox

对于音频最好的两种格式是：Ogg Vorbis和MP3，可以获得所有支持HTML5的浏览器的支持

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

使用audio元素，用法与video类似

audio元素属性

名称	描述
src	音频文件URL
autoplay	音频可播放时自动播放
controls	添加浏览器默认控件
muted	静音
loop	循环
preload	与video一致

自动播放、循环和预加载，以及提供备用内容的多个视频源操作均与操作video类似

source元素的type属性：

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

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

可以通过使用MediaElement.js（ http://mediaelementjs.com/）、Video.js（ http://www.videojs.com）、JWPlayer（ http://longtailvideo.com/jw-player）、Flowplayer（ http://flowplayer.org）来达到，JW Player和Flowplayer的免费版本会在媒体播放器上显示它们的标识

高级多媒体

1、通过canvas操作视频

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

2、联合使用SVG和视频

第十八章，表格

使用

元素，如果需要可以输入，caption content用于描述表格。

可以根据需要使用

、

、元素。使用tr行，th标题单元格，td数据单元格。

一个表格只能有一个thead和tfoot，但可以有多个tbody

如果包含了caption，则必须是表格的第一个元素。

如果包含了thead或tfoot则必须包含tbody。tbody不能位于thead之前。

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

通过对th或td的colspan或rowspan属性进行改变可以创建跨越多行或多列的单元格。

第十九章，添加JavaScript

js最好都放在HTML页面的最后面，即

元素，

caption content