第7節 Javascript數據類型-零點程序員-王

第7節 Javascript數據類型-零點程序員-王唯

CMAScript中類型可以分為兩大類，基本數據類型（原始類型primitive [?pr?m?t?v] type）與引用數據類型（也稱為復雜數據類型Object type，Object本質上是由一組無序的鍵值對組成的）

JavaScript中的基本數據類型包括數字、字符串、布爾、null（空）和undefined（未定義）等5種類型：

數字Number：

Number類型是ECMAScript中最重要的類型了，這種類型使用IEEE754格式來表示整數和浮點數（浮點數也被稱為雙精度數），和其他編程語言不同，JavaScript不區分整數值和浮點數值；在ECMAScript中，Number被定義了不同的數值字面量（直接量）格式；

1）整數：

如：intNum=10;

說明：除了十進制，整數還可以通過八進制或十六進制的字面值來表示；

十六進制字面值的前兩位必須是0x，后跟任何十六制數字(0-9, A-F)，其中A-F，可以大寫，也可以小寫；

var hexNum=0xA;
console.log(hexNum);
var num=0xf5;  // 15*16 + 15=255
console.log(num);

八進制的第一位必須是零，如：

var octalNum=070;  // 7*8=56
console.log(octalNum);
var num=0377;  // 3*8*8 + 7*8 + 7=255
//var num=0397; // 297 字面值超出了范圍，前導零將被忽略 
console.log(num);

注：如果字面值超出了范圍，那么前導零將被忽略，后面的數值將當作十進制數據解析；

注：ECMAScript標準不支持八進制，所以在嚴格模式下是無效的，會拋出錯誤，所以在ES6下，八進制直接量是不能使用的；

注：在進行算術運算時，所有以八進制和十六進制表示的數值最終都將被轉換成十進制數值；

注：可以允許正零（+0）和負零（-0），并認為兩者是相等的；另外，嚴格來說，+和-并不是我們之前學到的正負值，它實際是JS中的一元運算符，并不是數字直接量語法的組成部分。

2）浮點數：

所謂浮點數，就是該數值中必須包含一個小數點，采用的是傳統的實數寫法；一個實數由整數部分、小數點和小數部分組成；小數點前可以沒有整數（但不推薦這樣寫法）；如：

var floatNum=1.1;
floatNum=.5;
console.log(floatNum);

注：浮點數需要的內存空間是整數的兩倍；因此，ECMAScript會在有可能的情況下，把浮點數轉換為整數，如，小數點后面沒有跟任何數字，或者浮點數本身就是一個整數，那么這個數值就可以作為整數來保存；如：

var floatNum=1.;  floatNum=9.0;     // 1, 9

對于極大的數或極小的數，可以用e表示法（即科學計數法）；用e表示的數值等于e前面的數值乘以10的指數次冪；如：

var floatNum=3.1415e10;  // 輸出不一定是計數法，如：31415000000
floatNum=3.1415e-10;     // 3.1415e-10

注：默認情況下，ECMAScript會將那些小數點后面帶有6個零以上的浮點數轉換為以e表示法表示的數值；

注：浮點數最高精度是17位小數，但在進行算術計算時其精確度遠遠不如常數，如：0.1加上0.2不等于0.3，等于0.30000000000000004，這個小小的舍入誤差會導致無法測試特定的浮點數值，如

console.log(0.1+0.2);       // 0.30000000000000004
if(0.1+0.2==0.3){
    console.log("不相等的");
}

說明：如果a和b是0.05和0.25，或者是0.15和0.15都不會有問題，但如果是0.1和0.2，就有問題，因此，永遠不要測試某個特定的浮點數值；

注：有關浮點數值計算會產生舍入誤差的問題的原因，這是使用基于IEEE754數值的浮點計算的通病，并非只是ECMAScript有，其它使用相同數值格式的語言也存在這個問題。

3）數值范圍：

由于內存的限制，ECMAScript并不能保存任意的數值；

其能夠表示的最小值保存在Number.MIN_VALUE中，在絕大部分的瀏覽器中，這個值是5e-324；表示最大值保存在Number.MAX_VALUE中，值為1.7976931348623157e+308；

