HTML總結(jié)
1宋欺、 網(wǎng)頁的標(biāo)題、注釋胰伍、屬性
- 網(wǎng)頁結(jié)構(gòu)
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
···
html根標(biāo)簽迄靠，一個(gè)頁面中有且只有一個(gè)根標(biāo)簽，網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在html根標(biāo)簽中
head標(biāo)簽喇辽，該標(biāo)簽中的內(nèi)容掌挚，不會(huì)在網(wǎng)頁中直接顯示，它用來幫助瀏覽器解析頁面
body標(biāo)簽用來設(shè)置網(wǎng)頁的主體內(nèi)容菩咨，網(wǎng)頁中所有可見的內(nèi)容吠式，都應(yīng)該在body中編寫
注釋：
在這個(gè)結(jié)構(gòu)中，可以來編寫HTML的注釋注釋中的內(nèi)容抽米，不會(huì)在頁面中顯示特占，但是可以在源碼中查看。
我們可以通過編寫注釋來對(duì)代碼進(jìn)行描述云茸，從而幫助其他的開發(fā)人員工作是目，一定要養(yǎng)成良好的編寫注釋的習(xí)慣，但是注釋一定要簡(jiǎn)單明了标捺。
屬性：
可以通過屬性來設(shè)置標(biāo)簽如何處理標(biāo)簽中的內(nèi)容可以在開始標(biāo)簽中添加屬性
屬性需要寫在開始標(biāo)簽中懊纳，實(shí)際上就是一個(gè)名值對(duì)的結(jié)構(gòu)，屬性名="屬性值"亡容，一個(gè)標(biāo)簽中可以同時(shí)設(shè)置多個(gè)屬性嗤疯，屬性之間用空格隔開
2、 文檔聲明
h5的文檔聲明闺兢，聲明當(dāng)前的網(wǎng)頁是按照HTML5標(biāo)準(zhǔn)編寫的編寫網(wǎng)頁時(shí)一定要將此聲明寫在網(wǎng)頁的最上邊茂缚，如果不寫文檔聲明，則會(huì)導(dǎo)致有些瀏覽器進(jìn)入一個(gè)怪異模式屋谭，導(dǎo)致瀏覽器無法正常解析顯示網(wǎng)頁脚囊，所以為了避免進(jìn)入該模式，一定要寫文檔聲明
3桐磁、 設(shè)置字符集
需要告訴瀏覽器悔耘，網(wǎng)頁所采用的編碼字符集，meta標(biāo)簽用來設(shè)置網(wǎng)頁的一些元數(shù)據(jù)所意，比如網(wǎng)頁的字符集淮逊、關(guān)鍵字催首、簡(jiǎn)介meta是一個(gè)自結(jié)束標(biāo)簽，編寫一個(gè)自結(jié)束標(biāo)簽時(shí)泄鹏，可以在開始標(biāo)簽中添加一個(gè)/
<<< <meta charset = 'utf-8'>
4郎任、 常用的標(biāo)簽
標(biāo)題標(biāo)簽
在HTML中，一共有六級(jí)標(biāo)題標(biāo)簽备籽，h1h6在顯示效果上h1最大舶治，h6最小，但是文字的大小我們并不關(guān)心车猬。使用HTML標(biāo)簽時(shí)霉猛，關(guān)心的是標(biāo)簽的語義，我們使用的標(biāo)簽都是語義化標(biāo)簽珠闰，6級(jí)標(biāo)題中惜浅，h1的最重要，表示一個(gè)網(wǎng)頁中的主要內(nèi)容伏嗜，h2h6重要性依次降低坛悉，對(duì)于搜索引擎來說，h1的重要性僅次于title承绸，搜索引擎檢索完title裸影，會(huì)立即查看h1中的內(nèi)容。h1標(biāo)簽非常重要军熏，它會(huì)影響到頁面在搜索引擎中的排名轩猩，頁面只能寫一個(gè)h1。一般頁面中標(biāo)題標(biāo)簽只使用h1荡澎、h2均践、h3，h3以后的基本不使用段落標(biāo)簽
段落標(biāo)簽用于表示內(nèi)容中的一個(gè)自然段
使用p標(biāo)簽來表示一個(gè)段落
p標(biāo)簽中的文字默認(rèn)會(huì)獨(dú)占一行衔瓮，并且段與段之間會(huì)有一個(gè)間距換行
在HTML中浊猾，字符之間寫再多的空格，瀏覽器也會(huì)當(dāng)成一個(gè)空格解析热鞍，換行也會(huì)當(dāng)成一個(gè)空格解析。在頁面中可以使用br標(biāo)簽來表示一個(gè)換行衔彻，br標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽<hr>
hr標(biāo)簽也是一個(gè)自結(jié)束標(biāo)簽薇宠，可以在頁面中生成一條水平線
5、 實(shí)體
在HTML中艰额，一些如<澄港、>這種特殊字符是不能直接使用的，需要使用一些特殊的符號(hào)來表示這些特殊字符柄沮，這些特殊符號(hào)稱為實(shí)體（轉(zhuǎn)義字符）回梧，瀏覽器解析到實(shí)體時(shí)废岂，會(huì)自動(dòng)將實(shí)體轉(zhuǎn)換為其對(duì)應(yīng)的字符
| 實(shí)體的語法 | &實(shí)體的名字; |
|---|---|
| < | < |
| > | > |
| 空格 | |
| 版權(quán)符號(hào) | © |
6、 圖像
使用img標(biāo)簽來向網(wǎng)頁中引入一個(gè)外部圖片
img標(biāo)簽也是一個(gè)自結(jié)束標(biāo)簽
屬性：
src：設(shè)置一個(gè)外部圖片的路徑
alt：可以用來設(shè)置在圖片不能顯示時(shí)狱意，對(duì)圖片的描述
搜索引擎可以通過alt屬性來識(shí)別不同的圖片
如果不寫alt屬性湖苞，則搜索引擎不會(huì)對(duì)img中的圖片進(jìn)行收錄
width：可以用來修改圖片的寬度，一般使用px作為單位
height：可以用來修改圖片的高度详囤，一般使用px作為單位
寬度和高度兩個(gè)屬性如果只設(shè)置一個(gè)财骨，另一個(gè)也會(huì)同時(shí)等比例調(diào)整大小
如果兩值同時(shí)指定，則按照你指定的值來設(shè)置
一般開發(fā)中除了自適應(yīng)的頁面藏姐，不建議設(shè)置width和height
7隆箩、 相對(duì)路徑_圖片格式
src屬性配置的是圖片的路徑，目前我們所使用的路徑全都是相對(duì)路徑
相對(duì)路徑：相對(duì)路徑指相對(duì)于當(dāng)前資源所在目錄的位置
可以使用../來返回上一級(jí)目錄羔杨，返回幾級(jí)目錄就寫幾個(gè)../
圖片的格式:
- JPEG（JPG）
- JPEG圖片支持的顏色比較多捌臊，圖片可以壓縮，但是不支持透明
- 一般使用JPEG來保存照片等顏色豐富的圖片 - GIF
- GIF支持的顏色少兜材，只支持簡(jiǎn)單的透明娃属，支持動(dòng)態(tài)圖
- 圖片顏色單一或者是動(dòng)態(tài)圖時(shí)可以使用GIF - PNG
- PNG支持的顏色多，并且支持復(fù)雜的透明
- 可以用來顯示顏色復(fù)雜的透明的圖片
圖片的使用原則：
效果不一致护姆，使用效果好的
效果一致矾端，使用小的
8、 XHTML的語法規(guī)范
- HTML中不區(qū)分大小寫卵皂，但是我們一般都使用小寫
- HTML中的注釋不能嵌套
- HTML標(biāo)簽必須結(jié)構(gòu)完整秩铆，要么成對(duì)出現(xiàn)，要么自結(jié)束標(biāo)簽
- 瀏覽器盡最大的努力正確地解析頁面灯变，你所有的不符合語法規(guī)范的內(nèi)容瀏覽器都會(huì)為你自動(dòng)修正殴玛，但是有些情況會(huì)修正錯(cuò)誤
- HTML標(biāo)簽可以嵌套，但是不能交叉嵌套
- HTML標(biāo)簽中的屬性必須有值添祸，且值必須加引號(hào)（單引號(hào)雙引號(hào)都可以）
9滚粟、 內(nèi)聯(lián)框架
使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁面使用iframe來創(chuàng)建一個(gè)內(nèi)聯(lián)框架
屬性：
- src：指向一個(gè)外部頁面的路徑，可以使用相對(duì)路徑
- width：
- height：
- name：可以為內(nèi)聯(lián)框架指定一個(gè)name屬性
在現(xiàn)實(shí)開發(fā)中不推薦使用內(nèi)聯(lián)框架刃泌，因?yàn)閮?nèi)聯(lián)框架中的內(nèi)容不會(huì)被搜索引擎所檢索
10凡壤、 超鏈接
使用超鏈接可以讓我們從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面使用a標(biāo)簽來創(chuàng)建一個(gè)超鏈接
屬性：
href：指向鏈接跳轉(zhuǎn)的目標(biāo)地址，可以寫一個(gè)相對(duì)路徑耙替，也可以寫一個(gè)完整的地址
a標(biāo)簽中的target屬性可以用來指定打開鏈接的位置
可選值：
- _self：表示在當(dāng)前窗口中打開（默認(rèn)值）
- _blank：在新的窗口中打開鏈接可以設(shè)置一個(gè)內(nèi)聯(lián)框架的name屬性值亚侠，鏈接將會(huì)在指定的內(nèi)聯(lián)框架中打開
11、 CSS
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!--
也可以將CSS樣式編寫到head中的style標(biāo)簽里俗扇，稱為內(nèi)部樣式表
將樣式表編寫的style標(biāo)簽中硝烂，然后通過CSS選擇器選中指定元素
然后可以同時(shí)為這些元素一起設(shè)置樣式，這樣可以使樣式進(jìn)一步的復(fù)用
將樣式表編寫到style標(biāo)簽中铜幽，也可以使表現(xiàn)和結(jié)構(gòu)進(jìn)一步分離滞谢，它也是我們推薦的使用方式
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
-->
<!--
還可以將樣式表編寫到外部的CSS文件中串稀，然后通過link標(biāo)簽來將外部的CSS文件引入到當(dāng)前頁面中
這樣外部文件中的CSS樣式表將會(huì)應(yīng)用到當(dāng)前頁面中
將CSS樣式統(tǒng)一編寫到外部的樣式表中，完全使結(jié)構(gòu)和表現(xiàn)分離狮杨，可以使樣式表在不同的頁面中使用
最大限度地使樣式可以進(jìn)行復(fù)用母截，將樣式統(tǒng)一寫在樣式表中，然后通過link標(biāo)簽引入
可以利用瀏覽器的緩存禾酱，加快用戶訪問的速度微酬，提高了用戶體驗(yàn)
所以在開發(fā)中我們最推薦使用的方式就是外部的CSS文件
-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--
可以將CSS樣式編寫到元素的style屬性當(dāng)中，這種樣式稱為內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式只對(duì)當(dāng)前的元素中的內(nèi)容起作用颤陶，內(nèi)聯(lián)樣式不方便復(fù)用
內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合颗管，不方便后期的維護(hù)，不推薦使用的
<p style="color:red;font-size:40px;">床前明月光滓走，疑是地上霜</p>
<p style="color:red;font-size:40px;">舉頭望明月垦江，低頭思故鄉(xiāng)</p>
-->
<p>舉頭望明月，低頭思故鄉(xiāng)</p>
<p>舉頭望明月搅方，低頭思故鄉(xiāng)</p>
<p>舉頭望明月比吭，低頭思故鄉(xiāng)</p>
</body>
12、 CSS語法
CSS的注釋姨涡，作用和HTML注釋類似衩藤，只不過它必須編寫在style標(biāo)簽中，或者是CSS文件中
CSS的語法：選擇器 聲明塊
- 選擇器：
- 通過選擇器可以選中頁面中指定的元素涛漂，并且將聲明塊中的樣式應(yīng)用到選擇器對(duì)應(yīng)的元素上
- 聲明塊：
- 聲明塊緊跟在選擇器的后邊赏表，使用一對(duì){}括起來
- 聲明塊中實(shí)際上就是一組一組的名值對(duì)結(jié)構(gòu)
- 這一組一組的名值對(duì)我們稱為聲明
- 在一個(gè)聲明塊中可以寫多個(gè)聲明，多個(gè)聲明之間使用;隔開
- 聲明的樣式名和樣式值之間使用:來連接
13匈仗、 開發(fā)工具
14瓢剿、 塊和內(nèi)聯(lián)
塊元素和內(nèi)聯(lián)元素:
- 塊元素
所謂的塊元素就是會(huì)獨(dú)占一行的元素?zé)o論它的內(nèi)容有多少，它都會(huì)獨(dú)占一整行
常見的塊元素：div p h1 h2 h3……
div這個(gè)標(biāo)簽沒有任何語義悠轩，就是一個(gè)純粹的塊元素并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式,div元素主要用來對(duì)頁面進(jìn)行布局的间狂。 - 內(nèi)聯(lián)元素（行內(nèi)元素）
所謂的行內(nèi)元素指的是只占自身大小的元素，不會(huì)占用一行
常見的內(nèi)聯(lián)元素：span a img iframe
span沒有任何語義火架，span標(biāo)簽專門用來選中文字鉴象，然后為文字來設(shè)置樣式
塊元素主要用來做頁面中的布局，內(nèi)聯(lián)元素主要用來選中文本設(shè)置樣式
一般情況下只使用塊元素去包含內(nèi)聯(lián)元素距潘，而不會(huì)使用內(nèi)聯(lián)元素去包含一個(gè)塊元素
a元素可以包含任意元素炼列，除了他本身
p元素不可以包含任何其它的塊元素
15、 meta標(biāo)簽
- 使用meta標(biāo)簽還可以用來設(shè)置網(wǎng)頁的關(guān)鍵字
- 還可以用來指定網(wǎng)頁的描述搜索引擎在檢索頁面時(shí)音比，會(huì)同時(shí)槍擊頁面中的關(guān)鍵詞和描述，但是這兩個(gè)值不會(huì)影響頁面在搜索引擎中的排名
- 使用meta可以用來做請(qǐng)求的重定向
<meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑" />
