html 第二天

一、複習上節課的內容

網頁的原理：用戶輸入網址之後，對應的服務器就發現有人請求我的網頁了，所以這個服務器就會把網頁和相關的圖片、js文件、css文件、flash文件都通過HTTP協議傳輸到用戶的電腦裏面。HTML頁面在用戶的電腦裏面進行渲染。HTTP協議指的是超文本傳輸協議。每一個網址，都對應了服務器上面的確定的文件。

純文本文件：只有內容，沒有樣式。常見的純文本文件有：.txt、.html、.js、.css、.java。沒有語義，即使你這個文件中的內容排版再清晰，那也是人認爲的，實際上純文本文件中的所有的文字生而平等，沒有任何的語義。

HTML：超文本標記語言，HyperText Markup Language。就是通過標籤對兒，給純文本增加語義。也就是說，用文本給文本增加語義，所以這個叫做“超文本”。而有一對兒對兒標籤，也成爲“標記”，所以就是“超文本標記語言”。

標籤： 主標題的語義 ，h是英語headline標題的意思。

<h1></h1>

二級標題

<h2></h2>

段落，p是英語paragraph段落的意思。

<p></p>

HTML中除了語義，其他什麼都沒有：沒有樣式、沒有交互、沒有行爲。

所以HTML不能讓文本居中、字號調整、顏色改變、字體、下劃線、傾斜……

 

sublime: 做網頁和什麼軟件沒有任何關係，所以做網頁不等於學習使用DreamWeaver。Sublime非常快、方便、小巧、插件多，所以我們使用sublime。sublime中有常用的快捷鍵。

新建文件    ctrl+n

保存        ctrl+s

調整字號    ctrl+滾輪

上移當前行  ctrl+shift+↑

複製當前行  ctrl+shift+d

刪除當前行  ctrl+shift+k

二、HTML骨架

接下來，我們對各部分進行詳細的學習。

2.1 文檔聲明頭

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

<!DOCTYPE……>

開頭的語句。

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

我所學習的是HTML4.01 中有兩種大的規範，而每個大規範中又各有3種小規範，所以一共有6種規範。HTML4.01裏面規定了普通、XHTML兩大種規範。

XHTML就是把一些HTML中的一些不嚴謹的規定嚴格化而產生的，例如<H1></H1是不允許的。在XHTML中的字母X 就是表示“嚴格的”。

 

下面總結了一下6種文檔聲明頭（DTD），HTML第一行語句一共有6種：

大規範	裏面的小規範
HTML4.01	Strict         嚴格的，體現在一些標籤不能使用，比如u Transitional    普通的 Frameset      帶有框架的頁面
XHTML1.0 嚴格體現在小寫標籤、閉合、引號	Strict           嚴格的，體現在一些標籤不能使用，比如u Transitional     普通的（我現在學習的版本） Frameset       帶有框架的頁面

Strict表示“嚴格的”，這種模式裏的要求更爲嚴格。u標籤，就是可以讓一個本文加上下劃線，但是在strict 中是不能使用的，因爲這和 HTML的本質有衝突，HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。

 

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

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

我現在學習的就是XHTML1.0中的 traditional版本（所以在一些頁面中可以適當使用一些類似u這種標籤，當做CSS鉤子）。

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

2.2 字符集

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

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

charset就是charactor set“字符集”的意思。這個語句並不需要背誦的，在Sublime中可以自動生成的。

再看UTF-8，可以說明一下中文能夠使用的字符集有兩種：

第一種：UTF-8

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

第二種：gb2312

<meta http-equiv=”Content-Type”content=”text/html;charset= gb2312”>

Gb2312也可以寫成gbk

<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裏面存儲一個漢字3個字節。而gb2312中存儲一個漢字2個字節。

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

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

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

 

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

 

當我們不設置的時候，sublime默認類型就是UTF-8。而一旦更改爲gb2312的時候，就一定要記得設置一下sublime的保存類型，記住兩者一定要匹配。

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

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

2.3 關鍵字和頁面描述

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

設置頁面描述：

<meta name="description" content="360導航--新一代安全上網導航，爲用戶提供門戶、新聞、視頻、遊戲、小說、彩票等各種分類的優秀內容和網站入口，提供簡單便捷的上網導航服務。安全上網，從360導航開始。" />

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

 

抽象一下：

1     <meta name=”” content=”” />

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

也就是說，我們定義了一個名字是“Description”（描述）的meta。

定義關鍵詞：

<meta name="keywords" content="360導航,網址之家,網址導航,360安全網址,360網址,上網導航,網址" />

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

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

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

第4行 ：字符集設置

第5行：描述

第6行：關鍵詞

 

2.4 title標籤

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

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

網頁的head標籤裏面，表示的是頁面的配置，有什麼配置？

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

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

三、HTML的基本語法特性

3.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不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。但是，我們發現有良好的縮進，代碼更易讀。要求大家都正確縮進標籤。

 

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

 

3.2 空白摺疊現象

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

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

1                 

顯示的時候，摺疊了：

3.3 標籤要嚴格封閉

四、h和p標籤

4.1 h系列

<h1> 到 <h6> 都是標籤：

<h1></h1>一級標題

<h2></h2>二級標題

……

<h6></h6>六級標題

 

h標籤沒有嵌套關係的。由於h3跟着一個h2，所以，我們自己就知道了這個h3是h2子標題。

1                   <h1>今日學習內容</h1>

2                   <h2>一、複習上節課的內容</h2>

3                   <h2>二、HTML骨架</h2>