console.log(Number.MAX_VALUE);     // 1.7976931348623157e+308
console.log(Number.MIN_VALUE);      // 5e-324
console.log(Number.MAX_SAFE_INTEGER);   // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER);   // -9007199254740991

Number.MAX_SAFE_INTEGER 常量表示在 JavaScript 中最大的安全整數，值為9007199254740991;

Number.MIN_SAFE_INTEGER常量表示在 JavaScript 中最小的安全整數，值為-9007199254740991；

這兩個Number靜態屬性是ES6引入的；

如果某次計算的結果超出了Javascript數值范圍的值，那么這個數值將被自動轉換成特殊的Infinity（無窮）值；即，如果這個數值是負值，就被轉為-Infinity負無窮，否則為Infinity正無窮；但是，這是理論會導致這個樣果，實際上不是，這主要還是因為IEEE754這個標準鬧的，后期我會專門講講這個標準。

如果某個計算結果是Infinity，那么該值參與下一次運算，結果還是Infinity；如果運行結果是比JavaScript能表示的最小值還小的時，將會返回0，否則會返回該負數；

要想確定一個數值是否為有窮的，可以使用isFinite()函數，這個函數會判斷其參數是否位于最小值與最大值之間，返回true或false；

訪問Number.POSITIVE_INFINITY和Number.NEGATIVE_INFINITY也可以得到正負Infinity值；即這兩個屬性中分別保存著Infinity和-Infinity；

4）NaN：

NaN，非數值（Not a Number）是一個特殊的數值，其用于表示一個本來要返回數值卻未返回數值的情況（這樣就不會拋出錯誤的）；如，在其他編程語言中，任何數值除以非數值都會導致錯誤，從而停止執行；但在ECMAScript中，任何數值除以非數值會返回NaN，不會影響其他代碼的執行；

console.log(3/"a");  // NaN

注：除以0的結果是Infinite，不是NaN；

NaN兩個特點：任何涉及NaN的操作都會返回NaN；其次NaN與任何值都不相等，包括NaN本身，如：

console.log(NaN / 10);  // NaN
console.log(NaN==NaN);  // false

針對NaN的這兩個特點，ECMAScript定義了isNaN()函數，其接受一個參數，該參數可以是任何類型，其判斷該參數是否“不是數值”；isNaN()會先嘗試把參數轉換為數值；某些不是數值的值會直接轉換為數值，如字符串”10”或Boolean值；而任何不能被轉換為數值的值都會導致這個函數返回true，如：

console.log(isNaN(NaN));    // true
console.log(isNaN(10));     // false
console.log(isNaN("10"));   // false
console.log(isNaN("wangwei"));  // true
console.log(isNaN(true));   // false

注：isNaN甚至可以檢測對象；在基于對象調用isNaN()時，會首先調用對象的valueOf()方法，然后確定該方法返回的值是否可以轉換為數值；如果不能，則基于這個返回值再調用toString()方法，再測試返回值。

String字符串：

String類型用于表示由零或多個16位Unicode字符組成的字符序列，即字符串，在JavaScript中，一般用來表示文本；

1）字符字面量：

字符串可由雙引號或單引號表示，如：

var firstName="wang";
var lastName='wei';

兩者沒有任何區別，一般使用單引號，主要目的是為了方便向后端傳遞數據，因為后端一般使用雙引號，當接收到前端的單引號數據可以直接使用，否則需要進行轉義。

var str="";  // 空字符串
var str=" "; // 空格
var str='name="wangwei"';

在客戶端中，JavaScript代碼中有可能會夾雜HTML代碼，HTML代碼也有可能夾雜JavaScript代碼；HTML中可以使用單引號，也可以使用雙引號；因此，當兩者混雜使用時，HTML使用雙引號，JavaScript使用單引號；

2）轉義字符：

String類型包含一些特殊的字符字面量，也叫轉義序列（有的地方叫做逃逸符），用于表示非打印字符，或者具有其他用途的字符；其使用反斜框后加一個字符；

\n 換行、\t 制表符、\b 退格、\r 回車、\f 進紙、\ 斜杠、\’ 單引號、\” 雙引號、\xnn 以十六進制代碼nn表示的一個字符、\unnnn 以十六進制代碼nnnn表示的一個Unicode字符

var str="zero\nnetwork";
console.log(str);
var text="this is \u03a3;";  // \u03a3被當作一個字符處理
console.log(text);

如果\后的字符不是以上所列的，則忽略\；

在ECMAScript中，書寫字符串直接量可以拆分數行，每行必須以反斜線“\“結束，如：

var str="zero\
network\
wangwei";
console.log(str);

3）字符串的使用：

加號（+）運算用于數字，也可以用于字符串，表示字符串連接，如：

var msg="hello," + "world";
console.log(msg);
msg="wang" + " " + "wei";
console.log(msg);

任何字符串的長度都可以通過訪問其length屬性獲得；注：如果字符串中包含雙字節字符，該屬性有可能不會精確地返回字符串中的字符數目；

console.log("zero network".length);
var company="zero 零點網絡";
console.log(company.length);

4）字符串的特點：

ECMAScript中的字符串是不可變的，也就是說，字符串一旦創建，它們的值就不能改變；要改變某個變量保存的字符串，首先要銷毀原來的字符串，然后再用另一個包含新值的字符串填充該變量，如：

var lang="Java";
lang=lang + "script";
console.log(lang);

分析說明：首先創建一個能容納10個字符的新字符串，然后在這個字符串中填充“Java“和”Script“，最后一步是銷毀原來的Java和Script，因為這兩個字符串已經沒有用了；這個過程是在后臺發生的，而這也是某些舊版本的瀏覽器中拼接字符串時速度很慢的原因；但這些瀏覽器后來的版本已經解決了這個低效率的問題。

在ECMAScript中，字符串可以當做只讀數組，即可以使用數組的方式來訪問字符串中的單個字符，如：

var str="zero network";
console.log(str[0]);
for(var i=0;i<str.length; i++){
    console.log(str[i]);
}

Boolean布爾：

Boolean類型是ECMAScript中使用得最多的一種類型，該類型只有兩個值：true和false；其代表真或假、開或關、是或否；如：

var found=true;
var lost=false;

注：Boolean類型的值true和false是區分大小寫的；

布爾值一般用于比較和控制語句中，如：

var a=10, b=10;
console.log(a==b);
if(a==b){
    console.log("相等");
}else{
    console.log("不相等");
}

Undefined未定義的：

Undefined類型只有一個值，即特殊的undefined；在使用var聲明變量但未對初始化；

var msg;
console.log(msg);
var message=undefined;
console.log(message);

說明：雖然顯示的為message初始化了undefined值，但沒有必要，因為未經初始化默認就是undefined；

注：包含undefined值與尚未定義的變量是不一樣的。

// var age;
console.log(age);  // age is not defined

說明：以上使用了未定義的變量，會拋出錯誤；對于未聲明的變量，只能執行一項操作，即使用typeof操作符檢測其數據類型。

但是對未初始化的變量執行typeof，會返回undefined值，但對未聲明的變量執行typeof也會返回同樣的值，如：

var msg;
console.log(typeof msg);  // undefined
console.log(typeof age);  // undefined

在實際場景中，這兩種變量都不可能執行真正的操作。

注：如果一個函數沒有返回任何值，則默認返回undefined；如：

function fun(){}
console.log(fun());  // undefined

Null：

Null類型也只有一個值，即特殊的null（空值）；從邏輯上看，null值表示一個空對象指針，而這也正是使用typeof操作符檢測null時會返回object的原因；

var car=null;
console.log(car);
console.log(typeof car);  // object

注：雖然看起來null是一個特殊的對象值，但實際上它是Null類型的唯一值；

注：如果定義的變量準備在將來用于保存對象，那么最好將該變量初始化為null，而不是其他值；這樣一來，只要直接檢查null值，就可以知道相應的變量是否已經保存了一個對象的引用了；

if(car!=null){
    console.log("對car對象執行其他操作");
}

實際上，undefined值是派生自null值的，因此ECMA-262規定對它們的相等性測試要返回true；如：

console.log(null==undefined);  // true

說明：盡管null和undefined有這樣的關系，但它們的用途完全不同；如前所講，無論在什么時候都沒有必要把一個變量的值顯式地設置為undefined，可是null卻不同，只要意在保存對象的變量還沒有真正保存對象，就應該明確地讓該變量保存null值；這樣做不僅可以體現null作為空對象指針的慣例，而且也有助于進一步區分null和undefined。另外，如果一個函數，沒有正確的值要返回，可以返回null；

Web前端開發之Javascript-零點程序員-王唯

見標簽

1.段落標簽<p>

<p>標簽的默認樣式，段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。
改變CSS樣式刪除段前段后空白處。

<style> 
 p{margin:0px;} 
</style>

2.斜體標簽<em>

 <em>斜體</em>

3.粗體標簽<strong>

 <strong>加粗</strong>

4.<span>標簽

被用來組合文檔中的行內元素。使用 <span> 來組合行內元素，以便通過樣式來格式化它們。

<span> 在CSS定義中屬于一個行內元素,在行內定義一個區域，也就是一行內可以被 <span>劃分成好幾個區域，從而實現某種特定效果。
<span>本身沒有任何屬性。
<div>在CSS定義中屬于一個塊級元素<div>可以包含段落、標題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節、摘要或備注。在頁面效果上，使用<div> 會自動換行，使用<span> 就會保持同行。

例如：

 <style> 
 span{ color:blue; } 
 </style>

這樣，<span>標簽包含的文本就變成了藍色的字體。

5.<q>標簽

作用：段文本引用

例如：

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。</p>
在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑?！?這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用<q></q>實現引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
這里用<q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
補充知識：語義化網頁結構有助于搜索引擎的收錄。同一個效果可以用很多鐘方式實現，但這只方便了瀏覽者，而搜索引擎不知道這里到底是什么內容，這里如果你使用標簽，那么就告訴瀏覽器這里是引用的話。而且在手持設備或移動設備不能很好支持css的基礎上，瀏覽器會使用默認的效果，因而提供較好可讀性。

6.<blockquote>標簽

作用：長文本引用

例如：

<blockquote>明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。</blockquote>

注意：瀏覽器對<blockquote>標簽的解析是縮進樣式

7.<br>標簽

怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車。

語法：

xhtml1.0寫法：

 <br/>

html4.01寫法：

 <br>

現在一般使用 xhtml1.0 的版本的寫法（其它標簽也是），這種版本比較規范。

與以前我們學過的標簽不一樣，<br />標簽是一個空標簽，沒有HTML內容的標簽就是空標簽，空標簽只需要寫一個開始標簽，這樣的標簽有<br />、<hr />和<img />。

講到這里，你是不是有個疑問，想折行還不好說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？不好意思，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。

8.<hr>標簽

在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。

語法：

html4.01版本

<hr>

xhtml1.0版本

<hr/>

注意：

<hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
<hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。

9.<address>標簽

一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。

語法：

 <address>聯系地址信息</address>

如：

<address>文檔編寫：lilian 北京市西城區德外大街10號</address>

10.<code>標簽

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：

<code>var i=i+300;</code>

注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。

語法：

<code>代碼語言</code>

注：如果是多行代碼，可以使用<pre>標簽。

11.<pre>標簽

主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

語法：

<pre>語言代碼段</pre>

如下代碼：

<pre> 
 var message="歡迎"; 
 for(var i=1;i<=10;i++) { 
 alert(message); 
 } 
</pre>

效果如下：

注意：<pre> 標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。

12.<ul>標簽

ul-li是沒有前后順序的信息列表。

這樣是空心圓，

ul{ list-style:circle; }

這個就是去除前面的點

ul{ list-style:none }

語法：

<ul> 
 <li>信息</li> 
 <li>信息</li> 
 ...... 
</ul>

舉例：

<ul> 
 <li>精彩少年</li> 
 <li>美麗突然出現</li> 
 <li>觸動心靈的旋律</li> 
</ul>

ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點

13.<ol>標簽

ol-li是有前后順序的信息列表

語法：

<ol> 
 <li>信息</li> 
 <li>信息</li> 
 ...... 
</ol>

舉例：

 <ol> 
 <li>前端開發面試心法 </li> 
 <li>零基礎學習html</li>
 <li>JavaScript全攻略</li> 
