html 总结

最新推荐文章于 2022-06-14 11:45:33 发布
最新推荐文章于 2022-06-14 11:45:33 发布
阅读量593 收藏
点赞数 1
分类专栏： 大前端 # html/css/javascript 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyyh6600/article/details/104132859
版权

目录

一 html 简介

1.1 什么是 html

1.2 html 技术方面组成

1.3 html 内容方面组成

二 html元素

2.1 什么是元素

2.2 语法约束

三 常用字符集、标签实体

四 html常用颜色表示

五 html注释

六 html 标签

6.1 标签分类

6.2 常用格式标签

6.3 无意义块标签和行标签

6.4 文本标签

6.5 img 标签

6.6 超链接标签

6.7 表格标签

6.8 语义化标签（慎用）

6.9 视频标签

6.10 音频标签

七 html 表单

7.1 表单概念

7.2 常用表单

八 html 框架（frameset）

九 html 内联框架（iframe）

十 html5 拖放

十一 html5 画布vsSVG

11.1 区别

11.2 画布

11.3 SVG

十二 html5 地理定位

十三 html5 web 存储

13.1 localStorage

13.2 sessionStorage

十四 html5 应用缓存

十五 html5 web workers

十六 html5 服务器发送事件

十七 参考

一 html 简介

1.1 什么是 html

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

1.2 html 技术方面组成

1) html5 
作用:页面的基本结构

2) css3
作用:把页面标签进行包装和修饰

3) javascript 
作用:把修饰后的页面标签加上特效或动作

1.3 html 内容方面组成

1.文档类型
<!doctype html>
建议浏览器使用html5的内核标准来阅读并解析后文

2.文档内容区
<html></html>

3.文档头部内容(对体部内容的提前声明)
<head></head>

4.文档标题
<title>云知梦-php培训|web前端培训</title>
百度等搜索引擎收录起着很大的作用

5.建议浏览器在阅读本文档时以utf-8的编码来阅读
<meta charset='utf-8'>
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

6.文档体部内容
<body></body>

注意：

html和body两个标签的区别:
1.html代表整个文档屏幕
2.body代表文档中真正的数据区域
3.当html没有设置背景色，此时body的背景色是文档整个屏幕

二 html元素

2.1 什么是元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）

2.2 语法约束

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束），空元素也要有闭合标签，如<br/>
  • 大多数 HTML 元素可拥有属性
  • 标签字母小写

三 常用字符集、标签实体

<          ---           &lt;
>          ---           &gt;
空格     ---           &nbsp;（直接敲的空格，不管多少个，浏览器只认一个）
<<        ---           &laquo;
>>        ---           &raquo;
x          ---           &times;

四 html常用颜色表示

1.英文
red

2.十六进制
#ff0000
#f00

3.十进制
rgb(255,0,0);

4.十进制
rgba(255,0,0,0.5);

五 html注释

<!-- 代码注释 -->

六 html 标签

6.1 标签分类

1  单标签和双标签
<br>
<html></html>

2  行标签和块标签
<span></span>
<h1></h1>

6.2 常用格式标签

br                   //换行,单标签
nobr               //不换行,双标签
pre                 //按源格式输出
address         //地址
abbr              //缩写
acronym       //首字母缩写
bdo               //文字方向
del                //删除线
ins                //插入
q                  //引用
blockquote   //长引用
dfn               //定义
cite              //著作标题

ul                //无序列表
ol                //有序列表
dl                //自定义列表
dt               //自定义标题
dd              //自定义列表内容

6.3 无意义块标签和行标签

div     块标签
span 行标签

6.4 文本标签

p  段落

其他样式建议通过样式解决

6.5 img 标签

<img src='a.png' width='' heigth='' alt='' title='' usemap=''>

6.6 超链接标签

<a href='' target=''></a>

额外说明：url统一资源定位符
url地址 http://www.baidu.com/home/index.php?id=10
1)http:// web服务器协议
2)www.baiud.com 域名
3)/home  网页目录
4)index.php 网页脚本
5)id=10&name=user1 给网页传参数

6.7 表格标签

1 table表格
border    边框粗细
width
height
cellspacing  规定单元边沿与其内容之间的空白。
bordercolor
align

