HTML簡(jiǎn)介

HTML?簡(jiǎn)介

什麼是HTML?

HTML 是用來(lái)描述網(wǎng)頁(yè)的語(yǔ)言。

·???????? HTML 指的是超文本標(biāo)記語(yǔ)言:?HyperText?Markup?Language

##·?????????套標(biāo)記標(biāo)籤?(markup tag)

·???????? HTML 使用標(biāo)記標(biāo)籤來(lái)描述網(wǎng)頁(yè)

·???????? HTML

·???????? 超文本標(biāo)記語(yǔ)言（HTML）的結(jié)構(gòu)包括「頭」部分（英文：Head）、和「主體」部分（英文：Body），其中「頭」部提供關(guān)於網(wǎng)頁(yè)的信息，「主體」部分提供網(wǎng)頁(yè)的具體內(nèi)容。

HTML 標(biāo)籤

HTML 標(biāo)籤標(biāo)籤通常稱為 HTML 標(biāo)籤 (HTML tag)。

·???????? HTML 標(biāo)籤是由尖括號(hào)包圍的關(guān)鍵字，例如<html>

·???????? HTML 標(biāo)籤通常是成對(duì)出現(xiàn)的，例如<b> 和<b>

·???????? 標(biāo)籤對(duì)中的第一個(gè)標(biāo)籤是開(kāi)始標(biāo)籤，第二個(gè)標(biāo)籤是結(jié)束標(biāo)籤

·???????? 開(kāi)始和結(jié)束標(biāo)籤也被稱為開(kāi)放標(biāo)籤和閉合標(biāo)籤

<標(biāo)籤>內(nèi)容</標(biāo)籤>

當(dāng)然也會(huì)存在一些單一標(biāo)籤，就是單一出現(xiàn)的，例如<br>、<hr>等。

等學(xué)習(xí)結(jié)束可以對(duì)常用的標(biāo)籤及作用做個(gè)總結(jié)，方便記憶和查找。

HTML 元素

"HTML 標(biāo)籤" 和"HTML 元素" 通常都是描述同樣的意思.

HTML元素指的是從開(kāi)始標(biāo)籤（start tag）到結(jié)束標(biāo)籤（end tag）的所有程式碼。如下實(shí)例:

HTML 元素:

元素的詳細(xì)知識(shí)點(diǎn)請(qǐng)參考http://php.cn/html/html-elements.html

Web 瀏覽器

Web瀏覽器（如Google瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用於讀取HTML文件，並將其作為網(wǎng)頁(yè)顯示。

瀏覽器並不是直接顯示的HTML標(biāo)籤，但可以使用標(biāo)籤來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給使用者：

QQ圖片20161010112448.png

這也就是標(biāo)籤存在的意義和作用，用來(lái)決定和改變網(wǎng)頁(yè)上顯示出來(lái)的樣式。

HTML 網(wǎng)頁(yè)結(jié)果

下面是一個(gè)可視化的HTML頁(yè)面結(jié)構(gòu)：

QQ圖片20161010112520.png

<html>
<head>
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
</body>
</html>

只有<body></body>區(qū)域(白色部分)才會(huì)在瀏覽器中顯示。

HTML版本

從初期的網(wǎng)路誕生後，已經(jīng)出現(xiàn)了許多HTML版本:

QQ圖片20161010112545.png

< ;!DOCTYPE> 聲明

<!DOCTYPE>聲明有助於瀏覽器中正確顯示網(wǎng)頁(yè)。

網(wǎng)路上有許多不同的文件，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。

doctype 宣告是不區(qū)分大小寫(xiě)的，以下方式皆可：

<!DOCTYPE html>?

<!DOCTYPE HTML>?

<!doctype html>?

<!Doctype Html>

##通用聲明

##HTML5

< !DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3 .org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整網(wǎng)頁(yè)聲明類型?DOCTYPE 參考手冊(cè)。

中文編碼

目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭將字符聲明為UTF-8。

HTML 實(shí)例

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">    
 <title>頁(yè)面標(biāo)題</title>
 </head>
 <body>
 
 <h1>我的第一個(gè)標(biāo)題</h1>
 
 <p>我的第一個(gè)段落。</p>
 
 </body>
 </html>

可以再試一次將<meta charset="UTF-8">刪除後在頁(yè)面上顯示的結(jié)果，對(duì)比一下就可以更清楚的知道UTF -8的作用了。試試看吧！！

透過(guò)上面的學(xué)習(xí)，您再來(lái)看看下面的這個(gè)實(shí)例，是不是清楚明了呢。

跟著解析，再來(lái)熟悉一下。

HTML 實(shí)例

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8"> 
 <title>php中文網(wǎng)(php.cn)</title> 
 </head> 
 <body> 
 
 <h1>標(biāo)題：歡迎學(xué)習(xí)HTML</h1> 
 
 <p>第一個(gè)段落</p> 
 
 </body> 
 </html>

實(shí)例解析

·???????? DOCTYPE 宣告了文件類型

#·?????文件類型

·???????? 位於標(biāo)籤<body> 與</body> 為視覺(jué)化網(wǎng)頁(yè)內(nèi)容

#·???????? 位於標(biāo)籤<h1

·????????於位於標(biāo)籤<h1

·?????

#·???????? 位於標(biāo)籤<p> 與</p> 顯示為一個(gè)段落

<!DOCTYPE ? html> 在HTML5中也是描述了文檔類型。

? ?

繼續(xù)學(xué)習(xí)