HTML知識點匯總

前的技術總監喊我加入他們的接私活團隊，說他們缺一個前端工程師，不缺后端。可我一直是做后端開發的，前端代碼寫的實在是很少，沒有經驗，寫起來肯定很慢了，所以想對前端的HTML知識點做一個匯總。

HTML代碼結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一級標題</h1>
    <br/>
    <h2>二級標題</h2>
</body>
</html>

<!DOCTYPE html>聲明這是一個html文檔；<html>元素是html頁面的根元素；整個html文檔包括兩大部分：head頭和body體。

meta元素提供了頁面的元信息；title元素描述了文檔的標題；body元素包含了可見的頁面內容。

HTML元素概念

開始標簽	元素內容	結束標簽
<h1>	一個標題	</h1>
<br/>	換行
HTML 元素以開始標簽起始，以結束標簽終止。元素內容在其中間，如<h1>html元素概念</h1>。有些元素沒有內容，沒有結束標簽，如<br/>。

HTML屬性概念

下面是適用于大多數 HTML 元素的屬性：

屬性	描述
class	為元素定義一個或多個類名
id	定義元素的唯一id
style	設定元素的行內樣式
實例：<a href="toutiao.com">頭條</a>
HTML元素可以設置屬性屬性描述于開始標簽屬性以鍵/值對的形式出現

標題元素

<body>
    <!-- 一般用在標題上，利于seo優化-->
    <h1>這是標題 1</h1>
    <h2>這是標題 2</h2>
    <h3>這是標題 3</h3>
    <h4>這是標題 4</h4>
    <h5>這是標題 5</h5>
    <h6>這是標題 6</h6>
</body>

段落與換行元素

<body>
    <!-- 這是注釋 -->
    <!-- </p> 是塊級元素、前后有空行-->
    <p>這個段落</p>
    <p>這<br>個<br>段落</p>
    <hr/>
</body>

基本格式化標簽

<body>
    <b>加粗</b>
    <i>斜體</i>
    <small>更小的</small> <br><br>
    <strong>重要的</strong> <br><br>
    這是 <sub> 下標</sub> 和 <sup> 上標</sup> <br><br>
    <del> 刪除的文本
</body>

超鏈接（鏈接）

屬性	值	描述
href	toutiao.com	鏈接的地址
target	_blank	在何處顯示
id		文檔書簽

<body>
    <!-- 實例 -->
    文本：<a href="http://www.example.com/">文本</a> <br/>
    圖像： <a href="http://www.example.com/">
        <img src="URL" alt="描述信息">
    </a> <br/>
    郵件： <a href="mailto:qq@example.com">發送e-mail</a> <br/>
    書簽：
    <a id="tips">書簽</a> <br/>
    <a href="#tips">跳到書簽</a>
</body>

圖像標簽

屬性	描述
src	圖像的 URL 地址
alt	無法載入圖像時，顯示替換文本
width	指定寬度
height	指定高度

<body>
    <img src="meinv.jpg" alt="美女" width="280" height="180">
</body>

哈哈哈，調皮一下

HTML表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。
數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

<body>
    <!-- 邊框屬性：如果不定義邊框屬性，表格將不顯示邊框-->
    <table border="1">
        <tr>
            <!-- 表頭使用<th>標簽定義。瀏覽器會把表頭顯示為粗體居中的文本-->
            <th>姓名</th>
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>小紅</td>
            <td>18</td>
            <th>女</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>21</td>
            <td>男</td>
        </tr>
    </table>
</body>

HTML列表

<body>
    <!-- 有序列表 數字進行標記-->
    <ol>
        <li>蘋果汁</li>
        <li>草莓汁</li>
    </ol>
    <!-- 無序列表 粗體圓點標記-->
    <ul>
        <li>咖啡</li>
        <li>飲料</li>
        <li>茶
            <!-- 嵌套列表 -->
            <ol>
                <li>紅茶</li>
                <li>綠茶</li>
            </ol>
        </li>
    </ul>
</body>

HTM區塊

塊級元素在瀏覽器顯示時，會以新行來開始和結束。如<h1>,<p>,<ul>,<table>
內聯元素在顯示時不會以新行開始。如<b>, <td>, <a>, <img>

<div> 元素	<span> 元素
塊級元素	內聯元素
HTML 元素的容器	文本的容器
搭配css可對內容塊設置樣式屬性	搭配css可為文本設置樣式屬性

HTML 布局

<body>
    <div style="width:500px">
        <div style="background-color: antiquewhite;">
            <h1 style="margin-bottom:0;">網頁頭部信息</h1>
        </div>
      
        <div style="background-color: aquamarine; height:200px;width:100px;float:left;">
            <b>網頁左側信息</b><br>
            中考資訊<br>
            高考資訊<br>
            成人自考
        </div>
       
        <div style="background-color: aqua; height:200px;width:400px;float:left;">
            主題內容
        </div>
       
        <div style="background-color:#FFA500;clear:both;text-align:center;">
            底部內容
        </div>
    </div>
