html5初学笔记,HTML5学习笔记

HTML5

(一)Html=h5

狭义概念：HTML5(新增的标记、属性)+Javascript新增API

广义概念：HTML5+CSS 3+Javascript新增API+其它生态圈(Angular、VUE等)

(二)H5重新定义标签

粗体 斜体

列表第一级子类

列表第一级子类 表示主题结束，而不是水平线，虽然显示相同

(三)H5新布局

(四)H5新增结构标签(块状元素)：语义化标签。

 标记定义一篇文章

 标记定义一个页面或一个区域的头部

标记定义导航链接

 标记定义一个区域

标记定义页面内容部分的侧边栏

 标记定义文件中一个区块的相关信息

标记定义一组媒体内容以及它们的标题

 标签定义 figure 元素的标题。

标记定义一个页面或一个区域的底部

 标记定义一个对话框(会话框)类似微信

(五)H5新增web应用标签

1. Meter状态标签(实时状态：温度、气压······)(IE不支持)

value=”当前显示的值” min=”最小值” max=”最大值”>

注：若optimum与value

2. Progress状态标签(工程状态：安装、加载······)

3. datalist 下拉列表

定义数据：

注：datalist的id值需和input的list值相同。

4. details 元素详情

显示内容

隐藏内容，元素详情

或

隐藏内容，元素详情

(六)H5新增其他标签

5. 注释标签

标记定义 注释或音标

告诉那些不支持 Ruby元素的浏览器如何去显示

标记定义对ruby的注释内容文本

6. 其他标签

标记定义表单里一个生成的键值(加密信息传送)

标记定义有标记的文本 (黄色选中状态)

标记定义一些输出类型,计算表单结果配合oninput事件

( 标记定义一个日期/时间 目前所有主流浏览器都不支持

)

(七)H5新增多媒体交互标签

7. 音频

H5支持的音频格式：ogg，mp3,wav

你的浏览器不支持该音频标签。(当浏览器不支持时显示)

属性、值

autoplay 设置值：autoplay (如果出现该属性，则音频在就绪后马上播放。)

controls 设置值：controls(如果出现该属性，则向用户显示控件，比如播放按钮。)

loop 设置值：loop(如果出现该属性，则每当音频结束时重新开始播放。)

preload 设置值：preload(如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。)

src 设置值：url (要播放的音频的 URL。)

8. 视频

H5支持的音频格式：ogg，mp4,wav等

你的浏览器不支持该视频标签。(当浏览器不支持时显示)

属性、值

Autoplay设置值：Autoplay(视频就绪自动播放)

controls设置值：controls(向用户显示播放控件)

Width设置值：Pixels(像素)(设置播放器宽度)

Height设置值：Pixels(像素)(设置播放器高度)

Loop设置值：Loop(播放完是否继续播放该视频，循环播放)

Preload设置值：Proload(是否等加载完再播放)

Src设置值：url(视频url地址)

Poster设置值：Imgurl(加载等待的画面图片)

Autobuffer设置值：Autobuffer(设置为浏览器缓冲方式，不设置autoply才有效)

(八)Web表单

9. HTML中的表单：(必须嵌套使用)

提交

10. HTML5的表单(不用嵌套)

HTML5中为了方便排版，可以使from中的表单标签脱离from的嵌套。方法:from指定ID，所有表单标签均添加from=id属性。

eg：

提交

11. Input表单的type新属性值(表单验证)

Type="email" 限制用户输入必须为Email类型

Type="url" 限制用户输入必须为URL类型

Type="date" 限制用户输入必须为日期类型

Type="time" 限制用户输入必须为时间类型

Type="month" 限制用户输入必须为月类型

Type="week" 限制用户输入必须为周类型

Type="number" 限制用户输入必须为数字类型

Type="range" 产生一个滑动条的表单

Type="color" 生成一个颜色选择表单

12. 新增表单属性(表单验证)

Required 设置值：required(表单拥有该属性表示其内容不能为空，必填)

placeholder 设置值：提示文本(表单的提示信息，存在默认值将不显示)

Autofocus 设置值：autofocus(自动聚焦属性，页面加载完成自动聚焦到指定表单)

Pattern 设置值：正则表达式(输入的内容必须匹配到指定正则)

Oninvalid 设置值：setcustomvalidity(‘提示语句’)

(客户端输入错误提示)

Eg：Oninvalid=”setCustomValidity(‘输入错误’)”注意区分大小写

13. 正则表达式:^表示开始，$表示结束。

通配符：

\d 匹配一个数字字符。等价于 [0-9]。

\D匹配一个数字字符。

\w任何单字字符，等价于[a-zA-Z0-9]

\W任何非单字字符，等价于[^a-zA-Z0-9]

.代表任意字符。

[]代表指定范围内的任一个字符，

eg：[0-9]代表0-9的一个数字；

[0-9,x,X]代表0-9的一个数字或x或X。

[^]代表不在指定范围内的任一字符。

[\u4e00-\u9fa5]代表任一汉字。

\转义字符,

\+ \* \? \. \\

运算符：

| 或

数量词：

{n} 匹配确定的 n 次

{n,} 至少匹配n 次

{n,m} 最少匹配 n 次且最多匹配 m 次

? 匹配前面的子表达式零次或一次。等价{0,1}

+ 匹配前面的子表达式一次或多次。等价{1,}

* 匹配前面的子表达式零次或多次。等价{0,}

分组：()

i忽略大小写 g全局匹配