2 tr行
align 
valign

3 th列头和td列
width
height
colspan
rowspan
align
valign

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        * {
            font-family: 微软雅黑;
        }

        td {
            text-align: center;
        }
    </style>
</head>
<body>
<table width="700px" border="5px">
    <tr>
        <td colspan="3" rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>

6.8 语义化标签（慎用）

1.article
2.footer
3.header
4.nav
5.section

6.9 视频标签

<video src="" controls='controls'></video>

属性:
1.autoplay
2.controls
3.width
4.height
5.src
6.loop 循环播放

HTML5视频结合DOM操作:
1.方法
play();
pause();

2.事件
play
pause
ended

示例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}

		body{
			margin:0px;
			padding:0px;
			background: #aaf;
		}
	</style>
</head>
<body>
	<video src="cartoon.webm" id='video'></video>
	<br>
	<button id='start'>start</button>
	<button id='stop'>stop</button>
</body>
<script>
start=document.getElementById('start');
stop=document.getElementById('stop');
video=document.getElementById('video');

start.onclick=function(){
	video.play();
}

stop.onclick=function(){
	video.pause();
}

video.onplay=function(){
	document.body.style.background='#272822';
}

video.onpause=function(){
	document.body.style.background='#aaf';
}
</script>
</html>

6.10 音频标签

<audio src="cd.png" controls></audio>

属性:
1.autoplay
2.controls
3.width
4.height
5.src
6.loop

HTML5中音频结合DOM操作:
1.方法
play();
pause();

2.事件
play
pause
ended

示例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}

		body{
			margin:0px;
			padding:0px;
			background: #aaf;
		}
	</style>
</head>
<body>
	<img src="cd.png" id="cd">
	<br>
	<audio src="go.mp3" id='video'></audio>
	<br>
	<button id='start'>start</button>
	<button id='stop'>stop</button>
</body>
<script>
start=document.getElementById('start');
stop=document.getElementById('stop');
video=document.getElementById('video');
cd=document.getElementById('cd');

start.onclick=function(){
	video.play();
}

stop.onclick=function(){
	video.pause();
}

video.onplay=function(){
	document.body.style.background='#faßa';

	s=0;
	v=50;
	sobj=setInterval(function(){
		s+=v;

		cd.style.transform='rotate('+s+'deg)';
	},30);
}

video.onpause=function(){
	document.body.style.background='#aaf';
	clearInterval(sobj);
}
</script>
</html>

七 html 表单

7.1 表单概念

HTML 表单用于收集用户输入。

7.2 常用表单

表单标签:
<form action='login.php' target='_blank'></form>

文本框:
<input type='text' name='username' value='user1'>

密码框:
<input type='password' name='password' value='123'>

提交按钮:
<input type='submit' value='Ok'>

重置按钮:
<input type='reset' value='Cancel'>

表单占位:
<input type='text' placeholder='请输入姓名:'>

表单只读属性:
<input type='text' readonly>

表单禁用属性:
<input type='text' disabled>

文本框宽度:
<input type='text' size='5'>

文本框最大长度:
<input type='text' maxlength='5'>

单选框:
<label>
    <input type='radio' name='love' value='linux'> linux
</label>
<label>
    <input type='radio' name='love' value='php'> php
</label>

多选框:
<label>
    <input type='checkbox' name='love[]' value='linux'> linux
</label>
<label>
    <input type='checkbox' name='love[]' value='php'> php
</label>

下拉菜单:
<select name='love'>
    <option value='linux'>linux</option>
    <option value='linux'>linux</option>
</select>

多选下拉菜单:
<select name='love[]' size='5' multiple>
    <option value='linux'>linux</option>
    <option value='linux'>linux</option>
</select>

文本域:
<style>
    textarea{
        resize:none;
    }    
</style>
<textarea name='mess'></textarea>

提交按钮:
<input type="submit" value='Ok'>

取消按钮:
<input type="reset" value='Cancel'>

文件上传框:
<input type="file" name='img'>

图片按钮:
<input type="image" src='submit.gif' width='200px'>

隐藏框:
<input type="hidden" name="id" value='10'>