</body>

HTML表單

form表單有兩個屬性：

action	method
定義了服務端的文件名	數據的提交方式
對接收到的數據進行處理	有POST與GET方法
post：表單數據會包含在表單體內然后發送給服務器，用于提交敏感數據，如用戶名與密碼等。 get：默認值，表單數據會附加在action屬性的URL中。

<body>
    <!-- 表單是一個包含表單元素的區域
    允許用戶在表單中輸入內容-->
    <form action="" method="">
        <!-- input 輸入標簽 類型是由type屬性定義-->

        <!-- 文本域 type="text" -->
        年齡: <input type="text" name="age"><br>

        <!-- 密碼字段 type="password" -->
        密碼: <input type="password" name="age"><br>
        
        <!-- 單選框 type="radio" -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br>
        
        <!-- 復選框 type="checkbox" -->
        <input type="checkbox" name="like" value="Coffee">喜歡咖啡
        <input type="checkbox" name="like" value="tea">喜歡茶<br>

        <!-- 提交按鈕 type="submit" -->
        <!-- 將表單的內容傳送到服務器 -->
        <input type="submit" value="提交">
    </form>
</body>

HTML框架

<body>
    <!-- 通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。 -->
    <iframe src="test.html" width="200" height="200"></iframe>
</body>

height 和 width 屬性用來定義iframe標簽的高度與寬度

HTML <head> 元素介紹

<head> 元素定義了文檔的信息，包含了所有的頭部標簽元素。常用的標簽元素如下所示。

<meta>	文檔的元數據
<base>	頁面鏈接標簽的默認地址
<title>	文檔的標題
<link>	外部樣式資源
<style>	客戶端腳本文件
<script>	文檔樣式文件

<meta> 標簽詳解

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 定義關鍵詞 -->
    <meta name="keywords" content="生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活, 分享美好">
    <!-- 定義描述內容 -->
    <meta name="description" content="我是一個生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活和分享美好的一個人。">
    <!-- 定義文檔作者 -->
    <meta name="author" content="小明">
    <!-- 每10秒鐘刷新當前頁面 -->
    <meta http-equiv="refresh" content="10">
    <title>Document</title>
</head>
<body>
</body>  
</html>

這只是HTML的基本內容，后續還會總結HTML5的知識點。

選框（Checkbox）是設計中常用到的組件，在B端表單設計中用得尤其頻繁。看起來雖然很簡單，但復選框的尺寸、顏色和位置仍值得我們仔細考慮，以確保讓用戶更容易理解和使用。

我們首先來介紹最基礎的復選框樣式，其次分析復選框+描述/icon/數值/圖像等多種類型的復選框形式，最后總結設計復選框時的五點注意事項，全面掌握復選框的設計～

01 基礎復選框

最基礎的復選框由復選框+文本標簽組成。點擊選中，會有一個復選框選中的效果，取消選中時復選框顯示為灰色描邊的方塊。

狀態

復選框常見的三種基本狀態是：未選中、選中和不確定狀態。

不確定狀態常用的場景是在級聯選擇器中，例如一級復選框能控制所有二級復選框的內容。如果有的二級勾選了，有的沒勾選，那么一級復選框的狀態就會判定為不確定。

尺寸

在用一個產品中，建議頁面中的所有復選框都使用相同的尺寸，這樣有助于保持設計一致性。當然在某些特殊的場景下，也可以更改復選框的尺寸來靈活適應。

例如，某些頁面的復選框比其他頁面的復選框更重要或者更頻繁使用，就可以將它們放大來吸引用戶的注意力。

是否需要設計不同尺寸的復選框取決于復選框的數量、標簽的長度、選項的重要性等因素。

將以上提到的復選框的不同狀態和尺寸混合起來，可以組合成基礎的復選框組件。

02 帶有描述的復選框

復選框下方的描述通常用來解釋說明該復選框的功能，或者為復選框提供功能說明。

這種額外的描述性文字盡量控制在兩行以內，為用戶帶來更清晰的體驗。

設計分析

如果對這種類型的復選框采用左居中對齊方式，將復選框位于中心，看起來就會很奇怪：

復選框應該始終保持與主文字左對齊，可以在距頂行幾個像素的地方對齊復選框。

03 帶提示icon的復選框

復選框上的信息圖標也用來解釋說明關于復選框的附加信息。當鼠標懸停在信息圖標上時，顯示對應的信息提示。

設計分析

這里的對齊方式與基礎復選框的對齊方式相同，保持水平對齊所有內容。

04 帶附加文本的復選框

這里的附加文本常用來展示數量。例如在產品列表的過濾器中，在左側顯示屬性(顏色、尺寸或品牌)，在右側顯示具體的數量。

又或者在CRM系統中，用來過濾不同狀態的任務量。

05 帶圖片的復選框

