爬蟲學(xué)習(xí)：HTML知識(shí)簡介

、 HTML語言
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)，它不是一種編程語言，而是一種使用一套標(biāo)記標(biāo)簽（markup tag）來標(biāo)記元素作用的標(biāo)記語言，標(biāo)記語言使用標(biāo)記標(biāo)簽來描述網(wǎng)頁的內(nèi)容。標(biāo)記標(biāo)簽不會(huì)出現(xiàn)在頁面中，只有標(biāo)簽中的內(nèi)容才會(huì)顯示在頁面上。

二、 HTML標(biāo)簽和HTML元素
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)，是由一對(duì)尖括號(hào)括起來的關(guān)鍵詞，稱為標(biāo)簽名，如 <html>、<a>、<h1>。標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫，(X)HTML 版本中強(qiáng)制使用小寫，這樣更加嚴(yán)謹(jǐn)。
標(biāo)簽的標(biāo)記分為起始標(biāo)簽和結(jié)束標(biāo)簽。HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有內(nèi)容。
起始標(biāo)簽用于標(biāo)記對(duì)應(yīng)HTML元素的開始位置，結(jié)束標(biāo)簽用于標(biāo)記HTML元素的結(jié)束位置。
標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽，都需要起始標(biāo)簽和結(jié)束標(biāo)簽，不同的是單標(biāo)簽起始、結(jié)束標(biāo)簽都寫在一個(gè)尖括號(hào)里而雙標(biāo)簽則分別寫在兩個(gè)尖括號(hào)里。單標(biāo)簽又稱為空標(biāo)簽，雙標(biāo)簽又稱為閉合標(biāo)簽。單標(biāo)簽的結(jié)束標(biāo)簽就是在標(biāo)簽的右尖括號(hào)前面一個(gè)反斜杠，如<br />就是一個(gè)單標(biāo)簽，雙標(biāo)簽的結(jié)束標(biāo)簽就是在左尖括號(hào)后比開始標(biāo)簽多了一個(gè)反斜杠，如<html>和</html>就是一對(duì)開始標(biāo)簽和結(jié)束標(biāo)簽。

三、 HTML元素的分類
不同的HTML標(biāo)簽對(duì)應(yīng)的HTML元素可以根據(jù)位置特征等分為兩類:

塊元素(block)
塊元素主要用來搭建網(wǎng)站架構(gòu)、頁面布局、承載內(nèi)容，常見塊元素對(duì)應(yīng)的標(biāo)簽有： address、blockquote、center、dd、dl、dt、div、dir、fieldset、form、h1-h6、hr、isindex、li、menu、noframes、noscript、ol、table、p、pre、table、u、ul，即這些標(biāo)簽對(duì)應(yīng)的HTML元素為塊元素。塊元素可設(shè)置寬高以及內(nèi)外邊距、在新行上開始，塊級(jí)元素如果不設(shè)置寬度和高度，則寬度默認(rèn)為父級(jí)元素（容器）的寬度。高度則根據(jù)內(nèi)容大小自動(dòng)填充。
行元素(inline)
行元素用于加強(qiáng)內(nèi)容顯示、控制細(xì)節(jié)，例如：加粗、斜體等等，常見行元素對(duì)應(yīng)的標(biāo)簽有： a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var …等，行元素和其他元素都在一行上，高、行高及頂和底邊距不可改變，寬度就是它的文字或圖片的寬度，不可改變，可以設(shè)置左右內(nèi)、外邊距，行元素與其他行元素可共處一行

