HTML基础

HTML介绍

以标签的形式的提供渲染所需要的资源以及结构 ,浏览器的标签解析器最终解析为文档对象模型
块级标签：在没有任何修饰下，在浏览器中独占一行的元素（div、p、hr、列表）
行级标签：在没有任何修饰的情况下，在浏览器中从左向右显示的元素。（br、img、a、span）

二、基本标签

2.1、div

块级分区，用于页面布局，

示例

<div></div>

2.2、span

文本容器，方便为文本设置样式

示例

<span>这是一段文字</span>

2.3、p

段落标签，自动在段落前后添加空行。配合br可以换行

示例

<p>这个<br>段落<br>演示了分行的效果</p>

2.4、h1-h6

标题标签，h1最大 h6最小

示例

<h1>标题1</h1>
<h2>标题2</h2>

2.4、列表

注意列表项中可以使用段落、图片等标签

2.4.1、无需列表

项目列表，列表项使用粗体圆点表示，<li>必须包裹在<ul>中

示例

<ul>
	<li>圆点列表1</li>
	<li>圆点列表2</li>
	<li>圆点列表3</li>
</ul>

2.4.2、有序列表

项目列表，列表项使用数字表示

示例

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

2.4.3、 自定义列表

自定义列表从<dl>标签开始,每个列表项从<dt>开始，<dd>是自定义列表项定义的内容

示例

<dl>
	<dt>
		<dd>自定义列表内容1</dd>
	</dt>
	<dt>
		<dd>自定义列表内容2</dd>
	</dt>
<dl>

三、表单

创建HTML表单，收集来自用户的输入

常用属性

1. action：表示表单数据发送到哪里
2. method：指出采用哪种HTTP请求发送表单数据
3. enctype：在表单像服务器发送数据前进行编码

示例

<form action="" methed=""></form>

3.1、表单输入元素

常用属性：

1. name:用于表单提交到后端服务器后识别的名字
2. type：用于设置输入元素类型，不同类型有不同的功能与外观
3. placeholder：用于设置输入元素提示语句
4. size：用于设置输入元素的宽度，默认占几个字的宽度
5. maxlength：用于设置输入元素所能接受用户输入的最大字符数
6. checked：用于设置的元素是否能选中
7. autocomplete:规定是否启用表单的自动完成功能。(on,off)
8. novalidate:使用改属性时表单不需要验证

9. enctype：在表单像服务器发送数据前进行编码，适用于post

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

示例

<input name="" type="" placeholder="" size="" maxlength="" checked="">

3.1.1、文本框元素

大部分浏览器默认宽度为20个字符

示例

<input name="" type="text" placeholder="">

3.1.2、密码框元素

密码字段不会明文显示，而是以圆点或星号代替

示例

<input name="" type="password" placeholder="">

3.1.3、按钮元素

示例

<!-- 普通按钮 - 一般会和JS脚本一起使用 -->
<input type="button" value="普通按钮"><br>
<!-- 必须放在表单form中才会起作用 -->
<!-- 表单提交按钮 -->
<input type="submit" value="提交表单数据"><br>
<!-- 表单重置按钮 -->
<input type="reset" value="恢复表单输入元素初始默认数据">
<!--单选按钮-->
<!--单选按钮的互斥效果：name属性一致会分到同一组中，同组按钮自动实现互斥效果-->
<input name="sex" type="radio" checked="checked">男
<input name="sex" type="radio" checked="checked">女

3.1.4、复选框

复选框的name属性一样会被分到同一组，方便后端取出每一组数据。

示例

<h3>为什么要卸载软件？</h3>
<ul>
    <li><input name="rea" type="checkbox" checked >不好用</li>
    <li><input name="rea" type="checkbox">占内存</li>
    <li><input name="rea" type="checkbox">要钱</li>
    <li><input name="rea" type="checkbox">经常死机</li>
</ul>

3.1.5、文件域

1. 表单提交方式必须为 post
2. 表单数据的编码格式必须为 enctype="multipart/form-data

示例

<form method="post" enctype="multipart/form-data">
    <input name="head" type="file">
    <input type="submit" value="上传">
</form>

3.1.6、下拉框（列表框）元素

常用属性：

1. size：表示列表显示几个属性，默认一个
2. multiple：表示下拉框可以多选
3. selected：表示当前选项为默认选项
4. disabled：规定禁用改选项组
5. required：规定用户提交表单前必须选择一个下拉选项（HTML5）
6. autofocus:规定页面加载时下拉列表自动获得焦点（HTML5）

示例