通過復選框+圖片相結合的展示方式，用戶更容易理解他們正在選擇什么。例如看到有同事照片和信息的復選框，就更容易將任務分配給他。

設計分析

這種類型的復選框中，首先要保持復選框與圖像水平居中對齊。如果有兩行字段，需要將字段與圖像保持上下對齊，讓整體更協調。

06 復選框設計注意點

1) 復選框和單選按鈕視覺上有差異

在產品設計中，方塊通常表示復選框，圓圈用來表示單選按鈕。這種視覺上的區別有助于用戶理解兩種控件之間的區別，并正確地使用它們。

2）對單個復選框進行右對齊

如果字段文字較多出現折行的情況，復選框應該始終與第一行字段保持對齊，而不是跟隨整個文本框居中對齊。

否則就會產生類似右圖的效果，看起來很奇怪。

3）盡量垂直對齊復選框

在設計中，盡可能使用垂直對齊復選框的原因：

可以讓選項更易于閱讀和理解；讓復選框組更加緊湊，節省空間；垂直對齊能讓每個復選框在視覺上區分更加明顯。

當然在某些場景中，也可以采用水平對齊的方式，具體用法需要靈活選擇。

4）超過7個選項使用多選標簽

多選標簽能夠很好地替代具有七個以上選項的復選框(5±2規則)。允許用戶輕松點選和取消選擇多個選項，而不需要在復選框列表中再次去選擇并取消。

5）擴大可點擊區域

這可能是新手設計師和開發最常犯的錯誤之一。可點擊區域應該比帶有復選框和文本的區域要大得多，這樣能方便用戶操作和選擇。

最后

以上是「復選框」的類型+用法設計分析，希望這些學習能幫助大家更快更好地進行表單設計！

專欄作家

作者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

錯誤處理對于web應用開發至關重要，任何javascript錯誤都有可能會導致網頁無法使用，因此作為開發人員，必須要及時處理有可能出現的錯誤；

從IE4.0之后，幾乎所有的瀏覽器都包含了一些基本的錯誤處理功能，但并沒有統一，后來，由ECMAscript添加了異常處理機制，也就是try…catch…finally結構以及throw操作；

錯誤處理的重要性: 好的錯誤處理技術可以讓腳本的開發、調試和部署更加流暢，能對代碼進行更好的控制；另外，JS缺乏標準的開發環境；

錯誤類型：

語法錯誤（syntax error）：也稱為解析錯誤，發生在傳統編程語言的編譯解釋時；發生語法錯誤時，就會發生阻塞，也就是不能繼續執行代碼，但只是同一個線程中的代碼會受影響，其他線程中的代碼不受影響；

