們從學校里了解到過很多運算符，比如說加號 +、乘號 *、減號 - 等。

在本章中，我們將從簡單的運算符開始，然后著重介紹 JavaScript 特有的方面，這些是在學校中學習的數學所沒有涵蓋的。

術語：“一元運算符”，“二元運算符”，“運算元”

在正式開始前，我們先簡單瀏覽一下常用術語。

• 運算元 —— 運算符應用的對象。比如說乘法運算 5 * 2，有兩個運算元：左運算元 5 和右運算元 2。有時候人們也稱其為“參數”而不是“運算元”。
• 如果一個運算符對應的只有一個運算元，那么它是 一元運算符。比如說一元負號運算符（unary negation）-，它的作用是對數字進行正負轉換：
• let x=1; x=-x; alert( x ); // -1，一元負號運算符生效
• 如果一個運算符擁有兩個運算元，那么它是 二元運算符。減號還存在二元運算符形式：
• let x=1, y=3; alert( y - x ); // 2，二元運算符減號做減運算
• 嚴格地說，在上面的示例中，我們使用一個相同的符號表征了兩個不同的運算符：負號運算符，即反轉符號的一元運算符，減法運算符，是從另一個數減去一個數的二元運算符。

數學

支持以下數學運算：

• 加法 +,
• 減法 -,
• 乘法 *,
• 除法 /,
• 取余 %,
• 求冪 **.

前四個都很簡單，而 % 和 ** 則需要說一說。

取余 %

取余運算符是 %，盡管它看起來很像百分數，但實際并無關聯。

a % b 的結果是 a 整除 b 的 余數)。

例如：

alert( 5 % 2 ); // 1，5 除以 2 的余數
alert( 8 % 3 ); // 2，8 除以 3 的余數

求冪 **

求冪運算 a ** b 將 a 提升至 a 的 b 次冪。

在數學中我們將其表示為 ab。

例如：

alert( 2 ** 2 ); // 22=4
alert( 2 ** 3 ); // 23=8
alert( 2 ** 4 ); // 2?=16

就像在數學計算中一樣，冪運算也適用于非整數。

例如，平方根是指數為 ? 的冪運算：

alert( 4 ** (1/2) ); // 2（1/2 次方與平方根相同)
alert( 8 ** (1/3) ); // 2（1/3 次方與立方根相同)

用二元運算符 + 連接字符串

我們來看一些學校算術未涉及的 JavaScript 運算符的特性。

通常，加號 + 用于求和。

但是如果加號 + 被應用于字符串，它將合并（連接）各個字符串：

let s="my" + "string";
alert(s); // mystring

注意：只要任意一個運算元是字符串，那么另一個運算元也將被轉化為字符串。

舉個例子：

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

你看，第一個運算元和第二個運算元，哪個是字符串并不重要。

下面是一個更復雜的例子：

alert(2 + 2 + '1' ); // "41"，不是 "221"

在這里，運算符是按順序工作。第一個 + 將兩個數字相加，所以返回 4，然后下一個 + 將字符串 1 加入其中，所以就是 4 + '1'='41'。

alert('1' + 2 + 2); // "122"，不是 "14"

這里，第一個操作數是一個字符串，所以編譯器將其他兩個操作數也視為了字符串。2 被與 '1' 連接到了一起，也就是像 '1' + 2="12" 然后 "12" + 2="122" 這樣。

二元 + 是唯一一個以這種方式支持字符串的運算符。其他算術運算符只對數字起作用，并且總是將其運算元轉換為數字。

下面是減法和除法運算的示例：

alert( 6 - '2' ); // 4，將 '2' 轉換為數字
alert( '6' / '2' ); // 3，將兩個運算元都轉換為數字

數字轉化，一元運算符 +

加號 + 有兩種形式。一種是上面我們剛剛討論的二元運算符，還有一種是一元運算符。

一元運算符加號，或者說，加號 + 應用于單個值，對數字沒有任何作用。但是如果運算元不是數字，加號 + 則會將其轉化為數字。