<select>
    <option> -- 请选择 -- </option>
    <option>湖南</option>
    <option selected="selected">湖北</option>
    <option>河南</option>
    <option>河北</option>
</select>
<select size="10" multiple >
    <option>管理员</option>
    <option selected>普通用户</option>
    <option>会员</option>
    <option>VIP会员</option>
</select>

3.1.6.1 <optgroup>

对相关的的选项进行分类

示例

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

3.1.7、文本域（多行文本框）元素

可以容纳无限数量的文本内容，超过rows会显示卷行

常用属性

1. cols：文本域宽度
2. rows：文本域高度

示例

<textarea cols="10" rows="5"></textarea>

3.1.8、<label>

增加鼠标鼠标的点击范围，点击label元素内的文字，浏览器会自动将焦点转到和标签相关的表单控件

常用属性

1. for：规定lable与那个表单元素绑定在一起
2. form：规定label字段所属的一个或多个表单

示例

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

3.1.9、<fieldset>&<legend>

对表单相关元素进行分类，会在相关表单周围绘制边框 标签为定义标题

示例

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

3.1.10、<button>

按钮标签，与标签相比，可与在元素内部，放置内容。如：图片、文本

属性值

autofocus
规定页面加载时按钮自动获得焦点(HTML5)

formaction
规定当提交表单时向何处发送表单数据。覆盖form元素的action属性，配合type=”submit“(HTML5)

formenctype
规定向服务器发送表单数据前对其进行编码。覆盖form元素的enctype属性。配合type=”submit“(HTML5)
属性值
application/x-www-form-urlencoded: 发送前对所有字符进行编码（默认）
multipart/form-data：                        不对字符编码。使用文件上传控件表单时，该值是必须的。
text/plain：                                        将孔盖转换为”+“符号，但不编码特殊字符。

formmethod
规定用于发送表单数据的HTTP方法，覆盖form元素的method属性。配合type=”submit“(HTML5)
属性值
get
post

formnovalidate
如果使用该属性，则提交表单时不进行验证，覆盖novalidate属性。配合type=”submit“(HTML5)

formtarget
规定在何处打开actionURL。覆盖form元素的target属性。配合type=”submit“(HTML5)
属性值
_blank:         在新窗口/选项卡中将表单提交到文档。
_self：          在同一框架中将表单提交到文档（默认）
_parent：      在父框架中将表单提交到文档
_top：           在整个窗口中将表单提交到文档
framename：在指定的框架中将表单提交到文档

value
规定按钮的初始值，可以由脚本进行修改

示例

<button type="button">点我!</button>

3.1.11、<datalist>（HTML5）

指定一个预先定义的输入控件选项列表，为元素提供”自动完成“的特性。用户能看到一个下拉列表，里面的选项是预先定义好的，将作为用户输入的数据

示例

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

3.1.11、<keygen>（HTML5）

定义表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
ie浏览器不支持
属性值

challenge
如果使用，则将keygen的值设置为在提交时询问。

keytype
定义密钥的安全算法
属性值
rsa： 默认。规定RSA安全算法。RSA密钥强度由用户选择
dsa：规定DSA安全算法。DSA密钥长度可由用户选择。
ec：  规定EC安全算法。EC密钥前端可由用户选择。

示例

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

3.1.12、<output>（HTML5）

说明

作为计算结果输出显示（比如执行脚本的输出）

for
描述计算中使用的元素与计算结果之间的关系。

示例

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

四、连接

4.1、<a>

说明

超链接标签，用于从一张页面连接到另一张页面

属性值

href
说明
跳转的页面位置

target
说明
新页面的打开方式
属性值
_blank： 新窗口打开。
_self：    默认，当前页面跳转。
_parent：在父窗口中打开链接。
_top：     在当前窗体打开链接，并替换当前的整个窗体(框架页)。

title
说明
鼠标悬停时的提示文字

示例

<a href="http://www.baidu.com">点击跳转</a>

4.1、图像标签

4.1.1、<img>

说明
定义HTML页面中的图像，标签作用是被引用的图像创建占位符。
属性值

src(必须属性)
说明
图像显示的URL

alt(必须属性)
说明
图片不存在时显示的提示文字

crossorigin(HTML5)
说明
设置图像的跨域属性
属性值
anonymous
use-credentials

ismap
说明
将图像规定为服务器端图像映射。当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器

usemap
说明
将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像）。
属性值
#马匹那么：一个 hash 字符 ("#") 加上要使用的

<img loading="lazy" src="smiley-2.gif" alt="Smiley face" width="42" height="42">

4.1.2、<map>&<area>

说明

1. <map>用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
2. <area>图像映射内部的区域，嵌套在 <map>标签内部

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

