HTML5学习笔记

新特性

用户绘画的canvas

媒体播放的video audio

本地离线存储的支持

特殊内容 article footer header nav section

新的表单控件 calendar date time email URL search

改进：新元素 新属性；完全支持CSS3 Video Audio 2D/3制图 本地存储 本地SQL数据 Web应用

HTML5 简介

• 语义元素

标签	描述
article	独立的内容区域
aside	侧标栏
bdi	脱离父元素的文本方向设置
command	命令按钮 单选复选框或按钮
details	用于描述文档细节
dialog	定义对话框，提示框
summary	标签包含details元素的标题
figure	规定独立的流内容 图像图标照片代码等
figcaption	定义figure元素的标题
footer	定义section或document页脚
header	头部区域
mark	定义带有记号的文本
meter	定义度量衡
nav	定义导航链接
progress	定义任何类型的进度
ruby	定义ruby的注释
tr	定义字符的解释
rp	在ruby注释中使用，定义ruby元素的浏览器所显示的内容
section	定义文档的一段
time	定义日期或时间
wbr	规定文本中何处添加换行符

HTML5新元素

• 标签定义图形，比如图标和其他图像。

1.通过canvas元素显示一个红色的矩形
<canvas id="myCanvas">canvas>
<script>
	var canvas=document.getElementById('myCanvas')
	var ctx=canvas.getContext('2d')
	ctx.fillStyle='#FF0000'
	ctx.fillRext(0,0,80,100)
script>
复制代码

• 多媒体元素
• 新表单元素 选项列表 表单秘钥对生成器字段
  脚本输出

什么是Canvas

Canvas元素用于图形的绘制，通过JS来完成，标签只是图形容器 您必须用JS绘制 Canvas学习参考链接

• 绘制一个画布（Canvas）;绘制矩形

<canvas id='myCanvas' width='200' height='100' style='boder:1px solid #000000'>
canvas>

<script>
	
	1.获取画布
	var c=document.getElementById('myCanvas')
	
	2.创建上下文context对象
	var ctx=c.getContext('2d');
	
	3.绘制 ctx拥有多种绘制路径 矩形 圆形 及添加图像的方法
	ctx.fillStyle='#FF0000'
	ctx.fillRect(0,0,150,75);
	
	4.fillStyle 属性是CSS颜色，默认是#000，可以设置渐变，图案
script>
复制代码

• Canvas 坐标

Canvas 是一个二维网格;左上角坐标是（0，0）;fillRect(x,y,width,height) 意义是从左上角(0,0)开始，绘制width*height 的矩形 填充

2. strokeRect(x, y, width, height) 绘制边框

3. clearRect(x, y, widh, height) 清除指定的矩形区域

• Canvas路径绘制一条线

moveTo(x,y);lineTo(x,y);stroke()

• beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
• moveTo(x, y)把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
• lineTo(x, y) 把画笔移动到指定的坐标(x, y)
• closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中
• stroke() 通过线条来绘制图形轮廓
• fill() 通过填充路径的内容区域生成实心的图形

<script>
	var ctx=document.getElementById('myCanvas').getContext('2d')
	ctx.moveTo(0,0);
	ctx.lineTo(200,100);
	ctx.stroke()
script>
复制代码

• Canvas绘制一个圆

  arc(x, y, r, startAngle, endAngle, anticlockwise) ；stroke()

  • arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针(默认是顺时针)。
  • arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

1.从左上角(95,50) 绘制半径40 角度行0角度开始，360度为止，绘制圆形曲线
<script>
	var ctx=document.getElementById('myCanvas').getContext('2d')
	ctx.beginPath()
	ctx.arc(95,50,40,0.2*Math.PI)
	ctx.stroke()
script>
复制代码

• Canvas绘制文本

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

1.ctx.font 设置字体
2.ctx.fillText('222',x,y) 从左上角（x,y）开始绘制
var ctx = document.getElementById("myCanvas").getContext('2d')
ctx.font='30px Arial'
ctx.fillText('Hello World',10,50)
复制代码

• Canvas 渐变色

1.通过上下文创建渐变，2创建颜色停止区间 3渐变值赋值给ctx.fillStyle 4开始填充

1创建渐变 线性渐变，圆型渐变
 - createLinearGrandient(x,y, x1,y1)
 - createRadialGradient(x,y,r, x1,y1,r1)

2.创建线性渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd = ctx.createLinearGradient(0,0,200,0)
grd.addColorStop(1,'red')
grd.addColorStop(1,'white')

ctx.fillStyle=grd
ctx.fillRect(10,10,150,80)

3.创建圆形渐变
var c1=document.getElementById("myCanvas");
var ctx1=c1.getContext("2d");

