Python小案例71- HTML基礎(chǔ)及語(yǔ)法

TML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。它由一系列的標(biāo)簽組成，這些標(biāo)簽用于描述網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。HTML標(biāo)簽通常由尖括號(hào)包圍，例如<tag>。

HTML標(biāo)簽可以分為兩類(lèi)：塊級(jí)元素和內(nèi)聯(lián)元素。塊級(jí)元素用于組織網(wǎng)頁(yè)的結(jié)構(gòu)，例如段落、標(biāo)題、列表等。內(nèi)聯(lián)元素用于標(biāo)記文本中的特定部分，例如鏈接、強(qiáng)調(diào)文本等。

HTML標(biāo)簽可以包含屬性，屬性提供了有關(guān)標(biāo)簽的額外信息。例如，<a>標(biāo)簽用于創(chuàng)建鏈接，可以使用href屬性指定鏈接的目標(biāo)URL。

除了標(biāo)簽和屬性，HTML還支持一些特殊字符實(shí)體，用于表示特殊字符，例如小于號(hào)（<）、大于號(hào)（>）等。

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強(qiáng)網(wǎng)頁(yè)的外觀和功能。CSS用于控制網(wǎng)頁(yè)的樣式，例如顏色、字體、布局等。JavaScript用于實(shí)現(xiàn)交互性和動(dòng)態(tài)效果，例如表單驗(yàn)證、動(dòng)畫(huà)等。

通過(guò)使用HTML，開(kāi)發(fā)人員可以創(chuàng)建具有結(jié)構(gòu)良好、易于理解和導(dǎo)航的網(wǎng)頁(yè)。它是構(gòu)建互聯(lián)網(wǎng)的基礎(chǔ)之一，被廣泛應(yīng)用于網(wǎng)站開(kāi)發(fā)和內(nèi)容管理系統(tǒng)。

HTML的語(yǔ)法由標(biāo)簽、屬性和內(nèi)容組成。下面是HTML的基本語(yǔ)法規(guī)則：

標(biāo)簽：HTML標(biāo)簽用于定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。標(biāo)簽通常由尖括號(hào)包圍，例如<tag>。標(biāo)簽可以是成對(duì)出現(xiàn)的，其中包含一個(gè)開(kāi)標(biāo)簽和一個(gè)閉標(biāo)簽，例如<tag>content</tag>。也可以是自閉合標(biāo)簽，即只有一個(gè)標(biāo)簽，沒(méi)有內(nèi)容，例如<tag />。
屬性：HTML標(biāo)簽可以包含屬性，屬性提供了有關(guān)標(biāo)簽的額外信息。屬性通常以鍵值對(duì)的形式出現(xiàn)，例如<tag attribute="value">。屬性的值可以是字符串或布爾值。常見(jiàn)的屬性包括class、id、src、href等。
內(nèi)容：HTML標(biāo)簽可以包含文本內(nèi)容或其他標(biāo)簽。文本內(nèi)容直接放置在標(biāo)簽的開(kāi)閉標(biāo)簽之間，例如<p>這是一個(gè)段落。</p>。標(biāo)簽可以嵌套在其他標(biāo)簽中，形成標(biāo)簽的層次結(jié)構(gòu)。
注釋?zhuān)篐TML注釋用于在代碼中添加注釋?zhuān)粫?huì)在網(wǎng)頁(yè)中顯示。注釋以結(jié)尾，例如。

下面是一個(gè)簡(jiǎn)單的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的網(wǎng)頁(yè)</title>
</head>
<body>
  <h1>歡迎來(lái)到我的網(wǎng)頁(yè)</h1>
  <p>這是一個(gè)段落。</p>
  <a href="https://www.example.com">點(diǎn)擊這里</a>訪問(wèn)示例網(wǎng)站。
</body>
</html>

在這個(gè)示例中，<!DOCTYPE html>聲明了文檔類(lèi)型為HTML5。<html>標(biāo)簽是HTML文檔的根元素。<head>標(biāo)簽用于定義文檔的頭部信息，例如標(biāo)題和樣式表。<title>標(biāo)簽定義了網(wǎng)頁(yè)的標(biāo)題，將顯示在瀏覽器的標(biāo)題欄中。<body>標(biāo)簽用于定義文檔的主體內(nèi)容。<h1>標(biāo)簽定義了一個(gè)一級(jí)標(biāo)題，<p>標(biāo)簽定義了一個(gè)段落，<a>標(biāo)簽定義了一個(gè)鏈接。