五、表格

说明

数据单元格内可以包含文本，图片、段落等

标签与子标签

1. <table>:定义表格
   • border：规定表格单元框是否有表格。值为1或“”；
2. <thead>:组合HTML表格的表头
3. <tbody>：定义表格的主体。
4. <tfoot>:定义表格的页脚。
5. <caption>：定义表格标题；
6. <th>定义表格的表头
   • colspan：规定表头单元格可横跨的列数
   • headers：规定与表头单元格相关联的一个或多个表头单元格
   • rowspan：规定表头单元格可横跨的行数
   • scope：规定表头单元格是否是行、列、行组、列组的头部
     • col：规定单元格是列的表头
     • row：规定单元格是行的表头
     • colgroup：规定单元格是列组的表头
     • rowgroup：规定单元格是行组的表头
7. <tr>定义表格的行
8. <td>定义表格的单元
   • colspan：规定单元格刻横跨的列数
   • headers：规定与表头单元格相关联的一个或多个表头单元格
   • rowspan：规定表头单元格可横跨的行数

<table>、<table>、<tfoot>使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

示例

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

5.1、<colgroup>&<col>

说明

1. 用于对表格中的列进行组合，方便对齐格式化
2. <col>定义用于表格列的属性

属性值

span
规定列组应该横跨的列数

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

六、框架(Iframe )

说明

可以在同一个浏览窗口中显示不止一个页面

示例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

属性值

frameborder：用于定义iframe表示是否显示边框
0移除iframe的边框
示例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

显示目标链接页面

示例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

七、文本格式化标签

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

八、HTML5

8.1、Canvas

说明

用于绘制图像（通过脚本，通常是 JavaScript）

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

8.2、SVG

说明

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

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

8.3、MathML

说明

数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

<math>...</math>

8.4、拖放（Drag 和 Drop）

说明

抓取对象后拖到另一个位置

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):

ondragstart
用户开始拖动元素时触发 ondrag - 元素正在拖动时触发
ondragend
用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter
当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover
当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop
在一个拖动过程中，释放鼠标键时触发此事件

注意： 在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>

</head>
<body>
 
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="images/login.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
    // ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    function allowDrop(ev)
    {
        // 阻止元素发生默认的行为。
        ev.preventDefault();
    }
    // ondragstart - 用户开始拖动元素时触发
    function drag(ev)
    {
        // dataTransfer，主要是用于在源对象和目标对象之间传递数据。
        // setData(format, data)设置拖拽事件中要传递的数据，
        // format的参数为数据类型，data为要存入的数据
        ev.dataTransfer.setData("Text",ev.target.id);
    }
     //ondrop 在一个拖动过程中，释放鼠标键时触发此事件
    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
</body>
</html>
</body>
</html>

8.5、Geolocation（地理定位）

说明

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

8.6、Video(视频)

说明

提供了 播放、暂停和音量控件来控制视频。

音频格式：mp3、Ogg、Wav
示例

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

8.7、Audio(音频)

说明

提供播放音频文件的标准，control 属性供添加播放、暂停和音量控件。

示例

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

8.8、HTML5 新增 Input 类型

1. color：用于选取颜色

选择你喜欢的颜色: <input type="color" name="favcolor">

3. date：从日期选择器中选择时间

生日: <input type="date" name="bday">

4. datetime：选择一个日期（UTC 时间）

生日 (日期和时间): <input type="datetime" name="bdaytime">

5. datetime-local：选择一个日期和时间 (无时区).

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

6. email： 验证e-mail 地址输入是否有错误

E-mail: <input type="email" name="email">

7. month：选择一个年份

生日 (月和年): <input type="month" name="bdaymonth">

8. number：数值的输入域

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

9. range：数值输入域，显示类型为滑动条

<input type="range" name="points" min="1" max="10">

11. search：用于搜索

Search Google: <input type="search" name="googlesearch">

12. tel:电话号码字段

电话号码: <input type="tel" name="usrtel">

13. time：选择一个时间

选择时间: <input type="time" name="usr_time">

14. url：输入url，自动验证url的值

添加您的主页: <input type="url" name="homepage">

15. week：选择周和年

选择周: <input type="week" name="week_year">

8.9、语义化标签

说明

清楚描述标签意义给开发人员

<header>

定义头部区域

<nav>

定义导航链接部分

<section>

定义文档中的区段

<article>

定义独立的内容

<aside>

定义页面主区域内容之外的内容（比如侧边栏）。

<figcaption>&<figure>

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

<footer>

定义文档底部区域

8.10、localStorage & sessionStorage