// Uncaught SyntaxError: Invalid or unexpected token
// 未捕獲的語法錯誤：無效或意外的標記
document.write("zeronetwork;

運行時錯誤（Runtime error）：也稱為exception異常, 其發生在編譯期/解釋期后，此時，問題并不出現在代碼的語法上，而是在嘗試完成一個非法的操作；

<input type="button" value="單擊" onclick="handleClick()" />
<script>
// Uncaught ReferenceError: openMy is not defined
// 未捕獲的引用錯誤：未定義openMy
function handleClick(){
    openMy();
}
</script>

錯誤報告：

因為每個瀏覽器都有自己的內置Javascript解釋程序，所以每種瀏覽器報告錯誤的方式都不同；有些是彈出錯誤信息，有些是把信息打印在控制臺中；

IE(windows): 默認情況下，會彈出包含錯誤細節的對話框，并詢問是否繼續執行頁面上的腳本；如果瀏覽器有調試器(如：Microsoft Script Debugger) ，此對話框會提供一個是調試還是忽略的選項；如果在IE設置中取消了”顯示錯誤”，那么會在頁面左下角顯示一個黃色的圖標；

注：如果JS代碼就在HTML里，顯示錯誤行是正確的，如果是外部的JS文件，則行號往往差一行，如第5行則為第4行；

Mozilla(所有平臺): 在控制臺中打印錯誤信息，并發出警告；其會報告三種類型的消息：錯誤、嚴格警告和消息等的；

Safari (MacOS)：是對JavaScript錯誤和調試的支持最差，默認情況下，它對終端用戶不提供任何javascript錯誤報告；

錯誤處理：

Javascript提供了兩種處理錯誤的方式：

BOM包含一個onerror事件處理函數，該函數通常被綁定在window對象或image對象上；
ECMAscript定義了try…catch結構來處理異常；

onerror事件處理函數:

window對象的onerror屬性是一個事件處理程序，頁面上出現異常時，error事件便在window對象上觸發，并把錯誤消息輸出到Javascript控制臺上，這種方式也稱為全局錯誤捕獲；如：

window.onload = function(){
    show(); // 在onload事件中調用了一個不存在的函數
}
window.onerror = function(){
    alert("出現錯誤");
    return true;
}

獲取錯誤信息：

window.onerror事件處理程序在調用時可以傳5個參數，由這5個參數可以獲取詳細的錯誤信息；

message：錯誤信息，描述錯誤的一條消息；
URL：引發錯誤的Javascript所在的文檔的URL；
line：文檔中發生錯誤的行數；
column：發生錯誤的列數；
error：錯誤對象，這個error也稱為全局錯誤對象；

window.onerror = function(sMessage, sUrl, sLine, sColumn, error){
console.log("Error:" + sMessage + " URL：" + sUrl + " Line：" + sLine + " Column：" + sColumn);
console.log(error);
    return true;
}

onerror處理程序的返回值：

如果返回true，則阻止執行默認的事件處理程序，也就是將通知瀏覽器，事件處理程序已經處理了錯誤，不需要其他操作，反之會顯示錯誤消息；

某些元素也支持onerror; 但其處理函數沒有任何關于error信息的參數，如:

document.images[0].onerror = function(event){
console.log(event);  // Event
console.log(event.type);  // error
}

這里的event參數是一個類型為Event事件對象，其存儲的信息除了type返回了error，并沒有其他和錯誤相關的信息；

全局錯誤處理window.onerror通常不能恢復腳本繼續執行，但會給開發者發送錯誤信息；

window.onerror = function(error){
  console.log(error);
}
show();
console.log("中止，不會被執行");
window.onload = function(){
  console.log("也不會被執行");
}

可以是簡單的打印，也可以把錯誤保存到日志記錄里；

window.onerror就是綁定在window對象的error事件，也可以使用標準的添加事件偵聽的方式window.addEventListener(eventtype, handler)，其需要兩個參數，eventtype為事件類型，在此為error，handler是事件處理函數，其需要一個參數event，一個ErrorEvent類型的對象，其保存著有關事件和錯誤的所有信息，如：

window.addEventListener("error", function(event){
  console.log(event);  // ErrorEvent
  console.log(event.error);  // Error對象
  console.log(event.error.name);
  console.log(event.error.message);
  console.log(event.error.stack);
  console.log(event.lineno);  // 行
  console.log(event.colno);  // 列
  console.log(event.filename);
});

在實際的開發中，這兩種方式都會被使用，只不過addEventListener有定的兼容必問題，所以要兼顧所有的瀏覽器且不太關注事件對象本身的話，就使用window.onerror；

當加載自不同域的腳本中發生語法錯誤時，為避免信息泄露，語法錯誤的細節將不會報告，只會返回簡單的"Script error."；

<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
  console.log(msg);  // Script error
  console.log(url);  // ""
  console.log(lineNo);  // 0
  console.log(columnNo);  // 0
  console.log(error);  // null
}
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>

可以針對同域和不同域的錯誤分開處理，如：

<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
  var str_error = msg.toLowerCase();
  var sub_string = "script error";
  if(str_error.indexOf(sub_string) > -1)
    alert("腳本發生錯誤，詳情請在控制臺查看");
  else{
    var message = [
      '消息：' + msg,
      'URL：' + url,
      '行：' + lineNo,
      '列：' + columnNo,
      '錯誤對象：' + error
    ].join(" - ");
    alert(message);
  }
}
show();
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>

從上在的執行結果來看，error事件執行了兩次，原因是使用了兩個script，也就是當一個script有錯誤發生時，它只會阻止當前的script塊，而不會阻止其他的script塊；如：

<script>
show();  // 會捕獲
console.log("不會被執行");
myshow();  // 不會捕獲
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>
<script>
console.log("執行了");
demo();  // 會捕獲
console.log("不會被執行");
</script>

body元素的onerror特性，也可以充當事件處理函數，如：

<body onerror="alert('出現了錯誤');return true;">

注意，先注釋掉window.onerror等代碼；

此時，可以直接使用event、source、lineno、colno、error等屬性；

<body onerror="alert(event + '\n' + source + '\n' + lineno + '\n' + colno + '\n' + error);return true;">

當然了，也可以為body綁定error事件，此時各屬性，必須明確指定，如：

document.body.onerror = function(msg, url,lineno,colno,error){
  alert(msg + '\n' + url + '\n' + lineno + '\n' + colno + '\n' + error);
  return true;
}

try-catch語句：

try語句中為期待正常執行的代碼塊，當在try語句中發生錯誤，其余代碼會中止執行，catch語句就處理該錯誤，如果沒有錯誤，就跳過catch語句；try和catch必須成對出現；

try{
    //code
    [break]
}catch([exception]){
    //code
}[finally]{
    //code
}
// 如
try {
    show();
    alert("不能執行");
} catch (error) {
    alert("出現一個錯誤:" + error);
} finally{
    alert("管你呢");
}

try語句塊內的錯誤只會中止try語句塊中發生錯誤之后的邏輯代碼，并不會中止整個腳本的運行；執行try-catch語句，必須是運行時，運行時錯誤，也被稱為異常；try-catch語句中指定只能有一個catch子句；try-catch語句適合處理無法預知、無法控制的錯誤；finally常被用于無論結果是否有異常，都要執行的代碼，如：

