HTML以及HTML5学习总结

head内的常用元素
元素	描述
<title>	定义网页的标题
<meta>	定义网页的基本信息（如刷清时间等,charset="utf-8 定义中文，charset="gbk GBK为默认编码）
<style>	定义css样式
<link>	链接外部css样式或者文件等
<script>	定义脚本文件

3.段落与文字

(1)、段落和文本标签

段落标签
标签	描述
<h1>~<h6>	标题
<p>	段落
<br>	换行符
<hr>	水平线

文本格式化标签
标签	描述
<b>	定义粗体文字
<big>	定义大号文字
<em>	定义着重文字
<i>	定义斜体文字
<small>	定义小号文字
<strong>	加重语气
<sub>	定义上标题
<sup>	定义下标题
<ins>	定义插入字
<del>	定义删除字

(2)、网页特殊符号

常用网页特殊符号
符号	写法
“ （双引号）	"
' （左单引号）	‘
' （右单引号）	’
× （乘号）	×
÷ （除号）	÷
> （大于号）	>
< （小于）	<
& （与）	&
—（长破折号）	—
\| （竖线）	\|
(空格)	（多个复制copy即可）

(3)、自闭合标签

自闭合标签与普通标签不同，自闭合标签没有结束符号，所以不能插入其他标签和文字

一般标签： <body></body>
自闭合标签：<br/>

(4)、块元素和行内元素

常见块级元素(自动换行，可设置高宽 )：div , h1-h6 , p , pre , ul , ol , li , form , table , menu , address , blockquote 以及HTML5新增的 header ，section ，aside ，footer 等

常见的行内元素（无法自动换行，无法设置宽高)：a , span , br , i , q , em , sub , sup , textarea , button , select , small , u , q , cite , lable , var , code

常见的行内块元素 (自动换行，可设置高宽 )：img , input

4.列表

(1)、有序列表

<ol type="1">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol> 


显示结果为
1.Apples
2.Bananas
3.Lemons
4.Oranges

type属性值决定序号类型

有序列表type属性值
type属性	序号类型
1	数字 1 ， 2 ， 3 （默认值）
a	小写英文字母 a ，b ，c
A	大写英文字母 A ，B ，C
i	小写罗马数字 i ， ii ， iii
I	大写罗马数字 I ，II ，III

(2)、无序列表

<ul tyle="disc"> //css中弃用tpye，写为style="list-style-type:disc"
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

显示结果为：
• Apples
• Bananas
• Lemons
• Oranges

无序列表type属性值
tpye属性值	序号类型
disc	实心圆 ●
circle	空心圆 ○
square	实心方形 ■

(3)、自定义列表

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

展示结果为：
Coffee
- black hot drink
Milk
- white cold drink

列表标签总结：

列表标签
标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	自定义列表
dt	自定义列表项
dd	自定义列表项的描述

5.表格

(1)、表格标签

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格的单元格
caption	定义表格的标题
colgroup	定义表格行的组
col	定义表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

(2)、表格基本结构

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

(3)、合并行和合并列

合并行：<td rowspan="跨度的行数">

合并列：<td colspan="跨度的列数">

6、图像

(1)、图像标签

图像标签
标签	描述
img	定义图像
map	定义图像地图
area	定义图像地图的可点击区域

img的常用属性
属性	描述
src	图像的文件地址
alt	图像显示不出提示文字
title	鼠标移到图像上时显示的文字

标签使用格式为：
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

(2)、相对路径和绝对路径

相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。

即：引用文件位置相对于当前文件的位置

绝对路径：指的是文件的完整路径。

(3)、图片格式

1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。

2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。

3、GIF格式图片图像效果很差，但是可以制作动画。

7.链接

超链接使用a标签，语法为：

<a href="链接地址" target="目标窗口的打开方式">创建链接的目标</a>

target属性
属性	描述
_self	在当前窗口打开（默认值）
_blank	在一个全新的空白窗口打开（新标签页中打开）
_top	在顶层框架中打开
_parent	在当前框架的上一层打开

还有一种较为常用的链接，锚点链接：

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
//点击查看文章4，便会跳转到文章四的位置