當(dāng)今數(shù)字化的時(shí)代，網(wǎng)頁(yè)成為人們獲取信息、進(jìn)行交流和參與活動(dòng)的主要平臺(tái)之一。一個(gè)網(wǎng)頁(yè)的構(gòu)成涉及多個(gè)要素，從基本的結(jié)構(gòu)到豐富的內(nèi)容呈現(xiàn)，每個(gè)部分都發(fā)揮著特定的作用。本文將探討一個(gè)網(wǎng)頁(yè)的主要組成要素，幫助讀者更好地理解網(wǎng)頁(yè)的結(jié)構(gòu)和功能。

1. HTML（超文本標(biāo)記語(yǔ)言）

HTML是網(wǎng)頁(yè)的基本構(gòu)建塊，它定義了網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。HTML使用標(biāo)記（標(biāo)簽）來(lái)描述文本、圖像、鏈接等元素的布局和層次結(jié)構(gòu)。常見(jiàn)的HTML標(biāo)簽包括<head>、<body>、<p>、<img>等，它們分別用于定義文檔頭部、主體內(nèi)容、段落、圖像等。

2. CSS（層疊樣式表）

CSS負(fù)責(zé)網(wǎng)頁(yè)的樣式和布局。通過(guò)CSS，開(kāi)發(fā)者可以定義文本的字體、顏色、大小，設(shè)置元素的邊距、背景、定位等。CSS的主要作用是美化和排版網(wǎng)頁(yè)，提供更好的用戶(hù)體驗(yàn)。樣式表可以嵌入在HTML文檔中，也可以作為外部文件引用。

3. JavaScript

JavaScript是一種用于網(wǎng)頁(yè)交互和動(dòng)態(tài)效果的腳本語(yǔ)言。它使開(kāi)發(fā)者能夠在用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)動(dòng)態(tài)地改變HTML和CSS，實(shí)現(xiàn)交互性的功能。例如，通過(guò)JavaScript可以創(chuàng)建響應(yīng)用戶(hù)操作的表單驗(yàn)證、動(dòng)畫(huà)效果、內(nèi)容更新等。

4. 圖片和多媒體文件

圖像、音頻和視頻是網(wǎng)頁(yè)中常見(jiàn)的多媒體元素。圖像通常使用<img>標(biāo)簽插入，而音頻和視頻可以通過(guò)<audio>和<video>標(biāo)簽嵌入。這些元素豐富了網(wǎng)頁(yè)的內(nèi)容，使其更具吸引力和信息量。

5. 鏈接和導(dǎo)航

鏈接是網(wǎng)頁(yè)中連接不同頁(yè)面和資源的紐帶。通過(guò)<a>標(biāo)簽，開(kāi)發(fā)者可以創(chuàng)建文本或圖像鏈接，使用戶(hù)能夠輕松地導(dǎo)航到其他頁(yè)面。導(dǎo)航菜單、導(dǎo)航欄等也是常見(jiàn)的導(dǎo)航元素，它們幫助用戶(hù)快速定位和訪問(wèn)網(wǎng)站的不同部分。

6. 頁(yè)面結(jié)構(gòu)（Header、Footer、Nav等）

一個(gè)網(wǎng)頁(yè)通常分為頭部（Header）、主體（Body）、尾部（Footer）等結(jié)構(gòu)部分。頭部包含網(wǎng)頁(yè)的標(biāo)題、導(dǎo)航菜單等信息，尾部包含版權(quán)信息、聯(lián)系方式等。這些結(jié)構(gòu)元素有助于提供清晰的頁(yè)面布局和導(dǎo)航結(jié)構(gòu)。

7. 表單

表單是網(wǎng)頁(yè)中用戶(hù)輸入和提交信息的主要方式。通過(guò)<form>標(biāo)簽，開(kāi)發(fā)者可以創(chuàng)建包括文本框、按鈕、下拉框等在內(nèi)的表單元素。JavaScript通常與表單結(jié)合使用，用于實(shí)現(xiàn)實(shí)時(shí)驗(yàn)證、交互性效果等功能。

8. 響應(yīng)式設(shè)計(jì)

