1. 程式人生 > >Html骨架詳解

Html骨架詳解

下面這是基本Html骨架結構

1   <html>
2       <head>
3           
4       </head>
5       <body>
6           
7       </body>
8   </html>

完整骨架

1   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2   <html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>哈哈哈</title> 6 </head> 7 <body> 8 <h1>我是一個主標題</h1> 9 <p
>
我是一個小段落</p> 10 </body> 11 </html>

第1行,就是網頁的宣告頭。
術語叫做Document Type Definition,文件型別定義,簡稱DTD。這行語句非常的複雜,裡面暗含了一個網址,W3C是出web規範的組織機構,html、css、js的規範都是由W3C定義釋出的。world wide web coalition , 國際全球資訊網聯盟。網頁宣告頭可以告訴瀏覽器,這是一個什麼標準的頁面。
如上面程式碼所示這是一個 以XHTML 1.0 為標準的頁面。

第2行,是最大的html標籤所有的網頁內容,都要包裹在這個標籤對裡面。
我們發現,html標籤中,有兩個屬性:
xmlns=”http://www.w3.org/1999/xhtml” 名稱空間,就是一個規範,是在XHTML 標準內的特定寫法,H5中不存在;
xml:lang=”en” 語言是英語。

第4行,

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 

字符集的配置

字符集用meta標籤定義,meta表示“元”。“元”配置,就是表示基本的配置專案。

charset就是charactor set“字符集”的意思。
中文能夠使用的字符集兩種:

第一種:UTF-8

<meta http-equiv="Content-Type" content="text/html;charset=**UTF-8**">

第二種:gb2312

<meta http-equiv="Content-Type" content="text/html;charset=**gb2312**">
2 <meta http-equiv="Content-Type" content="text/html;charset=gbk">

什麼是字符集?活字印刷術,所有的漢字都有一個個小印章,需要哪個字,就取哪個字。
但是,有兩個人都發明瞭字型檔。老王發明了一個,老李也發明了一個。
比如同一個漢字,“傳”字在老王的字型檔裡面是第2個大盤子第4行第43列的。
而這個漢字“傳”在老李的字型檔裡面是第5個大盤子第6行第13列的。

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

老王:
20443
老李
50613
有兩個字型檔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,保證字符集的數量。

瀏覽器就是通過meta來看你是什麼字符集的,比如你儲存的時候meta寫的,和宣告的不匹配,那麼瀏覽器就是亂碼。

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

設定頁面描述:


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

抽象一下:

1

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

也就是說,我們定義了一個名字是“Description”(描述)的meta。內容是網易是中國領先……
定義關鍵詞:
1

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

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

所以,一個比較完整的骨架是這樣:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

3 <head>

4  <meta http-equiv="Content-Type" content="text/html;**charset**=UTF-8">

5  <meta name="**Keywords**" content="牛逼,很牛逼,特別牛逼" />

6  <meta name="**Description**" content="網易是中國領先的網際網路技術公司,為使用者提供免費郵箱、遊戲、搜尋引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及部落格、視訊、論壇等互動交流,網聚人的力量。" />

7  <title>Document</title>

8 </head>

9 <body>

10       

11 </body>

12 </html>

作者:新海
前端小白