HTML筆記（中）

一、字元編碼

字元：

文字與符号的集合，包含多個國家的文字、圖形符号、标點符号、數字

字元集：

字元集的集合，各個國家擁有自己的字元集

字元編碼的統一：

為了友善國際間使用電腦進行交流，國際組織編制了一個包含全世界幾乎所有國家的字元集：unicode字元集，（相當于一個世界詞典）

如何避免亂碼：

1.HTML 的存儲編碼要與浏覽顯示的編碼要一緻

2.PHP腳本的編碼也要與顯示編碼一緻

3.資料庫中資料的存儲編碼也要與顯示編碼一緻

HTML、PHP、資料庫、浏覽器的顯示編碼要一緻，則肯定不會出現亂碼問題

二、連結标簽

文法：

<a 屬性=“值”>内容</a>

說明：

主要用于實作頁面跳轉，或使用a标簽模拟一個按鈕。

常用的屬性：

href：值是一個網址（url）

示例：<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >點選跳轉</a>

target：用于設定所要跳轉的頁面的顯示位置

取值：_self（目前頁打開所要跳轉的頁面，預設）、_blank（在新的視窗中打開所要跳轉的頁面）、_top（在頂級視窗中顯示所要跳轉的頁面）、_parent（在父視窗中顯示将要跳轉的頁面） ，還可以是<frame>标簽的name屬性值

用法：

1.跳轉

<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >點選跳轉</a>

2.發郵件

<a href="mailto:[email protected]" target="_blank" rel="external nofollow" >點選發郵件</a>

3.下載下傳

<a href="浏覽器不可識别的檔案" target="_blank" rel="external nofollow" >點選下載下傳</a>

注意：如果是浏覽器可識别的檔案，隻能使用PHP技術

4.空連結      

文法1：<a href="#" target="_blank" rel="external nofollow" ></a>  用于模拟按鈕，調用JS代碼

文法2：<a href="javascript:;" target="_blank" rel="external nofollow" ></a> 

5.錨點

頁面内跳轉，實作錨點需要兩個a連結配合使用。

第一個連結用于定義錨點（錨點就是為了網頁的某一處位置定義一個名字用于跳轉）

文法：

<a name="錨點名">内容可有可無</a>

第二個連結用于進行跳轉

文法：

<a href="#錨點名" target="_blank" rel="external nofollow" ></a>

還可以在不同的頁面跳轉到指定的錨點

第一步：在頁面中設定要跳轉的頁面和錨點

比如：<a href="test.html（空格）#錨點名" target="_blank" rel="external nofollow" >

第二步：在test.html檔案中設定錨點

<a name="錨點名">内容可有可無</a>

三、圖檔标簽

1.顔色的表示方法

1.顔色單詞，如：red、green、blue

2.RGB，R（Red紅）、G（Green綠）、B（Blue藍）       在HTML中失效

格式：RGB（0-255，0-255，0-255），八位二進制最大的十進制為255

3.16進制

格式：#00 00 00

每兩位為一組，每一組的範圍是00至FF

#FF0000 紅色 ，#00FF00 綠色 ，#0000FF 藍色 ，#000000 白色 ，#FFFFFF 黑色

2.  圖檔标簽（單邊标簽）

标簽文法：<img 屬性=“值”/>

常用的屬性：

 src         用于指定圖檔的路徑

width      設定圖檔的寬度               不需要加機關

height     設定圖檔的高度              不需要加機關

border    設定圖檔的邊框線                

align       設定水準對齊方式  取值：left  水準居左、right 水準居右、center 文字與圖檔的中線對齊

vspace    垂直間距

hspace    水準間距

alt     當圖檔無法顯示時的提示資訊

title   設定滑鼠懸停時的提示資訊

3.圖像熱點

實作圖像熱點至少需要兩個标簽

1、将一個圖檔作為一個容器（在此圖檔再建立不同的區域）

2、在圖檔上建立區域

<map name="映射名">

<area shape="circle">

</map>

說明：

<map></map>用于定義整個映射

