第十六章，表单

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

元素：

<input type="email"> ---- 电子邮件框

<input type="search"> ---- 搜索框

<input type="tel"> ---- 电话框

<input type="url"> ---- URL框

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

<input type="date"> ---- 日期

<input type="number"> ---- 数字

<input type="range"> ---- 范围

<input type="text" name="favfruit" list="fruit"> ----

<datalist id="fruit"> ---- \

<option>Grapes</option> ---- \

<option>Pears</option> ---- 数据列表

<option>Kiwi</option> ---- /

</datalist> ----

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

<input type="color" /> ---- 颜色

<input type="datetime" /> ---- 全局日期和时间

<input type="datetime-local" /> ---- 局部日期和时间

<input type="month" /> ---- 月

<input type="time" /> ---- 时间

<input type="week" /> ---- 周

<output></output> ---- 输出

属性：

属性	总结
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元素

<button type="submit" class="btn"><img src="check.png" width="21" height="21" alt="" />Create Profile
</button>

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

<input type="reset">
<button type="reset">Reset</button>
<!-- 都可以对表单进行重置 -->

禁用表单元素

为元素添加属性，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="my-video.ext"></video>

video属性

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

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

使用controls、autoplay属性

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

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

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

<video src="my-video.ext" autoplay loop></video>
<video src="my-video.ext" poster="paddle-steamer-poster.jpg" controls></video>

阻止视频预加载

使用preload属性

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

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

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

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

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

<body><video width="369" height="208" controls><source src="paddle-steamer.mp4" type="video/mp4"><!-- 浏览器支持则播放，忽视后面所有文件，否则跳到下一个source--><source src="paddle-steamer.webm" type="video/webm><!-- 类推 --><p><a href="paddle-steamer.mp4">Download the video</a></p><!-- 在浏览器不支持时显示 --></video>
</body>

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和视频

第十八章，表格

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

可以根据需要使用<thead>、<tbody>、<tfoot>元素。使用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页面的最后面，即</body>的前面，如果非要在head元素内加载js文件，也应该是在所有加载CSS文件之后

还可以进行js代码压缩

1、Google Closure Complier

http://code.google.com/closure/complier/（供下载的版本及文档）

http://closure-complier.appspot.com（在线版本）

2、UglifyJS（使用第二个链接）

https://github.com/mishoo/UglifyJS2（供下载的版本及文档）

http://lisperator.net/uglifyjs（在线版本，选择OpenDEmo）

3、YUI Compressor（使用第二个链接）

http://developer.yahoo.com/yui/compressor（供下载的版本及文档）

http://refresh-sf.com/yui/（非官方的在线版本）

第二十章，测试和调试网页

使用BrowserStack（www.browserstack.com）和SauceLabs（http://saucelabs.com）可以在很多浏览器和移动设备上免费测试页面

检查常见CSS错误

1、确保使用冒号(:)分隔属性和值。

2、确保使用分号(;)结束每个属性-值对。确保没有多余的分号

3、不要忘了后括号

4、确保使用可接受的值

5、使用嵌入样式表时，不要忘了</style>结束标签

6、确保HTML文档正确指向CSS文件

7、留意CSS选择器之间的空格和标点

8、确保浏览器支持你编写的代码

9、使用浏览器的开发者工具

第二十一章，发布网站

1、获得域名

2、寻找主机

3、将文件传送至服务器，使用FileZilla（http://filezilla-project.org）、CyberDuck（http://cyberduck.ch）等FTP客户端

转载于:https://www.cnblogs.com/TwinklingZ/p/5308821.html

HTML5与CSS3基础教程第八版学习笔记16-21章相关推荐

HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
html5入门 epub,分享《HTML5与CSS3基础教程(第7版) 》(图灵程序设计丛书) pdf epub azw3格式...
<HTML5与CSS3基础教程(第7版)> pdf epub azw3格式下载地址: https://pan.baidu.com/s/1J2LPQoV1GP90UwaFXvKPaw 内容 ...
HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
《Python基础教程(第3版)》笔记：第8章异常
<Python基础教程(第3版)>笔记:异常重点第8章异常异常对象未被处理(或捕获)时,程序将终止并显示一条错误信息:traceback 每个异常都是某个类的实例, 如何创建异常 ...
Python基础教程(第3版)》笔记：第6章抽象
Python基础教程(第3版)>笔记:第6章抽象 **斐波那契数列:**每个数都是前两个数的和. fibs = [0,1] for i in range(8):fibs.append(fibs[ ...
PMBOK(第六版) 学习笔记 ——《第一章引论》
系列文章目录 PMBOK(第六版) 学习笔记 --<第一章引论> PMBOK(第六版) 学习笔记 --<第二章项目运行环境> PMBOK(第六版) 学习笔记 --<第 ...
数据库系统概论(第5版)学习笔记第1章 1.2——数据模型
数据库系统概论(第5版)学习笔记第1章 1.2--数据模型目录数据库系统概论(第5版)学习笔记第1章 1.2--数据模型 0.思维导图(自制) 1️⃣思维导图下载 2️⃣图示 1.2数据模型 1. ...
《Python编程：从入门到实战》(第2版)学习笔记第5章 if语句
[写在前面]为进一步提高自己的python代码能力,打算把几本经典书籍重新过一遍,形成系统的知识体系,同时适当记录一些学习笔记,我尽量及时更新!先从经典的<Python编程:从入门到实战> ...

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