整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
學(xué)習(xí)網(wǎng)頁的概念和分類，了解靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁的不同；了解網(wǎng)頁瀏覽器的工作原理。了解HTML,XHTML,HTML5的概念，制作簡單的HTML頁面的開發(fā)。
可以在internet上通過網(wǎng)頁瀏覽信息，如新聞，圖片等，還可發(fā)布信息，如招聘信息等，網(wǎng)頁是在某個(gè)地方某一臺(tái)計(jì)算機(jī)上的一個(gè)文件。
網(wǎng)頁主要由3部分組成：結(jié)構(gòu)，表現(xiàn)，行為。
靜態(tài)網(wǎng)頁的特點(diǎn)是不論在何時(shí)何地瀏覽這個(gè)網(wǎng)頁，看到的形式和內(nèi)容都相同，且只能瀏覽，用戶無法與網(wǎng)站進(jìn)行互動(dòng)。靜態(tài)頁面由HTML編寫，擴(kuò)展名一般為.htm, .html, .shtml, .xml等。與動(dòng)態(tài)頁面相比，動(dòng)態(tài)網(wǎng)頁是以.asp, .jsp, .php, .perl, .cgi等形式為后綴。
動(dòng)態(tài)網(wǎng)頁指網(wǎng)頁的內(nèi)容可以根據(jù)某種條件而自動(dòng)改變。
采用B/S結(jié)構(gòu)，即瀏覽器/服務(wù)器結(jié)構(gòu)，用戶工作界面是通過www瀏覽器來實(shí)現(xiàn)的：
瀏覽器的工作原理：
www的基礎(chǔ)是HTTP協(xié)議，web瀏覽器就是用于通過url來獲取并顯示web網(wǎng)頁的一種軟件工具，url用于指定要取得的Internet上資源的位置與方式。
HTML是一種用來制作超文本文檔的簡單標(biāo)記語言，用其編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。
可擴(kuò)展超文本標(biāo)記語言XHTML：
XHTML是不需要編譯，可以直接由瀏覽器執(zhí)行，是一種增強(qiáng)了的HTML。它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用的更多需求，是基于XML的應(yīng)用。開發(fā)者在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行一些擴(kuò)展，由此得到了XHTML，所以，建立XHTML的目的是為了實(shí)現(xiàn)HTML向xml的過渡。
HTML5簡化了：<!DOCTYPE html>，簡化了DOCTYPE,簡化了字符集聲明，以瀏覽器的原生能力替代腳本代碼的實(shí)現(xiàn)，簡單而強(qiáng)大的HTML5API。
文件擴(kuò)展名是操作系統(tǒng)用來標(biāo)志文件格式的一種機(jī)制。擴(kuò)展名如同文件的身份說明，區(qū)別了文件的類別和作用。
HTML網(wǎng)頁的文件后綴名是.html或者.htm.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xxx">
聲明的作用，告訴瀏覽器所書寫的HTML代碼的版本。
復(fù)制代碼<meta>標(biāo)簽，是HTML文檔<head>標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽，meta標(biāo)簽分為2個(gè)重要的屬性：name和http-equiv，通常用于能夠優(yōu)化頁面被搜索的可能性。
meta標(biāo)簽下name屬性的使用：
<head>
<meta name="keywords" content="nine, twenty-three">
<meta name="description" content="...">
<meta name="generator" content="Dreamweaver">
<meta name="author" content="depp">
<meta name="robots" content="all">
</head>
復(fù)制代碼meta標(biāo)簽下的另一個(gè)屬性http-equiv,其作用是反饋給瀏覽器一些明確的信息，幫助瀏覽器更精確地展示頁面。
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>
復(fù)制代碼link標(biāo)簽，定義了一個(gè)外部文件的鏈接，經(jīng)常被用于鏈接外部css樣式。
base標(biāo)簽為整個(gè)頁面定義了所有鏈接的基礎(chǔ)定位，其主要的作用是確保文檔中所有的相對(duì)url都可以被分解成確定的文檔地址。
style標(biāo)簽用于定義css的樣式。表明了在頁面中引入一個(gè).style的樣式表。
script標(biāo)簽用于定義頁面內(nèi)的腳本。
titl標(biāo)題標(biāo)簽，body體標(biāo)簽.
一個(gè)好的HTML文檔應(yīng)具備以下3個(gè)方面：
<br>..</br>
<p>...</p>
復(fù)制代碼<p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>
復(fù)制代碼給文本加標(biāo)注：<acronym title="">...</acronym>注釋的內(nèi)容放在title屬性后的引號(hào)中，被注釋的內(nèi)容放在標(biāo)簽內(nèi)。
無序列表：ul,li，有序列表：ol li
定義列表：
<dl>
<dt>...</dt>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
</dl>
復(fù)制代碼所以總的來說：jepg可以壓縮圖像的容量，png的質(zhì)量較好，gif可以做動(dòng)畫。
矢量圖
說說矢量圖和位圖最大的區(qū)別：
無論是否對(duì)圖像進(jìn)行縮放，都不會(huì)影響矢量圖的效果，但會(huì)影響圖的質(zhì)量。
設(shè)計(jì)者一般只愿意將logo,ui圖標(biāo)，標(biāo)識(shí)符號(hào)等簡單圖像存為矢量圖。
圖像的分辨率
分辨率的單位是dpi即每英寸顯示的線數(shù)。通常所指的分辨率有兩種，屏幕分辨率和圖片分辨率，屏幕分辨率即計(jì)算機(jī)顯示器默認(rèn)的分辨率。
一般目前大部分顯示器的分辨率是1024px x 768px，圖片分辨率定義是用于量度位圖圖像內(nèi)數(shù)據(jù)量多少的一個(gè)參數(shù)。
分辨率越高的圖像，包含的數(shù)據(jù)越多，圖像的容量就越大，會(huì)消耗更多的計(jì)算機(jī)資源，需要更大的存儲(chǔ)空間。
分辨率指的是每英寸的像素值，通過像素和分辨率的換算可以測(cè)算圖片的長度。
頁面中的圖像
<img src=... alt=.../>
復(fù)制代碼<img style="vertial-align:text-top"/>
復(fù)制代碼<img style="vertical-align:middle"/>
復(fù)制代碼<img style="vertical-align:text-bottom"/>
復(fù)制代碼<img style="vertical-alignbaseline"/>
復(fù)制代碼hspace=30px表示圖像左，右兩邊與頁面其他內(nèi)容隔30px的距離。vspace=30px表示圖像上，下兩邊與頁面的其他內(nèi)容的間隔距離是30px。
<img src="" widht="" height="">
<img src="..." border=>
<hr align=".." width="..." size="...">
<a href="鏈接對(duì)象的路徑">鏈接錨點(diǎn)對(duì)象</a>
復(fù)制代碼把郵箱留給需要聯(lián)系你的人
<a href="mailto:郵箱地址">鏈接錨點(diǎn)對(duì)象</a>
復(fù)制代碼dashed 虛線
double 雙線
groove 槽線
inset 內(nèi)陷
outset 外陷
復(fù)制代碼熱點(diǎn)圖像區(qū)域的鏈接
map標(biāo)簽：
<map id=...>
<area shape="..." coords="..." href="...">
</map>
復(fù)制代碼shape屬性，用于確定選區(qū)的形狀，rect矩形，circle圓形，poly多邊形。href屬性，就是超鏈接。coords屬性，用于控制形狀的位置，通過坐標(biāo)來找到這個(gè)位置。
計(jì)算矩形的面積
<html>
<head>
<title>計(jì)算矩形的面積</title>
<style type="text/css">
.result {font-weight:bold;}
</style>
<script language="JavaScript">
function calculate() {
var length = document.data.length.value;
var width = document.data.width.value;
var height = document.data.height.value;
var area = document.getElementById('area');
area.innerHTML = length*widht;
volume.innerHTML = length*widht*height;
}
</script>
復(fù)制代碼<form action="my.php"></form>
復(fù)制代碼它表明了這是一個(gè)表單，其作用是提交my.php頁面中的數(shù)據(jù)。
<form name="data">
復(fù)制代碼原理：在客戶端接收用戶的信息，然后將數(shù)據(jù)遞交給后臺(tái)的程序來操控這些數(shù)據(jù)。
<script language="JavaScript">
復(fù)制代碼如果通過引用外部javascript程序，就像鏈接外聯(lián)樣式：
<script type="text/javascript" src="dada.js"></script>
復(fù)制代碼<form action="da.php"></form>
復(fù)制代碼提交方式用get，表單域中輸入的內(nèi)容會(huì)添加在action指定的url中，當(dāng)表單提交之后，用戶會(huì)獲取一個(gè)明確的url。get在安全性上較差，所有表單域的值直接呈現(xiàn)。post除了有可見的處理腳本程序，別的東西都可以隱藏。
<form name="dada">
復(fù)制代碼<form action="mailto:da@qq.com" method="post" name="dada"
enctype="text/plain" target="_blank"></form>
復(fù)制代碼是指用戶輸入數(shù)據(jù)的地方，表單域可分為3個(gè)對(duì)象，input, textarea, select。
input對(duì)象下的多種表單的表現(xiàn)形式。
<input name="" type="" value="" size="" maxlength="">
復(fù)制代碼<form action="" method="post">
<input name="name" type="text" size="20" maxlength="12">
</form>
<input name="secret" type="password" size="20" maxlength="20">
<input name="one" type="radio" value="one" checked="checked">
<input name="one" type="radio" value="two">
<input type="submit" value="確定">
<input type="reset" value="恢復(fù)">
復(fù)制代碼創(chuàng)建submit按鈕或reset按鈕時(shí)，name屬性不是必需的。
使用hidden來記錄頁面的數(shù)據(jù)并將它隱藏起來，用戶對(duì)這些數(shù)據(jù)通常并不關(guān)心，但是必須提交數(shù)據(jù)。
<form action=da.asp>
<input type=hidden name=somehidden value=dada>
<input type=submit value=下一頁>
</form>
復(fù)制代碼image樣式的表單
<input type="image" src="圖片/小圖標(biāo).jpg" alt="確定">
復(fù)制代碼file上傳文件的樣式表單
file樣式表單允許用戶上傳自己的文件
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body {font:120% 微軟雅黑;}
input {font:100% 微軟雅黑;}
</style>
</head>
上傳我的文件：
<form action="..." method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="uploadfile"/>
</form>
</body>
</html>
復(fù)制代碼textarea對(duì)象的表單
textarea對(duì)象的表單
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body{font:120% 微軟雅黑;}
textarea{font:80% 微軟雅黑;color:navy;}
</style>
</head>
<body>
留言板
<form action="..." method="post" enctype="multipart/form-data">
<textarea name="dada" rows="10" cols="50" value="dada">請(qǐng)說：</textarea>
</form>
</body>
</html>
復(fù)制代碼select對(duì)象的表單
select對(duì)象的表單
<form action="">
地址:
<select name="da1">
<option>1</option>
</select>
</form>
復(fù)制代碼使用optgroup標(biāo)簽配合label屬性來給選項(xiàng)分類：
<select name="上海">
<optgroup label="da1">
<option>1</option>
</optgroup>
<optgroup label="da2">
<option>2</option>
</optgroup>
</select>
復(fù)制代碼在select標(biāo)簽中加入size屬性即可，如size=6表示是一個(gè)能容納6行文字的文本框，超出設(shè)置的行數(shù)時(shí)，將出現(xiàn)滾動(dòng)條。
<select name="上海" size="6">
復(fù)制代碼表單域集合：表單域的代碼由fieldset標(biāo)簽和legend標(biāo)簽組合而成。
<form action="..." method="post">
<fieldset>
<legend>注冊(cè)信息：</legend>
輸入用戶名：<input name="name" type="text" size="20" maxlength="12">
</fieldset>
</form>
復(fù)制代碼表單輸入類型
<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
復(fù)制代碼<input type="email" name="dada" id="dada" value="23@qq.com"/>
復(fù)制代碼<input type="range" name="volume" id="volume" min="0" max="1" step="0.2"/>
復(fù)制代碼<input type="number" name="score" id="score" min="0" max="10" step="0.5"/>
復(fù)制代碼增加表單的特性以及元素
<input name="name" type="text" form="form1" required/>
<form id="form1">
<input type="submit" value="提交"/>
</form>
復(fù)制代碼<form id="form1" method="post">
<input name="name" type="text" form="form1"/>
<input type="submit" value="提交到page1" formaction="?page=1”/>
<input type="submit" value="提交到page2" formaction="?page=2"/>
<input type="submit" value="提交"/>
</form>
復(fù)制代碼placeholder特性
<input name="name" type="text" placeholder="請(qǐng)輸入關(guān)鍵詞"/>
復(fù)制代碼autofocus特性：用于當(dāng)頁面加載完成時(shí)，可自動(dòng)獲取焦點(diǎn)，每個(gè)頁面只允許出現(xiàn)一個(gè)有autofocus特性的input元素。
<input name="key" type="text" autofocus/>
復(fù)制代碼autocomplete特性用于form元素和輸入型的Input元素，用于表單的自動(dòng)完成。
input name="key" type="text" autocommplete="on"/>
復(fù)制代碼autocomplete特性有三個(gè)值，可以指定"on","off"和""不指定，不指定就將使用瀏覽器的默認(rèn)設(shè)置。
<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="23#qq.com">xxxx</option>
</datalist>
復(fù)制代碼keygen元素提供一個(gè)安全的方式來驗(yàn)證用戶。
<form action="">
<input type="text" name="name"/><br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
復(fù)制代碼<form oninput="x.value=dada.value">
<input type="range" name="volume" value="50"/>
<output name="x"></output>
</form>
復(fù)制代碼為某個(gè)表單內(nèi)部的元素設(shè)置了required特性，那么這項(xiàng)的值不能為空，否則無法提交表單。
<input name="name" type="text" placeholder="dada" required/>
復(fù)制代碼<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
復(fù)制代碼<input type="range" name="dada" id="dada" min="0" max="1" step="0.2"/>
復(fù)制代碼<form action="dada.asp" novalidate="novalidate">
<input type="email" name="user_email"/>
<input type="submit"/>
</form>
復(fù)制代碼var validityState=document.getElementById("username").validity;
復(fù)制代碼var willValidate = document.getElementById("username").willValidate;
復(fù)制代碼var validationMessage=document.getElementById("username").validationMessage;
復(fù)制代碼好了各位，以上就是這篇文章的全部內(nèi)容，能看到這里的人都是人才。我后面會(huì)不斷更新技術(shù)相關(guān)的文章，如果覺得文章對(duì)你有用，歡迎給個(gè)“贊”，也歡迎分享，感謝大家 ??！
TML5是HTML最新的修訂版本，由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。
HTML5添加了許多新的語法特征，其中包括<video>、<audio>和<canvas>元素，同時(shí)集成了SVG內(nèi)容。這些元素是為了更容易的在網(wǎng)頁中添加和處理多媒體和圖片內(nèi)容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數(shù)據(jù)內(nèi)容。新的屬性的添加也是為了同樣的目的。同時(shí)也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標(biāo)準(zhǔn)化了。同時(shí)APIs和DOM已經(jīng)成為HTML5中的基礎(chǔ)部分了。HTML5還定義了處理非法文檔的具體細(xì)節(jié)，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯(cuò)誤。
發(fā)展歷史
2004年網(wǎng)頁超文本技術(shù)工作小組（WHATWG）開始制定新標(biāo)準(zhǔn)。
2009年W3C與WHATWG合作共同為發(fā)展HTML5而努力。
2004年6月，宣布第二個(gè)草案Web Applications 。后來這兩種規(guī)范合并形成HTML5。
2007年，獲得W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。
2008年1月22日，第一份公開工作草案發(fā)布。
2014年10月28日，W3C正式發(fā)布HTML 5.0推薦標(biāo)準(zhǔn)。
新特性
HTML5將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像、動(dòng)畫以及與設(shè)備的交互都進(jìn)行了規(guī)范。
智能表單
表單是實(shí)現(xiàn)用戶與頁面后臺(tái)交互主要組成部分，HTML5在表單的設(shè)計(jì)上功能更加強(qiáng)大。input類型和屬性的多樣性大大地增強(qiáng)了HTML可表達(dá)的表單形式，再加上新增加的一些表單標(biāo)簽，使得原本需要JavaScript來實(shí)現(xiàn)的控件，可以直接使用HTML5的表單來實(shí)現(xiàn)；一些如內(nèi)容提示、焦點(diǎn)處理、數(shù)據(jù)驗(yàn)證等功能，也可以通過HTML5的智能表單屬性標(biāo)簽來完成。
繪圖畫布
HTML5的canvas元素可以實(shí)現(xiàn)畫布功能，該元素通過自帶的API結(jié)合使用JavaScript腳本語言在網(wǎng)頁上繪制圖形和處理，擁有實(shí)現(xiàn)繪制線條、弧線以及矩形，用樣式和顏色填充區(qū)域，書寫樣式化文本，以及添加圖像的方法，且使用JavaScript可以控制其每一個(gè)像素。HTML5的canvas元素使得瀏覽器無需Flash或Silverlight等插件就能直接顯示圖形或動(dòng)畫圖像。
多媒體
HTML5最大特色之一就是支持音頻視頻，在通過增加了<audio>、<video>兩個(gè)標(biāo)簽來實(shí)現(xiàn)對(duì)多媒體中的音頻、視頻使用的支持，只要在Web網(wǎng)頁中嵌入這兩個(gè)標(biāo)簽，而無需第三方插件（如Flash）就可以實(shí)現(xiàn)音視頻的播放功能。HTML5對(duì)音頻、視頻文件的支持使得瀏覽器擺脫了對(duì)插件的依賴，加快了頁面的加載速度，擴(kuò)展了互聯(lián)網(wǎng)多媒體技術(shù)的發(fā)展空間。
地理定位
現(xiàn)今移動(dòng)網(wǎng)絡(luò)備受青睞，用戶對(duì)實(shí)時(shí)定位的應(yīng)用越來，要求也越來越高。HTML5通過引入Geolocation的API可以通過GPS或網(wǎng)絡(luò)信息實(shí)現(xiàn)用戶的定位功能，定位更加準(zhǔn)確、靈活。通過HTML5進(jìn)行定位，除了可以定位自己的位置，還可以在他人對(duì)你開放信息的情況下獲得他人的定位信息。
數(shù)據(jù)存儲(chǔ)
HTML5較之傳統(tǒng)的數(shù)據(jù)存儲(chǔ)有自已的存儲(chǔ)方式，允許在客戶端實(shí)現(xiàn)較大規(guī)模的數(shù)據(jù)存儲(chǔ)。為了滿足不同的需求，HTML5支持DOM Storage和Web SQL Database 兩種存儲(chǔ)機(jī)制。其中，DOM Storage 適用于具有key/value對(duì)的基本本地存儲(chǔ)；而WebSQLDatabase是適用于關(guān)系型數(shù)據(jù)庫的存儲(chǔ)方式，開發(fā)者可以使用SQL語法對(duì)這些數(shù)據(jù)進(jìn)行查詢、插入等操作。
多線程
HTML5利用Web Worker將Web應(yīng)用程序從原來的單線程業(yè)界中解放出來，通過創(chuàng)建一個(gè)Web Worker對(duì)象就可以實(shí)現(xiàn)多線程操作。JavaScript創(chuàng)建的Web程序處理事務(wù)都是在單線程中執(zhí)行，響應(yīng)時(shí)間較長，而當(dāng)JavaScript過于復(fù)雜時(shí)，還有可能出現(xiàn)死鎖的局面。HTML5新增加了一個(gè)WebWorkerAPI，用戶可以創(chuàng)建多個(gè)在后臺(tái)的線程，將耗費(fèi)較長時(shí)間的處理交給后臺(tái)面不影響用戶界面和響應(yīng)速度，這些處理不會(huì)因用戶交互而運(yùn)行中斷。使用后臺(tái)線程不能訪問頁面和窗口對(duì)象，但后臺(tái)線程可以和貞面之間進(jìn)行數(shù)據(jù)交互。子線程與子線程之間的數(shù)據(jù)交互，大致步驟如下：①先創(chuàng)建發(fā)送數(shù)據(jù)的子線程；②執(zhí)行子線程任務(wù)，把要傳遞的數(shù)據(jù)發(fā)送給主線程；③在主線程接受到子線程傳遞回的消息時(shí)創(chuàng)建接收數(shù)據(jù)的子線程，然后把發(fā)送數(shù)據(jù)的子線程中返回的消息傳遞給接收數(shù)據(jù)的子線程；④執(zhí)行接收數(shù)據(jù)子線程中的代碼。
JavaScript 語言是采用單線程模型，也就是任務(wù)只能在一個(gè)線程上完成，一次只能做一件事，前面任務(wù)沒執(zhí)行完，后面的任務(wù)只能排隊(duì)等待，由于多核 CPU 的出現(xiàn)，單線程帶來很大不便，無法充分發(fā)揮計(jì)算機(jī)的能力。
Web Worker 就是為了 javascript 創(chuàng)造多線程而生的，主線程創(chuàng)建 worker 子線程，將一些任務(wù)分配給后臺(tái)運(yùn)行，等到子線程完成計(jì)算任務(wù)，再把結(jié)果返回給主線程，好處是計(jì)算密集型或高延遲的任務(wù)被 worker 負(fù)擔(dān)了，主線程就會(huì)很流暢。網(wǎng)頁加載展示可分為兩部分：主進(jìn)程也叫 UI 進(jìn)程，子進(jìn)程也叫工作進(jìn)程，子進(jìn)程不能控制 UI 進(jìn)程，只能進(jìn)行數(shù)據(jù)交互。
Web Worker 子線程一旦創(chuàng)建成功，就會(huì)獨(dú)立于其他腳本始終運(yùn)行，不會(huì)被主線程上活動(dòng)打斷。這樣有利于隨時(shí)響應(yīng)主線程的通信。但是這也造成 Worker 比較耗費(fèi)資源，不應(yīng)該過度使用，使用完畢之后應(yīng)該關(guān)閉。
使用 Web Worker 注意點(diǎn)：
2.1 創(chuàng)建Worker線程：
創(chuàng)建worker之前，先檢查瀏覽器是否支持它。使用 typeof 檢查，代碼如下：
if( typeof Worker !== undefined ){
console.log("支持Worker線程")
}else{
console.log("不支持Worker")
}檢查瀏覽器支持 worker 之后，主線程使用 new 命令，調(diào)用 worker() 構(gòu)造函數(shù)，新建 Worker 線程。
var myWorker = new Worker('worker.js')構(gòu)造函數(shù)的參數(shù)是一個(gè)腳本文件，該文件不能是本地文件，必須來自網(wǎng)絡(luò)腳本，該文件就是Worker 線程要執(zhí)行的任務(wù)。如果該文件加載失敗，Worker 就會(huì)失敗。
2.2 主線程與子線程數(shù)據(jù)通信：
主線程調(diào)用 postMessage() 方法，向 Worker 發(fā)消息。postMessage(參數(shù)) 方法中參數(shù)就是傳給 Worker 的數(shù)據(jù)，這個(gè)數(shù)據(jù)可以是任意格式。
myWorker.postMessage("你好")緊接著 Worker 線程，通過 onmessage 指定監(jiān)聽函數(shù)，接收消息。worker.js 代碼如下：
this.onmessage = function(res){
console.log("接收到消息",res.data)
this.postMessage("我收到消息了")
}worker子進(jìn)程收到消息之后，可以繼續(xù)向主進(jìn)程發(fā)送消息，使用 postMessage()。代碼如上。
主進(jìn)程也通過onmessage監(jiān)聽函數(shù)接收消息。
myWorker.onmessage = function(res){
console.log("主線程收到消息：",res.data)
}2.3 Worker線程
Worker線程內(nèi)部，添加 this.onmessage 監(jiān)聽函數(shù)，其中 this 是子線程的全局對(duì)象，也可以替換成 self，self 代表子線程本身。等同于：
self.onmessage 《=》 this.onmessage除了使用 self.onmessage 指定監(jiān)聽函數(shù)，也可以使用 this.addEventListener() 監(jiān)聽事件對(duì)象。上述 worker.js 代碼可改為：
//寫法一
this.addEventListener("message",function(res){
console.log("res",res.data)
})
//寫法二
addEventListener("message",function(res){
this.console.log("1",res.data)
})2.4 錯(cuò)誤處理
主線程可以監(jiān)聽Worker是否發(fā)生錯(cuò)誤，如果發(fā)生錯(cuò)誤，Worker 會(huì)觸發(fā)主線程的 error 事件。
// 寫法一
myWorker.onerror = function(e){
console.log('e',e)
}
//寫法二
myWorker.addEventListener("error",function(e){
console.log("e",e)
})worker 子線程也可以監(jiān)聽 error 事件。
2.5 關(guān)閉 Worker
Worker 比較耗費(fèi)資源，不應(yīng)該過度使用，使用完畢之后應(yīng)該關(guān)閉。主線程和子線程都可以關(guān)閉。
//主線程關(guān)閉
myWorker.terminate()
//子線程關(guān)閉
self.close() //方法一
this.close() //方法二通常情況下，Worker 載入的是一個(gè)單獨(dú)的 javascript 文件，但是也可以載入與主線程在同一個(gè)網(wǎng)頁的代碼。網(wǎng)頁中添加 Worker 腳本，必須注意指定script標(biāo)簽的type屬性是一個(gè)瀏覽器不認(rèn)識(shí)的值，否則就會(huì)失去意義。如：
<script type="app/worker" id="wrs">
this.onmessage = function(res){
console.log("接收參數(shù)",res.data)
}
</script>然后，需要讀取這段代碼，先將嵌入網(wǎng)頁的腳本代碼轉(zhuǎn)成二進(jìn)制對(duì)象，然后為這個(gè)二進(jìn)制對(duì)象生成url，再讓worker加載url,這樣就實(shí)現(xiàn)了主進(jìn)程和worker在同一個(gè)網(wǎng)頁內(nèi)。代碼如下：
<script>
var blob = new Blob([document.querySelector("#wrs").textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url)
worker.postMessage("發(fā)送數(shù)據(jù)")
</script>Worker構(gòu)造函數(shù)方法：
子進(jìn)程屬性方法：
Worker() 構(gòu)造函數(shù)，可以接受兩個(gè)參數(shù)，第一個(gè)是腳本的地址，第二個(gè)是參數(shù)是配置對(duì)象，該對(duì)象指定Worker的名稱。如：
var myWorker = new Worker('worker.js', { name : 'myWorker' });*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
