HTML5与CSS3基础教程第八版学习笔记16-21章_html/css_WEB-ITnose
第十六章,表单
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="/static/imghw/default1.png" data-src="check.png" class="lazy" style="max-width:90%" style="max-width:90%" 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和视频
第十八章,表格
使用

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