try{
  alert("try");
  show();
  alert("no exec");
}catch(error){
  alert("catch");
}finally{
  alert("finally");
}
alert("continute");

代碼執行的兩條路徑：如果沒有異常，執行路徑為：try->finally，反之為：try的部分->catch->finally；

一般用于關閉打開的鏈接和釋放資源；

var connection = {open: function(){},close: function(){},send: function(data){}}
// var data = "大師哥王唯"; // 注釋這一行，讓它產生異常
connection.open();
try{
    connection.send(data);
}catch(exception){
    console.log("出現一個錯誤");
}finally{
    connection.close();
    console.log("關閉了");
}

還有一個典型的應用，讀寫文件，如：

function openFile(){};
function writeFile(data){};
function closeFile(){};
openFile();
try{
  writeFile();
}catch(error){
  console.log(error);
}finally{
  closeFile();
}

在try-catch-finally語句塊中的變量是全局變量：

try{
  var name = "王唯";
  show();
  var city = "蚌埠";
}catch(error){
  var age = 18;
  console.log(name);
}finally{
  var sex = "男";
  console.log(name);
  console.log(age);
}
console.log(name);
console.log(city);
console.log(age);
console.log(sex);

try-catch-finally與return：

如果直接在try-catch-finally語句塊中執行return，會拋出異常，如：

try {
  console.log("try");
  // return;  // Illegal return statement 非法返回語句
  console.log("try agin");
} catch (error) {
  console.log(error);
  // return;  // Illegal return statement
}finally{
  console.log("finally");
  // return;  // Illegal return statement
}

如：

function foo(){
  try {
    console.log("try");
    return 1;
    show();
    console.log("try agin");
  } catch (error) {
    console.log(error);
    return 2;
  }finally{
    console.log("finally");
    return 3;
  }
}
console.log(foo());  // 3

try-finally：

沒有catch從句，只有try-finally也可以，目的是，只確保執行開始和最終的過程，而不處理錯誤，如：

try{
  console.log("try");
  show();
}finally{
  console.log("finally"); // 會執行
}
console.log("over"); // 不會執行，已中止

但此時，還是會拋出異常的，但此時，會在執行完finally后中止執行，并會查找外部的catch語句;

嵌套try-catch語句：

在catch子句中，也有可能會發生錯誤，所以就可以使用嵌套的try-catch語句，如：

try {
    show();
    console.log("不能執行");
} catch (error) {
    console.log("出現一個錯誤:" + error);
    try {
        var arr = new Array(10000000000000000);
        arr.push(error);
    } catch (error) {
        console.log("又出現了一個錯誤：" + error);
    }
} finally{
    console.log("管你呢");
}

也可以在try中嵌套try-catch-finally語句，如：

try{
  try{
    console.log("try");
    show();
  }catch(error){
    console.log("error");
  }finally{
    console.log("finally");
  }
}catch(error){
  console.log(error);
}

一個比較典型的應用，就是處理json數據，如：

// var json = '{"name":"wangwei", "age": 18, "sex": "男"}';
var json = '{bad json}';  // Uncaught SyntaxError
var data = JSON.parse(json);
console.log(data.name);
console.log(data.age);
console.log(data.sex);

一量json數據發生錯誤，整個應用都會崩潰，所以應該使用try-catch，如：

<div id="msg">您的信息：</div>
<script>
window.onload = function(){
  var msg = document.getElementById("msg");
  try{
    // var json = '{"name":"王唯", "age": 18, "sex": "男"}';
    var json = '{bad json}';  // Uncaught SyntaxError
    var data = JSON.parse(json);
    msg.innerHTML += "姓名：" + data.name + "，年齡：" + data.age + "，性別：" + data.sex;
  }catch(error){
    msg.innerHTML = "開小差了，找不到你的信息";
  }
}
</script>

當使用了try-catch語句，就不會將錯誤提交給瀏覽器，也就不會觸發error事件，如：

window.onerror = function(error){
  console.log(error);  // 不會觸發
}
try{
  show();
}catch(error){
  console.log(error);
}

Error錯誤對象：

在catch中會捕獲一個Error錯誤對象；該對象在Javascript解析或運行時，一旦發生錯誤，引擎就會拋出這個對象；如果沒有相關聯的try-catch捕獲該對象，就由瀏覽器輸出這個對象；

// ...
console.log("錯誤：" + error + " name:" + error.name + " message:" + error.message);

也可以通過Error的構造器創建一個錯誤對象，這個Error對象也可用于用戶自定義的異常；語法：new Error([message[, filename[, lineNumber]]]);

message：可選，錯誤描述信息；
fileName：可選，非標準，被創建的Error對象的fileName屬性值，默認是調用Error構造器代碼所在的文件的名字; 但大部分瀏覽器沒有實現；
lineNumber：可選，非標準，被創建的Error對象的lineNumber屬性值，默認是調用Error構造器代碼所在的文件的行號；但大部分瀏覽器沒有實現；

