你的位置:首页 > 软件开发 > 网页设计 > HTML5与CSS3基础教程第八版学习笔记16

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

发布时间:2016-03-22 23:00:05
第十六章,表单HTML5引入了新的表单元素、输入类型和属性,以及内置的对必填字段、电子邮件地址、URL以及定制模式验证。元素:<input type="email"> ---- 电子邮件框<input type ...

第十六章,表单

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

对表单元素进行组织

创建单选按钮

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

网页中添加单个视频

使用video元素,
<video src='/images/loading.gif' data-original="my-video.ext"></video>
<video src='/images/loading.gif' data-original="my-video.ext" controls></video><video src='/images/loading.gif' data-original="my-video.ext" autoplay controls> </video>
<video src='/images/loading.gif' data-original="my-video.ext" autoplay loop></video><video src='/images/loading.gif' data-original="my-video.ext" poster="paddle-steamer-poster.jpg" controls></video>
<video src='/images/loading.gif' data-original="my-video.ext" proload="none" controls></video>
<body>   <video width="369" height="208" controls>     <source src='/images/loading.gif' data-original="paddle-steamer.mp4" type="video/mp4"><!-- 浏览器支持则播放,忽视后面所有文件,否则跳到下一个source-->     <source src='/images/loading.gif' data-original="paddle-steamer.webm" type="video/webm><!-- 类推 -->     <p><a href="paddle-steamer.mp4">Download the video</a></p><!-- 在浏览器不支持时显示 -->   </video></body>
audio元素属性

第十八章,表格

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

第十九章,添加JavaScript

js最好都放在HTML页面的最后面,即</body>的前面,如果非要在head元素内加载js文件,也应该是在所有加载CSS文件之后

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

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

原标题:HTML5与CSS3基础教程第八版学习笔记16

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。