網(wǎng)頁的構(gòu)成
一個(gè)有具體功能的完整的網(wǎng)頁，一般由3部分組成
- HTML:網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)
- CSS:網(wǎng)頁的樣式（美化網(wǎng)頁最重要的一塊）
- JavaScrip:網(wǎng)頁的交互效果，比如對(duì)用戶鼠標(biāo)事件做出響應(yīng)
HTML文件的拓展名是.htm.html
因歷史遺留問題，Win95\Win98系統(tǒng)的文件拓展名不能超過3字符，所以使用.htm
一、HTML的構(gòu)成
image8.png
1、<!DOCTYPE html>
- HTML文檔聲明，告訴瀏覽器當(dāng)前頁面是HTML5頁面，讓瀏覽器用HTML5的標(biāo)準(zhǔn)去解析識(shí)別HTML文檔
- 必須放在HTML文檔的最前面，不能省略，省略了會(huì)出現(xiàn)兼容性問題
2、html元素
- html元素是HTML文檔的根元素，一個(gè)文檔中只能有一個(gè)，其他所有元素都是它的后代元素
- W3C標(biāo)準(zhǔn)建議為html元素增加一個(gè)lang屬性，作用是：幫助語音合成工具確定要使用的發(fā)音；幫助翻譯工具確定要使用的翻譯規(guī)則；lang="en"告訴瀏覽器：這個(gè)HTML文檔的語言是英文
3、head元素
- head元素里面的內(nèi)容是一些"元數(shù)據(jù)"(元數(shù)據(jù):描述數(shù)據(jù)的數(shù)據(jù))
- 一般用于描述網(wǎng)頁的各種信息，比如字符編碼、網(wǎng)頁標(biāo)題、網(wǎng)頁圖標(biāo)
-
以下列出的元素大多數(shù)情況下都是在head元素內(nèi)部使用：
metal、title、style、link、base、script、noscritpt
image3.png
4.body元素
- body元素里面的內(nèi)容將是你在瀏覽器窗口中看到的東西，也就是網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)。
二、常用元素
HTML提供了大量元素，每一個(gè)元素都有特定的用途，保證了網(wǎng)頁的豐富多樣性
區(qū)塊：div
區(qū)分：span
文本：p、h1~h6、em、dt、dd
表格：table、tbody、thead、tr、td、th、tfoot、caption
表單：form、input、label、textarea、select
鏈接：a
圖片：img
文檔：html、head、title、body、meta
列表：ul、ol、li、dlside、footer、nav
其他：br、hr、iframe
結(jié)構(gòu)：header、section、a、strong、pre、address、q、blockquote、cite、co
- 標(biāo)簽對(duì)：html、head、title、body、div、ul、li包含了具體內(nèi)容，書寫格式是標(biāo)簽對(duì)。（
<元素名> 具體內(nèi)容</元素名>）
<title>測試</title>
<head> </head>
<h1>44444</h1>
- 單標(biāo)簽：meta、img、br、input沒有包含具體內(nèi)容，書寫格式是單標(biāo)簽（
<元素名>或者<元素名/>、<元素名 />）
建議統(tǒng)一采用<元素名>寫法即可，不需要再加后面的斜杠 /
<input placeholder="占位的文字”>
<img src=“test”>
<br>
三、元素的屬性
每一個(gè)元素都可以擁有自己的屬性，屬性可以增強(qiáng)元素的功能
書寫形式是：<起始標(biāo)簽 屬性名="屬性值”>
image.png
- 上圖中的html、meta、body元素均擁有屬性，其中body元素?fù)碛?個(gè)屬性
- 屬性名都是小寫，而且是無序的，誰先誰后不影響實(shí)際效果
- 屬性值可以使用雙引號(hào)、單引號(hào)括住，也可以省略引號(hào)。建議統(tǒng)一使用雙引號(hào)
- 有些屬性是公共的，每一個(gè)元素都可以設(shè)置,比如class、id、title、lang屬性
- 有些屬性是元素特有的，不是每一個(gè)元素都可以設(shè)置比如meta元素的charset屬性、img元素的alt屬性等
