HTML5知识点
一、HTML5的新特性：
1. 取消了过时的显示效果标记 <font></font> 和 <center></center> …
2. 新表单元素引入
3. 新语义标签的引入
4. canvas标签（图形设计）
5. 本地数据库（本地存储）
6. 一些API
二、多媒体标签及属性介绍
1.<video></video> 视频
属性：controls 显示控制栏
属性：autoplay 自动播放(Chrome默认禁用此功能,加muted可实现自动静音播放）
属性：loop 设置循环播放
2.<audio></audio> 音频
属性：controls 显示控制栏
属性：autoplay 自动播放 (Chrome默认禁用此功能）
属性：loop 设置循环播放
多媒体标签在网页中的兼容效果方式
- <video>
- <source src="trailer.mp4">
- <source src="trailer.ogg">
- <source src="trailer.WebM">
- </video>
三、html5中新增的语义化标签
html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。
1.块元素标签
（1）<header></header>:定义文档的头部区域
（2）<nav></nav>：定义导航链接的部分
（3）<section></section>： 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
（4）<footer></footer>：定义 页面 的页脚。
（5）<main></main>:定义文档的主体部分。
tips:main标签在网页中应该是唯一的，只能出现一次，不能重复出现，只能放在body里面 不能是其他元素的子元素，只能是其他元素的包含框元素。
（6）<aside></aside>：定义页面的侧边栏内容。
（7）<article></article>：定义一个文章区域。
（8）<figure></figure>：规定独立的流内容（图像、图表、照片、代码等等）。
（9）<details></details>：用于描述文档或文档某个部分的细节。
2.内联元素标签
（1）<progress></progress>：定义运行中的进度（进程）。
（2）<meter></meter>：定义度量衡。仅用于已知最大和最小值的度量。
（3）<time></time>：定义日期或时间，或者两者。
（4）<mark></mark>：定义带有记号的文本。
四、新增表单控件标签
1.email （必须输入email）
2.url (必须输入url地址)
3.number (必须输入数值)
4.range (必须输入一定范围内数值)
5.Date Pickers（日期选择器）
拥有多个可供选取日期和时间的新输入类型：
①date – 选取日、月、年
②month – 选取月、年
③week – 选取周和年
④time – 选取时间（小时和分钟）
⑤datetime – 选取时间、日、月、年（UTC 时间）
⑥datetime-local – 选取时间、日、月、年（本地时间）
6.search—— 用于搜索域，域显示为常规的文本域。
7.color颜色
五、HTML5 Canvas
1.在html上使用canvas
- <canvas id="myCanvas" width="100" height="400"
- style="border:8px solid #999999;">
- </canvas>
2.使用 JavaScript 来绘制图像
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- ctx.fillStyle="#99a293";
- ctx.fillRect(0,0,79,90);
3.Canvas – 路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- ctx.moveTo(0,0);
- ctx.lineTo(10,2);
- ctx.stroke();
4.canvas中绘制圆形
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- ctx.beginPath();
- ctx.arc(95,50,40,0,2*Math.PI);
- ctx.stroke(); //fill()
5.Canvas – 文本
font – 定义字体
fillText(text,x,y) – 在 canvas 上绘制实心的文本
strokeText(text,x,y) – 在 canvas 上绘制空心的文本
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- ctx.font="30px Arial";
- ctx.fillText("Hello World",10,50);
6.Canvas – 渐变
createLinearGradient(x,y,x1,y1) – 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) – 创建一个径向/圆渐变
- var c=document.getElementById("myCanvas");
- var ctx=c.getContext("2d");
- // 创建渐变
- var grd=ctx.createLinearGradient(40,10,100,10);
- grd.addColorStop(0,"pink");
- grd.addColorStop(1,"blue");
- // 填充渐变
- ctx.fillStyle=grd;
- ctx.fillRect(10,10,150,80);
7.Canvas – 图像
drawImage(image,x,y)
六、HTML5 Web SQL数据库
使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。
openDatabase() 方法对应的五个参数说明：
数据库名称
版本号
描述文本
数据库大小