html基礎課（2）

二、HTML骨架

標準的骨架

我們一部分一部分學習。

2.1 文檔聲明頭

任何一個標準的HTML頁面，第一行一定是一個以

開頭的語句。

這一行，就是文檔聲明頭，DocType Declaration。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。

到底有哪些規范呢？

首先我們先確定一件事兒，我們現在學習的是HTML4.01這個版本，這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰，所以這幾年網頁還是應該用HTML4.01來制作。后面將知道手機、移動端的網頁，就可以使用HTML5了。

HTML4.01里面有兩大種規范，每大種規范里面又各有3種小規范。所以一共6種規范（見下面）：

HTML4.01里面規定了普通、XHTML兩大種規范。

HTML覺得自己有一些規定不嚴謹，比如，標簽是否可以用大寫字母呢？

所以，HTML就覺得，把一些規范嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示“嚴格的”。

總結一下，一共有6種DTD，說白了，HTML第一行語句一共有6種：

strict表示“嚴格的”，這種模式里面的要求更為嚴格。這種嚴格體現在哪里？有一些標簽不能使用。

比如，u標簽，就是可以讓一個本文加上下劃線，但是這和HTML的本質有沖突，因為HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。所以，在strict中是不能使用u標簽的。

怎么給文本增加下劃線呢？今后的css將使用css屬性來解決。

Transitional表示“普通的”，這種模式就是沒有一些別的規范。

Frameset表示“框架”，在框架的頁面使用。

我們學習的就是XHTML1.0中的transitional版本。因為我們的頁面中偶爾要使用一些類似u這種標簽（當做CSS鉤子）。

sublime輸入的html:xt  x表示XHTML，t表示transitional

HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C自己打臉了）：

2.2 字符集

字符集用meta標簽定義，meta表示“元”。“元”配置，就是表示基本的配置項目。

charset就是charactor set“字符集”的意思。這個meta不用背，誰背誰傻，用sublime生成就行。

中文能夠使用的字符集兩種：

第一種：UTF-8

第二種：gb2312

也可以寫成gbk

什么是字符集？活字印刷術，所有的漢字都有一個個小印章，需要哪個字，就取哪個字。

但是，有兩個人都發明了字庫。老王發明了一個，老李也發明了一個。

比如同一個漢字，“傳”字在老王的字庫里面是第2個大盤子第4行第43列的。

而這個漢字“傳”在老李的字庫里面是第5個大盤子第6行第13列的。

計算機，不能直接存儲漢字，而是存儲的是編碼，所以，計算機記錄“傳”這個字，就是這么記錄的：

老王：

老李

有兩個字庫UTF-8和gb2312。

UTF-8是國際通用字庫，里面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、鳥語……

gb2312 是國標，是中國的字庫，里面僅涵蓋了漢字和一些常用外文，比如日文片假名，和常見的符號。

字庫規模：  UTF-8（字全） > gb2312（只有漢字）

我們用meta標簽可以聲明當前這個html文檔的字庫，但是一定要和保存的類型一樣，否則亂碼！（重點）

當我們不設置的時候，sublime默認類型就是UTF-8。而一旦更改為gb2312的時候，就一定要記得設置一下sublime的保存類型： 文件→ set File Encoding to → Chinese Simplified(GBK)

記住兩者匹配：

注意，由于UTF-8里面保存了世界上所有人類語言，所以描述一個漢字需要的碼更多。

UTF-8里面存儲一個漢字3個字節。而gb2312中存儲一個漢字2個字節。

保存大小：   UTF-8（更臃腫、加載更慢） > gb2312 （更小巧，加載更快）

總結：

UTF-8 字多，有各種國家的語言，但是保存尺寸大，文件臃腫；

gb2312字少，只用中文和少數外語和符號，但是尺寸小，文件小巧。

列出2個使用情形：

1） 你們公司是做日本動漫的，經常出現一些日語動漫的名字，網頁要使用UTF-8。如果用gb2312將無法顯示日語。

2） 你們公司就是中文網頁，極度的追求網頁的顯示速度，要使用gb2312。如果使用UTF-8將每個漢字多一個byte，所以5000個漢字，多5kb。

我們親測：

● qq網、網易、搜狐都是使用gb2312。這些公司，都追求顯示速度。

● 新華網藏語頻道，使用的是UTF-8，保證字符集的數量。

我們的課程，一律使用UTF-8，因為我們懶，懶得改了。

瀏覽器就是通過meta來看你是什么字符集的，比如你保存的時候meta寫的，和聲明的不匹配，那么瀏覽器就是亂碼。

2.3 關鍵字和頁面描述

meta除了可以設置字符集，還可以設置關鍵字和頁面描述。

設置頁面描述：

只要設置的Description頁面面熟，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO，search engine optimization，搜索引擎優化。

抽象一下：

name就是“名字”的意思，content是“內容”的意思。

也就是說，我們定義了一個名字是“Description”（描述）的meta。內容是網易是中國領先……

定義關鍵詞：

這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。

Keywords就是“關鍵詞”的意思。

所以，一個比較完整的骨架是這樣：

第4行 ：   字符集設置

第5行：關鍵詞

第6行：描述

2.4 title標簽

title也是有助于SEO搜索引擎優化的：

網頁的head標簽里面，表示的是頁面的配置，有什么配置？

字符集、關鍵詞、頁面描述、頁面標題。

今后我們還能看見一些配置：IE適配、視口、iPhone小圖標等等……

三、HTML的基本語法特性

3.1 HTML對換行不敏感，對tab不敏感

HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。

換不換行、tab不tab，都不影響頁面的結構。

所以：

完全等價于：

也就是說，HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。但是，我們發現有良好的縮進，代碼更易讀。要求大家都正確縮進標簽。

百度為了追求極致的顯示速度，所以HTML標簽都沒有換行、都沒有縮進（tab），HTML和換不換行無關，標簽的層次依然清晰，只不過程序員不可讀了：

3.2 空白折疊現象

HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。

代碼：里面有空格、縮進、換行

顯示的時候，折疊了：

3.3 標簽要嚴格封閉

標簽不封閉是災難的：

多說一嘴，HTML、CSS就是寫代碼，不能算“編程”，因為這里面沒有業務邏輯，加減乘除，與或非。

說白了，就是用代碼畫畫。

四、h和p標簽

4.1 h系列

<h2> 到 <h7> 都是標簽：

<h2></h2> 一級標題

<h3></h3> 二級標題

……

<h7></h7> 六級標題

h標簽沒有嵌套關系的。由于h4跟著一個h3，所以，我們自己就知道了這個h4是h3子標題。

h是容器級的標簽。理論上里面可以放置p、ul，只是法律上的允許，在語義上，不要這么寫。

4.2 p標簽

段落，是英語paragraph“段落”縮寫。

HTML標簽是分等級的，HTML將所有的標簽分為兩種：容器級、文本級。

顧名思義，容器級的標簽，里面可以放置任何東西；文本級的標簽里面，只能放置文字、圖片、表單元素。

p標簽是一個文本級標簽。從學習p的第一天開始，就要死死記住：p里面只能放文字、圖片、表單元素。其他的一律不能放。

Chrome瀏覽器 是世界上HTML5支持最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。

Chrome的英語原意“硅”，是谷歌公司的產品，所以也叫作谷歌瀏覽器。

審查元素功能：

向AI問一下細節