</ol>

<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始。

14.<div>標簽

<div> 可定義文檔中的分區或節（division/section）。
<div>標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。
<div>是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div>固有的唯一格式表現。可以通過<div> 的 class 或 id 應用額外的樣式。不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div>元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而id 用于標識單獨的唯一的元素。

15.<table>標簽

常用屬性

1）屬性：border

作用：規定表格邊框的寬度

2）屬性：cellpadding

作用：單元格中的文本與單元格邊框的間距

3）屬性：cellspacing

作用：單元格之間的間距

創建表格的四個元素：

table、tbody、tr、th、td

1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。

3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。

4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

- 常用屬性： colspan：規定單元格可橫跨的列數，值為數字 rowspan：規定單元格可橫跨的行數，值為數字

5、<th>…</th>：表格的頭部的一個單元格，表格表頭。

6、表格中列的個數，取決于一行中數據單元格的個數。

總結：

1、表頭，也就是th標簽中的文本默認為粗體并且居中顯示
2、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
3、用css樣式，為表格加入邊框Table 表格在沒有添加 css 樣式之前，是沒有邊框的。

16.<caption>標簽

表格還是需要添加一些標簽進行優化，可以添加標題和摘要。

摘要

摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。語法：

<table summary="表格簡介文本">

標題

用以描述表格內容，標題的顯示位置：表格上方。語法：

<table> 
 <caption>標題文本</caption> 
 <tr> 
 <td>…</td> 
 <td>…</td> 
 … 
 </tr> 
 … 
</table>

17.<a>標簽

_blank --在新窗口中打開鏈接
_parent --在父窗體中打開鏈接
_self --在當前窗體打開鏈接,此為默認值
_top --在當前窗體打開鏈接，并替換當前的整個窗體(框架頁)
一個對應的框架頁的名稱 -在對應框架頁中打開
href：Hypertext Reference的縮寫。意思是超文本引用。
使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。語法：

 <a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

例如：

 <a  title="點擊進入慕課網">click here!</a>

上面例子作用是單擊click here!文字，網頁鏈接跳轉到http://www.imooc.com這個網頁。

<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。如下代碼：

 <a href="目標網址" target="_blank">click here!</a>

title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好）。
注意：還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),下面會詳細講解。
使用mailto在網頁中鏈接Email地址

<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。

注意：如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。引號只有一對！

例子：
<a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內容">

如果：A 發送郵件給B1、B2、B3，抄送給C1、C2、C3，密送給D1、D2、D3。

那么：
1）A知道自己發送郵件給了B1、B2、B3，并且抄送給了C1、C2、C3，密送給了D1、D2、D3。
2）B1知道這封是A發送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
3）C1知道這封是A發送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
4）D1知道這封是A發送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。
5）郵箱地址
 mailto: <a href="mailto:qiujie@staff.weibo.com">發送</a>
6）抄送地址
cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發送</a>
7）密件抄送地址
用分號分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發送</a>
8）多個收件人、抄送人、密送人 ;
bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發送</a>
9）郵件主題
subject: <a href="mailto:qiujie@staff.weibo.com？subject=郵件主題">發送</a>
10）郵件內容
body: <a href="mailto:qiujie@staff.weibo.com？body=郵件正文">發送</a>
例子：
<a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好，對此評論有些想法。">對此影評有何感想，發送郵件給我</a>

18.<img>標簽

在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用

標簽來插入圖片。

語法：

 [站外圖片上傳中……(2)] <img src="myimage.gif" alt="My Image" title="My Image" />

講解：

src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
路徑有兩種填寫方式：絕對路徑、相對路徑
相對路徑：相對于我們當前 html 文件的位置來寫路徑即可！
./表示當前目錄，../表示上一級目錄

19.<form>標簽

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦?。?/p>

2、method:post/get的區別這一部分內容屬于后端程序員考慮的問題。

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

語法：

<form method="傳送方式" action="服務器文件">

講解：

<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
method ： 數據傳送的方式（get/post）。
 <form method="post" action="save.php"> 
 <label for="username">用戶名:</label> 
 <input type="text" name="username" /> 
 <label for="pass">密碼:</label> 
 <input type="password" name="pass" /> 
 </form>