4                   <h3>2.1 文檔聲明頭</h3>

5                   <h3>2.2 字符集</h3>

6                   <h3>2.3 關鍵字和頁面描述</h3>

7                   <h3>2.4 title標籤</h3>

8                   <h2>三、HTML的基本語法特性       </h2>

9                   <h3>3.1 HTML對換行不敏感，對tab不敏感</h3>

10              <h3>3.2 空白摺疊現象</h3>

11              <h3>3.3 標籤要嚴格封閉</h3>

12              <h2>四、h和p標籤</h2>

13              <h3>4.1 h系列</h3>

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

4.2 p標籤

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

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

容器級的標籤，裏面可以放置任何東西；文本級的標籤裏面，只能放置文字、圖片、表單元素。p標籤是一個文本級標籤。

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

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

 

 

審查元素功能：

五、圖片

5.1 能用的圖片類型

頁面上可以插入圖片，能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp,不能往網頁中插入的圖片格式是：psd、ai。

5.2 語法

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。

插入方法：

<img src="1.jpg"/>

src 是英語source“資源”的簡寫，千萬不要寫成scr。img是英語p_w_picpath“圖片”的簡寫

src是img標籤的屬性，1.jpg是這個屬性的值。

 

這個標籤和我們之前學的，都不一樣，因爲這個標籤不是“對兒”。自封閉標籤，也稱爲單標籤。

爲什麼？原因很簡單，如果是對兒，裏面就要有內容，表示給這個內容增加語義。比如

<h1>哈哈哈哈，我是主標題啦！！！</h1>

圖片就是一個圖片，不需要給什麼文字增加語義：<img />

上面學習的meta也是自封閉標籤：

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

5.3 alt屬性

alt屬性：  <img  src="baby.jpg" alt="巴黎結婚照" />

alt是英語alternate“替代”的意思，就表示不管因爲什麼原因，當這個圖片無法被顯示的時候，出現的替代文字（有的瀏覽器不支持）。

5.4 相對路徑

HTML中插入圖片，所以現在有兩個文件，一個html文件，一個是jpg文件。

我們關心的就是這兩個文件的相對位置。即使這個網站項目，被用u盤拷給了別人，只要相對路徑不變。圖片一定能夠正常顯示。

 

當圖片在文件夾裏面的時候：

<img src="p_w_picpaths/baby.jpg" alt="巴黎結婚照" />

如果在很深的文件夾中，也不怕，可以一直羅列下去： 

<img src="p_w_picpaths/jiehunzhao/baby.jpg" alt="巴黎結婚照" />

 

如果情況變得複雜，我們的圖片在淺一層的文件夾中：  <img  src="../3.jpg" alt="" />

如果是上兩級：<img  src="../../shizi.jpg" alt="" />

還可以更爲複雜：  <img  src="../../p_w_picpaths/jiehunzhao/baby.jpg" alt="" />，表示 上兩級的文件夾中的p_w_picpaths文件夾中的jiehunzhao的文件夾中的baby.jpg

相對路徑不會出現這種情況：   aaa/../bbb/1.jpg

 ../要麼不寫，要麼就寫在開頭。

例題：

標準答案：

1            <img  src="../../photo/1.png" />

解釋：

現在document是最大的文件夾，裏面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾裏面有index.html。 所以index.html在myweb文件夾裏面，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當做一箇中轉站，進入photo文件夾，看到了1.png。

六、超級鏈接

6.1 基本寫法

一個網站，是由很多html網頁組成的，html網頁之間能夠通過超級鏈接互相跳轉，從而形成了“網”。

語法：<a href="1.html">結婚照</a>

效果圖：  

 

a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標籤。

href是英語hypertext reference超文本地址的縮寫。

 

6.2 a標籤的另外兩個屬性

 title懸停文本 ：<a  href="09_img.html" title="很好看哦">結婚照</a>

 

 <a  href="09_img.html" title="很好看哦" target="_blank">結婚照</a>

target實際上是“目標”的意思，

blank就是“空白”的意思，就表示新建一個空白窗口。爲什麼有一個_ ，是規定。

也就是說，如果不寫target=”_blank”那麼就是在相同的標籤頁打開，如果寫了，就是在新的空白標籤頁中打開。

完整的超級鏈接：<a href="1.html"  title="懸停文本"  target="_blank">鏈接的內容</a>

6.3 頁面內的錨點

頁面當中可以有錨點，所謂的錨點，就是一個小標記，這個小標記是用戶不可察覺的，用戶不知道這裏有一個標記。

錨點用name屬性來設置，一個a標籤如果name屬性（或者id屬性），那麼就是頁面的一個錨點。

1            <a name="wdzp">我的作品</a>

2            或者：

3            <a id="wdzp">我的作品</a>

那麼網址：

1            1.html#wdzp

就能夠讓這個錨點在頁面最頂端顯示，此時頁面有捲動。

這樣子，用戶體驗會好一點，用戶可以直接看到頁面的內容。

如果有一個超級鏈接，指向頁面中的錨點，那麼就是：

1            <a href="#wdzp">點擊我就查看我的作品</a>

 

6.4 a是一個文本級的標籤

比如一個段落中的所有文字都能夠被點擊，那麼應該：

p包裹a：

1            <p>

2                   <a href="">段落段落段落段落段落段落</a>

3            </p>

而不是a包裹p：

1            <a href="">

2                   <p>

3                          段落段落段落段落段落段落

4                   </p>

5            </a>

a的語義要小於p，a就是可以當做文本來處理，所以p裏面相當於放的就是純文字。