實例化Error對象，也可以不使用new關鍵字，如：

var error = new Error("自定義錯誤對象");
var error = Error("不使用new");
console.log(error);
console.log(error.name);  // Error
console.log(error.message);  // 自定義錯誤對象

Error錯誤對象屬性：

name：表示錯誤類型的字符串；
message：實際的錯誤信息；

Error類還有6個子類，其可以通過錯誤對象的name屬性返回具體異常類的名稱：

EvalError：錯誤發生在eval()函數中；
RangeError：數值超出javascript可表示的范圍；；
ReferenceError：使用了非法或不能識別的引用；
SyntaxError：發生了語法錯誤；
TypeError：操作數的類型不是預期所需的；
URIError：在encodeURI()或decodeURI()函數中發生了錯誤；

// EvalError
try{
  throw new EvalError("Eval異常");
}catch(error){
  console.log(error);
  console.log(error instanceof EvalError);  // true
  console.log(error.name);  // EvalError
  console.log(error.message);  // Eval異常
}
// RangeError
var num = 1;
try{
  num.toPrecision(500);  //  [pr??s??n] 精度
}catch(error){
  console.log(error); 
}
// ReferenceError
var x;
try {
  x = y + 1;
} catch (error) {
  console.log(error);
}
// SyntaxError
try{
  eval("alert('wangwei)");
}catch(error){
  console.log(error);
}
// TypeError
var num = 1;
try{
  num.toUpperCase(); // 無法將數字轉為大寫
}catch(error){
  console.log(error);
}
// URIError (malformed [?m?l?f??md]格式不正確，畸形的)
try{
  decodeURI("%%%"); // 使用了非法字符
}catch(error){
  console.log(error);
}

Error對象的message屬性是瀏覽器生成的用于表示錯誤描述的信息，因為這個屬性是特定于瀏覽器的，所以不同的瀏覽器上可能產生不同的錯誤信息，如：

try {
    eval("a ++ b");
    show();
    console.log("執行了嗎？");
} catch (error) {
    // SyntaxError:Unexpected identifier或
    // SyntaxError:unexpected token: identifier
    console.log(error.name + ":" + error.message);
}

使用name屬性判斷錯誤類型：

try {
    eval("a++b");
} catch (error) {
    console.log(error instanceof SyntaxError); // true
    if(error.name == "SyntaxError")
        console.log(error.name + ":" + error.message);
    else
        console.log("未知錯誤：" + error.message);
}

拋出異常：

throw語句的作用是手動中斷程序執行，拋出一個錯誤，一般用于有目的的拋出異常，也就是允許開發者可以創建自定義錯誤；

throw可以拋出任何類型的值，也就是說，它的參數可以是任何值；語法：throw error_object；error_object可以是字符串、數字、布爾或對象；

throw "出現一個錯誤";
throw 50666;
throw true;
throw new Object();
throw {
    toString:function(){
        return 'Error!';
    }
}
function getRectArea(width, height){
  if(isNaN(width) || isNaN(height))
    throw '參數應該是number類型';
  return width * height;
}
getRectArea("wangwei",10);

對于Javascript引擎來說，只要遇到throw語句，程序就會終止；

也可以拋出一個Error錯誤對象；Error對象的構造函數只有一個參數,

throw new Error("請再次嘗試");

其他Error子類對象也可以拋出：

throw new SyntaxError("...");
throw new TypeError("...");
throw new RangeError("...");
throw new EvalError("...");
throw new URIError("...");
throw new ReferenceError("...");

對于Error類和其子類來說，錯誤對象的name就是其構造函數的名稱，message是其構造函數的參數；

當拋出異常后，throw之后的語句將不會執行，并跳到相關聯的catch語句中進行處理，如：

<h1>請輸入18-99之間的數字</h1>
<input id="txtInput" type="text" />
<button id="btn">確定</button>
<p id="msg"></p>
<script>
function myFun(){
  var msg,x;
  msg = document.getElementById("msg");
  msg.innerHTML = "";
  x = document.getElementById("txtInput").value;
  try{
    if(x == "") throw "空的";
    if(isNaN(x)) throw "不是數字";
    x = Number(x);
    if(x < 18) throw "太小";
    if(x > 99) throw "太大";
    msg.innerHTML = "輸入的值正確：" + String(x);
  }
  catch(error){
    msg.innerHTML = "輸入的值不正確：" + error; 
  }
}
var btn = document.getElementById("btn");
btn.onclick = myFun;
</script>

也可以在某個語句塊的外部捕獲throw異常，如：

function sum(a,b){
    if(arguments.length < 2)
        throw new Error("需要兩個參數");
    else
        return a + b;
}
try{
    console.log(sum(18));
}catch(error){
    // Error:需要兩個參數
    console.log(error.name + ":" + error.message);
}