var grd1 = ctx1.createRadialGradient(75,50,5, 90,60,100)
grd1.addColorStop(0,'red')
grd1.addColorStop(1,'white')

ctx1.fillStyle = grd1
ctx1.fillRect(10,10,150,80)
复制代码

• Canvas图像

drawImage(image,x,y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imge=document.getElementById('screen')
ctx.drawImage(img,10,10)

复制代码

HTML5内联SVG

• 什么是SVG：1是指可伸缩矢量图形 2用于定义网络的基于矢量图形 3使用XML格式定义图形 3.SVG图形在放大或改变成村的情况下其图形质量不会有损失

• SVG优势：1，可以通过文本编辑器创建和修改 2可以被搜索 索引 脚本化压缩 3.是可伸缩的 4图像在任何分辨率下被高质量的打印 5.SVG在图像质量不下降的情况下被放大

• SVG可以直接嵌入HTML中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
svg>
复制代码

• SVG和Canvas两者间的区别
  • svg 是通过XML描述的2D图形的语言
  • Canvas是通过JS描述2D图形
  • SVG基于XML的，每个元素的都是可用的，可以为每个元素添加JS事件处理器
  • Canvas是按像素处理的，一旦绘制完成，不会继续得到浏览器的关注，如果为止发生改变场景也会重新绘制，

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序
能攻以.png 或 .jpg 格式保存结果图像	复杂度高灰减慢渲染进度
适合图像密集型的游戏，其中许多对象频繁重绘	不适合游戏应用

HTML5 MathML

html5使用MathML元素。标签是$$

数学运算符 矩阵等

拖放Drag Drop

• 1.设置元素可拖动 draggable='true'
• 2.当元素被拖动时 会出发ondragstart(eve) ev.dataTransfer.setData()设置被拖动的数据，设置类型和值
• 3.移动的时候，如果设置了函数回掉ondragover() ，如果允许放置，必须阻止元素的默认处理方式
• 4.放下的时候，监听函数ondrop(). 阻止默认的处理方式，然后获取被拖拽的数据，是IDname ;把拖动的元素放置到目标元素中

<body>
	<p>拖动下面图片到右侧矩形框中p>
	<div='div1' ondrop="drop(event)" ondragover='allowDrop(event)'>div>
	
	<img id='drag1' src='/logo.png' draggable='true' ondragstart='drag(event)'>
body>

<script>
	function allowDrop(ev){
		ev.preventDefault();
	}
	
	function drag(ev){
		ev.dataTransfer.setData('Text',ev.target.id)
	}
	
	function drop(ev){
		ev.preventDefault()
		var data=ev.dataTransfer.getData('Text')
		ev.target.appendChild(document.getElementById(data))
	}
	
script>
复制代码

HTML5 地理定位

Geolocation 地理定位 ；需要获取用户授权；getCurrentPosition() 方法获得用户的位置

• 获取用户的经度纬度

1.如果getCurrentPosition()运行成功，则向参数showPosition中规定函数返回一个coordinates

var x=document.getElementById("demo");
function getLocation(){
	if(navigatior.geolocation){
		navigatior.geolocation.getCurrentPosition(showPosition)
		
		回掉函数想当于：
		//navigatior.geolocation.getCurrentPosition({(posi)
			//showPosition(posi)
		//})		
	}else{
		x.innerHTML='不支持获取地理位置'
	}
}
function showPosition(position){
	x.innerHTML='维度' + position.coords.latitude + '
经度' + position.coords.longitude;
}
复制代码

• 处理错误和拒绝

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;
    }
}
复制代码

• 如果需要返回用户移动时的更新位置，使用watchPosition()

HTML Video视频

• video 简单使用

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
video>
复制代码

• video提供了播放 暂停 音量等控制视频
• 如果不设置width height大小，会根据原始视频的大小而改变
• video标签之间的插入的内容是不支持video元素的浏览器显示的
• 元素支持多个source，浏览器使用第一个可识别的格式
• 改变播放器的大小 暂停和播放播放器

1.<video> 定义一个视频
2.<source> 定义多种媒体资源 
3.<track> 定义在媒体播放器文本轨迹

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused){
		myVideo.play(); 
	}else{
		myVideo.pause(); 
	} 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
script> 

复制代码

HTML Audio 音频

• Audio简单使用

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

HTML Input类型

color date datetime datetime-local email nonth number range search tel time url week

• input类型 color

<input type='color' name='favcolor'>
复制代码

• input类型：date

<input type='date'>
复制代码

• input类型datetime

1.UTC时间
生日（日期和时间）<input type='datetime' name='bdaytime'>
复制代码

• input 类型 datetime-local

1.无时区本地时间
<input type='datetime-local' name='bdaytime'>
复制代码

