閱讀(4.2k) 書簽贊(0) 我要糾錯(cuò)

一個(gè)最簡(jiǎn)單的網(wǎng)頁(yè)是如何構(gòu)成的

2018-10-20 17:58 更新

一個(gè)最最最簡(jiǎn)單的網(wǎng)頁(yè)是怎么做出來(lái)的呢？首先我們先來(lái)簡(jiǎn)單的了解一下HTML語(yǔ)言，HTML是網(wǎng)絡(luò)的通用語(yǔ)言,一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言。HTML允許網(wǎng)頁(yè)建設(shè)者建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，無(wú)論使用的是什么類型的電腦或?yàn)g覽器，這些頁(yè)面可以被網(wǎng)上任何所人瀏覽到。比如，你現(xiàn)在看到的就是這種語(yǔ)言寫的頁(yè)面。

如果你想深入學(xué)習(xí)HTML，可以參看w3cschool上的《HTML教程》

HTML的基本組成結(jié)構(gòu)

1、<!DOCTYPE html >

這是一個(gè)標(biāo)準(zhǔn)網(wǎng)頁(yè)的聲明，<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML規(guī)范，這樣瀏覽器就能了解文檔類型。

2、<html>······</html>

此元素可告知瀏覽器,這是一個(gè) HTML 文檔。<html> 與 </html> 標(biāo)簽限定了文檔的開(kāi)始點(diǎn)和結(jié)束點(diǎn)，在它們之間的是文檔的頭部和主體。

3頭部<head>······</head>：

<head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題<title>。<title> 定義了文檔的標(biāo)題，它是 head 部分中唯一必需的元素。

在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。

4、元標(biāo)簽<meta>

name屬性

name 屬性提供了名稱/值對(duì)中的名稱。HTML 和 XHTML 標(biāo)簽都沒(méi)有指定任何預(yù)先定義的 <meta> 名稱。通常情況下，您可以自由使用對(duì)自己和源文檔的讀者來(lái)說(shuō)富有意義的名稱。

"keywords" 是一個(gè)經(jīng)常被用到的名稱。它為文檔定義了一組關(guān)鍵字。某些搜索引擎在遇到這些關(guān)鍵字時(shí)，會(huì)用這些關(guān)鍵字對(duì)文檔進(jìn)行分類。

類似這樣的 meta 標(biāo)簽可能對(duì)于進(jìn)入搜索引擎的索引有幫助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果沒(méi)有提供 name 屬性，那么名稱/值對(duì)中的名稱會(huì)采用 http-equiv 屬性的值。

http-equiv 屬性

http-equiv 屬性為名稱/值對(duì)提供了名稱。并指示服務(wù)器在發(fā)送實(shí)際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對(duì)。

當(dāng)服務(wù)器向?yàn)g覽器發(fā)送文檔時(shí)，會(huì)先發(fā)送許多名稱/值對(duì)。雖然有些服務(wù)器會(huì)發(fā)送許多這種名稱/值對(duì)，但是所有服務(wù)器都至少要發(fā)送一個(gè)：content-type:text/html。這將告訴瀏覽器準(zhǔn)備接受一個(gè) HTML 文檔。

使用帶有 http-equiv 屬性的 <meta> 標(biāo)簽時(shí)，服務(wù)器將把名稱/值對(duì)添加到發(fā)送給瀏覽器的內(nèi)容頭部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

這樣發(fā)送到瀏覽器的頭部就應(yīng)該包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

當(dāng)然，只有瀏覽器可以接受這些附加的頭部字段，并能以適當(dāng)?shù)姆绞绞褂盟鼈儠r(shí)，這些字段才有意義。

content 屬性

content 屬性提供了名稱/值對(duì)中的值。該值可以是任何有效的字符串。

content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

scheme 屬性

scheme 屬性用于指定要用來(lái)翻譯屬性值的方案。此方案應(yīng)該在由 <head> 標(biāo)簽的 profile 屬性指定的概況文件中進(jìn)行了定義。

5、眼睛<title>······</title>

就好像人的眼睛一樣，它是心靈的窗口，而一個(gè)網(wǎng)頁(yè)的眼睛應(yīng)該就是它的頁(yè)面的標(biāo)題title了，我們都知道眼睛是長(zhǎng)在頭上的，所以，<title>標(biāo)題</title>這些應(yīng)放在<head>和</head>之間。也就是

<head><title>標(biāo)題</title></head>

6、身體<body>······</body>

身體body是網(wǎng)頁(yè)最主要的部分了，因?yàn)樯厦鎸懙哪切〇|東網(wǎng)頁(yè)是不顯示出來(lái)的，而大家所看到的頁(yè)面頁(yè)就是身體部分了（當(dāng)然它的TITLE可以在瀏覽器的最左上角可以看到）。

body的寫法是：<body>頁(yè)面內(nèi)容</body> ，網(wǎng)頁(yè)的主體布局就在body里面進(jìn)行。

7、腳<footer>······</footer>

最后放入一些標(biāo)準(zhǔn)化底部樣式的地方，比如友情鏈接，比如網(wǎng)站備案等等等等。

最后，別忘了把這些部分組成一體----網(wǎng)頁(yè)，所以咱們就用<html></html>把他們給包起來(lái)。

好了，咱們來(lái)大體看看網(wǎng)頁(yè)的結(jié)構(gòu)組合起來(lái)是啥樣的：

示例代碼：

<!DOCTYPE html> 
＜html＞
＜head＞
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
＜title＞標(biāo)題＜title＞
<meta name="keywords" content="關(guān)鍵字" /> 
<meta name="description" content="本頁(yè)描述或關(guān)鍵字描述" /> 
＜/head＞
＜body＞
..........內(nèi)容..........
＜/body＞
<footer>
</footer>
＜/html＞

解析：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

content（內(nèi)容類型）：這個(gè)網(wǎng)頁(yè)的格式是文本的，網(wǎng)頁(yè)模式

charset（編碼）：這個(gè)網(wǎng)頁(yè)的編碼是gb2312，中文編碼，需要注意的是這個(gè)是網(wǎng)頁(yè)內(nèi)容的編碼，而不是文件本身的，其他類型的編碼中文可能會(huì)出現(xiàn)亂碼。編碼通常會(huì)出現(xiàn)gb2312以及utf—8兩種規(guī)范，utf—8比較貼近于國(guó)際標(biāo)準(zhǔn)，而如果這個(gè)站只針對(duì)中國(guó)的話，可以選擇gb2312。

<meta name="keywords" content="關(guān)鍵字" />

keywords是網(wǎng)頁(yè)關(guān)鍵詞，以前搜索引擎非常重視抓取這個(gè)東西，可是因?yàn)楹芏嗾鹃L(zhǎng)過(guò)度優(yōu)化關(guān)鍵詞，現(xiàn)在已經(jīng)不那么重要了。

<meta name="description" content="本頁(yè)描述或關(guān)鍵字描述" />

description是網(wǎng)頁(yè)描述，介紹這個(gè)網(wǎng)頁(yè)的大概內(nèi)容。

以上內(nèi)容是否對(duì)您有幫助：

← 超鏈接的基礎(chǔ)使用方法及知識(shí)拓展

塊級(jí)標(biāo)簽 →

寫筆記

我要補(bǔ)充