说明

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

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

常用API

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

8.11、Application Cache

优势

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

Cache Manifest 实例

<html> 标签中包含 manifest 属性,包含manifest的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

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

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

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

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

</html>

Manifest 文件
简单的文本文件，告知浏览器被缓存的内容以及不缓存的内容

CACHE MANIFEST
在此标题下列出的文件将在首次下载后进行缓存
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK
在此标题下列出的文件需要与服务器的连接，且不会被缓存
NETWORK:
login.php
规定文件 “login.php” 永远不会被缓存，且离线时是不可用的，星号（*）表示所有其他资源文件需要网络连接

FALLBACK
在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
FALLBACK:
/html/ /offline.html
如果无法建立网络连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件
第一个 URI 是资源，第二个是替补。

更新缓存

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

完整的 Manifest 文件

以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。

如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

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

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

8.12、Web Workers

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI交互）就会很流畅，不会被阻塞或拖慢。

检测浏览器是否支持 Web Worker
在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中：

var i=0;

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

timedCount();

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

注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象
我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。

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

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

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

实例代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
 
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
 
<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>
 
</body>
</html>

九、 全局属性

9.1、accesskey

accesskey：
说明
设置访问元素的键盘快捷键
示例
<a href="//www.runoob.com/html/html-tutorial.html" accesskey="h">

9.2、class

class:
说明
规定的元素类名

9.3、contenteditable

contenteditable:
说明
规定是否可编辑元素内容（HTML5）;
属性值
true:可以编辑；false：不可以编辑
示例
<p contenteditable="true">这是一个可编辑段落。</p>

9.4、contextmenu

contextmenu:
说明
规定 <div> 元素的上下文菜单。 当用户右击元素时将显示上下文菜单(html5,只有Firefox浏览器支持)

9.5、data-*

data-*:
说明
用于存储私有页面后应用的自定义数据（HTML5）
组成
data-*属性由两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
示例
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

9.6、dir

dir:
说明
设置元素中内容的文本方向
示例
ltr： 默认。从左向右的文本方向；
rtl： 从右向左的文本方向；
auto:让浏览器根据内容来判断文本方向。尽在文本方向未知时推荐使用
示例
<bdo dir="rtl">文本方向从右到左!</bdo>
bdo 元素可覆盖默认的文本方向。

9.7、draggable

draggable:
说明
指定某个元素是否可以拖动（HTML5）连接和图像默认是可以拖动的
属性值
true： 规定元素是可以拖动的；
false：规定元素是不可以拖动的
auto：使用浏览器默认特性
示例
<p draggable="true">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

9.8、dropzone

dropzone:
说明
指定是否将数据赋值、移动、链接、删除（HTML5）
属性值
copy： 拖动数据会导致被托数据产生副本；
move：拖动数据回到值被托数据移动到新位置
link:      拖动数据会生成指向原始数据的链接
没有主流浏览器支持

9.10、hidden

hidden:
说明
对元素进行隐藏，可以在用户在满足某些条件的情况下，使用js删除hidden属性（HTML5）
示例
<p hidden>这是一段隐藏的段落。</p>

9.11、id

id:
说明
规定元素的唯一ID,可以作为链接锚；
示例
<h1 id="myHeader">Hello World!</h1>

9.12、lang

lang:
说明
设置元素中内容的语言代码
示例
<p lang="fr">这是一个段落。</p>

9.13、spellcheck

spellcheck:
说明
检测元素是否拼写错误（HTML5）
可以检测的文本：
类型为text的input元素中的值（非密码）
textarea元素中的值
可编辑元素中的值
属性值
true:    规定应当对元素的文本进行拼写检查；
false：规定不应该对元素文本进行拼写检查
示例
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

9.14、style

style:
说明
规定元素的行内样式；将覆盖任何全局样式的设定

9.15、tabindex

tabindex:
说明
设置元素的Tab键控制次序
number：规定元素的tab键控制顺序（1是第一）
示例
<a href="//www.runoob.com//" tabindex="2"> runoob.com 菜鸟教程</a><br /> <a href="//www.google.com/" tabindex="1">Google</a><br /> <a href="//www.microsoft.com/" tabindex="3">Microsoft</a>

9.16、title

title:
说明
规定关于元素的额外信息；通常会在鼠标移到元素上时显示一段工具提示文本
示例
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
<p title="菜鸟教程">菜鸟教程</p>

9.17、translate

translate:
说明
指定是否一个元素的值在页面载入时是否需要翻译（HTML5）
属性值
yes：规定元素内容需要翻译；
no： 规定元素内容不需要翻译
没有主流浏览器支持