例如：

// 對數字無效
let x=1;
alert( +x ); // 1

let y=-2;
alert( +y ); // -2

// 轉化非數字
alert( +true ); // 1
alert( +"" );   // 0

它的效果和 Number(...) 相同，但是更加簡短。

我們經常會有將字符串轉化為數字的需求。比如，如果我們正在從 HTML 表單中取值，通常得到的都是字符串。如果我們想對它們求和，該怎么辦？

二元運算符加號會把它們合并成字符串：

let apples="2";
let oranges="3";

alert( apples + oranges ); // "23"，二元運算符加號合并字符串

如果我們想把它們當做數字對待，我們需要轉化它們，然后再求和：

let apples="2";
let oranges="3";

// 在二元運算符加號起作用之前，所有的值都被轉化為了數字
alert( +apples + +oranges ); // 5

// 更長的寫法
// alert( Number(apples) + Number(oranges) ); // 5

從一個數學家的視角來看，大量的加號可能很奇怪。但是從一個程序員的視角，沒什么好奇怪的：一元運算符加號首先起作用，它們將字符串轉為數字，然后二元運算符加號對它們進行求和。

為什么一元運算符先于二元運算符作用于運算元？接下去我們將討論到，這是由于它們擁有 更高的優先級。

運算符優先級

如果一個表達式擁有超過一個運算符，執行的順序則由 優先級 決定。換句話說，所有的運算符中都隱含著優先級順序。

從小學開始，我們就知道在表達式 1 + 2 * 2 中，乘法先于加法計算。這就是一個優先級問題。乘法比加法擁有 更高的優先級。

圓括號擁有最高優先級，所以如果我們對現有的運算順序不滿意，我們可以使用圓括號來修改運算順序，就像這樣：(1 + 2) * 2。

在 JavaScript 中有眾多運算符。每個運算符都有對應的優先級數字。數字越大，越先執行。如果優先級相同，則按照由左至右的順序執行。

這是一個摘抄自 Mozilla 的 優先級表（你沒有必要把這全記住，但要記住一元運算符優先級高于二元運算符）：

我們可以看到，“一元加號運算符”的優先級是 15，高于“二元加號運算符”的優先級 12。這也是為什么表達式 "+apples + +oranges" 中的一元加號先生效，然后才是二元加法。

賦值運算符

我們知道賦值符號=也是一個運算符。從優先級表中可以看到它的優先級非常低，只有 2。

這也是為什么，當我們賦值時，比如 x=2 * 2 + 1，所有的計算先執行，然后=才執行，將計算結果存儲到 x。

let x=2 * 2 + 1;

alert( x ); // 5

賦值=返回一個值

=是一個運算符，而不是一個有著“魔法”作用的語言結構。

在 JavaScript 中，所有運算符都會返回一個值。這對于 + 和 - 來說是顯而易見的，但對于=來說也是如此。

語句 x=value 將值 value 寫入 x 然后返回 x。

下面是一個在復雜語句中使用賦值的例子：

let a=1;
let b=2;

let c=3 - (a=b + 1);

alert( a ); // 3
alert( c ); // 0

上面這個例子，(a=b + 1) 的結果是賦給 a 的值（也就是 3）。然后該值被用于進一步的運算。

有趣的代碼，不是嗎？我們應該了解它的工作原理，因為有時我們會在 JavaScript 庫中看到它。

不過，請不要寫這樣的代碼。這樣的技巧絕對不會使代碼變得更清晰或可讀。

鏈式賦值（Chaining assignments）

另一個有趣的特性是鏈式賦值：

let a, b, c;

a=b=c=2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

鏈式賦值從右到左進行計算。首先，對最右邊的表達式 2 + 2 求值，然后將其賦給左邊的變量：c、b 和 a。最后，所有的變量共享一個值。

同樣，出于可讀性，最好將這種代碼分成幾行：