• input类型：email

1.email类型用于应该包含e-mail 地址的输入域 
2.提交表单 会自动验证email域的值是否合法有效
E-mail <input type='email' name='aemail'>
复制代码

• input类型 number

1.number类型用于应该包含数值的输入值
2.可以设置限定
数量（1-5之间）: <input type='number' name='quantity' min='1' max='5'>
复制代码

属性	描述
disable	禁用
max	最大值
maxlength	最大字符长度
min	最小值
pattern	用于验证输入字段的正则表达式
readonly	只读 无法修改
required	必填项
size	可见字符数
step	合法数字间隔
value	输入字段的默认值

• input类型range

1.显示为滑动条 用于应该包含一定范围内数字值的输入域
2.max 规定允许的最大值；min规定允许最小值；step规定合法的数组间隔；value规定默认值；

 <input type='range' name='points' min='1' max='10'>
复制代码

• input类型 search

1.search类型用于搜索域；比如站点搜索或Google搜索
Search Google :<input type='search' name='googlesearch'>
复制代码

• input 类型tel

tel:定义输入电话号码字段：
电话号码： <input type='tel' name='surtel'>
复制代码

• input类型：time

1.time类型，允许选择一个时间
选择时间：<input type='time' name='usr-time'>
复制代码

• input类型 url

1.url类型用于包含URL地址的输入域
2.提交表单中，会自动验证URL域的值
您的主页：<input type='url' name='homepage'>
复制代码

• input 类型week

1.week类型选择周和年
选择周：<input type='week' name='week_year'>
复制代码

HTML 表单元素

datalist ; keygen ; output

• datalist 元素

1.datalist 规定输入域的选项列表
2.datalist 属性规定 form 或 input域 应改拥有自动完成功能，当用户在完成域中开始输入的时候，浏览器应该在该区域中显示填写的选项
<input list='browsers'>
<datalist id='browsers'>
	<option value='IE'>
	<option value='Firefox'>
	<option value=''Chrom>
	<option value='Opera'>
	<option value='Safari'>
datalist>
复制代码

• keygen元素

1.keygen元素作用提供一种验证用户的可靠方法
2.规定用于表单的密钥对生成器 当提交时 会生成两个键一个是私钥 一个是公钥
3.公钥发送给服务器，可用域之后验证用户的客户端证书

<form action='demo_kes.asp' method='get'>
用户名：<input type='text' name='usr_name'>
密码：<keygen name='security'>
<input type='submit'>
form>
复制代码

• output元素

1.元素用于不同类型的输出。计算或脚本输出
2.oninput output 成堆出现。
<form oninput='x.value=parseInt(a.value)+parseInt(b.value)'>
0
<input type='range' id='a' value='50'>
100 + 
<input type='number' id='b' value='50'>
=
<output name='x' for='a b'> output>
form>
复制代码

HTML表单属性

form 新属性：autocomplete; novalidate; input新属性：autocomplete ; autofocus; form; formaction; formenctype; formmethod; formnovalidate; formtarget; height/width; list; min/max; muliple; pattern; placeholder; required; step

• autocomplete 属性

1. HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

<form action='forma1.php' autocomplete='on'> 
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
form>
复制代码

• novalidate属性 无需验证

novalidate 属性是一个boolean属性
novalidate属性规定在提交表单时不因该验证form 或input 区域
// 无序验证的提交的邮箱
<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
form>
复制代码

• autofocus 属性

1.autofocus在页面加载中国呢，域自动获得焦点
<input type='text' name='fname' autodocus> 
复制代码

• form 属性

1.多个表单域，指定input 所属 form的ID
<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
form>
Last name: <input type="text" name="lname" form="form1">
复制代码

• formaction属性

1.属性用于描述表单提交的URL地址；会覆盖form元素中的action属性
2.属性用于 type='submit' 和 type=‘image’
"demo-form.php">
  First name: type="text" name="fname">

  Last name: type="text" name="lname">

  type="submit" value="提交">

  type="submit" formaction="demo-admin.php" value="提交">

3.第一个提交，指定URL是demo-form.php;  第二个提交地址是 交给demo-adimin.php 处理
复制代码

• formenctype 属性 编码格式

1.描述表单提交服务器的数据编码；只对post有效
2.属性会覆盖form元素的默认enctype属性
<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
form>
3. 第一个提交 安默认妈妈
复制代码

• formmethod 属性 请求方式post/get等

1.会覆盖form元素的method 属性
<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
form>
复制代码

• formnovalidate无需验证； formtarget指定类型；

• height/width 宽高

• list属性

1.datalist是输入域的选项列表
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
datalist>
复制代码

• min/max属性 适用于datepickers;numbers;range

