- 編寫網(wǎng)頁的步驟:
1.新建一個文本文檔
2.利用記事本打開
3.編寫HTML代碼
4.保存并且修改純文本文檔的擴展名為.html
5.利用游覽器打開編寫好的文件 - 基本結(jié)構(gòu):
···html
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- 通過觀察,我們發(fā)現(xiàn),HTML基本結(jié)構(gòu)中所有的標簽都是成對出現(xiàn)的留拾,這些成對出現(xiàn)的標簽中有一個帶/有一個不帶/羹奉,那么不帶/的標簽我們稱之為開始標簽,這些帶/的標簽我們稱之為結(jié)束標簽煤辨。
- <html>標簽的作用:
- 用于告訴游覽器這是一個網(wǎng)頁裳涛,也就是說告訴游覽器我是一個HTML文檔。
- 注意點:
其他所有的標簽都必須寫在html標簽里面众辨,也就是寫在html開始標簽和結(jié)束標簽中間端三。
- <head>標簽的作用:
- 用于給網(wǎng)站添加一些配置信息
- 例如:
- 指定網(wǎng)站的標題/指定網(wǎng)站的小圖片
- 添加網(wǎng)站的SEO相關(guān)的信息(指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息)
- 外掛一些外部的css/js文件
- 添加一些游覽器適配相關(guān)的內(nèi)容
- 注意點:
- 一般情況下,寫在head標簽內(nèi)部的內(nèi)容都不會現(xiàn)實給用戶查看鹃彻,也就是說一般情況寫在head標簽內(nèi)部的內(nèi)容我們都看不到技肩。
- <meata>標簽的作用:就是指定當前網(wǎng)頁的字符集
- 為什么會有亂碼現(xiàn)象?
就是因為我們在編寫網(wǎng)頁的時候沒有指定字符集
- 如何解決亂碼現(xiàn)象?
在head標簽中添加
<meta charset="GBK"/>
指定字符集
- 什么是字符集虚婿?
字符集就是字符的集合旋奢,也就是很多字符堆在一起。 其實字符集很像我們古代的活字印刷術(shù)然痊,在活字印刷術(shù)中就是將很多刻有漢字的小章放到一個盒子中至朗,然后需要印刷文字的時候再去盒子中取這個小章出來用。正是因為如此剧浸,所以導致了亂碼問題锹引。
- 假設(shè)北方人和南方人都擁有裝滿小章的盒子,但是南方人和北方人在盒子中存儲小章的順序不太一樣唆香,那么這個時候如果北方人和南方人都需要去取李字嫌变,在南方人記憶中李字在第6個盒子的第6行的第6列中,在北方人的記憶中李子在第8個盒子第8行的第8列中躬它,那么此時如果讓一個南方人去北方人的盒子中取李字的小章腾啥,必然找不到,因為存儲的順序不太一樣冯吓,所以就導致了亂碼的問題倘待。
那么這個地方北方人的存儲小章的盒子和南方人存儲小章的盒子就對應(yīng)網(wǎng)頁中指定的那些字符集,在網(wǎng)頁中我們常見的字符集有兩個GBK/UTF-8组贺,GBK就對應(yīng)北方人存儲的盒子凸舵,UTF-8就對應(yīng)南方人存儲的盒子。
所以在網(wǎng)頁中指定字符集的意義就在于告訴瀏覽器我用的是哪個盒子失尖,你應(yīng)該如何去查找才能找到對應(yīng)的正確的內(nèi)容啊奄。
- GBK(GB2312)和UTF-8的區(qū)別
- GBK(GBK2312)里面存儲的字符比較少,僅僅存儲了漢字和一些常用外文掀潮。體積比較小菇夸。
- UTF-8里面存儲了世界上所有的文字。體積比較大胧辽。
- 那么在其也開發(fā)中我們應(yīng)該使用GBK還是UTF-8呢峻仇?
- 如果你的網(wǎng)站僅僅包含中文,那么推薦使用GB2312邑商,因為它的體積更小摄咆,訪問速度更快。
- 如果你的網(wǎng)站除了中文以外人断,還包含了一些其他國家的語言吭从,那么推薦使用UTF-8
- 懶人推薦:不管三七二十一,一律寫UTF-8即可恶迈。
- 注意點:
- 在HTML文件中指定的字符集必須和保存這個文件的字符集一致涩金,否則還是會出現(xiàn)亂碼谱醇。
- 所以僅僅指定字符集不一定能解決亂碼問題,還需要保存文件的時候步做,文件的保存格式必須和指定的字符集一致才能保證沒有亂碼的問題副渴。
- <title>作用:
- 專門用于指定網(wǎng)站的標題,并且這個指定的標題將來還會作為用戶保存網(wǎng)站的默認標題全度。
- 注意點:
- title標簽必須寫在head標簽內(nèi)煮剧。
- <body>作用:
- 作用:專門用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容(文字/內(nèi)容/視頻/音頻)
- 注意點:
- 雖然有時候你可能將內(nèi)容寫到了別的地方,在網(wǎng)頁中也能看到将鸵,但是千萬不要這么干勉盅,一定要將需要顯示的內(nèi)容寫在body中。
- 一對html標簽中(一個開始標簽和一個結(jié)束標簽)只能有一對body標簽顶掉。
- HTML標簽
- HTML標簽分類
- 單標簽
- 只有開始標簽草娜,沒有結(jié)束標簽,也就是由一個<>組成的
<meta charset="UTF-8"/>
- 雙標簽
- 有開始標簽和結(jié)束標簽痒筒,也就是有一個<>和一個</>組成的宰闰。
···html
<html>
</html>
HTML標簽關(guān)系分類
并列關(guān)系(兄弟/平級)
嵌套關(guān)系(父子/上下級)
DTD文檔聲明
什么是DTD文檔聲明?
由于HTML有很多個版本的規(guī)范凸克,每個版本的規(guī)范之間又有一定的差異议蟆,所以為了讓瀏覽器能夠正確的編譯闷沥、解析萎战、渲染我們的網(wǎng)頁,我們需要在HTML文件的第一行告訴游覽器舆逃,我們當前這個網(wǎng)頁是用哪一個版本的HTML規(guī)范來編寫的蚂维。瀏覽器只要知道我們是用哪一個版本的規(guī)范來編寫之后,它就能夠正確的編譯路狮、解析虫啥、渲染我們的網(wǎng)頁。DTD文檔聲明格式奄妨?
每一個不同版本的規(guī)范都有不同的DTD文檔聲明涂籽。
HTML5的DTD文檔聲明是向下兼容的。
<!DOCTYPE html> 背下來DTD文檔聲明的注意點:
1.任何一個標準的HTML網(wǎng)頁砸抛,第一行一定是DTD文檔聲明评雌。也就是DTD文檔聲明必須寫在HTML第一行。
2.DTD文檔聲明不區(qū)分大小寫直焙。
3.DTD文檔聲明不是一個標簽景东。
4.雖然DTD文檔聲明的作用是用于告訴瀏覽器我們的網(wǎng)頁是用哪個版本的標準編寫的。以便于方便瀏覽器解析和渲染奔誓。但是瀏覽器并不是完全依賴這個DTD文檔聲明斤吐,瀏覽器有一套屬于自己的機制。 也就是說DTD文檔聲明不寫網(wǎng)頁也能正常運行,但是由于W3C規(guī)定第一行必須寫上DTD文檔聲明和措,所以為了遵守規(guī)定庄呈,我們無論如何我們都該寫上。