c=2 + 2;
b=c;
a=c;

這樣可讀性更強，尤其是在快速瀏覽代碼的時候。

原地修改

我們經常需要對一個變量做運算，并將新的結果存儲在同一個變量中。

例如：

let n=2;
n=n + 5;
n=n * 2;

可以使用運算符 +=和 *=來縮寫這種表示。

let n=2;
n +=5; // 現在 n=7（等同于 n=n + 5）
n *=2; // 現在 n=14（等同于 n=n * 2）

alert( n ); // 14

所有算術和位運算符都有簡短的“修改并賦值”運算符：/=和 -=等。

這類運算符的優先級與普通賦值運算符的優先級相同，所以它們在大多數其他運算之后執行：

let n=2;

n *=3 + 5;

alert( n ); // 16 （右邊部分先被計算，等同于 n *=8）

自增/自減

對一個數進行加一、減一是最常見的數學運算符之一。

所以，對此有一些專門的運算符：

• 自增 ++ 將變量與 1 相加：
• let counter=2; counter++; // 和 counter=counter + 1 效果一樣，但是更簡潔 alert( counter ); // 3
• 自減 -- 將變量與 1 相減：
• let counter=2; counter--; // 和 counter=counter - 1 效果一樣，但是更簡潔 alert( counter ); // 1

重要：

自增/自減只能應用于變量。試一下，將其應用于數值（比如 5++）則會報錯。

運算符 ++ 和 -- 可以置于變量前，也可以置于變量后。

• 當運算符置于變量后，被稱為“后置形式”：counter++。
• 當運算符置于變量前，被稱為“前置形式”：++counter。

兩者都做同一件事：將變量 counter 與 1 相加。

那么它們有區別嗎？有，但只有當我們使用 ++/-- 的返回值時才能看到區別。

詳細點說。我們知道，所有的運算符都有返回值。自增/自減也不例外。前置形式返回一個新的值，但后置返回原來的值（做加法/減法之前的值）。

為了直觀看到區別，看下面的例子：

let counter=1;
let a=++counter; // (*)

alert(a); // 2

(*) 所在的行是前置形式 ++counter，對 counter 做自增運算，返回的是新的值 2。因此 alert 顯示的是 2。

下面讓我們看看后置形式：

let counter=1;
let a=counter++; // (*) 將 ++counter 改為 counter++

alert(a); // 1

(*) 所在的行是后置形式 counter++，它同樣對 counter 做加法，但是返回的是 舊值（做加法之前的值）。因此 alert 顯示的是 1。

總結：

• 如果自增/自減的值不會被使用，那么兩者形式沒有區別：
• let counter=0; counter++; ++counter; alert( counter ); // 2，以上兩行作用相同
• 如果我們想要對變量進行自增操作，并且 需要立刻使用自增后的值，那么我們需要使用前置形式：
• let counter=0; alert( ++counter ); // 1
• 如果我們想要將一個數加一，但是我們想使用其自增之前的值，那么我們需要使用后置形式：
• let counter=0; alert( counter++ ); // 0

自增/自減和其它運算符的對比

++/-- 運算符同樣可以在表達式內部使用。它們的優先級比絕大部分的算數運算符要高。

舉個例子：

let counter=1;
alert( 2 * ++counter ); // 4

與下方例子對比：

let counter=1;
alert( 2 * counter++ ); // 2，因為 counter++ 返回的是“舊值”

盡管從技術層面上來說可行，但是這樣的寫法會降低代碼的可閱讀性。在一行上做多個操作 —— 這樣并不好。

當閱讀代碼時，快速的視覺“縱向”掃描會很容易漏掉 counter++，這樣的自增操作并不明顯。

我們建議用“一行一個行為”的模式：

let counter=1;
alert( 2 * counter );
counter++;

位運算符

位運算符把運算元當做 32 位整數，并在它們的二進制表現形式上操作。

這些運算符不是 JavaScript 特有的。大部分的編程語言都支持這些運算符。

下面是位運算符：

• 按位與 ( & )
• 按位或 ( | )
• 按位異或 ( ^ )
• 按位非 ( ~ )
• 左移 ( << )
• 右移 ( >> )
• 無符號右移 ( >>> )

這些運算符很少被使用，一般是我們需要在最低級別（位）上操作數字時才使用。我們不會很快用到這些運算符，因為在 Web 開發中很少使用它們，但在某些特殊領域中，例如密碼學，它們很有用。當你需要了解它們的時候，可以閱讀 MDN 上的 位操作符 章節。

逗號運算符

逗號運算符 , 是最少見最不常使用的運算符之一。有時候它會被用來寫更簡短的代碼，因此為了能夠理解代碼，我們需要了解它。

逗號運算符能讓我們處理多個語句，使用 , 將它們分開。每個語句都運行了，但是只有最后的語句的結果會被返回。

舉個例子：

let a=(1 + 2, 3 + 4);

alert( a ); // 7（3 + 4 的結果）

這里，第一個語句 1 + 2 運行了，但是它的結果被丟棄了。隨后計算 3 + 4，并且該計算結果被返回。

逗號運算符的優先級非常低

請注意逗號運算符的優先級非常低，比=還要低，因此上面你的例子中圓括號非常重要。

如果沒有圓括號：a=1 + 2, 3 + 4 會先執行 +，將數值相加得到 a=3, 7，然后賦值運算符=執行 a=3，然后逗號之后的數值 7 不會再執行，它被忽略掉了。相當于 (a=1 + 2), 3 + 4。

為什么我們需要這樣一個運算符，它只返回最后一個值呢？

有時候，人們會使用它把幾個行為放在一行上來進行復雜的運算。

舉個例子：

// 一行上有三個運算符
for (a=1, b=3, c=a * b; a < 10; a++) {
 ...
}

這樣的技巧在許多 JavaScript 框架中都有使用，這也是為什么我們提到它。但是通常它并不能提升代碼的可讀性，使用它之前，我們要想清楚。

任務

后置運算符和前置運算符

重要程度: 5

以下代碼中變量 a、b、c、d 的最終值分別是多少？

let a=1, b=1;

let c=++a; // ?
let d=b++; // ?

解決方案

賦值結果

重要程度: 3

下面這段代碼運行完成后，代碼中的 a 和 x 的值是多少？

let a=2;

let x=1 + (a *=2);

解決方案

類型轉換

重要程度: 5

下面這些表達式的結果是什么？

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
"  -9  " + 5
"  -9  " - 5
null + 1
undefined + 1
" \t \n" - 2

好好思考一下，把它們寫下來然后和答案比較一下。

解決方案

修正加法

重要程度: 5

這里有一段代碼，要求用戶輸入兩個數字并顯示它們的總和。

它的運行結果不正確。下面例子中的輸出是 12（對于默認的 prompt 的值）。

為什么會這樣？修正它。結果應該是 3。

let a=prompt("First number?", 1);
let b=prompt("Second number?", 2);

alert(a + b); // 12

解決方案

原因是 prompt 以字符串的形式返回用戶的輸入。

所以變量的值分別為 "1" 和 "2"。

let a="1"; // prompt("First number?", 1);
let b="2"; // prompt("Second number?", 2);

alert(a + b); // 12

我們應該做的是，在 + 之前將字符串轉換為數字。例如，使用 Number() 或在 prompt 前加 +。

例如，就在 prompt 之前加 +：

let a=+prompt("First number?", 1);
let b=+prompt("Second number?", 2);

alert(a + b); // 3

或在 alert 中：

let a=prompt("First number?", 1);
let b=prompt("Second number?", 2);

alert(+a + +b); // 3

在最新的代碼中，同時使用一元和二元的 +。看起來很有趣，不是嗎？

