Table of Contents
对表单元素进行组织
创建单选按钮
创建复选框
创建选择框
让访问者上传文件
创建隐藏字段
创建提交按钮
禁用表单元素
视频文件格式
在网页中添加单个视频
为视频添加控件和自动播放
为视频指定循环播放和海报图像
阻止视频预加载
使用多种来源的视频和备用文本
音频文件格式
在网页中添加带控件的单个音频文件
自动播放、循环和预加载,以及提供备用内容的多个视频源操作均与操作video类似
添加具有备用Flash的视频和音频
高级多媒体
Home Web Front-end HTML Tutorial HTML5与CSS3基础教程第八版学习笔记16-21章_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:23 AM

第十六章,表单

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>
Copy after login

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

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

禁用表单元素

为元素添加属性,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>
Copy after login

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>
Copy after login

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

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

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

阻止视频预加载

使用preload属性

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

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

为了获得所有兼容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>
Copy after login

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用于描述表格。

可以根据需要使用

、元素。使用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页面的最后面,即

元素,caption content
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

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,

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

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

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

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

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

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

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

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

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

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

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; 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

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

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

See all articles