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)簽,一個頁面中有且只有一個根標(biāo)簽,網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在html根標(biāo)簽中
head標(biāo)簽,該標(biāo)簽中的內(nèi)容,不會在網(wǎng)頁中直接顯示,它用來幫助瀏覽器解析頁面
body標(biāo)簽用來設(shè)置網(wǎng)頁的主體內(nèi)容,網(wǎng)頁中所有可見的內(nèi)容,都應(yīng)該在body中編寫
注釋:
在這個結(jié)構(gòu)中,可以來編寫HTML的注釋注釋中的內(nèi)容,不會在頁面中顯示,但是可以在源碼中查看。
我們可以通過編寫注釋來對代碼進行描述,從而幫助其他的開發(fā)人員工作,一定要養(yǎng)成良好的編寫注釋的習(xí)慣,但是注釋一定要簡單明了。
屬性:
可以通過屬性來設(shè)置標(biāo)簽如何處理標(biāo)簽中的內(nèi)容可以在開始標(biāo)簽中添加屬性
屬性需要寫在開始標(biāo)簽中,實際上就是一個名值對的結(jié)構(gòu),屬性名="屬性值",一個標(biāo)簽中可以同時設(shè)置多個屬性,屬性之間用空格隔開
2、 文檔聲明
h5的文檔聲明,聲明當(dāng)前的網(wǎng)頁是按照HTML5標(biāo)準(zhǔn)編寫的編寫網(wǎng)頁時一定要將此聲明寫在網(wǎng)頁的最上邊,如果不寫文檔聲明,則會導(dǎo)致有些瀏覽器進入一個怪異模式,導(dǎo)致瀏覽器無法正常解析顯示網(wǎng)頁,所以為了避免進入該模式,一定要寫文檔聲明
3、 設(shè)置字符集
需要告訴瀏覽器,網(wǎng)頁所采用的編碼字符集,meta標(biāo)簽用來設(shè)置網(wǎng)頁的一些元數(shù)據(jù),比如網(wǎng)頁的字符集、關(guān)鍵字、簡介meta是一個自結(jié)束標(biāo)簽,編寫一個自結(jié)束標(biāo)簽時,可以在開始標(biāo)簽中添加一個/
<<< <meta charset = 'utf-8'>
4、 常用的標(biāo)簽
標(biāo)題標(biāo)簽
在HTML中,一共有六級標(biāo)題標(biāo)簽,h1h6在顯示效果上h1最大,h6最小,但是文字的大小我們并不關(guān)心。使用HTML標(biāo)簽時,關(guān)心的是標(biāo)簽的語義,我們使用的標(biāo)簽都是語義化標(biāo)簽,6級標(biāo)題中,h1的最重要,表示一個網(wǎng)頁中的主要內(nèi)容,h2h6重要性依次降低,對于搜索引擎來說,h1的重要性僅次于title,搜索引擎檢索完title,會立即查看h1中的內(nèi)容。h1標(biāo)簽非常重要,它會影響到頁面在搜索引擎中的排名,頁面只能寫一個h1。一般頁面中標(biāo)題標(biāo)簽只使用h1、h2、h3,h3以后的基本不使用段落標(biāo)簽
段落標(biāo)簽用于表示內(nèi)容中的一個自然段
使用p標(biāo)簽來表示一個段落
p標(biāo)簽中的文字默認會獨占一行,并且段與段之間會有一個間距換行
在HTML中,字符之間寫再多的空格,瀏覽器也會當(dāng)成一個空格解析,換行也會當(dāng)成一個空格解析。在頁面中可以使用br標(biāo)簽來表示一個換行,br標(biāo)簽是一個自結(jié)束標(biāo)簽<hr>
hr標(biāo)簽也是一個自結(jié)束標(biāo)簽,可以在頁面中生成一條水平線
5、 實體
在HTML中,一些如<、>這種特殊字符是不能直接使用的,需要使用一些特殊的符號來表示這些特殊字符,這些特殊符號稱為實體(轉(zhuǎn)義字符),瀏覽器解析到實體時,會自動將實體轉(zhuǎn)換為其對應(yīng)的字符
實體的語法 | &實體的名字; |
---|---|
< | < |
> | > |
空格 | |
版權(quán)符號 | © |
6、 圖像
使用img標(biāo)簽來向網(wǎng)頁中引入一個外部圖片
img標(biāo)簽也是一個自結(jié)束標(biāo)簽
屬性:
src:設(shè)置一個外部圖片的路徑
alt:可以用來設(shè)置在圖片不能顯示時,對圖片的描述
搜索引擎可以通過alt屬性來識別不同的圖片
如果不寫alt屬性,則搜索引擎不會對img中的圖片進行收錄
width:可以用來修改圖片的寬度,一般使用px作為單位
height:可以用來修改圖片的高度,一般使用px作為單位
寬度和高度兩個屬性如果只設(shè)置一個,另一個也會同時等比例調(diào)整大小
如果兩值同時指定,則按照你指定的值來設(shè)置
一般開發(fā)中除了自適應(yīng)的頁面,不建議設(shè)置width和height
7、 相對路徑_圖片格式
src屬性配置的是圖片的路徑,目前我們所使用的路徑全都是相對路徑
相對路徑:相對路徑指相對于當(dāng)前資源所在目錄的位置
可以使用../來返回上一級目錄,返回幾級目錄就寫幾個../
圖片的格式:
- JPEG(JPG)
- JPEG圖片支持的顏色比較多,圖片可以壓縮,但是不支持透明
- 一般使用JPEG來保存照片等顏色豐富的圖片 - GIF
- GIF支持的顏色少,只支持簡單的透明,支持動態(tài)圖
- 圖片顏色單一或者是動態(tài)圖時可以使用GIF - PNG
- PNG支持的顏色多,并且支持復(fù)雜的透明
- 可以用來顯示顏色復(fù)雜的透明的圖片
圖片的使用原則:
效果不一致,使用效果好的
效果一致,使用小的
8、 XHTML的語法規(guī)范
- HTML中不區(qū)分大小寫,但是我們一般都使用小寫
- HTML中的注釋不能嵌套
- HTML標(biāo)簽必須結(jié)構(gòu)完整,要么成對出現(xiàn),要么自結(jié)束標(biāo)簽
- 瀏覽器盡最大的努力正確地解析頁面,你所有的不符合語法規(guī)范的內(nèi)容瀏覽器都會為你自動修正,但是有些情況會修正錯誤
- HTML標(biāo)簽可以嵌套,但是不能交叉嵌套
- HTML標(biāo)簽中的屬性必須有值,且值必須加引號(單引號雙引號都可以)
9、 內(nèi)聯(lián)框架
使用內(nèi)聯(lián)框架可以引入一個外部的頁面使用iframe來創(chuàng)建一個內(nèi)聯(lián)框架
屬性:
- src:指向一個外部頁面的路徑,可以使用相對路徑
- width:
- height:
- name:可以為內(nèi)聯(lián)框架指定一個name屬性
在現(xiàn)實開發(fā)中不推薦使用內(nèi)聯(lián)框架,因為內(nèi)聯(lián)框架中的內(nèi)容不會被搜索引擎所檢索
10、 超鏈接
使用超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到另一個頁面使用a標(biāo)簽來創(chuàng)建一個超鏈接
屬性:
href:指向鏈接跳轉(zhuǎn)的目標(biāo)地址,可以寫一個相對路徑,也可以寫一個完整的地址
a標(biāo)簽中的target屬性可以用來指定打開鏈接的位置
可選值:
- _self:表示在當(dāng)前窗口中打開(默認值)
- _blank:在新的窗口中打開鏈接可以設(shè)置一個內(nèi)聯(lián)框架的name屬性值,鏈接將會在指定的內(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è)置樣式,這樣可以使樣式進一步的復(fù)用
將樣式表編寫到style標(biāo)簽中,也可以使表現(xiàn)和結(jié)構(gòu)進一步分離,它也是我們推薦的使用方式
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
-->
<!--
還可以將樣式表編寫到外部的CSS文件中,然后通過link標(biāo)簽來將外部的CSS文件引入到當(dāng)前頁面中
這樣外部文件中的CSS樣式表將會應(yīng)用到當(dāng)前頁面中
將CSS樣式統(tǒng)一編寫到外部的樣式表中,完全使結(jié)構(gòu)和表現(xiàn)分離,可以使樣式表在不同的頁面中使用
最大限度地使樣式可以進行復(fù)用,將樣式統(tǒng)一寫在樣式表中,然后通過link標(biāo)簽引入
可以利用瀏覽器的緩存,加快用戶訪問的速度,提高了用戶體驗
所以在開發(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)樣式只對當(dāng)前的元素中的內(nèi)容起作用,內(nèi)聯(lián)樣式不方便復(fù)用
內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合,不方便后期的維護,不推薦使用的
<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)用到選擇器對應(yīng)的元素上
- 聲明塊:
- 聲明塊緊跟在選擇器的后邊,使用一對{}括起來
- 聲明塊中實際上就是一組一組的名值對結(jié)構(gòu)
- 這一組一組的名值對我們稱為聲明
- 在一個聲明塊中可以寫多個聲明,多個聲明之間使用;隔開
- 聲明的樣式名和樣式值之間使用:來連接
13、 開發(fā)工具
14、 塊和內(nèi)聯(lián)
塊元素和內(nèi)聯(lián)元素:
- 塊元素
所謂的塊元素就是會獨占一行的元素?zé)o論它的內(nèi)容有多少,它都會獨占一整行
常見的塊元素:div p h1 h2 h3……
div這個標(biāo)簽沒有任何語義,就是一個純粹的塊元素并且不會為它里邊的元素設(shè)置任何的默認樣式,div元素主要用來對頁面進行布局的。 - 內(nèi)聯(lián)元素(行內(nèi)元素)
所謂的行內(nèi)元素指的是只占自身大小的元素,不會占用一行
常見的內(nèi)聯(lián)元素:span a img iframe
span沒有任何語義,span標(biāo)簽專門用來選中文字,然后為文字來設(shè)置樣式
塊元素主要用來做頁面中的布局,內(nèi)聯(lián)元素主要用來選中文本設(shè)置樣式
一般情況下只使用塊元素去包含內(nèi)聯(lián)元素,而不會使用內(nèi)聯(lián)元素去包含一個塊元素
a元素可以包含任意元素,除了他本身
p元素不可以包含任何其它的塊元素
15、 meta標(biāo)簽
- 使用meta標(biāo)簽還可以用來設(shè)置網(wǎng)頁的關(guān)鍵字
- 還可以用來指定網(wǎng)頁的描述搜索引擎在檢索頁面時,會同時槍擊頁面中的關(guān)鍵詞和描述,但是這兩個值不會影響頁面在搜索引擎中的排名
- 使用meta可以用來做請求的重定向
<meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑" />