一、 HTML5简介

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

二、 HTML5包含哪些内容

新的特殊内容元素，无语义，可作为侧边栏、导航栏、底部、等单独使用，便于布局，以防页面布局混淆。比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

2D/3D 制图

三、 HTML标签

1．无意义布局标签

简介：这些标签的作用与div完全相同，本身也没有任何样式，主要是为了布局的方便以及语义的理解。

1) article

作用：用于文章布局

2) aside

作用：侧边栏布局

3) nav

作用：导航栏布局

4) section

作用：主体内容区域布局

5) header

作用：网站头部布局

2．audio

作用：为网页插入一个音频文件

格式：

<audio src=””></audio>

属性：

src：音频的资源路径（url）

autoplay：是否自动播放

controls：是否被用户控制

loop：是否重复播放

preload：是否进行预加载。音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

案例：

<audio src=”1.mp3” preload controls loop></audio>

效果：

image.png

注意：针对js的API

参考地址:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp

API说明：

播放：play()

暂停：pause()

onended事件：当结束播放时触发的事件。可以控制播放完成之后要进行的动作。

设置播放时间：currentTime

//停止

audio.pause();

audio.currentTime = 0;

//重新播放

audio.currentTime = 0;

audio.play();

//静音

obj.muted = true; //使音频静音

obj.muted = false; //取消音频静音

image.png

3．canvas

作用：绘制图像

格式：

<canvas></canvas>

参考文献：http://www.w3school.com.cn/tags/html_ref_canvas.asp

四、 剩余标签参考文献

http://www.w3school.com.cn/html5/html5_reference.asp

五、 CSS3

1．10个input的type值

属性：

1、email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口。

2、url：地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口。

3、number：数字输入域。(可设置min、max、step)

4、tel：电话号码输入域，在手机浏览器中弹出数字输入域。

5、search：搜索输入域，在手机浏览器右下角呈现搜索按键。

6、range：范围选择控件。

7、color：颜色选择控件。

8、date/month/week：时间选择控件。

案例：

<form>

用户名 : <input type="text" placeholder="Please enter username" autofocus="autofocus" required/><br />

邮箱 : <input type="email" required/><br />

个人主页：<input type="url" required/><br />

生日：<input type="date" required/><br />

完善程度：<input type="range" max="10" min="0" value="2" step="2"/><br />

查找：<input type="search" results=s/><br />

选择颜色：<input type="color" /><br />

input type="submit" value="提交" formaction="OneController.java" formmethod="post"/>

<input type="submit" value="取消" formaction="TwoController.java" formmethod="post"/>

</form>

效果：

image.png

2．11个表单元素新属性

属性

1、autocomplete：自动补全，是否自动记录之前提交的数据，以用于下一次输入建议。on:规定启用自动完成功能，off：规定禁用自动完成功能。

格式及案例

image.png

2、placeholder：占位符，用于在输入框中显示提示性文字，与value不同，不能被提交。

3、autofocus：自动获得输入焦点。

4、multiple：是否允许多个输入值，若声明该属性，那么输入框中允许输入多个用逗号隔开的值。适用于email和file。

格式：

image.png

5、form：值为某个表单的id，若设置，则该输入域可放在该表单外面。
6、required：在表单提交时会验证是否有输入，没有则弹出提示消息。
7、maxlength：限制最大长度，只有在有输入的情况下才有用，不区分中英文。
7、minlength：限制最小长度，但它不是H5标准属性，仅部分浏览器支持。
8、min：限定输入数字的最小值。
9、max：限定输入数字的最大值。
10、step：限定输入数字的步长，与min连用。
11、pattern：指定一个正则表达式，对输入进行验证。(正则默认首尾加^$)

3．geolocation

作用：用于定位用户的位置
案例：

var x=document.getElementById("demo"); 
function getLocation() { 
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition,showError); } 
else { x.innerHTML="该浏览器不支持获取地理位置。"; } 
} 
//获取用户位置成功时运行的函数
function showPosition(position) { 
//返回用户位置的经度和纬度
x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " +position.coords.longitude; 
}
//获取用户位置失败时运行的函数
function showError(error) { 
switch(error.code) { 
case error.PERMISSION_DENIED: 
x.innerHTML="用户拒绝对获取地理位置的请求。" 
break; 
case error.POSITION_UNAVAILABLE: 
x.innerHTML="位置信息是不可用的。" 
break; 
case error.TIMEOUT: 
x.innerHTML="请求用户地理位置超时。" 
break; 
case error.UNKNOWN_ERROR: 
x.innerHTML="未知错误。" 
break; 
} 
}