HTML5详解-CSDN博客

本文链接：https://blog.csdn.net/u014010512/article/details/82963947

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。

HTML5 中的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素，使用 HTML5可以简单的在网页中播放视频(video)与音频 (audio) 。
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

下面是一个简单的HTML5文档，<!doctype> 声明必须位于 HTML5 文档中的第一行：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head> 
<body>
    文档内容......
</body>
</html>

HTML5 新元素，为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

标签	描述
<canvas> 新元素
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
新表单元素
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。
新的语义和结构元素
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

HTML5 Canvas，<canvas> 标签定义图形，比如图表和其他图像，<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas from Angelia</title>
</head>
<body>
	<canvas id="myCanvas" width="200" height="200" style="border: 1px solid #c3c3c3;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>

	<script>
		/* 找到 <canvas> 元素 */
		var c = document.getElementById("myCanvas");
                /* 创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 */		
                var ctx = c.getContext("2d");
                /* 绘制图形，fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 */	
		ctx.fillStyle = "#FF0000";
		ctx.fillRect(0, 0, 200, 100);
	</script>
</body>
</html>

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

/* 定义开始坐标(0,0), 和结束坐标 (200,200)。然后使用 stroke() 方法来绘制线条 */
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();

在Canvas中绘制圆形, 我们将使用arc方法：arc(x,y,r,start,stop)

用Canvas绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas绘制渐变，渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建线性渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);

// 创建径向/圆渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas把一幅图像放置到画布上, 使用drawImage方法，drawImage(image,x,y)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

	<p>Image to use:</p>
	<img id="myImg" src="img.jpg" alt="My Image" width="200" height="300">
	<p>Canvas:</p>
	<canvas id="myCanvas" width="300" height="300" style="border: 1px solid #d3d3d3;">
		您的浏览器不支持 HTML5 canvas 标签。</canvas>
	<script>
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		var img = document.getElementById("myImg");
		img.onload = function() {
			ctx.drawImage(img, 10, 10);
		}
	</script>
</body>
</html>

HTML5 Video(视频)，<video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

<video width="200" height="300" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

HTML5 Audio(音频)，HTML5 提供了播放音频文件的标准。

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

HTML5 MathML，HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。

HTML5 拖放（Drag 和 Drop），拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

HTML5 Geolocation（地理定位），用于定位用户的位置。

HTML5 新的 Input 类型，HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。新的输入类型如下：color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week。
color 类型主要用于选取颜色
date 类型日期选择器选择日期
datetime 类型选择一个日期
datetime-local 类型选择一个日期和时间 (无时区)
email 类型用于应该包含 e-mail 地址的输入域
month 类型选择一个月份
number 类型用于应该包含数值的输入域
range 类型用于应该包含一定范围内数字值的输入域
search 类型用于搜索域，比如站点搜索或 Google 搜索
tel 类型用于电话号码输入
time 类型允许你选择一个时间
url 类型用于应该包含 URL 地址的输入域
week 类型允许你选择周和年

<input type="color" name="">
<input type="date" name="">
<input type="datetime" name="">
<!-- max - 规定允许的最大值
     min - 规定允许的最小值
     step - 规定合法的数字间隔
     value - 规定默认值
 -->
<input type="range" name="points" min="1" max="10">
。。。

HTML5 新表单元素，HTML5 有<datalist>，<keygen>，<output>表单新元素。

<datalist> 元素规定输入域的选项列表。<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

<form action="" method="">
	<input list="names" name="name">
	<datalist id="names">
		<option value="Angelia">
		<option value="Snowdrop">
	</datalist>
	<input type="submit">
</form>

<keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="" method="">
	用户名: <input type="text" name="name"> 
	加密: <keygen name="security">
	<input type="submit">
</form>

<output> 元素用于不同类型的输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	0 <input type="range" id="a" value="50" max="200" min="0"> 100 
	+
	<input type="number" id="b" value="50">
	=
	<output name="x" for="a b"></output>
</form>

HTML5 新的表单属性，HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性：

autocomplete 属性规定 form 应该拥有自动完成功能。
novalidate 属性是一个 boolean(布尔) 属性。novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<input>新属性：

autocomplete 属性规定 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。开启是“on”，关闭是“off”。
autofocus 属性是一个 boolean 属性。autofocus 属性规定在页面加载时，域自动地获得焦点。
form 属性规定输入域所属的一个或多个表单。如需引用一个以上的表单，请使用空格分隔的列表。
formaction 属性用于描述表单提交的URL地址。formaction 属性会覆盖<form> 元素中的action属性，用于 type="submit" 和 type="image"
formenctype 属性描述了表单提交到服务器的数据编码。formenctype 属性覆盖 form 元素的 enctype 属性。
formmethod 属性定义了表单提交的方式。formmethod 属性覆盖了 <form> 元素的 method 属性。
formnovalidate 属性是一个 boolean 属性。novalidate属性描述了 <input> 元素在表单提交时无需被验证。formnovalidate 属性会覆盖 <form> 元素的novalidate属性。
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。formtarget 属性覆盖 <form>元素的target属性。
height 与 width height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。height 和 width 属性只适用于 image 类型的<input> 标签。
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。step 属性为输入域规定合法的数字间隔。min、max 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。
multiple 属性是一个 boolean 属性。multiple 属性规定<input> 元素中可选择多个值。multiple 属性适用于以下类型的 <input> 标签：email 和 file。
pattern (regexp) 属性描述了一个正则表达式用于验证 <input> 元素的值。pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。
placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
required 属性是一个 boolean 属性. required 属性规定必须在提交之前填写输入域（不能为空）。它适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<form action="" id="form1" autocomplete="on" novalidate>
    Name: <input type="text" name="name" autofocus placeholder="User Name" required><br>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    Images: <input type="file" name="imgs" multiple><br>
    <input type="submit" value="提交">
    <input type="submit" formaction="" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
    <input type="submit" formmethod="post" formaction="" value="使用 POST 提交">
    <input type="submit" formnovalidate value="不验证提交">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
 
Age: <input type="number" name="age" form="form1">

HTML5 新的语义元素，之前代码片段中用<div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部。现在HTML5 提供了新的语义元素来明确一个Web页面的不同部分：

<header> 元素描述了文档的头部区域。<header>元素主要用于定义内容的介绍展示区域，页面中可以使用多个<header> 元素。
<nav> 标签定义导航链接的部分。
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<article> 标签定义独立的内容。
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
<figcaption> 标签定义 <figure> 元素的标题。<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<footer> 元素描述了文档的底部区域。<footer> 元素通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。文档中可以使用多个 <footer>元素。

HTML5 Web 存储，一个比cookie更好的本地存储方式。早些时候，本地存储使用cookie。但Web存储需要更加的安全与快速。确保数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。即localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

// 存储，key="author" 和 value="Angelia" 创建一个 localStorage 键/值对。
localStorage.author= "Angelia";
// 查找，检索键值为 "author" 的值然后将数据插入 id="author"的元素中
document.getElementById("author").innerHTML = localStorage.author;

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

在使用 web 存储前，应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 支持 localStorage  sessionStorage 对象!
    // .....
} else {
    // 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个：

保存数据：setItem(key,value);
读取数据：getItem(key);
删除单个数据：removeItem(key);
删除所有数据：clear();
得到某个索引的key：key(index);

HTML5 Web SQL 数据库，Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。即使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。
ransaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询