按钮:
<input type="button" value="不提交表单">
<button>提交表单</button>

八 html 框架（frameset）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<frameset rows='100,*' frameborder='0'>
    <frame src='top.html' name='top_win'>
    <frameset cols='170,*'>
        <frame src='left.html' name='left_win'>
        <frame src='right.html' name='right_win'>
    </frameset>
</frameset>

九 html 内联框架（iframe）

iframe 用于在网页内显示网页。

<iframe src="http://www.baidu.com" frameborder="0" width='100%' height='700px'></iframe>

十 html5 拖放

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

示例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

1 设置元素可拖放

draggable="true"

2 拖动什么 - ondragstart 和 setData

3 放到何处 -  ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

4 进行放置 - ondrop

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

十一 html5 画布vsSVG

11.1 区别

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

11.2 画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

示例-线条

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

 示例-圆

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

示例-渐变

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

示例-图像

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);

</script>

</body>
</html>

11.3 SVG

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

示例

<!DOCTYPE html>
<html>
<body>

<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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

十二 html5 地理定位

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

示例

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;	
  }
</script>
</body>
</html>

getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性描述
coords.latitude十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔，海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，从正北开始以度计
coords.speed速度，以米/每秒计
timestamp响应的日期/时间

 

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

 

十三 html5 web 存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

13.1 localStorage

示例：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
	{
	localStorage.pagecount=Number(localStorage.pagecount) +1;
	}
else
	{
	localStorage.pagecount=1;
	}
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>

</body>
</html>

13.2 sessionStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

示例：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
	{
	sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
	}
else
	{
	sessionStorage.pagecount=1;
	}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

</body>
</html>

十四 html5 应用缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

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

示例：

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>
</body>
</html>

 demo_html.appcache

CACHE MANIFEST
demo_time.js
img_logo.gif

demo_time.js

function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}

 

1 Cache Manifest 基础

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

2 Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

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

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*

FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html5/ /404.html

注释：第一个 URI 是资源，第二个是替补。

3 更新缓存

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

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

 完整的 Manifest 文件

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

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

 

注意：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

十五 html5 web workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

示例：

