HTML5必须了解掌握的知识点详解（全）

最新推荐文章于 2022-11-14 16:39:29 发布

置顶大吕十六不见长安

最新推荐文章于 2022-11-14 16:39:29 发布

阅读量1.1k

点赞数

分类专栏：前端 html 文章标签： html5

本文链接：https://blog.csdn.net/qq_43305958/article/details/108273674

版权

前端同时被 2 个专栏收录

92 篇文章 2 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

HTML5必须了解掌握的知识点详解（全）

一、html5是什么？
二、学习
总结

一、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 方法

总结

good morning

大吕十六不见长安

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML5必须了解掌握的知识点详解（全）

HTML5必须了解掌握的知识点详解（）一、html5是什么？二、学习1.为 HTML 添加新元素2.HTML5 新元素总结一、html5是什么？HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存
复制链接

扫一扫