poct什么意思HTML5 SSE--服务器发送事件（server-sent events）-----不是很懂
html,超文本标记语言,是一种用于创建网页的标记语言。
html,是Hyper Text Markup Language的缩写。它运行在浏览器上，由浏览器来解析。
html的后缀名有.html/.htm。
声明有助于浏览器中正确显示为网页，不区分大小写。
html5声明，告知web浏览器页面使用了那种html版本
元素是html页面的根元素
可以插入脚本
style 定义了HTML文档的样式文件引用地址，也可以直接添加样式渲染html文档
link 定义了文档与外部资源之间的关系，通常用于连接样式表
base 定义页面中所有链接默认的连接目标地址
meta 标签提供了元数据，但是元数据不会显示在页面上，但会被浏览器解析
meta元素指定了网页的描述，关键词，作者，字符集、文件的最后修改时间等。
元数据
例子以后补
描述了网页的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
目前在大部分浏览器中，直接输入中文会中文乱码，因此需要在头部将字符声明为utf-8/GBK
元素包含了可见的页面内容,定义了html文档的主体
html标签是由尖括号包围的关键词，如
html标签通常都是成对出现的，如
成对出现的标签第一个是开始标签，第二个是结束标签。它们也叫开放标签和闭合标签。
html标签也有单标签，比如
之后补，有特别多
html元素内容是开始标签和结束标签之间的内容
大多数html元素有属性
某些html元素是空内容，就是没有内容的HTML元素。在开始标签添加斜杠是关闭空元素的正确方法。如
大多数html元素可以嵌套
html标题
h1-h6
html段落
段落通过
标签定义,可以把文档划分为若干个段落
p是块级元素，浏览器会自动在段落前后添加空行
在一个段落里可以用
来换行
代替 加粗
字体变粗
代替 斜体
鉴于之后一个元素会有属性，所有还是单独写好了。
html元素可以设置属性，属性可以在元素中添加附加信息
属性一般描述于开始标签
属性以名值对的形式出现。如name="value".
属性值要被包括在双引号" "内，单引号也可以。但是如果属性值本身就有双引号，就只能用单引号包括了。
class 为html元素定义了一个或多个类名
id 定义了元素的唯一id
style 规定了元素的行内样式
title 描述了元素的额外信息
之后补，有特别多
用标签设置超文本链接，超链接可以是字，词，图像，网址。
默认情况下，链接以一下形式出现在浏览器中
未访问的连接显示为蓝色字体并带有下划线
访问过的拦截显示为紫色带有下划线
点击链接时，链接显示为红色带有下划线
属性：
target :设置网页在什么地方打开。
_blank 新标签页打开
图像由标签定义，使用源属性src显示图像
alt属性 当图像无法显示时，文本信息告诉读者。
width height 设置图像的宽高，单位为像素
border 给图片设置边框
map属性不懂，之后补
表格由table定义，行由tr定义，单元格由td定义。
数据单元格可以包含文本，图片，列表，段落，表单，水平线，表格等。
border 不定义表格的边框属性，没有边框
cellspacing 值为0时取消表框间距，单元格与其边框之间的距离
cellpadding 单元格边距，单元格的大小
th 表头
caption 标题
thead 表头 tbody 主体 tfoot 表脚 通常一起使用
表格背景颜色设置 style="background-color:xx" bgcolor
表格单元格设置背景颜色 bgcolor
表格背景图片设置 background="图片"
表格单元格设置背景图片 background="图片"
colgroup col 对表格的列进行组合，让整个列应用样式
colspan 跨列 （合并列） col列
rowspan 跨行 row行
align 使用align属性排列单元格内容，值有left,right，center
表格里可以包含ul ol 表格
列表分为有序列表、无序列表、定义列表
ol 有序列表
ol定义有序列表，li定义列表项,
type属性可改变列表项符号
strat ="数值” 规定从哪个地方开始
ul 无序列表
ul定义无序列表，li定义列表项
dl自定义列表
dl定义自定义列表，dt定义项目，dd定义解释
列表的嵌套
大多数html元素被定义为块级元素或行内元素
html可以通过div和span将元素组合起来
行内元素：相邻的行内元素不换行，设置宽高无效，margin设置左右方向有效，上下无效，padding设置上右下左都有效。
行内元素有span img a big small sub sup strong button（display:inline-block）
块级元素：独占一行，能设置宽高，margin和padding对上下左右四个方向设置都有效
块级元素有div p h1-h6 table ul ol
行内块级元素：元素排列在一行，不会自动换行，可以设置宽度和高度以及外边距和内边距的所有样式。
三者转换如下：
display:inline 转换为行内元素
display:block 转换为块级元素
display:inline-block 转换为行内块元素
表单用表单标签from设置，常用到的标签输入标签input，输入类型有属性type定义
文本框 type="text"
密码 type="password"
单选按钮 type="radio"
注意用单选按钮时，必须设置name值为一致，否则效果会出错
复选框 type="checkbox"
按钮 button
按钮一定要写value=" " ,不然按钮上面什么也没有
常见方式
剩下的以后补
下拉列表 select
select定义了下拉列表，option定义下拉列表里的选项，optgroup把相关选项组合在一起[
结构
..
......
当option哪行添加了selected时，表示默认显示哪行
文本域 textarea
textarea定义文本域，rows控制行数，cols控制列数
fleldset
fieldset可以用于表单分组
legend为分组的定义标题
datalist 预先定义的输入控件选项列表
表单基本结构
form定义表单
action 定义提交到哪里，可以不写
method 定义提交方法
提交按钮 type="submit"
iframe 作用在这个html页面引入其他网页
src="目标页面 "
可以用width height设置宽高，单位px；也可以用百分比设置宽高
frameborder属性值为0时，移除边框
颜色是由16进制来表示红、绿、蓝（RGB）,十六进制的写法为#后跟3个或6个十六进制符
三位数表示法为#RGB,转换为6位数表示为#RRGGBB
每个颜色的最低值为0（16进制为00），最高值为255（16进制为FF）
白色 #FFFFFF rgb(255,255,255)
黑色 #000000 rgb(0,0,0)
红色 #FF0000 rgb(255,0,0)
script 即可包含脚本语句，也可以通过src属性指向外部脚本文件
javascritp常用于图片操作、表单验证以及内容动态更新
noscript 定义了不支持脚本浏览器输出的文本
当浏览器不支持脚本或禁用脚本时，才会显示
元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>money</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，Hello World!出不来是因为，你的浏览器不支持 JavaScript!</noscript>
</body>
</html>空格
< <
> >；
© 版权 ©
® 注册商标 ®
™ 商标 ™
scheme 定义因特网服务的类型，常见的类型是http
http 超文本传输协议 以http://开头的普通网页
https 安全超文本传输协议 安全网页，加密所有信息交换
ftp 文本传输协议 将文件下载或上传到网站
file 你计算机上的文件
host--定义域主机
domain--定义因特网域名 eg:runoob.com
:port--定义主机上的端口号
path---定义服务器上的路径
filename--定义文档/资源的名称
url只能使用ascll字符集，url使用%加两位十六进制数替换不是ascii字符集，用+替换空格
绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素
新的表单控件
doctype
<!DOCTYPE html>
所有浏览器都支持
将浏览器元素定义为块元素
设置display属性为block.
为html元素添加新元素
通过js语句document.createElement('元素')； 为ie浏览器添加新的元素
还可以通过style为元素定义样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
document.createElement("myHero")
</script>
<style>
myHero{
font-size: 40px;
}
</style>
</head>
<body>
<h1>我的标题</h1>
<p>我的段落</p>
<myHero>我的新元素</myHero>
</body>
</html>shiv解决方案
之后补
canvas标签定义图形，比如图表和其他图像。
canvas元素用于图形的会在，通过脚本来完成
canvas标签只是图形容器，只能用脚本来绘制图形。
在html页面中可以使用多个canvas元素
使用前提
绘图要在画布上面
绘制图像的script要写在body里
查找元素
使用getContext('2d')
定义画布
<canvas id=" " width=" " height=" " style="border: "></canvas>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="" width="100px" height="200px" style="border:1px solid orange"></canvas>
</body>
</html>用javaScript绘制图像
找到canvas元素
var c=document.getElementById("canvas");
创建对象，通过getContext得到
var ctx=c.getContext('2d'); getContext对象是内建html5对象，拥有多种绘制路径、矩形、圆形、字符、添加图像的方法
绘制图像
用fillstyle属性 设置css颜色 渐变 图案
fillRect(x,y,width,height)定义矩形当前的填充方式 x,y 横纵坐标位置 width,height 宽高，设置图像的宽高，它的绘制是从左上角开始（0,0）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//绘制图像
ctx.fillStyle="#ff0100";
// 在画布上绘制150*175的矩形，从左上角（10,20）开始
ctx.fillRect(10,20,150,175);
</script>
</body>
</html>
canvas ---路径
在canvas上画线，使用两种方法，
moveTo(x,y)定义线条开始坐标
lineTo(x,y)定义线条结束坐标
绘制线条方法是 stroke()
注意：绘制线条必须是3个一起用，不然不会显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//绘制线条
ctx.moveTo(10,20);
ctx.lineTo(200,300);
// 绘制线条用这个方法
ctx.stroke();
</script>
</body>
</html>绘制圆形
arc(x,y,r,strat,stop) x，y 横纵坐标 半径
还必须有stroke()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
ctx.arc(100,100,60,10,30);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
// 目前来看，可有可无
ctx.beginPath();
ctx.arc(100,100,40,10,30);
ctx.stroke();
</script>
</body>
</html>canvas-文本
font--定义字体
fillText(text,x,y)----绘制实心的文本
strokeText（text,x,y）----绘制空心的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
ctx.font="40px";
ctx.fillText('money',20,40)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
// 只有xxpx时，无论xx数值多大或者多小，都没有变，也看不出来时空心，但是加了字体就不一样了
ctx.font="40px Arial";
// 内容 横纵坐标
ctx.strokeText('money',80,80)
</script>
</body>
</html>canvas渐变
createLinearGradient(x,y,x1,y1)--线条渐变
createRadialGradient(x,y，r,x1,y1,r1)----径向 圆渐变
addColorStop() ---指定颜色停止，参数用坐标描述，可以是0-1
fillStyle /strokeStyle 值渐变，可以绘制矩形、文本、线条等
渐变至少要两种颜色
步骤：先绘制画布
找到元素
利用对象getContext("2d")
创建渐变
写两个addColorStop
最后填充渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="300" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//创建渐变
// 这个语句里的数值不知道目的是什么，以后再说
var grd=ctx.createLinearGradient(0,20,200,20);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle=grd;
// 这个影响填充图形它的横纵坐标 和宽高
ctx.fillRect(10,30,230,90);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="200" height="200" style="border:1px solid orange;"></canvas>
<script>
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//创建渐变
// 这里的值也不知道怎么算的，好像它值之间的关系会影响图形的出现
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);
</script>
</body>
</html>
canvas-图像
drawlmage(image,x,y) 把图放置到画布上
步骤：把图片放置在页面上
绘制画布
利用对象getContext
查找元素canvas
查找图像id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 放置图像 -->
<img id="im" src="49.png" alt="这是图片" width="504" height="707">
<canvas id="mycanvas" width="400" height="700" style="border:1px solid orange;"></canvas>
<script>
// 图像的放置需要先有图像，之后再通过id查找
// 查找元素
var c=document.getElementById("mycanvas");
//创建对象，使用getContext
var ctx=c.getContext("2d");
//通过id 查找图片
var img=document.getElementById("im");
img.onload=function(){
// 变量名 横纵坐标位置
ctx.drawImage(img,20,20);
}
//不懂为何不能直接添加
//ctx.drawImage(img,20,20);
</script>
</body>
</html>
svg是使用xml来描述二维图形和绘图程序的语言
svg是什么
svg是可伸缩的矢量图形，图像在放大或改变尺寸的清况下图形质量不会损失
svg用来定义用于网络的基于矢量的图形，使用xml格式定义图形
svg的优势
可以被非常多的工具读取修改，比如记事本
与jpeg和gif图像比起来，尺寸更小，可压缩性更强
可伸缩，在图像质量不下降的情况下被放大
在任何分辨率下都可以被高质量的打印
图像中的文本是可选的，同时也可以被搜索
可以与java技术一起运行
是开发的标准
是纯粹的xml
创建svg文件
svg是xml文件，svg图像可以用任何文本编辑器创建，但通常与绘图程序一起使用，如inkscape(这有一个网站诶，可以下载软件)
svg基础知识
<svg></svg>是根元素，定义了svg。
<svg width=" " height=" " xmlns=" " version=" "></svg>
svg标签里可以通过width、height设置宽高。version属性定义使用的version版本，xmlns属性定义svg命名空间
<circle cx=" " cy=" " r=" " stroke=" " stroke-width=" " fill=" "/>
circle标签在svg里，cx cy 定义圆中心的x,y坐标，忽略它，圆心会被设置为（0,0） r定义圆的半径
stroke 设置边框颜色 stroke-width 定义边框宽度 fill设置填充颜色
小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<svg >
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
</body>
</html>创建svg文件
把文件后缀名设为.svg
引入一大段代码
<?xml version="1.0" standalone="no"?> 声明了xml,standalone规定该文件是否独立，=no,意味着svg会引用一个外部文件，这里是DTD文件，dtd位于W3C，含有所有允许的svg元素
xmlns定义svg命名空间 version定义使用的svg版本
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 这里写svg的代码 -->
</svg>svg嵌入在html页面
svg文件可以通过<embed>/<object>/<iframe>/<img>嵌入文中
svg代码也可以直接嵌入到html页面中，或者直接连接到svg文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<svg>
<!-- x y 定义圆的中心坐标 -->
<circle cx="30" cy="30" r="20" stroke="green" stroke-width="3" fill="orange" />
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="2.svg">查看svg</a>
</body>
</html>是一种基于xml(标准通用标记语言的子集)的标准，用来在互联网上书写数学符号和公式的置标语言。
注意：很多浏览器好像不支持，firefox/safari支持。
mathml可以用在html5中，标签是<math></math>
没有说下详细的标签，以后要用再补吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 比较完整的写法 -->
<!-- <math xmlns="http://www.w3.org/1998/Math/MathML"> -->
<math>
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 比较完整的写法 -->
<!-- <math xmlns="http://www.w3.org/1998/Math/MathML"> -->
<math>
<mrow>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo>
<mrow>
<msup><mi>4</mi><mn>x</mn></msup>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 比较完整的写法 -->
<!-- <math xmlns="http://www.w3.org/1998/Math/MathML"> -->
<math>
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<!-- 就是基本的表格前面加了个m -->
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>这个显然我不懂，所以文字都没打完，以后再说。
拖放drag 和drop是html5标准的组成部分
拖放就是抓取对象以后拖到另一个位置。任何元素都能拖放。
第一步：设置元素可以拖放 设置元素的draggable=true
第二步：规定元素被拖放时，会发生什么。
ondragstart 规定被拖动的数据 他的属性调用了函数，drag(event),规定了被拖动的数据
setDate（）方法设置被拖数据的数据类型和值
第三步：把元素放到哪里
ondragover规定把拖动元素放在何处。
因为默认无法把元素放置到其他元素中，所以要想放置，需要先阻止对元素的默认处理方式。这样就需要调用ondragover时间的event.preeventDefault()方法。
第四步：进行放置
放置函数是ondrop
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
function drop(ev)
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>HTML5 地理定位 Geolocation
用于定位用户的位置。
因为涉嫌侵犯隐私，所以用户同意，可以获取。
不懂
HTML 视频 video
到现在，仍然不存在一项旨在网页上显示视频的标准。
大多数视频都是通插件（flash）来显示的。但是，不是所有的浏览器都有同样的插件。
html5 规定了一种通过video元素来包含视频的标准方法。
视频格式
video元素支持三种视频格式:MP4 WebM Ogg
Mp4 video/mp4 mp4 带有H.264视频编码和AAC音频编码的MPEG4文件
WebM vido/webm webm 带有VP8视频编码和Vorbis音频编码的WebM文件
Opera video/ogg Ogg 带有Theora视频编码和Vorbis音频编码的Ogg文件
video--使用Dom进行控制
html5<video> <audio>元素同样拥有方法、属性和事件
<video>和<audio>元素的方法、属性和事件可以使用js进行控制。
其中的方法用于播放、暂停以及加载等。其中属性（比如时长、音量等）可以被读取或设置。其中Dom事件能够通知您，比方说<video>元素开始播放、已暂停，已停止，等等。
video 定义一个视频
source 定义多种媒体资源，比如video audio
track 定义在媒体播放器文本轨迹
其他的拓展没写
我是直接把视频拖到项目文件里的，没有再给他弄一个新文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="11.mkv" type="video/mp4">
<source src="11.mkv" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>html5提供了音频文件的标准。
互联网上的音频
到现在音频播放都还没有标准。
现在大多数音频是通过插件egfalsh来播放的，但是不同的浏览器可能有所不同。
html5规定了网页上嵌入音频元素的标准，<audio>元素
<audio>与</audio>之间你需要插入浏览器不支持的<audio>元素的提示文本。-------这句可以当没看见
<audio>元素允许使用多个<source>元素,<source>元素可以链接不同的音频文件，但是浏览器将使用第一个支持的音频文件。
audio元素只支持三种音频格式文件 mp3 wav Ogg
音频格式的mime类型
mp3 audio/mpeg
ogg audio/ogg
wav audio/wav
audio 定义了声音内容
source 规定了多媒体资源，可以是多个，在video和audio标签中使用
control属性提供添加播放 暂停 音量控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- control属性提供添加播放暂停音量控件 -->
<audio controls>
<source src="张紫宁、Sunnee杨芸晴、蒋申、陈意涵Estelle、魏瑾、强东玥%20-%20摩天轮的眼泪.mp3" type="audio/mp3">
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- control属性提供添加播放暂停音量控件 -->
<audio controls>
<!-- 默认第一个 -->
<source src="Owl%20City、Carly%20Rae%20Jepsen%20-%20Good%20Time.mp3" type="audio/mp3">
<source src="张紫宁、Sunnee杨芸晴、蒋申、陈意涵Estelle、魏瑾、强东玥%20-%20摩天轮的眼泪.mp3" type="audio/mp3">
</audio>
</body>
</html>html5拥有多个新的表单输入类型。
input color
color可以选择颜色 ，图上的上下箭头可以选择是16进制，还是rgB.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
</body>
</html>input data
data类型允许你从一个日期选择器选择一个日期
input datetime
datime类型允许你选择一个日期（UTC时间）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
选择日期: <input type="datetime" >
</body>
</html>input datetime-local
它允许你选择一个日期和时间（无时区）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
选择日期: <input type="datetime-local" >
</body>
</html>
input email
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
email <input type="email" >
</body>
</html>
input month
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="month" >
</body>
</html>input range
类型为滑动条，包含一定范围内数字值的输入域。这个值不用非常精确。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔
value 规定默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="range" max="900" min="0" value="200">
</body>
</html>
input search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="search" >
</body>
</html>
input tel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="tel" >
</body>
</html>input time
允许你选择一个时间，定义可输入时间控制器（无时区）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="time" >
</body>
</html>input url
url用于包含url地址的输入域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="url" >
</body>
</html>input week
week可以选择周和年
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
请输入 <input type="url" >
</body>
</html>input number
number类型应该包含数值的输入域
disabled 输入字段是禁用的
max 规定允许的最大值
maxlength 规定输入字段的最大字符长度
min 规定允许最小的值
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必需的
size 规定输入字段中的可见字符数
step 规定输入字段中的可见字符数
value 规定输入字段的默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
能输入的范围在100-1000 <input type="number" min="100" max="10000" >
</body>
</html>datalist
规定输入域的选项列表。
datalist属性规定form或input域应该拥有自动完成功能。当用户在自动完成与中开始输入时，浏览器应该在该域中显示填写的选项
input元素的列属性和datalist元素绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
你想要看的是<input list="comic" name="comics">
<datalist id="comic">
<option value="夏目友人帐">
<option value="灼眼的夏娜">
<option value="Angles Beat">
</datalist>
</body>
</html>keygen元素
keygen元素的作用是提供一种验证用户的可靠方法
keygen标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个是公钥。
私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action=" " method="get">
用户名：<input type="text" name="user_name">
加密：<keygen name="security" />
<input type="submit">
</form>
</body>
</html>output元素---不是很懂
output元素用于不同类型的输出，比如计算或脚本的输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<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>
</body>
</html>
form 定义一个form表单
input 定义一个input域
form input新属性 autocomplete-----这个演示我都没看懂
它规定form/input域应该拥有自动完成功能
当用户在自动完成域中开始输入时，浏览器应该在域中显示填写的选项。
autocomplete属性有可能在form元素中是开启的，而在input元素中是关闭的。
autocomplete适用于form标签，以及以下类型的input标签：text search url telephone email password datepickers range 和color
注意：在某些浏览器中，你需要启用自动完成功能，以让该属性生效。
form input新属性 novalidate
它是一个布尔属性，规定在提交表单时不应该验证from或input域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!-- email不用按照格式填写 -->
<form action=" "novalidate>
e-mail:<input type="email">
<input type="submit">
</form>
<!-- email必须按照格式填写 -->
<form action=" ">
e-mail:<input type="email">
<input type="submit">
</form>
</body>
</html>input autofocus 属性
它也是一个布尔属性，规定在页面加载时，域自动得获取焦点
这个就是页面刚加载出来时，有了这个属性的框就会亮着--是被选中的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:focus{
border:2px solid green;
}
input{
/* 设置边框前必须写这个，不然会黑 */
outline: none;
}
</style>
</head>
<body>
first name:<input name="text" name="fname" autofocus> <br/>
last name:<input name="text" name="lname"><br/>
</body>
</html>input form 属性
form属性规定输入域所属的一个或多个表单。
如果需要引用一个以上的表单，请使用空格分隔列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:focus{
border:2px solid green;
}
input{
/* 设置边框前必须写这个，不然会黑 */
outline: none;
}
</style>
</head>
<body>
<form action=" " id="form1">
first name:<input type="text" name="fname" autofocus> <br/>
last name:<input type="text" name="lname"><br/>
<input type="submit">
</form>
<!-- 虽然它不在表单内，但是通过form的两个值一样，输入值后一样可以提交 -->
姓名：<input type="text" name="cute" form="form1">
</body>
</html>input formaction属性---没做出效果
这个属性用来描述表单提交的url地址
这个属性会覆盖form元素中的action属性。
注：这个属性用于type=submit和type=image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="13.html" >
first name:<input type="text" name="fname" autofocus> <br/>
last name:<input type="text" name="lname"><br/>
<!-- 他可以把表单的地址提交到页面上 -->
<input type="submit" formaction="13.html" >
</form>
</body>
</html>input formenctype-----这个没看出有啥区别
描述表单提交到服务器的数据编码--只对form表单中method=post表单
formenctype属性覆盖form元素的enctype属性
该属性与type=submit和type=image配合使用
input formmethod
定义了表单提交的方式
覆盖了from元素的method属性
该属性与type=submit和type=image配合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="13.html" >
first name:<input type="text" name="fname" autofocus> <br/>
last name:<input type="text" name="lname"><br/>
<!--formmethod等级高于method -->
<input type="submit" formmethod="post" >
</form>
</body>
</html>input formnovalidate属性
novalidate布尔属性,input元素无需验证
formnovalidate属性会覆盖novalidata
formnovalidate属性与type=submit一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="13.html">
email:<input type="email" name="lname"><br/>
<!--formnovalidate等级高于novalidate -->
<input type="submit" formnovalidate="formnovalidate" >
</form>
</body>
</html>input formtarget 属性
formtarget属性指定一个名称或一个关键字来指明表单提交数据接受后的展示。
formtarget覆盖target
forntarget属性与type=submit和type=image配合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="13.html">
<input type="text" name="lname"><br/>
<!--formtarget等级高于target -->
<input type="submit" formtarget="_blank" >
</form>
</body>
</html>input height width 属性
height width 适用于image类型的input标签
注：图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变（尽管图片已经加载）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html">
first name:<input name="text" >
<input type="image" src="img/0.webp" alt="submit" width="100" height="100" >
</form>
</body>
</html>input list 属性
list属性规定输入域的datalist。datalist是输入域的选项列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html" method="get">
<input list="cc" name="dd">
<datalist id="cc">
<option value="可爱">
<option value="有钱">
<option value="漂亮">
</datalist>
<input type="submit">
</form>
</body>
</html>input min max属性
min和max step属性都来包含数字/日期的input类型规定约束限定。
min max step属性适用于以下类型的input标签：data pickers number range
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html" method="get">
输入2021年5月前的日期：
<input type="date" name="bady" max="2021-5-31"><br/>
输入2020年12日之后的日期：
<input type="date" name="bday" min="2020-12-31"><br/>
数字在1-6之间：
<input type="number" name="num" min="1" max="6"><br/>
<input type="submit">
</form>
</body>
</html>input multiple属性
multiple是一个布尔属性
它可以规定input元素中选择多个值
它适合email和file类型的input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html" method="get">
选择图片：<input type="file" name="img" multiple>
<input type="submit">
</form>
</body>
</html>input pattern属性
pattern属性描述了一个正则表达式用于验证input元素的值
注：pattern属性适用于以下类型的input，text search url tel eamil password.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html" method="get">
请输入3位英文字母<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="three letter country code">
<input type="submit">
</form>
</body>
</html>input placeholder
它是一种提示，描述输入域所期待的值。在用户输入值会显示在输入域中。
placeholder适用于 input的 text serach url telephone email password
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html" method="get">
<input type="text" name="fname" placeholder="你叫">
</form>
</body>
</html>input required
required属性是布尔属性
required属性规定必须在提交之前填写输入域（不能为空）
required属性适用于以下类型的input类型 text search url telephone email password date pickes
number checkbox radio file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="3.html" method="get">
<input type="text" name="fname" required>
<input type="submit">
</form>
</body>
</html>input step
step属性为输入域规定合法的数字间隔
eg:step="3" 表示合法的数为-3 0 3 6 等。
step属性可以与max与min属性创建一个区域
step属性与以下type类型一起使用：number range date datetime datetime-local month time week
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action=" " method="get">
<!-- 注意只能和规定类型使用才有效 -->
<input type="number" name="num" step="3" >
<input type="submit">
</form>
</body>
</html>语义元素===有意义的元素
什么是语义元素
一个语义元素能够清楚的描述它的意义给浏览器和开发者。
eg:无语义元素：div span---不需要考虑内容
语义元素 form table img ----清楚的定义了它的内容
html5提供了新的语义元素来明确一个web页面的不同部分
section 元素
section标签定义文档中的节（区段）。比如章节、页眉、页脚或文档中的其他部分。
根据w3chtml5文档：section包含了一组内容及其标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<h1>wwf</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam hic suscipit earum animi eum voluptates ut quis nisi iusto nostrum.</p>
</section>
</body>
</html>article 元素
article标签定义独立的内容
article元素使用实例
Forum post Blog post News story Comment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<h1>Internet Explorer</h1>
<p>windows internet Explorer 9 在2011年3月14日21:00发布</p>
</article>
</body>
</html>nav元素
nav标签定义导航链接的部分
nav元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在nav元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<nav>
<a href="18.html/">18.html</a> |
<a href="19.html/">19.html</a>
</nav>
</body>
</html>
aside元素
aside标签定义页面主区域内容之外的内容（比如侧边栏）
aside标签的内容应与主区域的内容相关
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epoct Center is a theme park in Diseny world,Florida</p>
</aside>
</body>
</html>header元素
header元素描述了文档的头部区域
header元素主要用于定义内容的介绍展示区域
在页面中你可以使用多个header元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>Internet Explorer</h1>
<p><time pudate datetime="2011-03-15"></time></p>
</header>
<p>windows internet Explorer 9是在2011年3月14日21:00发布的</p>
</article>
</body>
</html>
footer元素
footer元素描述了文档的底部区域
footer元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。
文档中你可以使用多个footer元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<footer>
<p>Posted by:Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</body>
</html>
figure和figcaption元素
figure标签规定独立的流内容（图像，图表、照片、代码等）
figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响
figcaption标签定义figure元素的标题
figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<figure>
<img loading="lazy" src="img/11.jpg" alt="The Pulpit Rock" width="300" height="200">
<figcaption> Fig1.-The Pulpit Pock,Norway.</figcaption>
</figure>
</body>
</html>我们可以开始使用这些语义元素吗？
以上元素除了figcaption之外都是块元素，为了让块元素在所有版本的浏览器中生效，需要在样式表中设置一下属性。
header,section,footer,aside,nav,article,figure{
display:block;
}
或者使用html5 shiv js脚本来解决ie的兼容问题。
html5 web存储，一个比cookie更好的本地存储方式。
什么是html5web存储
使用html5可以在本地存储用户的浏览数据
早些时候，本地存储使用的是cookie,但是web存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。
数据以键/值对存在，web网页的数据只允许该网页访问使用。
localStorage 和sessionStorage 浏览器是否支持
Strorage 存储
在使用web存储前，先检测浏览器是否支持localStorage和sessionStorage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
if(typeof(Storage)!=="undefined"){
//是的！支持localStorage sessionStorage对象
alert(11)
}else{
// 不支持web存储
alert(22)
}
</script>
</body>
</html>客户端存储数据的两个对象为：
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一个窗口或标签页的数据，在关闭窗口或标签页之后将删除这些数据。
localStorage
localStorage对象存储的数据没有时间限制。第二天、第二周或一年之后，数据依然可以使用
使用key="sitename"和value="菜鸟教程"创建一个localstroage键/值对。
检索值为sitename的值然后将数据插入id="result“的元素中
看下面的创建并插入 1 2
移除localStorage中的sitename 这个好像没写对
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="cc">11</div>
<script>
if(typeof(Storage)!=="undefined")else
</script>
</body>
</html>localStorage.removeItem("sitename");
localStorage常用额api
保存数据 localStorage.setltem(key value);
读取数据 localStorage.getitem(key);
删除单个数据 localStorage.removeItem(key);
删除所有数据 localStorage.clear();
得到某个索引的key localStorage.key(index);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="cc"></div>
<script>
if(typeof(Storage)!=="undefined")else
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="cc"></div>
<script>
if(typeof(Storage)!=="undefined")else
</script>
</body>
</html>键值对通常以字符串存储，可以按自己需求转换格式
例子：用户点击按钮的次数---不懂
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function clickCounter()else{
//不懂clckcount那里来的
localStorage.clickcount=1;
}
document.getElementById("cc").innerHTML="你已经点了按钮"+localStorage.clickcount+"次";
}
else
}
</script>
</head>
<body>
<p>
<button onclick="clickCounter()" type="button">点我</button>
</p>
<div id="cc"></div>
</body>
</html>sessionStorage对象 会话对象
sessionStorage方法针对一个sesion进行数据存储。当用户关闭浏览器窗口后，数据就会被删除。
localstorage和sessionStotage，可使用的api一样。
保存数据 localStorage.setltem(key value);
读取数据 localStorage.getitem(key);
删除单个数据 localStorage.removeItem(key);
删除所有数据 localStorage.clear();
得到某个索引的key localStorage.key(index);
创建并访问一个sessionStorage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function clickCounter()else{
sessionStorage.clickcount=1;
}
document.getElementById("cc").innerHTML="在这个会话中你已经点击该按钮"+sessionStorage.clickcount+"次";
}else
}
</script>
</head>
<body>
<p>
<button onclick="clickCounter()" type="button">点我</button>
</p>
<div id="cc"></div>
</body>
</html>web storage开发一个简单的网站列表程序
网站列表程序功能：
可以输入网站名，网址，以网站名作为key存入localStorage
根据网站名，查找网址
列出当前已保存的所有网站
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<label for="sitename">网站名（key）:</label>
<input type="text" id="sitename" name="sitename" class="text"/><br/>
<label for="siteurl">网址（value）:</label>
<input type="text" id="siteurl" name="siteurl"/><br/>
<input type="button" onclick="save()" value="新增记录"/><br/><br/>
<label for="search_phone">输入网站名</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站" />
<p id="find_result"><br/></p>
</div>
<!-- <div id="list">
</div> -->
<script>
//载入所有存储在localStorage的数据
// loadAll();
//保存数据
function save()
//查找数据
function find()
//将所有存储在localStorage中的对象提取出来，并展现到界面上
// function loadAll()
// result+="</table>";
// list.innerHTML=result;
// }else{
// list.innerHTML="数据为空...";
// }
// }
</script>
</body>
</html>网站别名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<label for="keyname">别名（key）:</label>
<input type="text" id="keyname" name="keyname" class="text"/><br/>
<label for="sitename">网站名</label>
<input type="text" id="sitename" name="sitename" class="text"/><br/>
<label for="siteurl">网址：</label>
<input type="text" id="siteurl" name="siteurl" /><br/>
<input type="button" onclick="save()" value="新增记录"/><br/><br/>
<label for="search_phone">输入别名（key）:</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站" />
<p id="find_result"><br/></p>
</div>
<div id="list">
</div>
<script>
//保存数据
function save()
//查找数据
function find()
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll()
result+="</table>";
list.innerHTML=result;
}else{
list.innerHTML="数据为空...";
}
}
</script>
</body>
</html>web sql数据库不是html5规范的一部分，但是它是一个独立的规范，引入了一组使用sql操作客户端的Apis
openDatebase:使用现有的数据库或者新建的数据库创建一个数据库对象。
openDatebase() 可以打开已有数据库，如果数据库不存在，就建立。
它有5个参数 数据库名称 版本号 描述文本 数据库大小 创建回调（它汇总创建数据数据库后被调用）
transaction:控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：用于执行实际的Sql查询。
就是这个我自己也很懵
最开始直接写在html页面，出不来，只有 状态信息四个字。
然后写了一个sql脚本，里面只写了创建数据库，然后还不不出来
今天打开了数据库HeidISQL好像就可以了。
然后测试了两种，一种关闭了数据库，一种写的数据库名不是脚本上的数据库名
然后都成功了
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
var db = openDatabase('ff', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
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")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
使用html5，通过创建cache manifest文件，可以轻松创建web应用程序的离线版本
什么是应用程序缓存 Application Cache
html5引入了应用程序缓存，这意味着web应用可以进行缓存，并没有因特网连接时进行访问
应用程序缓存为应用带来三个优势
离线浏览--用户可以在应用离线时使用他们
速度-已缓存资源加载得更快
减少服务器负载--浏览器将只从服务器下载更新过或更改过的资源
Cache Manifest 基础
如需启动应用程序缓存，请在文档的html标签中包含manifest属性
<!DOCTYPE html>
<html mainfest="xx.appcache">
...
<html>每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存（除非在mainfest文件中直接指定了该页面）
manifest文件的建议的文件扩展名为 .appcache
manifest文件需要配置正确的MIME-type,即“text/cache-mainfest”。必须在web服务器上进行配置
Manifest文件
manifest文件时简单的文本文件，它告知浏览器被缓存的内容和没有被缓存的内容
manifest文件可以分为三个部分
CACHE MANIFEST ----在此标题下列出的文件将在首次下载后进行缓存
NETWORK --- 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK ---在此标题下列出的文件规定当页面无法访问时的回退页面
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
cache manifest必写，这里列出了三个资源，css文件，gif图像，js文件。当mainfest文件加载后，浏览器会从根目录下载这三个文件，即使用户与网络断网，这些资源依然可以使用。
NETWORK:
logon.php
NETWORK:
*
这里有两种情况，第一种它规定login.php永远不会被缓存，且离线时不可用
第二种* 星号指示所有其他资源/文件都需要网络连接
FALLBACK
/html/ /offline.html
fallback规定如果无法建立网络连接，用offline.html代替/html5/目录中的所有文件
也就是说第一个是资源，第二个为替补
完整的Mainfest文件
CACHE MANIFEST
# 2021-09-06 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
logon.php
FALLBACK
/html/ /offline.html
#可以注释。
应用的缓存会在manifest文件更改时更新
如果想要让浏览器重新缓存可以更新注释的日期和版本号
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况
用户清空浏览器缓存
manifest 文件被修改
有程序来更新应用缓存
注意：一但文件被缓存，浏览器会继续展示已缓存的版本，即使你修改了服务器上的文件。
为了确保浏览器的更新缓存，就需要更新manifest文件。
浏览器对缓存数据的容量限制可能不太一样，某些浏览器设置的限制是每个站点5MB
什么是？
当在html页面中执行脚本时，页面的状态是不可响应的，直到脚本已经完成。
web worker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。你可以继续做你想做的是，比如点击、选取内容等。这个时候web worker在后台运行。
1.检测浏览器是否支持
if(typeof(Worker)!=="undefined){
//是的！web worker支持!
//代码......
}else{
//抱歉！web Worker 不支持
}
2.创建web Worker文件
在js中创建web worker---就是在hubliderx中建立一个后缀名为js的文件，再在里面写代码
3.创建Web Worker对象 -检测它是否存在
有了这个文件后，现在需要从html页面调用它。
如果存在就调用，不存在就创建一个新的Web Worke对象,然后运行demo_workers.js中的代码.
通过onmessage事件监听器来从web Worker发生和接受消息
if(typeof(w)=="undefined"){
w=new Worker("demo_workers.js");
}
w.onmessage=function(event)
4.终止web Worker
创建web worker对象后，它会继续监听消息（即使在外部脚本完成之后），直到被终止为止
需要终止web worker,并释放浏览器/计算机资源，使用terminate（）方法
w.terminate();
5.web worker无法访问的js对象
window对象
documnet对象
parent对象
原因是因为web worker位于外部文件中
例子：完整代码
//demo_worker.js
var i=0;
function timeCount()
timedCount();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>计数：<output id="result"></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<script>
function startWorker()
w.onmessage=function(event);
}else
}
function stopWorker(){
w.terminate();
w=undefined;
}
</script>
</body>
</html>html5服务器发送事件允许网页获得来自服务器的更新
if(typeof(EventSource)!=="undefined){
}else
Server-Sent事件指的是网页自动获取来自服务器的更新。
以前也可以做到，前提是网页询问是否有可用的更新。通过服务器发送事件，更新能够自动到达
例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
//1.创建一个新的EventSource对象，然后规定发送更新的页面的URL(本例中是demo_sse.php)
//2.每接受一次更新，就会发送onmessage事件
//3.当onmessage事件发送时，把已接受的数据推入id为result的元素中
var source=new EventSource("demo_sse.php);
source.onmessage=function(event)
EventSource对象
onopen 当通往服务器的连接被打开
onmessage 当接受到消息
onerror 当发生错误
服务器端代码----就不明白它们来干嘛
想让上面例子运行，还需要发送数据更新的服务器（比如php asp）-----不懂这句话
服务端事件流的语法非常简单，把contet-Type报头设置为text/event-stream.
php
把contet-Type报头设置为text/event-stream
规定不对页面进行缓存
输出发送日期
向网页刷新输出数据
<?php
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
$time=data('r');
echo "data:The server time is:{$time}
";
flush();
?>
ASP 代码（VB）（demo-sse.asp）
把contet-Type报头设置为text/event-stream
规定不对页面进行缓存
输出发送日期
向网页刷新输出数据
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data："&now())
Response.Flush()
%>
案列----这个没成功好像是服务端的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>获取服务端更新的数据</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
}else
</script>
</body>
</html>
WebSocket 是和html5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
WebSocket让客户端和服务端之间的数据交换变得简单，允许服务端主动向客户端推送数据。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成看一条快速通道，两者之间就可以直接数据传送
很多网站为了实现推送技术，所用的技术都是ajax轮询。
轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出http请求，然后由服务器返回最新的数据给客户端的浏览器。这个的缺点是浏览器需要不断的向服务器发出请求，然而http请求可能包含较长的头部，其中真正有效的数据可能只是一小部分，这样会浪费很多带宽等资源。
html5 WebSocket协议，能更好的节省服务器资源和带宽，并能够更实时的进行通讯服务器
浏览器通过js向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器就可以通过TCP连接直接交互数据。
当你回去Web Socket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接受服务器返回的数据。
API用于创建WebSocket对象
var Socket=new WebSocket(url,[protocol]);
url 指定连接的url
protocol 可选，指定了可接受的子协议
webSocket属性
Socket.readyState 只读属性readyState表示连接状态 0--连接尚未建立 1---连接已经建立，可以进行通信 2--连接正在进行关闭 3---连接已经关闭或者连接不能打开
Socket.bufferedAmount 只读属性bufferedAmount已被send()放入正在队列中等待传输，但是还没有发出UTF-8文本字节数
webSocket事件
事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接受服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
webSocket方法
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
1.安装pywebsocket----感觉这与前端无关，有关不负责啊
------创建支持WebSocket的服务，可以从pywebsocket下载mod_pywebsocket，或者使用git命令下载。
git clone https://github.com/googlearchive/pywebsocket
<p>
mod_pywebsocket 需要 python 环境支持</p>
mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：</p><ul>
<li><p>解压下载的文件。</p></li>
<li><p>进入 <b>pywebsocket</b> 目录。</p></li>
<li><p>执行命令：</p>
<pre>$ python setup.py build
$ sudo python setup.py install
查看文档说明
$ pydoc mod_pywebsocket
开启服务
在pywebsocket/mob_pywebsocket目录下执行以下命令
$ sudo python standalone.py -p 9998 -w ../example/
以上命令会开启一个端口号为 9998 的服务，使用 -w 来设置处理程序 echo_wsh.py 所在的目录。
webSocket协议本质上是一个基于TCP的协议
为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的http请求不同，包含了一些附加头信息，其中附加头信息Upgrade:WebSocket表明这是一个申请协议升级的http请求，服务器解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的websocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器的某一方主动的关闭连接。
客户端的html和js
目前大部分浏览器支持WebSocket（）接口，你可以在以下浏览器中尝试实例 Chrome Mozills Safari
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function WebSocketTest();
ws.onmessage=function(evt){
var received_msg=evt.data;
alert("数据已接受");
};
ws.onclose=function(){
//关闭websocket
alert("连接已关闭");
};
}else{
//浏览器不支持websocket
alert("浏览器不支持");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行webSocket</a>
</div>
</body>
</html>html代码规范
html5元素名推荐小写
eg:<h5></h5>
空元素要关闭
eg：<br/>
使用小写属性名，属性值使用引号
eg:<div class="me"><div>
图片属性使用alt属性，并且定义好图片的尺寸，在加载时预留指定空间，减少闪烁
eg：<img src="1.jpg" alt="html5" style="width:128px;height:128px">
缩进使用两个空格
样式表
短的规则写成一行，长的规则写成多行
eg:p.into {font-family: Verdana; font-size: 16em;}
空格
在逗号和冒号后添加空格
web上的多媒体指的是音效、音乐、视频和动画。
现代网络浏览器已支持很多多媒体的格式。
多媒体来自多种不同的格式。它可以是你听到的看到的任何内容、文字、图片、音效、录音、电影、动画等。
在interent上，可以发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
不同的浏览器以不同的方式处理对音效、动画、视频的支持。
格式 多媒体元素（视频等）存储在媒体文件中
确定媒体类型的方法查看文件扩展名。.html/.htm html页面 .xml xml文件 .css 扩展名指示样式表 图片格式.gif/.jpg等
多媒体元素也有不同扩展名的文件格式。
MP4 互联网推出新的视频格式
YouTube 推荐使用Mp4
flash players 支持mp4
html5支持mp4
.rm
.ram
.swf
.flv
html5浏览器标准只支持mp4/webM/ogg视频格式
mp3是一种音频压缩技术，全称是动态影像专家压缩标准音频层面3 moving picture experts group audio layer lll 简称mp3,它被设计来大幅度的降低音频数据量。
html5最新标准支持mp3 wav ogg音频格式
.mid
.midi
.rm
.ram
.MP3
.MPGA
插件的功能是扩展html浏览器的功能
辅助应用程序是可由浏览器启动的程序。辅助应用程序也成为插件。
辅助程序可用于播放音频和视频等。
辅助程序使用<object>标签加载。插件可以通过<object>标签或者<embed>标签添加到页面中
辅助程序能让用户控制部分或全部播放设置。比如后退、暂停、停止、播放。
所有主流浏览器都支持
object定义了在html文档中嵌入的对象
该标签可用于插入对象，例如在网页中嵌入java小程序、pdf阅读器、flash播放器
包含html文件
插入一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<object width="400" height="50" data="filename.swf"></object>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<object width="400" height="50" data="2.html"></object>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>我是页面h2</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<object data="2020021909.jpg"></object>
</body>
</html>所有主流浏览器都支持<embed>元素
<embed>元素表示一个HTML Embed对象
该元素只会在html5页面上被验证，这个元素没有关闭标签，不能使用替代文本
<embed>元素可以用于插入对象，例如在网页中嵌入java小程序、pdf阅读器、flash播放器
包含html文件
插入一张图片
注意：embed与object的区别有引入资源 src data 和一个单标签一个双标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<embed src="filename.swf">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<embed src="5.html">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>我是5.html</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<embed src="2020021909.jpg">
</body>
</html>声音在HTML中可以使用不同的方式播放
要确保音频在所有浏览器和所有硬件上都能播放
Internet Explorer Chrome Firefox Safari Opera
PC Mac Ipad ipone
使用浏览器插件，插件可以使用object/embed标签添加到页面上。
这些标签定义资源（通常非html资源）的容器，根据类型，他们会由浏览器显示，也会由外部插件显示。
embed标签定义外部（非html）内容的容器。
它是html5标签，html4非法，但在所有浏览器有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<embed src="Akiyoshi Yasuda - 恋の妖精のせい (short).mp3">
</body>
</html>存在问题
在html4无效
不同浏览器对音频格式的支持不同
浏览器不支持该格式，没有插件就无法播放该音频
如果用户的计算机没有安装插件，无法播放音频
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放
object标签定义外部（非html）内容的容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<object data="安野希世乃 - ULTIMATE (最终的).mp3"></object>
</body>
</html>
存在问题
不同浏览器对音频格式的支持不同
浏览器不支持该格式，没有插件就无法播放该音频
如果用户的计算机没有安装插件，无法播放音频
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放
它是html5标签，html4非法，但在所有浏览器有效
它支持的浏览器有版本区别
使用audio来描述mp3文件，如果失败，会显示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls>
<source src="安野希世乃 - ULTIMATE (最终的).mp3" type="audio/mpeg"></source>
<source src="安野希世乃 - ULTIMATE (最终的).ogg" type="audio/ogg"></source>
浏览器不支持
</audio>
</body>
</html>
存在问题
audio标签在html4无效
你必须把音频格式转换为不同的格式
audio元素在老式浏览器中不起作用
下面例子使用了两个不同的音频格式，html5<audio>元素会尝试以mp3或ogg来播放音频，如果失败，代码将回退尝试<embed>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls>
<source src="安野希世乃 - ULTIMATE (最终的).mp3" type="audio/mpeg"></source>
<source src="安野希世乃 - ULTIMATE (最终的).ogg" type="audio/ogg"></source>
<embed src="安野希世乃 - ULTIMATE (最终的).mp3">
</audio>
</body>
</html>如果网页包含指向媒体的超链接，大多数浏览器会使用辅助应用程序来播放文件
下面代码指向mp3文件链接用户点击链接，浏览器就会启动辅助应用程序播放该文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>这里有首好听的歌，要听的话就自己放</h2>
<p><a href="安野希世乃 - ULTIMATE (最终的).mp3">一点就放</a></p>
</body>
</html>当在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音
如果你打算在web应用程序中使用内联声音，你需要注意，用户可以已经关闭了浏览器中的内联声音选项
建议在用户希望听到内联声音的地方包含它们。比如，在用户需要听到录音并点击某个链接时，会打开页面播放录音
在html中播放视频的方法有很多种
好像没有播放进度的东西就没法进行播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video width="150" height="240" autoplay>
<source src="111.mp4" type="video/mp4"></source>
<source src="111.ogg" type="video/ogg"></source>
<source src="111.webm" type="video/webm"></source>
<object data="111.mp4">
<embed src="movie.swf">
</object>
</video>
</body>
</html>要确保音频在所有浏览器和所有硬件上都能播放
Internet Explorer Chrome Firefox Safari Opera
PC Mac Ipad ipone
embed标签可以在html页面嵌入多媒体元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<embed src="111.mp4" width="150" height="100">
<p>如果无法看,那么电脑不支持</p>
</body>
</html>存在问题
html4无法识别embed标签，你的页面无法通过验证
如果浏览器不支持flash,视频将无法播放
ipad和iphone不能显示flash视频
如果你将视频转为其他格式，那么它不可以在所有浏览器中播放
object标签可以让html页面嵌入多媒体元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<object data="intro.swf"></object>
</body>
</html>
存在问题
如果浏览器不支持flash，将无法播放视频
ipad和iphone不能显示flash视频
如果你将视频转为其他格式，那么它不可以在所有浏览器中播放
html5<video>标签定义了一个视频或者影片
video元素在现代浏览器中都支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video width="150" height="100" controls autoplay>
<source src="111.mp4" type="video/mp4">
<source src="111.ogg"type="video/ogg">
<source src="111.webm" type="video/wbem">
</video>
</body>
</html>存在问题
必须把视频转为多种格式
video元素在老式浏览器中无效
用video元素来尝试播放多种格式，如果失败，会回退到embed元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video width="150" height="100" controls autoplay>
<source src="111.mp4" type="video/mp4">
<source src="111.ogg"type="video/ogg">
<source src="111.webm" type="video/wbem">
<object data="111.mp4" width="150" height="100">
<embed src="111.mp4" width="150" height="100"></embed>
</object>
</video>
</body>
</html>存在问题
必须把视频转换为多种格式
如果网页包含指向媒体文件的超链接，大多数浏览器会使用辅助应用程序来播放文件
下面代码指向mp4文件链接用户点击链接，浏览器就会启动辅助应用程序播放该文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="111.mp4">想要看视频吗？点我吧</a>
</body>
</html>
当视频被包含在网页中时，它被称为内联视频
如果你打算在web应用程序中使用内联视频，你需要注意，用户可以已经关闭了浏览器中的内联视频选项
建议在用户希望听到内联视频的地方包含它们。比如，在用户需要看到视频并点击某个链接时，会打开页面播放视频
暂时告一段落
相关推荐
- 什么是血管机复合手术室：不仅仅是DSA + 手术设备
- 什么是血管机国内首例：基于血管机的一站式急性缺血性卒中血管内治疗
- 什么是血管机北京医院血管机保修项目采购公告
- 什么是血管机佰草通源：血管“刮油机”已公布，不是海带，平时敞开吃，让脑梗远离你。
- 什么是血管机中国首创3D生物血管打印机 人类器官再造成为可能
- 什么是血管机不是老年病！1夜6例心梗敲响警钟，25岁后做好血压防护，远离血管危机
- 什么是血管机2023年河北专升本运动生理学考试大纲
- 什么是血球仪项夫：从事动物诊疗工作30余年，生命不停，学习不止
- 什么是血球仪雅培注销血球仪，这是个什么事？
- 什么是血球仪快躺在手术台上了，看看你需要做些什么！