你的位置:首页 > 网页设计

[网页设计]HTML5与CSS3基础教程第八版学习笔记16


第十六章,表单

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客户端