作者：手机用户2402851155 | 2021-08-26 00:30
第十六章，表单
HTML5引入了新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL以及定制模式验证。
元素：
---- 电子邮件框
---- 搜索框
---- 电话框
---- URL框
以下元素得到部分浏览器支持：
---- 日期
---- 数字
---- 范围
----
---- \
---- 数据列表
---- /
----
下面输入或元素得到更少的支持
---- 颜色
---- 全局日期和时间
---- 局部日期和时间
---- 月
---- 时间
---- 周
---- 输出
属性：
| 属性 |
总结 |
| 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">Resetbutton>
禁用表单元素
为元素添加属性，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 src="paddle-steamer.webm" type="video/webm>
>Download the videoa>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和视频
第十八章，表格
使用
元素，如果需要可以输入元素，caption content，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页面的最后面，即
京公网安备 11010802040832号 | 京ICP备19059560号-6