可以通過instanceof判斷異常的類型來特定處理某一類的異常，例如可以區分瀏覽器拋出的異常和開發人員拋出的異常，如：

function sum(a,b){
    if(arguments.length < 2)
      throw new Error("需要兩個參數");
    if(isNaN(a) || isNaN(b))
      throw "參數是不是Number類型";
    return a + b;
}
try{
    console.log(sum(18,12));
}catch(error){
  if(error instanceof SyntaxError)
    console.log("語法錯誤：" + error.name + ":" + error.message);
  else if(error instanceof Error)
    console.log(error.name + ":" + error.message);
  else
      console.log(error);
}

注：判斷Error類型要放到if的最后一個條件；

即使在catch語句中，還可以根據實際情況，再次拋出異常，此時，其可以被外部的try-catch語句塊捕獲（如果存在的話）；

當發生異常時，代碼會立即停止，僅當有try-catch語句捕獲到異常時，代碼才會繼續執行；其背后運行的原理是，當發生異常，JavaScript解釋器會立即停止執行的邏輯，并跳轉到就近的try-catch異常處理程序，如果發生異常的代碼塊中沒有相關聯的catch從句，解釋器會檢查更高層的閉合代碼塊，看它是否有相關聯的異常處理程序，以此類推，直到找到一個異常處理程序為止；如果發生異常的函數中沒有處理它的try-catch語句，異常將向上傳播到調用該函數的代碼，如此，異常就會沿著Javascript的語法結構或調用棧向上傳播；如果沒有找到任何異常處理程序，JavaScript將把異常當成程序錯誤來處理，并通過瀏覽器報告給用戶；

自定義錯誤類型：

可以基于Error類來創建自定義的錯誤類型，此時可以使用throw拋出自定義的異常類，或通過instanceof來檢查這個異常類的類型，新類型需要實現name和message屬性；

function CustomError(message){
  this.name = "CustomError";
  this.message = message || 'Default Message';
  this.stack = (new Error()).stack;
}
// CustomError.prototype = new Error();
// 或者
CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;
try{
  var name = "jingjing";
  if(name !== "wangwei")
    throw new CustomError("自定義的錯誤類型");
}catch(error){
  console.log(error.message);
}

小示例：

function UserException(message){
  this.name = "UserException";
  this.message = message;
}
function getMothName(m){
  m = m - 1;  // 調整月份數字到數組索引（1=Jan,12=Dec）
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  if(months[m] != undefined)
    return months[m];
  else
    throw new UserException("Invalid Month No");
}
try{
  var myMonth = 15;
  var monthName = getMothName(myMonth);
}catch(error){
  var monthName = "未知";
  console.log(error.name + ":" + error.message);
}

小示例：驗證電話號碼，如：

function Telephone(num){
  num = String(num);
  var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
  if(pattern.test(num)){
    this.value = num.match(pattern)[0];
    this.valueOf = function(){
      return this.value;
    };
    this.toString = function(){
      return String(this.value);
    }
  }else{
    throw new TelephoneFormatException(num);
  }
}
function TelephoneFormatException(value){
  this.name = "TelephoneFormatException";
  this.message = "電話號碼格式不正確";
  this.value = value;
  this.toString = function(){
    return this.value + ":" + this.message;
  }
}
// 應用
var TELEPHONE_INVALID = -1;
var TELEPHONE_UNKNOWN_ERROR = -2;
function verifyTelephone(num){
  try{
    num = new Telephone(num);
  }catch(error){
    if(error instanceof TelephoneFormatException)
      return TELEPHONE_INVALID;
    else
      return TELEPHONE_UNKNOWN_ERROR;
  }
  return num.toString();
}
console.log(verifyTelephone("010-66668888"));
console.log(verifyTelephone("13812345678"));
console.log(verifyTelephone("138123456")); // -1
console.log(verifyTelephone("wangwei")); // -1

常見錯誤：

由于javaScript是松散類型的，也不會驗證函數的參數，因此錯誤只會在運行時出現；一般來說，需要關注三種錯誤：類型轉換錯誤、數據類型錯誤、通信錯誤；

類型轉換錯誤：

一般發生在使用某個操作符，或者使用其他可能自動轉換值的數據類型的語言結構時；

function output(str1,str2,str3){
  var result = str1 + str2;
  if(str3)
    result += str3;
  return result;
}
console.log(output(1,2,3));
console.log(output(1,2));
console.log(output(1,2,0));
console.log(output(1,2,"wangwei"));

這就是一個非常典型的與期望不一致的方式；

數據類型錯誤：

在流控制語句中使用非布爾值，是極為常見的一個錯誤來源，為避免此類錯誤，就要做到在條件比較時確定傳入的是布爾值，例如，把if語句改成：if(typeof str3 == 'number')；

所以在使用某個變量或對象時，一定要適當地檢查它的數據類型，如：