<area>用于定義具體的區域類型及範圍，屬性有：

shape（形狀）：circle（圓形）、rect（矩形）、poly（多邊形）

coords（坐标）

如果shape的取值為circle，那麼coords="x,y,r" 

xy圓心坐标，r表示半徑

如果shape的取值為rect，那麼coords="x,y,w,h" xy表示左上坐标，wh表示寬高

coords="x1,y1,x2,y2" x1y1表示左上坐标，x2y2表示右下坐标

如果shape的取值為poly，那麼coords="x1,y1,x2,y2,x3,y3..." 分别表示多邊形各個頂點的坐标

（在計算機中确定一個矩形的方法有：

方法1：左上坐标、寬、高，方法2：左上角與右下角坐标）

3、在圖檔标簽上關聯熱點

如：

<img src="test.png" usemap="#映射名">

<map name="映射名">

<area shape="circle" coords="50,50,20" href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

</map>

4.路徑

目前的文檔需要引入外部的一個檔案時，就涉及到路徑的問題

路徑分為相對路徑與絕對路徑

相對路徑：在指定所要引入的外部檔案時，以目前檔案所在的目錄為（起點）基礎，一級級的指向，這樣的方式即為相對路徑

./          目前檔案夾（可以省略）

../         目前檔案夾的上級檔案夾（有幾個就是上幾級）

 比如：E:\php_folder\20160706\0707\code\01demo.html

             E:\php_folder\20160706\0708\demo.jpg

01demo.html的代碼引入外部檔案demo.jpg的路徑是 ../../0708/demo.jpg

絕對路徑：以磁盤根目錄為起點，決定檔案的走向

如  E:\php_folder\20160706\0708\demo.jpg

注意：在HTML标簽引入外部的圖檔資源時，不能使用絕對路徑

四、表格标簽

1.table标簽

table資料标簽，主要是用于資料，具有行列結構的資料，table标簽是一個标簽組

文法：

<table>

<tr>

<td></td>

<td></td>

              ......

</tr>

......

</table>

常用屬性：

table标簽屬性：

border：用于設定表格的邊框線

bordercolor：邊框線的顔色

width：寬度，取值是整數或百分比 （不需要加機關）

height：高度，取值是整數或百分比（不需要加機關）

bgcolor：背景顔色

background：背景圖檔

align：設定表格本身的文字水準對齊方式，left、center、right

rules：設定表格邊線合并，取值 all

cellspadding：用于設定單元格内容與邊線的距離

cellspacing：用于設定單元格之間邊線的距離

tr标簽屬性

bgcolor：整行的背景顔色

background：整行的背景圖檔

align：整行内容的水準對齊方式 ，取值：left（預設）、center、right

valign：整行内容垂直的對齊方式 ，取值：top（垂直上對齊）、middle（垂直居中預設）、bottom（垂直下對齊）

td标簽屬性：

bgcolor：單元格的背景顔色

background：單元格的背景圖檔

width：設定整列的寬度

height：設定整行的高度

align：設定目前單元格内容的水準對齊方式

valign：設定目前單元格内容垂直的對齊方式 

colspan：用于合并一個行上多個元素的單元格（合并多列）

rowspan：用于合并一列上多個連續的單元格（合并多行）

合并方法：

1、首先找到合并的開始單元格，書寫屬性。

2、删除其後或其下被合并的單元格

<th></th>

用于定義表格的表頭，隻是比td标簽多了加粗與居中的效果

表格其他标簽（浏覽器顯示時會自動添加）：

<thead></thead>

主要使用者劃分表格的頭部區域

<tbody></tbody>

主要用于劃分表格的資料區域

<tfoot></tfoot>

主要用于劃分表格尾部區域

<caption></caption>

主要用于定義表格的标題

caption的屬性：

align用于定義表格的标題的位置，取值：left（左側）、right（右側）、top（上部）、bottom（下部）

注意：

table标簽中隻能包含表格相關的标簽（tr、td、caption、thead、tbody、tfoot、th）。如果想包含其他的标簽，其他标簽一定要放在td内