20.<input>標簽

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

 <form> 
 <input type="text/password" name="名稱" value="文本" /> 
 </form>

屬性：

舉例：
 <form> 
 姓名： <input type="text" name="myName"/><br/> 
 密碼： <input type="password" name="pass"/> 
 </form>
 value="xxx" 替換為 placeholder="xxx" 的體驗更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

語法：

<input placeholder="text"/>
注釋：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。

注意:同一組的單選按鈕，name 取值一定要一致，比如上同一個名稱“gender”，這樣同一組的單選按鈕才可以起到單選的作用！

type：

當type="text"時，輸入框為文本輸入框;
當type="password"時, 輸入框為密碼輸入框。
hidden 定義隱藏輸入字段
image 定義圖像作為提交按鈕
number 定義帶有 spinner 控件的數字字段
password 定義密碼字段。字段中的字符會被遮蔽
radio 定義單選按鈕
checkbox 定義復選框按鈕
range 定義帶有 slider 控件的數字字段
reset 定義重置按鈕。重置按鈕會將所有表單字段重置為初始值
search 定義用于搜索的文本字段
submit 定義提交按鈕。提交按鈕向服務器發送數據
text 默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符
url 定義用于 URL 的文本字段

name：為文本框命名，以備后臺程序ASP 、PHP使用。

value：為文本輸入框設置默認值。(一般起到提示作用)

21.<textarea>標簽

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：

 <textarea rows="行數" cols="列數">文本</textarea>

<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在<textarea></textarea>標簽之間可以輸入默認值。

舉例：

 <form method="post" action="save.php"> 
 <label>聯系我們</label> 
 <textarea cols="50" rows="10" >在這里輸入內容...</textarea> 
 </form>

22.<select>標簽

使用下拉列表框，節省空間。下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。

語法：

 <select> 
 <option value="提交的值">顯示的值</option> ... 
 </select>
 設置selected="selected"屬性，則該選項就被默認選中。 
 selected="selected"

若想實現多選

<select multiple="multiple"> 然后選擇時候按ctrl點鼠標選中

若想讓某個選項不可選

<option disabled="disabled">

optgroup 標簽

把相關的選項組合在一起

屬性 label：給選項組命名

屬性 disabled：禁用該選項組

23.<label>標簽

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：

 <label for="控件id名稱">

注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。

例子：

 <form> 
 <label for="male">男</label> 
 <input type="radio" name="gender" id="male" /> <br /> 
 <label for="female">女</label> 
 <input type="radio" name="gender" id="female" /> 
 <label for="email">輸入你的郵箱地址</label> 
 <input type="email" id="email" placeholder="Enter email"> 
 </form>

24.<map>標簽

使用 map 標簽可以給圖片某塊區域加超鏈接

使用方法：

1）為 map 標簽首先加上 id 屬性用來為 map 標簽定義一個唯一的名稱

2）為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同

3）為 map 標簽所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱

4）在 map 標簽內嵌套 area 標簽來實現給指定區域加鏈接

 <area shape="" coords="" href="" alt="" />
 shape 屬性：定義鏈接區域的形狀，常用值 rect、circle
 coords 屬性：確定區域的精確位置。填寫坐標即可，以父元素左上角為原點，可借助qq截圖來得到想要的坐標
 href 屬性：填寫鏈接地址即可
 alt 屬性：給鏈接加一些說明信息

例子：

 <map id="img1" name="img1"> 
 <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> 
 <area shape="circle" coords="507,287,20"  alt="私房庫我的博客" target="_blank" /> 
 </map>

注意：

第一個coords的四個參數中，前兩個參數為矩形的接近原點的頂角的坐標，后兩個參數為對角的坐標。
第二個coords的三個參數中，前兩個為圓心坐標，第三個參數為圓的半徑。

25.<iframe>標簽

創建包含另外一個文檔的內聯框架（即行內框架）

屬性：

frameborder

值：1、0

作用：規定是否顯示框架周圍的邊框。

width值：以像素計的寬度值、以包含元素百分比計的寬度值

作用：定義 iframe 的寬度

height

作用：定義高度

name

作用：給 iframe 命名

