HTML5必须了解掌握的知识点详解(全)
- 一、html5是什么?
- 二、学习
- 1.为 HTML 添加新元素
- 2.HTML5 新元素
- 3.HTML5 Canvas
- 4.HTML5 内联 SVG
- 5.HTML5 MathML
- 6.HTML5 拖放(Drag 和 Drop)
- 7.HTML5 Geolocation(地理定位)
- 8.HTML5 Video(视频)
- 9.HTML5 Audio(音频)
- 10.HTML5 新的 Input 类型
- 12.HTML5 表单元素(使用的地方很少)
- 13.HTML5 表单属性
- 14.HTML5 语义元素
- 15.HTML5 Web 存储
- 16.HTML5 Web SQL 数据库
- 17.HTML5 应用程序缓存
- 18.HTML5 Web Workers
- 19.HTML5 服务器发送事件(Server-Sent Events)
- HTML5 WebSocket
- 总结
一、html5是什么?
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
header, section, footer, aside, nav, main, article, figure {
display: block; // 8个语义元素都是块级元素
}
二、学习
1.为 HTML 添加新元素
该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 :
代码如下(示例):
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
2.HTML5 新元素
3.HTML5 Canvas
在html上使用canvas
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
使用 JavaScript 来绘制图像
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
Canvas - 路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
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()
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);
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(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas - 图像
drawImage(image,x,y)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
4.HTML5 内联 SVG
链接: https://blog.csdn.net/qq_43305958/article/details/108234657.
5.HTML5 MathML
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
6.HTML5 拖放(Drag 和 Drop)
设置元素为可拖放
<img draggable="true">
拖动什么 - ondragstart 和 setData()
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
放到何处 - ondragover
event.preventDefault()
进行放置 - ondrop
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
7.HTML5 Geolocation(地理定位)
使用 getCurrentPosition() 方法来获得用户的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
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;
}
}
</script>
</body>
</html>
8.HTML5 Video(视频)
<video width="320" height="240" controls id="video">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
// js事件控制播放/暂停,调用这个dom的play()和pause()方法
// vidoe上有controls属性的时候,在视屏上有控制器
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
9.HTML5 Audio(音频)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
// js事件控制播放/暂停,调用这个dom的play()和pause()方法
// vidoe上有controls属性的时候,在视屏上有控制器
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
10.HTML5 新的 Input 类型
Input 类型: color
color 类型用在input字段主要用于选取颜色
Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。
Input 类型: datetime
datetime 类型允许你选择一个日期(UTC 时间)。
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域。
Input 类型: month
month 类型允许你选择一个月份。
Input 类型: number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定
11
Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
请使用下面的属性来规定对数字类型的限定:
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
Input 类型: search
search 类型用于搜索域
Input 类型: tel
定义输入电话号码字段
Input 类型: time
time 类型允许你选择一个时间
Input 类型: url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值
Input 类型: week
week 类型允许你选择周和年。
12.HTML5 表单元素(使用的地方很少)
HTML5 datalist元素(类似select组件的效果)
元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用\ <input> 元素的列表属性与 <datalist> 元素绑定.
HTML5 keygen 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
HTML5 output 元素
<output> 元素用于不同类型的输出,比如计算或脚本输出
13.HTML5 表单属性
form / input autocomplete 属性(人性化的功能)
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
form novalidate 属性(让在form中input的type属性验证功能失效)
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
input autofocus 属性(人性化的功能)
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时,域自动地获得焦点。
input formtarget 属性(打开新的页面)
input pattern 属性(正则校验)
pattern 属性描述了一个正则表达式用于验证\ <input> 元素的值
14.HTML5 语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
HTML5 section 元素
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
HTML5 article 元素
<article> 标签定义独立的内容。
HTML5 nav 元素
<nav> 标签定义导航链接的部分。
HTML5 aside 元素
<aside> 标签定义页面主区域内容之外的内容(比如侧边栏)
HTML5 header 元素
<header>元素描述了文档的头部区域
HTML5 footer 元素
<footer> 元素描述了文档的底部区域.
HTML5 figure 和 figcaption 元素
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)
<figcaption> 标签定义 <figure> 元素的标题.
15.HTML5 Web 存储
链接: https://blog.csdn.net/qq_43305958/article/details/108287444.
16.HTML5 Web SQL 数据库
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明:
数据库名称
版本号
描述文本
数据库大小
创建回调
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
执行操作使用 database.transaction() 函数
executeSql:这个方法用于执行实际的 SQL 查询。
删除
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
更新
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});
17.HTML5 应用程序缓存
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
18.HTML5 Web Workers
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
创建web worker文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
创建 Web Worker 对象
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
终止 Web Worker
w.terminate();
19.HTML5 服务器发送事件(Server-Sent Events)
- 把报头 “Content-Type” 设置为 “text/event-stream”
- 规定不对页面进行缓存
- 输出发送日期(始终以 "data: " 开头)
- 向网页刷新输出数据
- 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)
- 每接收到一次更新,就会发生 onmessage 事件
- 当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
AJAX轮询和WebSocket对比:
var Socket = new WebSocket(url, [protocol] );
// 使用案例
// 使用WebSocket的地址向服务端开启连接
let ws = new WebSocket('ws://localhost:3000');
// 开启后的动作,指定在连接后执行的事件
ws.onopen = () => {
console.log('open connection');
};
// 接收服务端发送的消息
ws.onmessage = (event) => {
console.log(event);
};
// 指定在关闭后执行的事件
ws.onclose = () => {
console.log('close connection');
};
WebSocket 属性
WebSocket事件
WebSocket 方法