四、標(biāo)簽嵌套
雙標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間可以嵌套其他標(biāo)簽，不過需要遵循以下規(guī)則：
1、兩個(gè)標(biāo)簽嵌套時(shí)必須確保開始標(biāo)簽和結(jié)束標(biāo)簽的層級(jí)是一致的，即開始標(biāo)簽在外層的結(jié)束標(biāo)簽必須在外層；
2、建議書寫HTML文本時(shí)嵌套標(biāo)簽的內(nèi)層標(biāo)簽相對(duì)外層標(biāo)簽進(jìn)行縮進(jìn)以體現(xiàn)嵌套關(guān)系；
3、塊元素標(biāo)簽可以包含行元素標(biāo)簽，但行元素標(biāo)簽不能包含塊元素標(biāo)簽，它們只能包含其它的行元素標(biāo)簽；
4、a標(biāo)簽想要用hover必須把它的路徑寫全；
5、偽類(hover/link/visited/active)只能加給a標(biāo)簽，在支持 CSS 的瀏覽器中，偽類表示鏈接的不同狀態(tài)，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)：
1)link用在為訪問的連接上；
2)visited用在已經(jīng)訪問過的連接上；
3)hover用于鼠標(biāo)光標(biāo)置于其上的連接；
4)active用于獲得焦點(diǎn)(比如，被點(diǎn)擊)的連接上。
6、塊元素標(biāo)簽之間：
1)h1、h2、h3、h4、h5、h6、p、dt標(biāo)簽內(nèi)不能再嵌套塊標(biāo)簽；
2)li元素可以嵌入ul, ol, div；
3)div內(nèi)可以再嵌套其他塊元素；
4)塊元素嵌套其他標(biāo)簽時(shí)，同一層級(jí)必須都是塊元素，或必須都是行元素，不能一部分是塊元素，一部分是行元素。如<div><span></span><p></p></div>這種模式是錯(cuò)誤的，因?yàn)閟pan是行元素，p是塊元素，所以這個(gè)是錯(cuò)誤的嵌套。

雖然標(biāo)簽可以嵌套，但為了提高瀏覽器的渲染效率，應(yīng)該盡量少使用標(biāo)簽嵌套。

五、標(biāo)簽的屬性
HTML 標(biāo)簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標(biāo)簽中使用,總是以名稱/值對(duì)的形式出現(xiàn)，屬性與屬性之間需要用空格隔開，屬性使用小寫。常用的屬性有class(樣式類)、id（屬性名）、style（顯示風(fēng)格）、title（標(biāo)題）、align（對(duì)齊方式）、bgcolor（背景色）、color（顏色）。
如：

。

何計(jì)算機(jī)語言都會(huì)包含大量的內(nèi)置函數(shù)，當(dāng)然也可以自定義函數(shù)。

JS函數(shù)是由事件驅(qū)動(dòng)或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。相對(duì)來說，JS的函數(shù)比較復(fù)雜。

目錄
1 常規(guī)函數(shù)
2 JS嵌套函數(shù)
3 JSt函數(shù)字面值
4 函數(shù)對(duì)象Function
5 匿名函數(shù)，也叫內(nèi)聯(lián)函數(shù)
6 閉包
7 內(nèi)聯(lián)函數(shù)作為對(duì)象的方法
8 常規(guī)函數(shù)做為對(duì)象的方法
9 對(duì)象字面量

1 常規(guī)函數(shù)

JS函數(shù)是先定義后調(diào)用。（C語言還要先聲明）

function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

JS可以在<script>標(biāo)簽中直接調(diào)用函數(shù)，也可以在鏈接或事件中調(diào)用。

2 JS嵌套函數(shù)

JavaScript允許函數(shù)用作數(shù)據(jù)，也允許在函數(shù)中嵌入函數(shù)。

function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}

hypotenuse(1, 2); // This will produce 2.2360

3 JSt函數(shù)字面值

字面值函數(shù)的語法很類似的函數(shù)聲明，不同之處在于它被用作表達(dá)，它不是作為一個(gè)聲明，函數(shù)名是必需的。

var func=function(x,y){ return x*y };
你可以在上面函數(shù)中調(diào)用如下：
func(10,20); // This will produce 200

4 函數(shù)對(duì)象Function

Function也是一個(gè)對(duì)象，可以使用new運(yùn)算符創(chuàng)建一個(gè)實(shí)例。

<script type="text/javascript">
var variablename=new Function(Arg1, Arg2..., "Function Body");
</script>
下面是創(chuàng)建一個(gè)函數(shù)的例子：
<script type="text/javascript">
var func=new Function("x", "y", "return x*y;");
</script>

Function()函數(shù)構(gòu)造預(yù)期任意數(shù)量的字符串參數(shù)。最后一個(gè)參數(shù)是函數(shù)體，它可以包含任意JavaScript語句，用分號(hào)彼此分開。

請(qǐng)注意，F(xiàn)unction()構(gòu)造不通過任何參數(shù)，指定一個(gè)名字為它創(chuàng)建函數(shù)。使用Function()構(gòu)造函數(shù)創(chuàng)建的未命名的函數(shù)稱為匿名函數(shù)。