TML+CSS+JavaScript技術是網絡統計學編程的基礎，網絡統計學離不開網頁前臺編程技術，學習web前端開發基礎技術（網頁設計）需要了解：HTML、CSS、JavaScript三種語言。其中，HTM(HyperText MarkUp Language,HTML)超文本標記語言是網頁內容的載體，網頁內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，包含文字、公式、圖片、視頻、表格等。

HTML超文本標記語言有如下特征：

• HTML是用來制作網頁的標記語言，HTML不需要編譯，直接由瀏覽器解析；
• HTML文件是一個文本文件,包含了一些HTML元素, 標簽等；
• HTML文件必須使用html或htm為文件名后綴；
• HTML是大小寫不敏感的,HTML與html是一樣的。

HTML超文本標記語言是通過使用標記來描述文檔結構和表現形式的一種語言，由瀏覽器進行解析后把結果顯示在網頁上。它是網頁構成的基礎，你見到的所有網頁都離不開HTML。

一、HTML文檔結構

1、HTML文檔基本結構

<HTML>
<HEAD>
<TITLE>網頁標題</TITLE>
</HEAD>
<BODY>
<p>第一個HTML文件</p>
</BODY>
</HTML>

HTML文檔以標記【<HTML>】開始，以標記【</HTML>】結束。HTML標簽告訴瀏覽器這兩個標簽之間的內容是HTML文檔。

HTML文檔分為文檔頭【<HEAD>...</HEAD>】和文檔體【<BODY>...</BODY>】兩部分。在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各種文檔內容信息。

打開windows的記事本，復制、粘貼HTML文檔基本結構代碼，在指定文件夾中保存為"First.html"，如圖：

鼠標雙擊打開這個HTML文件,顯示結果如圖：

2、HTML文檔頭

HTML文檔中文檔頭【<HEAD>...</HEAD>】標簽間的內容不被顯示，但在網頁設計中非常重要。下面為一段HTML文檔頭代碼：

<HEAD>
<TITLE>網頁標題</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
<!--
.item-title {padding: 25px 10px; }
#fixed-fullscreen-content {margin-top: 0; }
A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; TEXT-DECORATION:none;}
//-->
</style>
<script language="JavaScript">
<!--
function setLSNorm() {
if(window.localStorage){
    localStorage.setItem($("#oNorm5").val(),$("#d1").val());
}else{
    alert('This browser does NOT support localStorage');
    }
    alert(localStorage.getItem($("#oNorm5").val()))
}
//-->
</script>
</HEAD>

HTML文檔頭代碼中，

• <TITLE>網頁標題</TITLE>：設置網頁標題，顯示在瀏覽器上方；

• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>：

標簽可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。 標簽位于文檔的頭部，不包含任何內容。幾乎任何網頁可以看到類似上面這段代碼。“charset=UTF-8”（有時為“charset=gb2312”）表示網頁使用不同字符集。標簽屬性單元較為復雜,對于初學者來說,記住在網頁中加入這段代碼即可;

• <link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>：

CSS外部樣式,外部樣式是通過在html中引用外部css文件來控制網頁樣式，同一個css文件可以被多個網頁引用；

• <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>：

引用外部JavaScript腳本程序文件，一個獨立存在的JS腳本文件可以被多個網頁引用；

• <style>***</style>：

CSS內部樣式,內部樣式內部樣式是寫在html文件中，且包含在代碼塊中，而style寫在head里面。內部樣式對所在網頁內所有指定的標簽有效；

CSS還有一種內聯樣式，內聯樣式是直接在html標簽上定義該標簽的css樣式，如：<div style="width:300px; color:#ff0000;">。這里style為塊標簽div的樣式屬性，定義塊標簽div的寬度為300像素、標簽內文字顏色為紅色。更多CSS知識參見“教程”；

• <script language="JavaScript">***</script>：

在網頁內部運行的JavaScript代碼。更多JS知識參見教程。

3、HTML文檔體

HTML文檔中，文檔體中才是要顯示的各種文檔內容信息。HTML文檔體包含在【<BODY>...</BODY>】標簽之間。文檔體中常用的HTML標簽為：