<!DOCTYPE html>
<html>
<body>

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button> 
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
  {
  if(typeof(w)=="undefined")
  {
  w=new Worker("/example/html5/demo_workers.js");
  }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker()
{ 
w.terminate();
}
</script>

</body>
</html>

demo_workers.js

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

1 检测 Web Worker 支持

if(typeof(Worker)!=="undefined")

2 创建 web worker 文件

demo_workers.js

代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

3  创建 Web Worker 对象

  w=new Worker("demo_workers.js");

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

4 终止 Web Worker

w.terminate();

注意：

Web Workers 和 DOM

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

  • window 对象
  • document 对象
  • parent 对象

十六 html5 服务器发送事件

HTML5 服务器发送事件  （Server-Sent ） - 单向消息传递，Server-Sent 事件指的是网页自动获取来自服务器的更新。

示例：

<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("/example/html5/demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br />";
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
  }
</script>

</body>
</html>

1 检测 Server-Sent 事件支持

if(typeof(EventSource)!=="undefined")

2 接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

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

例子解释：

  • 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
  • 每接收到一次更新，就会发生 onmessage 事件
  • 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

3 服务器端代码实例

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

PHP 代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

代码解释：

  • 把报头 "Content-Type" 设置为 "text/event-stream"
  • 规定不对页面进行缓存
  • 输出发送日期（始终以 "data: " 开头）
  • 向网页刷新输出数据

 

EventSource 对象

在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

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

十七 参考

https://www.w3school.com.cn/h.asp

示例：

https://github.com/TonyChen-9102/HtmlSummaryExample

TonyChen-9102
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML特殊字符大全
weixin_33693070的博客
09-15 569
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码     &amp;#32; !   &amp;#33; " &amp;quot; &amp;#34; #   &amp;#35; $   &amp;#36; %   &amp;#37; &amp; &amp;amp; &amp;#38; ...
html中的param标签,html param标签属性实例详解
weixin_31225063的博客
07-03 1773
html param标签属性实例详解发布时间：2020-09-26 14:39:05来源：亿速云阅读：105作者：小新这篇文章主要介绍了html param标签属性实例详解，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。html param标签的定义和用法:param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置，...
httpClient&htmlParase
08-03
下载了几个抓包的jar包，httpClient和htmlParase包，以及连个淘宝包
HtmlParase解析html文件
water84222的专栏
08-14 316
    第一次使用htmlparser到现在已经有4个月了。现在想整理一下，备忘。 package epson; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException...
HtmlParse：一款超轻量级的HTML文件解析和爬取工具
lgsoftlee的博客
06-14 791
HtmlParse 是一款基于windwos平台的HTML文档解析工具，可快速构建DOM树，从而轻松实现网页元素的爬取工作。DOM树就是一个HTML文档的节点树，每个节点由：标签（Tag）、属性（Attribute）、文本（Text）三个值来描述。 所谓的HTML文档解析，指的就是如何构建一颗DOM树，只有成功构建出DOM树，才有可能进行后续的数据爬取和分析工作。显然，构建DOM树是比较复杂的过程，因为不是每一个HTML文档都会严格按照规范来书写，因此解析过程需要具有一定容错能力。此外，解析效率也是一个
html总结.xmind
09-08
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
HTML总结.xmind
02-23
HTML总结.xmind
html总结.
03-02
html总结.
html总结文档
05-12
html常用标签总结，包含各种表单标签 1.表单：<form></form> 主要属性：id name action method 2.input元素： 主要属性：name type value class type： text submit button radio checkbox hidden...
HTML中的转义字符
java生涯
07-26 3385
HTML特殊转义字符列表 最常用的字符实体 Character Entities 显示 说明 实体名称 实体编号   半方大的空白       全方大的空白       不断行的空白格     小于 < > 大于 > > &
XML基础学习手册 笔记
hotmy.com
12-03 607
book>title>XML 指南title>prod id="33-657" media="paper">prod>chapter>XML入门简介para>什么是HTMLpara>para>什么是XMLpara>chapter>chapter>XML语法para>XML元素必须有结束标记para>para>XML元素必须正确的嵌套para>chapter>book>在上面的例子中，b
HTML常用转义字符常对照表，单双引号等
Zhu_daye的博客
11-22 1176
字符 转义字符 " &quot; ' &apos; & &amp; < &lt; > &gt; 不断开空格(non-breaking space) &nbsp; 字符 十进制 转义字符 字符 十进制 转义字符 字符 ...
HTML中的特殊符号
SummerGao
01-10 718
...
HTML中常用的特殊字符
grootbaby
09-20 5706
符号 说明 编码 符号 说明 编码 符号 说明 编码 " 双引号 &amp;quot; ...
&nbsp|&quot|&amp|&lt|&gt等html字符转义
热门推荐
wusuopuBUPT的专栏
04-18 49万+
No. 文字表記 10進表記 16進表記 文字 Comment 001 " " " """ quotation mark = APL quote 002 & & & "&" ampersand
HTML转义字符大全
weixin_34023982的博客
02-21 2031
1.常用转义字符 转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“&lt;”和“&gt;”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要...
解析 html 的几种操作方式
极客点儿
03-24 5165
解析html是爬虫后的重要的一个处理数据的环节。一下记录解析html的几种方式。 先介绍基础的辅助函数，主要用于获取html并输入解析后的结束 #把传递解析函数，便于下面的修改 def get_html(url, paraser=bs4_paraser): headers = { 'Accept': '*/*', 'Accept-Encoding': ...
写了一个html特殊字符的转换代码.
malixxx
08-25 652
转换字串中的字符. 字符 实体名称 实体数字 描述 ♠ &spades; &#9824; 黑桃 ♣ &clubs; &#9827; 梅花 ♥ &hearts; &#9829; 红桃，心 ♦ &diams; &#9830; 方块牌 ◊ &loz; &#9674; 菱形 † &dagger; &#8224; 匕首 ‡ &Da...
HTML常用标签总结及用法实例
经过一段时间的学习，对于HTML也有了基础的认识。在网页基本结构中，一个HTML网页最基本由网页头...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值