隨著移動(dòng)設(shè)備的普及，響應(yīng)式設(shè)計(jì)變得越來(lái)越重要。通過(guò)使用響應(yīng)式設(shè)計(jì)技術(shù)，開(kāi)發(fā)者可以確保網(wǎng)頁(yè)在不同設(shè)備上都能夠良好地顯示和交互。媒體查詢(xún)和彈性布局是常用于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的技術(shù)手段。

9. 元數(shù)據(jù)（Metadata）

元數(shù)據(jù)提供了關(guān)于網(wǎng)頁(yè)的信息，如標(biāo)題、描述、關(guān)鍵詞等。這些信息不直接顯示在頁(yè)面上，但對(duì)搜索引擎優(yōu)化（SEO）和用戶(hù)體驗(yàn)都至關(guān)重要。元數(shù)據(jù)通常包含在<head>標(biāo)簽中。

10. 版本控制系統(tǒng)

雖然不直接展現(xiàn)在用戶(hù)面前，但版本控制系統(tǒng)對(duì)于開(kāi)發(fā)和維護(hù)網(wǎng)頁(yè)代碼至關(guān)重要。使用版本控制系統(tǒng)，如Git，可以跟蹤代碼的變化、協(xié)同開(kāi)發(fā)，確保代碼的可維護(hù)性和可擴(kuò)展性。

一個(gè)網(wǎng)頁(yè)的構(gòu)成要素是多樣而復(fù)雜的，它們共同作用于用戶(hù)，創(chuàng)造出豐富、交互和令人愉悅的在線體驗(yàn)。了解這些組成要素有助于開(kāi)發(fā)者更好地理解網(wǎng)頁(yè)的結(jié)構(gòu)，同時(shí)也為用戶(hù)提供了更流暢的瀏覽體驗(yàn)。

OM 文檔對(duì)象模型

DOM (document object model) 文檔對(duì)象模型，它定義了操作文檔對(duì)象的接口。

DOM 把一份html文檔表示為一棵家譜樹(shù)，使用parent(父), child(子), sibling(兄弟)等記號(hào)來(lái)表明家庭成員之間的關(guān)系。

節(jié)點(diǎn)

節(jié)點(diǎn)（node) 一詞來(lái)自于網(wǎng)絡(luò)理論，這代表著網(wǎng)絡(luò)中一個(gè)個(gè)的連接點(diǎn)，網(wǎng)絡(luò)是由節(jié)點(diǎn)構(gòu)成的。對(duì)于html文檔也是一樣，文檔是由節(jié)點(diǎn)構(gòu)成的集合。

1.元素節(jié)點(diǎn)

元素節(jié)點(diǎn)如 <body> <p> <div> 之類(lèi)的元素，這些元素在文檔中的布局形成了文檔的結(jié)構(gòu)。

2.文本節(jié)點(diǎn)

文本節(jié)點(diǎn)指的是元素節(jié)點(diǎn)中的內(nèi)容，但并非所有的元素節(jié)點(diǎn)都包含有文本節(jié)點(diǎn)。

3.屬性節(jié)點(diǎn)

元素都或多或少有一些屬性，屬性的作用是對(duì)元素作出更具體的描述。屬性節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)當(dāng)中。

html:

<body>

</body>

p ：元素節(jié)點(diǎn)。

title="這里顯示提示信息"：屬性節(jié)點(diǎn)。

這是一個(gè)段落：文本節(jié)點(diǎn)

獲取文檔對(duì)象

一、直接引用節(jié)點(diǎn)

1.getElementById()

這個(gè)方法返回一個(gè)與給定id屬性值的元素節(jié)點(diǎn)相對(duì)應(yīng)的對(duì)象。

例：document.getElementById(‘ha’);

2.getElementsByTagName()

這個(gè)方法返回一個(gè)對(duì)象數(shù)組。每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里給定標(biāo)簽的一個(gè)元素。

例：document.getElementsByTagName(‘li’);

3.getElementsByName()

通過(guò) name 獲取一個(gè)對(duì)象數(shù)組

二、間接引用節(jié)點(diǎn)

除了可以直接引用節(jié)點(diǎn)，還可以通過(guò)節(jié)點(diǎn)間的關(guān)系來(lái)引用相對(duì)節(jié)點(diǎn)。

1.引用子節(jié)點(diǎn)

