1-HTML初識

weixin_34075268發表於2016-12-08
HTML

一、HTML骨架

標準的骨架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
        
</body>
</html>

1.1文件宣告

任何一個標準的HTML頁面，第一行一定是一個以
1 <!DOCTYPE ……
開頭的語句。
這一行，就是文件宣告頭，DocType Declaration。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。
到底有哪些規範呢？
首先我們先確定一件事兒，我們現在學習的是HTML4.01這個版本，這個版本是IE6開始相容的。HTML5是IE9開開始相容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰，所以這幾年網頁還是應該用HTML4.01來製作。後面將知道手機、移動端的網頁，就可以使用HTML5了。

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


1415884-9d5d9a806e127a8c.png
1.png

1.2 字符集

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

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

有兩個字型檔UTF-8和gb2312。
UTF-8是國際通用字型檔，裡面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、鳥語……
gb2312 是國標，是中國的字型檔，裡面僅涵蓋了漢字和一些常用外文，比如日文片假名，和常見的符號。
字型檔規模： UTF-8（字全） > gb2312（只有漢字）
我們用meta標籤可以宣告當前這個html文件的字型檔，但是一定要和儲存的型別一樣，否則亂碼！

1415884-1429223d6071e741.png
2.png

當我們不設定的時候，sublime預設型別就是UTF-8。而一旦更改為gb2312的時候，就一定要記得設定一下sublime的儲存型別： 檔案→ set File Encoding to → Chinese Simplified(GBK)

記住兩者匹配：

1415884-58a7821b7aa68d81.png
3.png

總結：

UTF-8 字多，有各種國家的語言，但是儲存尺寸大，檔案臃腫；
gb2312字少，只用中文和少數外語和符號，但是尺寸小，檔案小巧。

1.3 關鍵字和頁面描述

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

設定頁面描述：
<meta name="Description" content="網易是中國領先的網際網路技術公司，為使用者提供免費郵箱、遊戲、搜尋引擎服務...." />
只要設定的Description頁面面熟，那麼百度搜尋結果，就能夠顯示這些語句，這個技術叫做SEO，search engine optimization，搜尋引擎優化。

1415884-f68358b66eb85f14.png
4.png.png

1.4 title標籤

<title>網頁的標題</title>

1415884-d61247b05fc3c796.png
2.png

二、HTML的基本語法特性

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

HTML只在乎標籤的巢狀結構，巢狀的關係。誰巢狀了誰，誰被誰巢狀了，和換行、tab無關。
換不換行、tab不tab，都不影響頁面的結構。

1       <div>
2   <h3></h3>
3       <p></p>
4       </div>

等價於

1       <div>
2           <h3></h3>
3           <p></p>
4       </div>

也就是說，HTML不是依靠縮排來表示巢狀的，就是看標籤的包裹關係。但是，我們發現有良好的縮排，程式碼更易讀。要求大家都正確縮排標籤。

2.2 空白摺疊現象

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

2.3 標籤要嚴格封閉

標籤不封閉是災難的：
<title>歡迎<title>

相關文章