<b>標簽b之間的文字在網頁中顯示為粗體字</b>
<i>標簽b之間的文字在網頁中顯示為斜體字</i>
<h1>h1 標題1（head1）</h1>
<h2>h2 標題2（head2）</h2>
<h3>h3 標題3（head3）</h3>
<h4>h4 標題4（head4）</h4>
<h5>h5 標題5（head5）</h5>
<h6>h6 標題6（head6）</h6>
<sub>下標（subscript）</sub>
<sup>上標（superscript）</sup>
<a href="#">a 超級鏈接（anchor）</a>
<br/> br 換行（break）
<hr/> hr 橫線（horizontal）
<center>center 居中（center）</center>
<div>div 區塊（division）</div>
<p>p 段落（paragraph）</p>
<pre>pre 按預定格式顯示的文本（Preformatted）</pre>
<img src="#" alt="圖片" />img 圖片（image）
<form action="#" method="post">
<input type="text" name="name" value=""/>文本輸入框（text）
<input type="radio" name="name" value=""/>單選框（radio）
<input type="checkbox" name="name" value=""/>復選框（checkbox）
<input type="file" name="name" value=""/>文件選擇框（file）
<input type="hidden" name="name" value=""/>隱藏域（hidden）
<input type="image" name="name" value=""/>圖片按鈕（image）
<input type="password" name="name" value=""/>密碼輸入框（password）
<input type="reset" name="name" value="reset"/>重置按鈕（reset）
<input type="submit" name="name" value="submit"/>提交按鈕（submit）
<select>
<option value="value">option 選擇項1（option）</option>
<option value="value">option 選擇項2（option）</option>
</select>
<textarea>textarea 多行文本輸入區（textarea）</textarea>
</form>
有序列表
<ol>
<li>li 列表項（list item）</li>
<li>li 列表項（list item）</li>
</ol>
無序列表
<ul>
    <li>li 列表項（list item）</li>
    <li>li 列表項（list item）</li>
</ul>
table 表格（table）
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>td 表格數據（table data）</td>
        <td>td 表格數據（table data）</td>
    </tr>
    <tr>
        <td>td 表格數據（table data）</td>
        <td>td 表格數據（table data）</td>
    </tr>
</table>

4、HTML文檔體轉義字符

轉義字符串（Escape Sequence）也稱字符實體(Character Entity)。在HTML中，定義轉義字符串的原因有兩個：

• 第一個原因是像“<”和“>”這類符號已經用來表示HTML標簽，因此就不能直接當作文本中的符號來使用。為了在HTML文檔中使用這些符號，就需要定義它的轉義字符串。當解釋程序遇到這類字符串時就把它解釋為真實的字符。在輸入轉義字符串時，要嚴格遵守字母大小寫的規則。
• 第二個原因是有些字符在ASCII字符集中沒有定義，因此需要使用轉義字符串來表示。

轉義字符串分成三部分：

• 第一部分是一個&符號，英文叫ampersand；
• 第二部分是實體名字或者是#加上實體編號；
• 第三部分加一個分號。

（1）常用HTML轉義字符表

（2）數學和希臘字母標志

二、HTML常用標簽（tag）使用方法及顯示效果

1、超鏈接標簽【a】

【用法】<a href="https://www.toutiao.com/article/7221429823632409147/">統計學面臨的機遇與挑戰 - 網絡統計學</a>

【效果】統計學面臨的機遇與挑戰 - 網絡統計學

2、換行標簽【br】

【用法】在我后面換行<br/> br 換行（break）

【效果】

在我后面換行

br 換行（break）

3、粗體標簽【b】

【用法】<b>b 粗體（bold）</b>

【效果】b 粗體（bold）

4、居中標簽【center】

【用法】<center>center 居中（center）</center>

【效果】

center 居中（center）

5、換行塊標簽【div】

【用法】<div>div 區塊（division），自動換行</div>后續文本

【效果】

