網(wǎng)頁的固定格式

  • 編寫網(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ī)定庄呈,我們無論如何我們都該寫上。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末派阱,一起剝皮案震驚了整個濱河市抒痒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌颁褂,老刑警劉巖故响,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異颁独,居然都是意外死亡彩届,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門誓酒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來樟蠕,“玉大人,你說我怎么就攤上這事靠柑≌纾” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵歼冰,是天一觀的道長靡狞。 經(jīng)常有香客問我,道長隔嫡,這世上最難降的妖魔是什么甸怕? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮腮恩,結(jié)果婚禮上梢杭,老公的妹妹穿的比我還像新娘。我一直安慰自己秸滴,他們只是感情好武契,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荡含,像睡著了一般咒唆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上内颗,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天钧排,我揣著相機與錄音,去河邊找鬼均澳。 笑死恨溜,一個胖子當著我的面吹牛符衔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播糟袁,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼判族,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了项戴?” 一聲冷哼從身側(cè)響起形帮,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎周叮,沒想到半個月后辩撑,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡仿耽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年合冀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片项贺。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡君躺,死狀恐怖肌似,靈堂內(nèi)的尸體忽然破棺而出谓苟,到底是詐尸還是另有隱情,我是刑警寧澤允耿,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布奕删,位于F島的核電站俺泣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏急侥。R本人自食惡果不足惜砌滞,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一侮邀、第九天 我趴在偏房一處隱蔽的房頂上張望坏怪。 院中可真熱鬧,春花似錦绊茧、人聲如沸铝宵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鹏秋。三九已至,卻和暖如春亡笑,著一層夾襖步出監(jiān)牢的瞬間侣夷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工仑乌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留百拓,地道東北人琴锭。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像衙传,于是被迫代替她去往敵國和親决帖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容