站長(zhǎng)資訊網(wǎng)
一定要有4個(gè)標(biāo)簽：1、“<!DOCTYPE>”，是一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明；2、“<html>”，用于告知瀏覽器其自身是一個(gè)HTML文檔；3、“<head>”，包含文檔的元數(shù)據(jù)；4、“<body>”，用于包含訪問者可以看到的內(nèi)容。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
html5文檔一定要有4個(gè)標(biāo)簽
-
<!DOCTYPE>
-
<html>
-
<head>
-
<body>
HTML文檔就是對(duì)一個(gè)文檔的描述，都有一個(gè)固定的結(jié)構(gòu)，分為許多個(gè)部分，每個(gè)部分都包含了一個(gè)或者多個(gè)元素。有些元素用于描述文檔的基本信息，有些則描述文檔結(jié)構(gòu)，下面就是一個(gè)基本的HTML文檔的結(jié)構(gòu)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標(biāo)題</title> </head> <body> 文檔內(nèi)容...... </body> </html>
該HTML文檔描述了一個(gè)空白頁(yè)，這些基礎(chǔ)成分確定了HTML文檔的輪廓以及瀏覽器的初始環(huán)境。
1、<!DOCTYPE>標(biāo)簽
DOCTYPE 是 document type(文檔類型)的簡(jiǎn)寫。
doctype 聲明是一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，在 web 設(shè)計(jì)中用來(lái)說(shuō)明你用的 XHTML 或者 HTML 是什么版本。
它告訴瀏覽器兩件事情：
-
它處理的是HTML文檔；
-
用來(lái)標(biāo)記文檔內(nèi)容的HTML所屬的版本，下面的寫法就表明所用的是HTML5。
html5 doctype聲明只有一個(gè)：
<!DOCTYPE HTML>
<!DOCTYPE> 聲明必須位于 HTML5 文檔中的第一行，也就是位于 <html> 標(biāo)簽之前。該標(biāo)簽告知瀏覽器文檔所使用的 HTML 規(guī)范。
注：doctype 聲明不屬于 HTML 標(biāo)簽，而是一個(gè)文檔類型標(biāo)記，它是一條指令。
說(shuō)明：
-
<!DOCTYPE> 標(biāo)簽沒有結(jié)束標(biāo)簽。
-
<!DOCTYPE> 對(duì)大小寫不敏感。
2、<html>標(biāo)簽
<html> 標(biāo)簽是 HTML 文檔中最外層的元素。
<html> 標(biāo)簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標(biāo)簽）的容器。
<html>根元素的作用就是告訴瀏覽器，在 <html> 和 </html> 之間的內(nèi)容是HTML類型，瀏覽器便按HTML進(jìn)行解析其中的內(nèi)容。
html 元素有3個(gè)屬性，分別是 lang屬性、xmlns屬性和 manifest 屬性：
-
lang屬性指定頁(yè)面內(nèi)容所使用的默認(rèn)語(yǔ)言。指定文檔所使用的語(yǔ)言，有助于語(yǔ)言合成工具選擇發(fā)音語(yǔ)言，或者翻譯工具選擇翻譯規(guī)則。如，<html>，表示本文檔使用中文。
-
xmlns屬性指派XML的命名空間。xmlns 屬性在 XHTML 中是必需的，但在 HTML中不是。
-
manifest屬性給出離線緩存文件的URL。HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可被緩存，并可進(jìn)行離線訪問。如，<html manifest="waibo.manifest">，表示離線緩存文件為waibo.manifest。
3、<head>標(biāo)簽
<head> 標(biāo)簽是所有頭部標(biāo)簽的容器，這些頭部標(biāo)簽用來(lái)定義有關(guān) HTML 文檔的元數(shù)據(jù)（描述數(shù)據(jù)的數(shù)據(jù)）以及所需資源的引用（例如 CSS 樣式文件、JavaScript 腳本文件），對(duì)文檔能夠在瀏覽器中正確顯示起到了非常重要的作用。
根據(jù)我們的需求，可以在 HTML 頭部定義大量的元數(shù)據(jù)，也可以定義很少或者根本就不定義。雖然頭部標(biāo)簽是 HTML 文檔的一部分，但其中的內(nèi)容并不會(huì)顯示在瀏覽器中。
4、<body>標(biāo)簽
<body> 元素定義文檔的主體。
<body> 元素包含文檔的所有內(nèi)容，比如文本、超鏈接、圖像、表格、列表等等。
簡(jiǎn)單來(lái)說(shuō)：文檔body部分包含訪問者可以看到的內(nèi)容。
在有了這個(gè)基本的結(jié)構(gòu)后，我們后面就可以將HTML的其它元素逐步添加進(jìn)去，不斷的豐富文檔，最終得到我們希望的頁(yè)面。
<body> <p>一個(gè)段落</p> <img src="img/1.jpg" width="100" /><br><br> <button>一個(gè)按鈕</button><br><br> <input type="text" value="輸入框" /> </body>
注：一個(gè) HTML 文件只能存在一個(gè) <body> 標(biāo)簽。
擴(kuò)展知識(shí)：head頭部標(biāo)簽中可包含的元素
1、<title> 標(biāo)簽
<title> 標(biāo)簽用來(lái)定義 HTML 文檔的標(biāo)題，只有包含 <title> 標(biāo)簽的文檔才算是一個(gè)有效的 HTML 文檔。另外，一個(gè) HTML 文檔中僅允許存在一個(gè) <title> 標(biāo)簽，并且 <title> 標(biāo)簽必須放置在 <head> 標(biāo)簽中。
注意，在 <title> 標(biāo)簽內(nèi)部?jī)H允許包含純文本內(nèi)容，不能包含其他 HTML 標(biāo)簽。
<title> 標(biāo)簽的主要作用如下所示：
-
在瀏覽器標(biāo)題欄或者任務(wù)欄中顯示標(biāo)題；
-
當(dāng)將頁(yè)面添加到收藏夾（書簽）時(shí)提供標(biāo)題；
-
在搜索結(jié)果中顯示頁(yè)面標(biāo)題。
下面的示例演示了如何在 HTML 文檔中使用 <title> 標(biāo)簽：
<head> <meta charset="utf-8"> <title>php中文網(wǎng)-教程_手冊(cè)_視頻-免費(fèi)php在線學(xué)習(xí)平臺(tái)</title> </head>
<title> 標(biāo)簽的內(nèi)容必須與當(dāng)前文檔有關(guān)，并且不應(yīng)該過(guò)長(zhǎng)，中文頁(yè)面請(qǐng)盡量控制在 30 個(gè)字符（包括空格）以內(nèi)。
2、<base> 標(biāo)簽
<base> 標(biāo)簽用于為頁(yè)面中所有相對(duì)鏈接指定一個(gè)基本鏈接，當(dāng)您設(shè)置了基本鏈接后，當(dāng)前頁(yè)面中的所有相對(duì)鏈接都會(huì)使用這個(gè)基本鏈接作為前綴，如下例所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><base>標(biāo)簽演示</title> <base href="https://www.php.cn/"> </head> <body> <ul> <li><a href="course.html">視頻教程</a></li> <li><a href="course/type/3.html">入門教程</a></li> </ul> </body> </html>
上面的示例中第一個(gè) <li> 標(biāo)簽中的超鏈接會(huì)被解析為“https://www.php.cn/course.html”，第二個(gè) <li> 中的超鏈接會(huì)被解析為“https://www.php.cn/course/type/3.html”。
注意，HTML 文檔中的 <base> 標(biāo)簽必須出現(xiàn)在任何引用外部資源的標(biāo)簽之前，而且一個(gè) HTML 文檔中僅允許定義一個(gè) <base> 標(biāo)簽。
3、<link> 標(biāo)簽
<link> 標(biāo)簽經(jīng)常用于引用外部 CSS 樣式表，<link> 標(biāo)簽中包含兩個(gè)主要的屬性，分別是 rel 和 href。rel 屬性用來(lái)指示引用文件的類型，href 屬性用來(lái)設(shè)置外部文件的路徑。示例代碼如下：
<head> <title>此處書寫標(biāo)題</title> <link rel="stylesheet" href="common.css"> </head>
HTML <head> 標(biāo)簽中可以包含任意數(shù)量的 <link> 標(biāo)簽。
4、<style>標(biāo)簽
使用 <style> 標(biāo)簽可以在 HTML 文檔中嵌入 CSS 樣式，需要注意的是在 <style> 標(biāo)簽中定義的樣式僅對(duì)當(dāng)前 HTML 文檔有效。示例代碼如下：
<head> <title>此處書寫標(biāo)題</title> <style> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head>
注意：對(duì)于文檔中的唯一樣式可以使用 <style> 標(biāo)簽，但對(duì)于在多個(gè)文檔中通用的樣式，使用外部樣式表更為合適。關(guān)于在 HTML 中嵌入 CSS 的