5 匿名函數(shù)，也叫內(nèi)聯(lián)函數(shù)

函數(shù)(沒有名字)定義可以被賦值給一個(gè)變量，該變量被用作函數(shù)的引用。

匿名函數(shù)是指那些無需定義函數(shù)名的函數(shù)。匿名函數(shù)與 Lambda 表達(dá)式（拉姆達(dá)表達(dá)式）是一回事。唯一的不同——語法形式不同。Lambda 表達(dá)式更進(jìn)一步。本質(zhì)上，它們的作用都是：產(chǎn)生方法——內(nèi)聯(lián)方法，也就是說，省去函數(shù)定義，直接寫函數(shù)體。

var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"

匿名函數(shù)也可以作為事件方法：

window.onload=function(){
alert("Welcome");
}

var baz1=function() {
var foo=10;
var bar=2;
return foo * bar;
};
function mutil() {
var foo=10;
var bar=2;
return foo * bar;
};
alert(baz1());
var baz2=mutil();
alert(baz2);

baz1 與 baz2 完全一樣，但 baz1 與 baz2 相比，省去了函數(shù)定義，直接函數(shù)體——看上去多簡約。

6 閉包

閉包是定義在另一個(gè)函數(shù)中的匿名函數(shù)。當(dāng)外部函數(shù)退出時(shí)，它會(huì)返回內(nèi)部匿名函數(shù)的引用，使得通過引用調(diào)用內(nèi)部函數(shù)成為可能。閉包意味著局部變量對(duì)內(nèi)部函數(shù)仍然可用，即使它已經(jīng)超出其作用域。閉包可以讓變量一直存活到不再需要它們的時(shí)候。閉包，其實(shí)就是指程序語言中能讓代碼調(diào)用已運(yùn)行的函數(shù)中所定義的局部變量。js中某個(gè)函數(shù)的內(nèi)部函數(shù)在該函數(shù)執(zhí)行結(jié)束后仍然可以訪問這個(gè)函數(shù)中定義的變量，這稱為閉包(Closure) 。

閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

請(qǐng)看下面的代碼。

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
alert(n);
}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在這段代碼中，result實(shí)際上就是閉包f2函數(shù)。它一共運(yùn)行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數(shù)f1中的局部變量n一直保存在內(nèi)存中，并沒有在f1調(diào)用后被自動(dòng)清除。

為什么會(huì)這樣呢？原因就在于f1是f2的父函數(shù)，而f2被賦給了一個(gè)全局變量，這導(dǎo)致f2始終在內(nèi)存中，而f2的存在依賴于f1，因此f1也始終在內(nèi)存中，不會(huì)在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收。

這段代碼中另一個(gè)值得注意的地方，就是“nAdd=function(){n+=1}”這一行，首先在nAdd前面沒有使用var關(guān)鍵字，因此 nAdd是一個(gè)全局變量，而不是局部變量。其次，nAdd的值是一個(gè)匿名函數(shù)（anonymous function），而這個(gè)

匿名函數(shù)本身也是一個(gè)閉包，所以nAdd相當(dāng)于是一個(gè)setter，可以在函數(shù)外部對(duì)函數(shù)內(nèi)部的局部變量進(jìn)行操作。

function foo() {
var a=10;
function bar() {
a *=2;
return a;
}
return bar;
}

var baz=foo();
document.write(baz(),"<br>");
document.write(baz(),"<br>");
document.write(baz(),"<br>");
var blat=foo();
document.write(blat(),"<br>");
//20,40,80,20

7 內(nèi)聯(lián)函數(shù)作為對(duì)象的方法

function Distance(r,t){
this.rate=r;
this.time=t;
this.calculate=function() { return r * t;}
}

<body>
var trip1=new Distance(50, 1.5);
var trip2=new Distance(75, 3.2);
document.write("trip 1 distance: "+trip1.calculate(),"<br />");
document.write("trip 2 distance: "+trip2.calculate(),"<br />");
//75,240
</body>

8 常規(guī)函數(shù)做為對(duì)象的方法

var toy=new Object();
toy.name="Lego";
toy.color="red";
toy.shape="rectangle";
toy.display=printObject;
function printObject(){
document.write("<b>The toy is a " + toy.name + ".<br>");
document.write("It is a " + toy.color + " " + toy.shape + ".<br />");
}

