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() 方法对应的五个参数说明：

数据库名称
版本号
描述文本
数据库大小