点击目标

<a href="#C4">查看章节 4</a>
//点击跳转在id名前加 #

跳转目标

<a id="C4">章节 4</a>
//设置id属性

8.表单

表单标签
标签	描述
form	定义用户输入的表单
input	定义输入域
textarea	定义文本域
label	定义了<input>元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并用外框包装起来
legend	定义了<fieldset>元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮

(1)、input标签表单

input元素表单属性
属性	描述
text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

text属性：

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

显示结果为：

password属性：

<form>
Password: <input type="password" name="pwd">
</form>

显示结果为：

radio属性：

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

显示结果为：

单选框的设置要保持name一致

checkbox属性：

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

显示结果为：

多选框的设置要保持name一致，可以多选

(2)、textarea标签表单

<textarea rows="行数" cols="列数">我是一个文本框</textarea>

显示结果为：

(3)、select和option

下拉列表由<select>标签和<option>标签配合使用

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

显示结果为：

9.多媒体

(1)、插入音频、视频和flash

在网页中插入音频、视频和flash都是使用embed标签。

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

(2)、插入背景音乐

为某个网页设置背景音乐，使用的是bgsound标签，只适用于IE浏览器

<bgsound src="背景音乐的地址" loop="循环次数"/>

说明：

loop="2"表示重复2次，loop="infinite"表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放。

10.浮动框架iframe

(1)、浮动框架iframe简介

浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>

说明：

src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。

(2)、设置浮动框架是否显示滚动条scrolling

对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>

scrolling属性值
属性	描述
auto	在浏览器中左对齐
yes	总是显示滚动条
no	任何情况都不显示滚动条

第二章 HTML5改变

1.HTML5更改基础

(1)、文档类型说明

HTML5文档声明如下：

<!DOCTYPE html>

(2)、标签不再区分大小写

<div>不再区分大小写</DIV> //但是一般还是使用小写

(3)、允许属性值不加引号

<div id=wrapper style=co1or: red> 不加引号 </div>

(4)、允许部分属性的属性值省略

2.id和class

(1)、id

id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。

(2)、class

对于一个元素而言，我们可以定义多个classe

总结：

小地方多用class，大地方用id

3.浏览器标题小图标

浏览器标题栏前面都会有一个小图标实现只需要在head标签添加一个link标签即可

<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>

4.新增语义化和结构标签

新增语义和结构标签
标签	描述
header	头部标签
nav	导航标签
article	内容标签
section	块级标签
aside	侧边栏标签
footer	尾部标签
main	文章主内容
mark	强调的文本
figure	规定自包含内容
figcaption	定义figure的标题
details	用户能查看或者隐藏的额外细节
summary	定义details可见标题
time	定义时间
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
prograss	定义任何类型的任务的进度
ruby	定义 ruby 注释
rt	定义字符（中文注音或字符）的解释或发音
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
wbr	规定在文本中的何处适合添加换行符

5.新增多媒体音频标签

音频 -- audio
视频 -- video

(1)、audio

语法：

<audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
</audio>

支持：

属性：

audio属性
属性	值	描述
autoplay	autoplay	音频就绪后马上播放
controls	controls	显示控件
loop	loop	音频结束时重新播放
preload	preload	音频在页面加载时加载
src	src	播放音频的地址

(2)、video

语法：

<video src="./media/video.mp4" controls="controls"></video>

支持：

属性：