scrolling

值：yes、no、auto

作用：規定是否在 iframe 中顯示滾動條

作用：規定在 iframe 中顯示的文檔的 URL

可以是本地的 html 文件，也可以是遠程的 html 文件

標簽寫法與嵌套的討論

標簽寫法

元素標記的省略（在 html5 里面有的標記是可以省略不寫的）

1）不允許寫結束標簽的元素

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標簽都是單標簽例如：br 標簽，不可以這樣<br></br>，只能<br />這樣來關閉標簽。

2）可以省略結束標記的元素有：

 li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。

3）可以省略全部標記的元素有

 html,head,body,colgroup,tbody

具有 boolean 值得屬性

 例如：disabled,readonly，checked 等只寫屬性而不寫屬性值得時候當做 ture
 不寫屬性表示 false

屬性值的引號可以省略

 要求：屬性值不包含 空字符串，<，>，=， ‘

標簽嵌套探討

1.html 規定我們必須要嵌套著寫的標簽

例如：頁面頭部是嵌套在 head 標簽里面的，主體內容都是嵌套在 body 標簽里面的表單的內容是嵌套在 form 標簽里面的，dt、dd 是嵌套在 dl 標簽里面的，li 是嵌套到ul 標簽里面的，等等...

2.塊級元素可以嵌套內聯元素，但是內聯元素不能包含塊元素

<div>
 <span>我是一個 span 元素</span>
 </div> —— 對 
<span>
 <div>div 元素</div>
</span> —— 錯

3.內聯元素可以嵌套內聯元素

<a href="#">
 <span></span>
</a> —— 對

4.塊級元素與塊級元素嵌套注意點

div 塊級元素是一個容器，幾乎可以存放任何常用標簽，包括自己，我們為什么要使用 div 來嵌套標簽？這個問題可以用用我們國家的省份劃分來解釋，國家需要劃分不同的省份來利于管理，那么我們 html 頁面也是的，整個 html 文檔元素太多，我們需要使用 div 標簽將頁面劃分成不同的塊，這樣可以對每塊進行分開管理，學完 css 我們就知道怎么進行管理了。
塊級元素不能放在 p 標簽里面

<p><ol><li></li></ol></p> —— 錯 <p><div></div></p> —— 錯

li 內可以包含 div 標簽，li 和 div 標簽都是裝載內容的容器，地位平等，沒有級別之分（例如：h1、h2 這樣森嚴的等級制度），要知道 li 標簽連它的父級 ul 或者是 ol 都可以容納的

喜歡前端的小伙伴們可以在評論區留言，尋找和小馮童鞋一樣熱愛前端的友人，讓我們一起玩轉前端的世界！

符串模板（Template literals）是一種JavaScript語言特性，用于創建包含動態內容的多行字符串。

一般使用反引號（）來定義字符串，并通過${expression}`來插入變量或表達式的值。

以下是一些字符串模板的常見用法：

1：插入變量：

const name='Alice';
const age=25;
const greeting=`Hello, my name is ${name} and I'm ${age} years old.`;
console.log(greeting);
// 輸出: Hello, my name is Alice and I'm 25 years old.

2：表達式插入：

const a=5;
const b=10;
const result=`The sum of ${a} and $ is ${a + b}.`;
console.log(result);
// 輸出: The sum of 5 and 10 is 15.

3：多行字符串：

const message=`
  This is a
  multiline
  string.
`;
console.log(message);
// 輸出:
// This is a
// multiline
// string.

4：嵌套模板：

const name='Bob';
const greeting=`Hello, ${`my name is ${name}`}.`;
console.log(greeting);
// 輸出: Hello, my name is Bob.

字符串模板的優點是可以更清晰地編寫包含變量和表達式的多行字符串，避免了使用字符串連接符（+）的繁瑣。
還提供了更好的可讀性和易于維護的代碼結構。

在線咨詢

上一篇：2020國家公務員考試，報名確認如何才能不出錯？
下一篇：如何將 JavaScript 代碼添加到網頁中，以及

您的項目需求

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

整合營銷服務商

第7節 Javascript數據類型-零點程序員-王

見標簽

標簽寫法與嵌套的討論

您的項目需求