Html5 《html5入门到精通》 随书笔记

一：input标签新增的type类型

1.number 类型用于应该包含数值的输入域，即上下选择控件。

number 类型: Html代码：

2.Url 类型用户输入Url地址的输入域，即输入的不符合url地址会有波浪线提示

Url 类型： 输入：http://www.lwq8.com 然后去掉.或者http 再点击url地址会出现红色警告线 Html代码：

3.Ranger 类型用于应该包含一定范围内数字值得输入域 即左右拉动条

Html代码：

4.search 类型用户搜索域

5.日期 分六种显示方式

5.1 date 选取日、月、年

5.2 month 选取月、年

5.3 week 选取周和年

5.4 time 选取时间 （小时和分钟）

5.5 datetime 选取时间 日、月、年（UTC时间 UTC 意思协调世界时，又称世界统一时间 它从英文“Coordinated Universal Time”/法文“Temps Universel Cordonné”而来。）

5.6 datetime-local 选取时间 日、月、年（本地时间）

二 属性

1. contenteditable当列表元素被加上contenteditable属性后，该元素就变成可编辑的了。

例子：

• a
• a1
• a2

• a
• a1
• a2

2.spellcheck属性 告诉浏览器检查元素的拼写和语法

234

三 表单

1.placeholder 属性

将输入提示显示在文本款中当输入时文本框内提示的内容会消失

2.list属性

类似于下拉列表但当选项中没有用户所选时可以手动输入 注意：目前只有opera 10支持lsit属性
abcdefghi abcdefghi

表单示例：

表单注册

1. 昵称：
2. Email:
3. 工作年龄： 30
4. 年龄：
5. 出生日期
6. 个人主页

表单注册

1. 昵称：
2. Email:
3. 工作年龄：30
4. 年龄：
5. 出生日期
6. 个人主页

3. required属性 确保表单控件的值已填写,如果元素内容为空白，则不允许提交。

点击提交查看效果

4. pattern属性 判断输入是否为有效格式。

点击提交查看效果

5.自定义验证

注： (如果没有效果 请切换到Opera浏览器。目前只有opera浏览器支持自定义效果)

新密码：
确认密码：

6. figure 元素

代表一个块级图像，还可以包含说明。figure元素不只可以显示图片，还可以使用它给audio、diveo、iframe、object 和embed元素添加说明。

7.detail元素

提供了一种替代javascript 的方法，他主要提供了一个张开\收缩区域。details元素的实例: 这里是描述标题 这里是内容 代码: 这里是描述标题 这里是内容 注:detail 添加了open属性为打开状态

8.progress元素 显示进度。

百分比：

0%

代码： 百分比：

0%

9.meter元素：

用来表示规定范围内的数量值。
六个属性：
value 、min、max、low、high（当前标量的高值区）、optimum(最佳值)

电量：50/100%

A

代码：

电量：50/100%

A

10.dl列表

示例:

人生自古谁无死

文天祥的经典之作，非常之精彩，非常之精屁，简直是神话

代码：

人生自古谁无死

文天祥的经典之作，非常之精彩，非常之精屁，简直是神话

11.cite 用与标记

示例: 我说了多少回了你就是一个2B一个2B

代码:

我说了多少回了你就是一个2B一个2B

12.使用blob接口获取文件的类型与大小：

选择文件:

文件的长度

文件类型

13.文件accept属性

accept属性目的就是让file控件只能接受某种类型的文件。

代码：

14.使用readAsText读取文本文件

选择一个文件：

 

15.拖放

在html5之前只是在浏览器内部进行拖放，在html5中可以实现应用程序之间的拖放。

hello word!

将此区域拖放到下方

 

16.音频、视频标签

正在播放音频：
正在播放视频:

属性介绍：

autoplay 属性用于指定motion是否在页面加载后自动播放 使用方法: autoplay="autoplay"

perload 属性用于指定视频或音频数据是否预加载。 用法为 perload="none/metadata/auto" nono为不进行预加载 metadata表示值预加载媒体的元数据 auto表示预加载全部视频或音频

poster(video 元素独有属性) 一些不确定是否连接上的视频可以使用poster 以免出现一片空白 用法：poster="a.jpg"

loop属性 用户指定是否循环播放视频或音频 用法 loop="loop"

controls 属性 指定是否为视频或音频添加浏览器自带的播放用的控制条。 用法 controls="controls"

played属性 返回一个timeRanges对象 读取媒体文件的已播放的时间段

paused属性返回一个bool值 表示是否暂停播放true 表示暂停 false 表示正在播放

ended属性放回一个bool值 表示是否播放完毕，true表示播放完毕

volume 属性读取和修改媒体的播放音量 范围0~1 0静音 1最大音量

muted属性 读取或修改媒体的静音状态，true 表示处于静音状态 false表示非静音状态。

方法介绍：

play() 播放

pause() 暂停

Canvas元素

1.绘制斜线

 

代码：

2.绘制矩形

代码:

3.绘制圆形

4.绘制火柴人

绘制贝塞尔和二次方曲线