div 區塊（division），自動換行

后續文本

6、不換行塊標簽【span】

【用法】<span>span 區塊（division），不換行</span>后續文本

【效果】span 區塊（division），不換行后續文本

7、標題標簽【hi】

【用法】hi 標題

<h1>h1 標題1（head1）</h1>
<h2>h2 標題2（head2）</h2>
<h3>h3 標題3（head3）</h3>
<h4>h4 標題4（head4）</h4>
<h5>h5 標題5（head5）</h5>
<h6>h6 標題6（head6）</h6>

【效果】

8、橫線標簽【hr】

【用法】<hr> hr 橫線（horizontal）

【效果】

————————————————

hr 橫線（horizontal）

9、斜體標簽【i】

【用法】<i>i 斜體（italic）</i>

【效果】i 斜體（italic）

10、圖片標簽【img】

【用法】<img src="http://www.galaxystatistics.com/webTJX/mobile/blog/img/test1.jpg">

【效果】

11、有序列表標簽【ol】

【用法】ol 有序列表（order list）

<ol>
  <li>li 列表項（list item）</li>
  <li>li 列表項（list item）</li>
</ol>

【效果】

1. li 列表項（list item）
2. li 列表項（list item）

12、無序列表標簽【ul】

【用法】ul 無序列表（unordered list）

<ul>
<li>li 列表項（list item）</li>
<li>li 列表項（list item）</li>
</ul>

【效果】

• li 列表項（list item）
• li 列表項（list item）

13、段落標簽【p】

【用法】<p>p 段落（paragraph）</p>

【效果】p 段落（paragraph）

14、按預定格式標簽【pre】

【用法】<pre> 按預定格式顯示的文本（Preformatted）</pre>

【效果】按預定格式顯示的文本（Preformatted）

15、下標標簽【sub】

【用法】X_{sub 下標（subscript）}

【效果】Xsub 下標（subscript）

16、上標標簽【sup】

【用法】X^{sup 上標（superscript）}

【效果】

17、表格標簽【table】

【用法】X_{table 表格（table）}

<table border="1" cellpadding="0" cellspacing="0">
<caption>table 表格（table）</caption>
		<tr>
				<td>td 表格數據（table data）</td>
				<td>td 表格數據（table data）</td>
		</tr>
		<tr>
				<td>td 表格數據（table data）</td>
				<td>td 表格數據（table data）</td>
		</tr>
</table>

【效果】

18、表單標簽

【用法】form 表單（form）

<form action="#" method="post">form 表單（form）<p/>
<input type="text" name="name" value="" />input,type='text' 文本輸入框（text）<p/>
<input type="radio" name="name" value="" />input,type='radio' 單選框（radio）<p/>
<input type="checkbox" name="name" value="" />input,type='checkbox' 復選框（checkbox）<p/>
<input type="file" name="name" value="" />input,type='file' 文件選擇框（file）<p/>
<input type="hidden" name="name" value="" />input,type='hidden' 隱藏域（hidden）<p/>
<input type="password" name="name" value="" />input,type='password' 密碼輸入框（password）<p/>
<input type="reset" name="name" value="reset" />input,type='reset' 重置按鈕（reset）<p/>
<input type="submit" name="name" value="submit" />input,type='submit' 提交按鈕（submit）<p/>
select 選擇列表（select）
<select>
<option value="value1">option 選擇項1（option）</option>
<option value="value2">option 選擇項2（option）</option>
<option value="value3">option 選擇項3（option）</option>
</select><p/>
<textarea>
textarea
多行文本輸入區
</textarea> <p/>
</form>

【效果】

HTML文檔制作主要指〈BODY〉***〈/BODY〉之間HTML標簽的布局設計。本文簡單介紹了常用的HTML標簽，如果想用這些標簽制作出漂亮的統計報告，還需要CSS樣式修飾和JavaScript基本進行動態響應。至于統計圖表、公式等需要JavaScript調用庫函數來實現。