video的属性
属性	值	描述
autoplay	autoplay	视频就绪自动播放
controls	controls	展示控件
width	px	设置播放器宽
height	px	设置播放器高
loop	loop	循环播放
preload	auto(预加载视频）	是否加载视频
preload	none(不预加载视频）	是否加载视频
src
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

6.新增表单属性

新增表单元素
属性	描述
datelist	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
keygen	规定用于表单的密钥对生成器字段
output	定义不同类型的输出，比如脚本的输出

新增input标签style属性
属性	描述
email	必须是Email类型
url	必须是URL类型
date	必须是日期类型
time	必须是时间类型
month	必须是月类型
week	必须是星期类型
number	必须是数字类型
tel	手机号码
search	搜索框
color	颜色选择表单

input新增属性
属性	描述
autocomplete	自动填充
novalidate	提交表单时不应该验证 form 或 input
autofocus	自动地获得焦点
formaction	描述表单提交的URL地址
formenctype	描述了表单提交到服务器的数据编码
formmethod	定义了表单提交的方式
formnovalidate	formnovalidate 属性与type="submit一起使用不验证提交
formtarget	指定一个名称或一个关键字来指明表单提交数据接收后的展示
list	规定输入域的 datalist。datalist 是输入域的选项列表
min、max	包含数字或日期的 input 类型规定限定
multiple	规定<input> 元素中可选择多个值
pattern	一个正则表达式用于验证 <input> 元素的值
placeholder	提示文本
required	必须在提交之前填写输入域（不能为空
step	输入域规定合法的数字间隔

7.HTML5事件

(1)、窗口事件

属性	值	描述
onafterprint	script	在打印文档之后运行脚本
onbeforeprint	script	在文档打印之前运行脚本
onbeforeonload	script	在文档加载之前运行脚本
onblur	script	当窗口失去焦点时运行脚本
onerror	script	当错误发生时运行脚本
onfocus	script	当窗口获得焦点时运行脚本
onhashchange	script	当文档改变时运行脚本
onload	script	当文档加载时运行脚本
onmessage	script	当触发消息时运行脚本
onoffline	script	当文档离线时运行脚本
ononline	script	当文档上线时运行脚本
onpagehide	script	当窗口隐藏时运行脚本
onpageshow	script	当窗口可见时运行脚本
onpopstate	script	当窗口历史记录改变时运行脚本
onredo	script	当文档执行再执行操作（redo）时运行脚本
onresize	script	当调整窗口大小时运行脚本
onstorage	script	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundo	script	当文档执行撤销时运行脚本
onunload	script	当用户离开文档时运行脚本

(2)、表单事件

属性	值	描述
onblur	script	当元素失去焦点时运行脚本
onchange	script	当元素改变时运行脚本
oncontextmenu	script	当触发上下文菜单时运行脚本
onfocus	script	当元素获得焦点时运行脚本
onformchange	script	当表单改变时运行脚本
onforminput	script	当表单获得用户输入时运行脚本
oninput	script	当元素获得用户输入时运行脚本
oninvalid	script	当元素无效时运行脚本
onselect	script	当选取元素时运行脚本
onsubmit	script	当提交表单时运行脚本

(3)、鼠标事件

属性	值	描述
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本
ondrag	script	当拖动元素时运行脚本
ondragend	script	当拖动操作结束时运行脚本
ondragenter	script	当元素被拖动至有效的拖放目标时运行脚本
ondragleave	script	当元素离开有效拖放目标时运行脚本
ondragover	script	当元素被拖动至有效拖放目标上方时运行脚本
ondragstart	script	当拖动操作开始时运行脚本
ondrop	script	当被拖动元素正在被拖放时运行脚本
onmousedown	script	当按下鼠标按钮时运行脚本
onmousemove	script	当鼠标指针移动时运行脚本
onmouseout	script	当鼠标指针移出元素时运行脚本
onmouseover	script	当鼠标指针移至元素之上时运行脚本
onmouseup	script	当松开鼠标按钮时运行脚本
onmousewheel	script	当转动鼠标滚轮时运行脚本
onscroll	script	当滚动元素的滚动条时运行脚本

(4)、媒体事件

属性	值	描述
onabort	script	当发生中止事件时运行脚本
oncanplay	script	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange	script	当媒介长度改变时运行脚本
onemptied	script	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended	script	当媒介已抵达结尾时运行脚本
onerror	script	当在元素加载期间发生错误时运行脚本
onloadeddata	script	当加载媒介数据时运行脚本
onloadedmetadata	script	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart	script	当浏览器开始加载媒介数据时运行脚本
onpause	script	当媒介数据暂停时运行脚本
onplay	script	当媒介数据将要开始播放时运行脚本
onplaying	script	当媒介数据已开始播放时运行脚本
onprogress	script	当浏览器正在取媒介数据时运行脚本
onratechange	script	当媒介数据的播放速率改变时运行脚本
onreadystatechange	script	当就绪状态（ready-state）改变时运行脚本
onseeked	script	当媒介元素的定位属性不再为真且定位已结束时运行脚本
onseeking	script	当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled	script	当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend	script	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate	script	当媒介改变其播放位置时运行脚本
onvolumechange	script	当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting	script	当媒介已停止播放但打算继续播放时运行脚本

(5)、其他事件

属性	值	描述
onshow	script	当 <menu> 元素在上下文显示时触发
ontoggle	script	当用户打开或关闭 <details> 元素时触发

8.html5移出元素

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

9.canvas

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形

创建：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

使javeScript绘制图像

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

绘制：

ctx.fillStyle="颜色";
fillRect(x,y,width,height) ；//定义了矩形当前的填充方式

画线：

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();//绘画空心，fill实心

画圆：

arc(x,y,r,start,stop) //x是横坐标，y是纵坐标，r是半径，start是开始位置，stop是结束位置

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

文本：

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);

渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变 // x ，y 是起始位置，x1 ，y1 是结束位置
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 // r 是半径
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

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);