• multiple属性 可以多选值

Select images: <input type="file" name="img" multiple>
复制代码

• pattern属性 描述正则表达式

1.只能输入大小写字母
Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
复制代码

• placeholder属性；required属性

Username: <input type="text" name="usrname" required>
复制代码

• step属性

1.输入域规定合法的数字间隔
2.step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
复制代码

HTML语义元素

html5新的语义元素：header；nav;section;ariticle;aside;figcaption;figure;footer;

• 和

  元素

1.<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
2.<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
3.<figcaption> 标签定义 <figure> 元素的标题.
4.<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
复制代码

HTML Web 存储

Cookie 早些时候使用

LocalStorage; 用于长久存在的整个网站的数据，保存的数据没有过期时间，手动去除

sessionStorage 用于临时保存同一窗口；在关闭窗口或标签之后将会伤处这些数据

• 检验是否支持Storage

if(typeof(Storage) != 'undefined') {
	// 支持
}else{
   // 不支持Web存储
}
复制代码

• LocalStorage对象 CRUD(增 删 改 查)

1.保存数据
localStorage.setItem(key,value)

2.读取数据
localStorage.getItem(key)

3.删掉单个数据
localStorage.removeItem(key)

4.删除所有数据
localStorage.clear()

5.得到某个索引的key
localStorage.key(index)

6.存储是按json字符串存储，按需要转换格式
复制代码

• sessionStorage对象

var site = new Object;
var str = JSON.stringify(site); // 将对象转换为字符串

使用 JSON.parse 方法将字符串转换为 JSON 对象：
var site = JSON.parse(str);
复制代码

Web SQL 数据库

openDatabase;打开新建数据库 transaction; 控制一个事务，在内执行或者提交回滚 executeSql 执行SQL查询

• 打开数据库

1.打开已存在的数据库，如果数据不存在，会创建一个新的数据库
2.五个参数：数据库名称，版本号，描述文件，数据库大小，创建回调;
var db = openDatabase('mydb','1.0','TextDB',2*1025*1024)
db.transaction(function(tx){
	tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,log)')
})
3.创建一个名为LOGS的表
复制代码

• 插入数据

1.打开数据库
2.在transaction中执行事务，执行SQL语句 动态插入数据
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function(tx){
	tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,log)')
	tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?,?)',[e_id,e_log])
})
3.实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。
复制代码

• 读取数据

1.打开数据库
2.插入数据
3.查询出数据
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

db.transaction(function(tx){
	
	tx.executeSql('SELECT * FROM LOGS',[],function(tx1,results){
		var length = results.rows.length,i;
		 msg = "
查询记录条数: " + len + "
";
		 for (i = 0;inull);
});

复制代码

• 删除记录

1.指定ID删除
db.tansaction(function(tx){
	tx.executeSql('DELETE FROM LOGS WHERE id=1');
})

2.动态ID删除
db.tansaction(function(tx){
	tx.executeSql('DELETE FROM LOGS WHERE id=?',[id]);
})
复制代码

• 更新记录

1.指定ID更新
db.transaction(function(tx){
	tx.executeSql('UPDATE LOGS SET log=\'dsdsdadfs.cc\' WHERE id=2')
})
2.动态ID更新
db.transaction(function(tx){
	tx.executeSql('UPDATE LOGS SET log=\'dsdsdadfs.cc\' WHERE id=?',[id])
})
复制代码

HTML5 应用程序缓存（Application Cache）

可以离线缓存；加载速度更快；减少服务器负载

• Cache Manifest 例子

<html manifest="demo.appcache">

<body>
文档内容......
body>

html>
1.如果需要，在html标签中包含mainfest属性，manifest 文件的建议的文件扩展名是：".appcache"。manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置
复制代码

• Mainfest文件

1.是文本文件；告知浏览器被缓存的内通
2.分三个部分；
 Cache manifest 在此标题下列出的文件在首次下载后进行缓存
 NETWORK 在标题下列出文件需要与服务器链接 且不会被缓存
 fallback 在此标题下列出的文件规定当页面无法访问时的回退页面（404）
复制代码

• 完整的一个manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html
复制代码

• 上面第一行CACHE MANIFEST，是必需的 上面三个文件会被缓存。然后，无论用户何时与因特网断开连接，这些资源依然是可用的
• 下面的 NETWORK 规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：
• 最后 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

HTML5 Web Works

• 在html中 参考链接

<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}
 
function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
script>
复制代码

• 在work.js中

var i=0;
function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();
复制代码

服务器发送事件

允许网页获得来自服务器的更新

• Server-Sent事件 / 单向消息传递

转载于:https://juejin.im/post/5c52aa8ff265da2da53e9dfc