HTML 文件基本結(jié)構(gòu)
HTML 文件和普通文本文件不一樣的地方還在于,我們?nèi)绻朐?HTML 文件當(dāng)中編寫網(wǎng)頁的內(nèi)容,我們不僅要遵循 HTML 的語法,我們還必須按照 HTML 文件的結(jié)構(gòu)來編寫我們的代碼,只有我們按照規(guī)定的結(jié)構(gòu)來編寫代碼,才能達(dá)到我們想要的效果。
1. HTML 結(jié)構(gòu)代碼展示
<!DOCTYPE HTML> <!-- HTML5標(biāo)準(zhǔn)網(wǎng)頁聲明 -->
<HTML> <!-- HTML為根標(biāo)簽,代表整個(gè)網(wǎng)頁 -->
<head> <!-- head為頭部標(biāo)簽,一般用來描述文檔的各種屬性和信息, 包括標(biāo)題等-->
<meta charset="UTF-8"> <!-- 設(shè)置字符集為utf-8 -->
<title>my HTML</title> <!-- 設(shè)置瀏覽器的標(biāo)題 -->
</head>
<!-- 網(wǎng)頁所有的內(nèi)容都寫在body標(biāo)簽內(nèi) -->
<body>
我的第一個(gè)HTML網(wǎng)頁
</body>
</HTML>
Tips:
<!-- -->
為HTML文件的注釋, 注釋的內(nèi)容寫在<!-- -->
內(nèi),但不會(huì)在頁面中顯示。
2. HTML 文件結(jié)構(gòu)詳解
-
<!DOCTYPE HTML>
標(biāo)簽:為文檔類型聲明,表示該文件為 HTML5 文件。 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于
<HTML>
標(biāo)簽之前。 -
<HTML></HTML>
標(biāo)簽對:<HTML>
標(biāo)簽位于 HTML 文檔的最前面,用來標(biāo)識(shí) HTML 文檔的開始;</HTML>
標(biāo)簽位于 HTML 文檔的最后面,用來標(biāo)識(shí) HTML 文檔的結(jié)束;這兩個(gè)標(biāo)簽對成對存在,中間的部分是文檔的頭部和主題。 -
<head></head>
標(biāo)簽對:標(biāo)簽包含有關(guān) HTML 文檔的信息,可以包含一些輔助性標(biāo)簽。如
<title></title>
,<link /><meta />
,<style></style>
,<script></script>
等,但是瀏覽器除了會(huì)在標(biāo)題欄顯示<title>
元素的內(nèi)容外,不會(huì)向用戶顯示head
元素內(nèi)的其他任何內(nèi)容。 -
<body></body>
標(biāo)簽對:它是 HTML 文檔的主體部分,在這個(gè)標(biāo)簽中可以包含
<p><h1><br>
等眾多標(biāo)簽,<body>
標(biāo)簽出現(xiàn)在</head>
標(biāo)簽之后,且必須在閉標(biāo)簽</HTML>
之前閉合。
3. 小結(jié)
- HTML文件必須按照規(guī)定結(jié)構(gòu)來熟悉;
<!DOCTYPE HTML>
代表HTML5
標(biāo)準(zhǔn)網(wǎng)頁聲明;HTML
標(biāo)簽代表網(wǎng)頁根標(biāo)簽;head
代表頭部標(biāo)簽,一般用來放描述文檔的各種屬性和信息;meta
標(biāo)簽用來設(shè)置當(dāng)前文件的編碼集;title
標(biāo)簽用來設(shè)置網(wǎng)頁的標(biāo)題;body
用來放網(wǎng)頁的主體內(nèi)容。
代碼展示:
<!DOCTYPE HTML> <!-- HTML5標(biāo)準(zhǔn)網(wǎng)頁聲明,放在HTML文件的最頂部 -->
<HTML> <!-- HTML為根標(biāo)簽,代表整個(gè)網(wǎng)頁 -->
<head> <!-- head為頭部標(biāo)簽,一般用來描述文檔的各種屬性和信息, 包括標(biāo)題等-->
<meta charset="UTF-8"> <!-- 設(shè)置字符集為utf-8 -->
<title>my HTML</title> <!-- 設(shè)置瀏覽器的標(biāo)題 -->
</head>
<!-- 網(wǎng)頁所有的內(nèi)容都寫在body標(biāo)簽內(nèi) -->
<body>
我的第一個(gè)HTML網(wǎng)頁
</body>
</HTML>