<body>
<script>
toy.display();
toy.color="blue";
toy.display();
</script>
</body>

運(yùn)行結(jié)果：

The toy is a Lego.
It is a red rectangle.
The toy is a Lego.
It is a blue rectangle.

9 對(duì)象字面量，也用匿名函數(shù)做為對(duì)象方法

<script>
var soldier={
name: undefined,
rank: "captain",
picture: "keeweeboy.jpg",
fallIn: function(){
document.write("At attention……<br>");
},
fallOut: function(){
document.write("Drop out of ……<br>");
}
};
</script>

<body>
<script>
soldier.name="Tian";
document.write("The soldier's name is ", soldier.name,".<br />");
document.write(soldier.name+"'s name is ", soldier.rank,".<br />");
soldier.fallIn();
soldier.fallOut();
</script>
</body>

－End－

TML 元素

HTML 文檔由 HTML 元素定義，HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。

HTML 元素語法

HTML 元素以開始標(biāo)簽起始

HTML 元素以結(jié)束標(biāo)簽終止

元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容

某些 HTML 元素具有空內(nèi)容（empty content）

空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）

大多數(shù) HTML 元素可擁有屬性

注釋: 您將在本教程的 HTML 屬性一章中學(xué)習(xí)更多有關(guān)屬性的詳細(xì)內(nèi)容。

嵌套的 HTML 元素

HTML 文檔由嵌套的 HTML 元素（可以包含其他 HTML 元素）構(gòu)成。

HTML 文檔實(shí)例

<!DOCTYPE html>

<html>

<body>

<p>這是第一個(gè)段落。</p>

</body>

</html>

上述的實(shí)例包含了三個(gè) HTML 元素。

HTML 實(shí)例解析

<p> 元素:

<p>這是第一個(gè)段落。</p>

這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。

這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p> 以及一個(gè)結(jié)束標(biāo)簽 </p>。

元素內(nèi)容是: 這是第一個(gè)段落。

<body> 元素:

<body>

<p>這是第一個(gè)段落。</p>

</body>

<body> 元素定義了 HTML 文檔的主體。

這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <body> 以及一個(gè)結(jié)束標(biāo)簽 </body>。

元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。

<html> 元素：

<html>

<body>

<p>這是第一個(gè)段落。</p>

</body>

</html>

<html> 元素定義了整個(gè) HTML 文檔。

這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <html> ，以及一個(gè)結(jié)束標(biāo)簽 </html>.

元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。

不要忘記結(jié)束標(biāo)簽

如果您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地顯示 HTML：

<p>這是一個(gè)段落

上述實(shí)例在瀏覽器中也能正常顯示，因?yàn)殛P(guān)閉標(biāo)簽是可選的。

但您不能對(duì)此產(chǎn)生依賴性，因?yàn)橥浭褂媒Y(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。

HTML 空元素

HTML 空元素即為沒有內(nèi)容的 HTML 元素。

HTML 空元素應(yīng)該在開始標(biāo)簽中關(guān)閉。

HTML 的一個(gè)空元素為 <br>（用于定義換行），<br> 元素就是沒有關(guān)閉標(biāo)簽。

HTML 空元素的關(guān)閉方法是在開始標(biāo)簽中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受這種方式。

注意：在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉，即使是空元素。

HTML 提示：使用小寫標(biāo)簽

由于 HTML 標(biāo)簽對(duì)英文字母的大小寫不敏感，所以 <P> 和 <p> 表達(dá)的意思相同，不過大部分網(wǎng)站喜歡使用大寫的 HTML 標(biāo)簽。因?yàn)槿f維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強(qiáng)制使用小寫。

本文為 HTML 基礎(chǔ)教程第七章，下一章：HTML屬性

【小提示】tips:本文由數(shù)據(jù)微學(xué)院作者原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來源或聯(lián)系作者。更多優(yōu)秀參考好文請(qǐng)關(guān)注【數(shù)據(jù)微學(xué)院】個(gè)人圖書館。

前端開發(fā) HTML教程數(shù)據(jù)微學(xué)院網(wǎng)站開發(fā) 互聯(lián)網(wǎng)

在線咨詢

上一篇：Javascript生成密碼字典，10行自遞歸函數(shù)代
下一篇：五種JavaScript富文本編輯器，總有一款適合你