把一幅图像放置到画布上：

drawImage(image,x,y)

10.拖放

拖放设置：

draggable="true"

<img draggable="true">

开始位置：

οndragstart="drag(event)"

<img draggable="true" ondragstart="drag(event)" >

结束位置：

οndragοver="allowDrop(event)

<div id="div1" ondrop="drop(event)" ></div>

放置位置：

οndrοp="drop(event)

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

JaveScript调用：

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));
}

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

11.地理定位：

getCurrentPosition() —— 获得用户的位置

运用实例（百度）：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小吉学习</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>

12.web内存

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage：

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
取回 "lastname" 的值，并把它插到 id="result" 的元素中

点击次数：

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";

sessionStorage：

点击次数：

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";

13.web应用缓存

应用缓存的好处：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

用法：

<!DOCTYPE HTML>
<html manifest="demo.appcache"> //保存位置，manifest 文件的建议文件扩展名是：".appcache"。
...，
</html>

manifest 文件有三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

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

NETWORK:
login.php  //永远不会被缓存

FALLBACK:
/html/ /offline.html   //如果无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件

注意：

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

14.web worker

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {  //检测是否存在
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");   //创建一个新的 web worker 对象，w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {      ，
            document.getElementById("result").innerHTML = event.data;
        };//添加一个 "onmessage" 事件监听器
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();  //终止 web worker
    w = undefined;  //重复使用该代码，设置为undefined
}
</script>

</body>
</html>

注意：

web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

15.SSE

Server-Sent 事件指的是网页自动从服务器获得更新

接收服务器发送事件通知：

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) { //当接收到消息
    document.getElementById("result").innerHTML += event.data + "<br>";
};

检测服务器发送事件的浏览器支持：

if(typeof(EventSource) !== "undefined") {
    // 是的！支持服务器发送事件！
    // 一些代码.....
} else {
    // 抱歉！不支持服务器发送事件！
}

EventSource 对象：

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

16.WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

以下 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 文本字节数。

属性

描述

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()	关闭连接

实例：

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>小吉学习</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

webSocket 的使用需要创建一个支持 WebSocket 的服务，下载 mod_pywebsocket 并开启服务

本文由博主在学习过程中编写，有一定程度上的参考，如有错误和问题，望理解。

萌新小吉

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML以及HTML5学习总结

目录第一章 HTML1.HTML基础（1）什么是HTML（2）HTML标签（3）HTML元素（4）声明2.HTML的基本标签3、段落与文字(1)、段落和文本标签(2)、网页特殊符号(3)、自闭合标签(4)、块元素和行内元素4、列表(1)、有序列表(2)、无序列表(3)、自定义列表5、表格(1)、表格标签(2)、表格基本结构(3)、合并行和合并列6、图像(1)、图像标签(2)、相对路径和绝对路径(3)、图片格..
复制链接

扫一扫