每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes集合屬性，類(lèi)型是數(shù)組對(duì)象，表示該節(jié)點(diǎn)的所有子節(jié)點(diǎn)的集合。這些子節(jié)點(diǎn)按照其在文檔中出現(xiàn)的順序排列，因此可以通過(guò)索引來(lái)依次訪問(wèn)各個(gè)子節(jié)

點(diǎn)。

例：document.childNodes[0];//引用文檔的根節(jié)點(diǎn)

document.childNodes[0].childNodes[0]//引用<head>節(jié)點(diǎn)

document.childNodes[0].childNodes[1]//引用<body>節(jié)點(diǎn)

除了使用childNodes屬性，還有兩個(gè)屬性可以用于引用子節(jié)點(diǎn)，分別是：

element.firstChild;

element.lastChild;

它們分別表示第一個(gè)子結(jié)點(diǎn)和最后一個(gè)子結(jié)點(diǎn)。

2.引用父節(jié)點(diǎn)

html的節(jié)點(diǎn)層次是一個(gè)樹(shù)狀結(jié)構(gòu)，除了根節(jié)點(diǎn)外，每個(gè)節(jié)點(diǎn)都僅有一個(gè)父節(jié)點(diǎn)，可以由parentNode屬性來(lái)引用

element.parentNode;//引用父節(jié)點(diǎn)

3.引用兄弟節(jié)點(diǎn)

屬于同一個(gè)文檔層次的節(jié)點(diǎn)稱(chēng)為兄弟節(jié)點(diǎn)，有兩個(gè)屬性可以用于兄弟節(jié)點(diǎn)間引用，分別是：

element.nextSibling; //引用下一個(gè)兄弟節(jié)點(diǎn)

element.previousSibling;//引用上一個(gè)兄弟節(jié)點(diǎn)

三、獲取節(jié)點(diǎn)信息

在獲得一個(gè)節(jié)點(diǎn)的引用后，有一些方法可以獲得該節(jié)點(diǎn)的信息。

1.nodeName 獲取節(jié)點(diǎn)名稱(chēng)

語(yǔ)法：Node.nodeName;

不同的類(lèi)型的節(jié)點(diǎn)，nodeName的返回值有所差異：

元素節(jié)點(diǎn)：返回標(biāo)記名稱(chēng);

屬性節(jié)點(diǎn)：返回屬性名稱(chēng);

文本節(jié)點(diǎn)：返回文本 #text

2.nodeType 獲取節(jié)點(diǎn)類(lèi)型

語(yǔ)法： Node.nodeType;

元素節(jié)點(diǎn)：返回 1

屬性節(jié)點(diǎn)：返回 2

文本節(jié)點(diǎn)：返回 3

3.nodeValue 獲取節(jié)點(diǎn)的值

語(yǔ)法： Node.nodeValue;

元素節(jié)點(diǎn)：返回null

屬性節(jié)點(diǎn)：返回節(jié)點(diǎn)值

文本節(jié)點(diǎn)：返回文本內(nèi)容

四、處理屬性節(jié)點(diǎn)

1. getAttribute 獲取節(jié)點(diǎn)屬性值

object.getAttribute(attribute)

例： var a = document.getElementsByTagName(‘a(chǎn)’);

for(var i=0; i<a.length; i++){

alert(a[i].getAttribute(‘title’));

}

2.setAttribute() 設(shè)置節(jié)點(diǎn)屬性值

object.setAttribute(attribute, value)

例：var link = document.getElementById(‘link’);

link.setAttribute(‘title’, ‘鏈接提示信息’);

DOM 總結(jié)：

一份文檔就是一棵樹(shù);

節(jié)點(diǎn)分為不同的類(lèi)型，分別是：元素節(jié)點(diǎn)，屬性節(jié)點(diǎn)，文本節(jié)點(diǎn);

每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象;

getElementById()方法將返回一個(gè)對(duì)象，該對(duì)象對(duì)應(yīng)著文檔里的一個(gè)元素節(jié)點(diǎn);

getElementsByTagName()方法返回一個(gè)對(duì)象數(shù)組，它們分別對(duì)應(yīng)著文檔里的元素

節(jié)點(diǎn);

下一節(jié)將講到事件及表單對(duì)象等。

在線咨詢(xún)

上一篇：網(wǎng)頁(yè)設(shè)計(jì)HTML零基礎(chǔ)入門(mén)
下一篇：HTML中嵌入視頻和音頻代碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商