function reverseSort(values){
  // if(values){
  //   values.sort();
  //   values.reverse();
  // }
  if(arguments.length > 0){
    if(!Array.isArray(values))
      return [];
    else{
      values.sort();
      values.reverse();
      return values;
    }
  }
  return [];
}
var arr = [3,2,6,9,4];
// var arr = 100;  // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));

另一個常見的錯誤就是將參數與null值進行比較。與null進行比較只能確保相應的值不是null和undefined。要確保傳入的值有效，僅檢測null值是不夠的；

function reverseSort(values){
  // if(values != null){  // 任何非數組值都會導致錯誤
  if(values instanceof Array) // 非數組值被忽略
    values.sort();
    values.reverse();
  }
  return values;
}
var arr = [3,2,6,9,4];
// var arr = 100;  // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));
// 或
function reverseSort(values, fun){
  if(values instanceof Array){
    if(fun != null && typeof fun === "function")
      values.sort(fun);
    else
      values.sort();
  }
  return values;
}
var arr = [3,2,6,9,4];
console.log(reverseSort(arr, function(a,b){
  return a > b ? -1 : 1;
}));

通信錯誤：最典型的就是Ajax應用，用其可以動態加載信息，但是，javascript與服務器之間的任何一次通信，都有可能會產生錯誤；

調試技巧：

使用警告框: 這是最簡單、流行的方式，如：

function test(){
    alert("函數內");
    var iNum1 = 5, iNum2 = 10;
    alert(iNum1);
    var iResult = iNum1 + iNum2;
    alert(iResult);
}
test();

拋出自定義錯誤：

function assert(bCondition, sErrorMessage){
    if(!bCondition)
        throw new Error(sErrorMessage);
}
function divide(iNum1, iNum2){
    assert(arguments.length == 2, "divide需要兩個參數");
    assert((!isNaN(iNum1) && !isNaN(iNum2)), "需要Number類型");
    return iNum1 / iNum2;
}
console.log(divide(10,2));
console.log(divide(10,"c"));  // 異常
// 或
try{
  console.log(divide(10,"c"));
}catch(error){
  console.log(error.name + ":" + error.message);
}

Javascript校驗器：

jslint的主要目的是指出不合規范的js語法和可能的語法錯誤，包括一些不良代碼；官網：http://www.jslint.com/

如以下，會給出警告：

語句未使用塊標記；
一行的結尾未以分號結束；
用var聲明一個已在使用的變量；
with語句；

調試器：

Javascript自身不具備調試器，但目前所有的瀏覽器可以使用自身的調試器；

IE調試：

啟用IE的調試功能：

菜單“工具”|“Internet選項”命令，打開“Internet選項”對話框，在“高級”選項卡中，找到兩個“禁用腳本調試”復選框并取消；開始調試，調試的主要工作是反復地跟蹤代碼，找出錯誤并修正；

設置斷點：

在調試程序窗口中，將光標移動到需要添加斷點的行上，按一次F9鍵或單擊，當前行的背景色變為紅色，并且在窗口左邊界上標上紅色的圓點，當程序運行到斷點時就會暫停；

運行調試：

單擊繼續或按F5進行逐步運行調試；F10步進、F11步入，都可以繼續向下執行；將鼠標移動到變量名上時，會顯示變量當前時刻的值；或者在右側的“監視”窗格中可以觀察該變量的值；點擊變量信息框中的變量值或右側“監視”空格中的變量值可以修改變量的當前值；更多的調試操作：查看調用關系、監視特定變量的值等；

// 示例
var balance = 200.0;    //
var willPay = 20.0;
function pay(_balance, _pay){
    return _balance - _pay;
}
function showBalance(){
    debugger;
    var blnc = pay(balance,willPay);
    alert("當前余額:" + blnc);
}
showBalance();

日志輸出：

程序運行時，有些中間數據需要記錄，以便檢查程序運行的狀態；對于JavaScript記錄中間數據通常是以日志的形式記錄需要記錄的數據，再發送到服務器上保存起來；日志記錄的內容可以是任意的信息，根據開發者的需要而定；

在線咨詢

上一篇：「原創」用Htmlhelp Workshop制作Windows 幫助文件
下一篇：企業網站策劃書

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML知識點匯總

HTML代碼結構

HTML元素概念

HTML屬性概念

標題元素

段落與換行元素

基本格式化標簽

超鏈接（鏈接）

圖像標簽

HTML表格

HTML列表

HTM區塊

HTML 布局

HTML表單

HTML框架

HTML <head> 元素介紹

<meta> 標簽詳解

01 基礎復選框

狀態

尺寸

02 帶有描述的復選框

設計分析

03 帶提示icon的復選框

設計分析

04 帶附加文本的復選框

05 帶圖片的復選框

設計分析

06 復選框設計注意點

1) 復選框和單選按鈕視覺上有差異

2）對單個復選框進行右對齊

3）盡量垂直對齊復選框

4）超過7個選項使用多選標簽

5）擴大可點擊區域

最后

您的項目需求