2 HTML（中）
阿新 • • 發佈：2020-12-23
技術標籤：第三冊：HTML+CSShtmlcsswebhtml5
1.14 路徑
路徑分為兩種：1、 絕對地址：從碟符開始。只要移動位置就找不到。
2、 相對地址：以自身檔案為準，相對於自己的位置。
*注意：../代表上一級目錄，./表示當前目錄
現學現用：
<a href =”../../test.html”>點選</a>
<a href =”./2-滾動文字.html”>點選</a>
1.15 連結
連結的標記是<a></a>
1.15.1 內部連結
網站內部頁面和頁面之間的連結，參照前面 1.14 路徑。
外部連結就是連結到其他網站上。（地址要寫全）
現學現用：
<a href="http://www.baidu.com" target="_blank">百度</a><br />
<a href="http://www.baidu.com" >百度</a><br />
target="_blank"：在新的視窗中開啟<br />
<a href="2.滾動文字.html" target="_blank" 1.15.3 空連結
有超連結的樣子，但是點選不會跳轉，空連結用#表示。
現學現用：
<a href="#">空連結</a><br />
1.15.4 下載連結
在連結的檔案瀏覽器無法開啟，就自動出現下載。
現學現用：
<a href="1.這是我的第一個網頁.zip">下載</a>
1.15.5 錨鏈接
新建一個錨點：<a id="no1"></a>第一章：桃園三結義<br />，<a id=" 點選超連結，連線到指定的錨點處：
<a href="#no1 " target="_blank">第一章：桃園三結義</a><br />
<a href="#no2" target="_blank">第二章：哇咔咔</a><br />
#表示id的意思。#no1可以表示#是哪裡都不去就在本頁面，可以指跳轉到本頁面的no1處。錨點在哪裡，點選加的超連結就會跳轉到哪裡，相當於船的錨點，錨點放在哪裡，船就開向哪裡。
1.16 六級標題級別
主要標題及快捷鍵：
<h1>一級標題</h1> Ctrl+1
<h2>二級標題</h2> Ctrl+2
<h3>三級標題</h3> Ctrl+3
<h4>四級標題</h4> Ctrl+4
<h5>五級標題</h5> Ctrl+5
<h6>六級標題</h6> Ctrl+6
標題也是有權重的，用於優化頁面。
1.17 列表
1.17.1 有序列表
應用方式如下：
<ol> （order list：有序列表）
<ol type="a" start="4">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ol>
<ol type="a" start="4">：類別是英文字母a，從第四個開始，每一項是一個li。
1.17.2 無序列表
應用方式如下：
<ul>（unorder list ——ul：無序列表）
<ul type="square" >（square：方塊，circle：圓圈，disc：圓點）
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
1.17.3 自定義列表
應用方式如下：
<dl>
<dt>北京</dt>
<dd>閔行區</dd>
<dd>浦東</dd>
<dt>上海</dt>
<dd >東城區</dd>
<dt>天津</dt>
</dl>
1.18 <!DOCTYPE>標籤
Document 文件Type 型別
<!DOCTYPE>宣告必須是在HTML文件的第一行，位於<html>標籤間。
<!DOCTYPE>宣告不是HTML標籤，它是指示web瀏覽器關於頁面使用哪個HTML版本進行編輯的指令。
XHTML 1.0 Translational過渡的，現在除了用html5宣告以外，其餘全部用這種方式。該DTD包含所有HTML屬性和元素，但是不包括展示性和摒棄的元素（比如font）。
XHTML 1.0 Frameset允許框架集。該DTD等同於XHTML 1.0 Translational，但是允許框架集內容。
1.19 例項作業
跳轉到其他頁面指定的錨點處語法：<a href=’頁面地址#id號’></a>
<a href="11.跳轉到的頁面的指定錨點.html#no1">第一章</a>
1.20 meta
作用：給搜尋引擎搜尋（seo），告知瀏覽器使用什麼編碼解析頁面。 例如：<meta name=”keywords”coutent=”燒餅，武大郎燒餅，黃橋燒餅”/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8（字元編碼）" />
<meta name="keywords"（關鍵字） content="燒餅,武大郎燒餅"/>
<meta name="description" （描述）content="******************"/>
1.21 插入圖片
語法：<img src(source)=”tupian 1.jpg” width=”200” height=”300” alt=”註釋”/>
<img scr=”圖片路徑” width=”寬度” height=”高度” alt=”註釋，圖片的說明”/>
<img src="images/timg894DZR9B.jpg" height="200" width="300" alt="我其實注意你很久了" />如果將圖片的名字修改成站點資料夾裡面沒有的圖片的名字，那麼最後顯現出來的畫面將是一個叉和註釋裡面的內容。（瀏覽器不認識圖片）
Alt（當滑鼠移到圖片上時會顯現出來alt註釋出來的圖片屬性）屬性的作用：
1、當圖片無法顯示的時候，將圖片的說明性文字顯示到圖片的位置上。
2、給搜尋引擎來用，目前搜尋引擎確定圖片還是通過alt屬性。
<a href="#" title="離離原上草，一歲一枯榮。野火燒不盡，春風吹又生。">
離離原上草.....
</a>
*（頁面為只有離離原上草.....當滑鼠移到此處時，將全部顯現出標題內容）。
1.22 熱點
點選同一張圖的不同的區域，跳轉到不同的頁面。（地圖(map)的下面是熱點，地圖可以看到全部規劃的熱點圖示按鈕）。選中圖片，在屬性欄上就會出現熱點的按鈕，點選熱點按鈕畫熱點圖形（矩形、圓形、多邊形），選中超連結，最終形成的程式碼如下：
<img src="images/timg894DZR9B.jpg"（在插入圖片的時候，可以直接在站點資料夾裡面將圖片拖進來，可以自動的生成程式碼） width="100" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect（矩形）" coords="22,30,58,79"（x、y軸，左上角右上角點的座標） href="12.第一次作業.html" />（在寫錨點的時候可以直接點中熱點框將其指向站點資料夾便可以自動生成跳轉的路徑）
<area shape="circle（圓形）" coords="78,22,11"（x、y軸，半徑） href="1.這是我的第一個網頁.html" />
<area shape="poly（多邊形）" coords="8,77,8,77,14,77,12,59,6,65,6,75" （多邊形一個點一個x、y、z軸座標）href="13.meta.html" />
</map>
1.23 Object標記
Object標記插入flash。在DW中點選設計——插入——媒體——swf或者flash。
現學現用：
<param name="movie" value="flash/flash5608.swf" />
<param name="quality" value="high" />（品質是高品質）
<param name="wmode" value="transparent" />（背景是透明）
1.24 pre標籤
Pre元素可定義預格式化的文字。被包圍在pre元素中的文字通常會保留空格和換行符，而文字也會呈現為等寬字型。程式碼：<pre > 執行：
北 京 北 京
上海</pre> 上海
<pre></pre>標籤的一個常見應用就是用來表示計算機的原始碼。
*提醒：pre標籤不要用來拼版，主要用來php做除錯。
1.25 實體
Less than lt <
Greater than gt >
將<b>轉化成為實體為：<p>< b></p>
<p><b>鋤禾日當午</b></p>：<b>鋤禾日當午</b>
實體名稱 字元
空格
< <
> >
" “
1.26 表格
預設情況下，網頁的佈局是流佈局（排隊），不能夠隨意的擺放位置，如何解決？通過表格來佈局。表格的作用就是用來做頁面佈局的。
1.26.1 與表相關的標記
<table>…</table> 表標記
<tr>…</tr> 行標記
<td>…</td> 單元格標記
<th>…</th> 列標題
示例：
<table border="1" width="500px" height="400px" bordercolor="#FF33CC"><tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th></tr>
<tr>
<td>令狐沖</td>
<td>男</td>
<td>25</td></tr>
<tr>
<td>任我行</td>
<td>男</td>
<td>55</td></tr>
<tr>
<td>陳圓圓</td>
<td>女</td>
<td>22</td></tr>
<tr>
<td>豬八戒</td>
<td>男</td>
<td>32</td></tr>
</table>
1.26.2 單元格中資料的對齊方式
對齊分為水平對齊和垂直對齊。水平對齊是align=left center right
垂直對齊 valign=top middle bottom
示例：
<td align="center">令狐沖</td>（中心垂直）
<td align="left" valign="top">男</td>
<td align="right" valign="middle">25</td></tr>
1.26.3 單元格間距和單元格填充
單元格間距：單元格和單元格之間的距離單元格填充：內容距離單元格的距離
預設情況下，單元格間距是2畫素，單元格填充是1畫素。
Cellspacing（cell小格子，spacing距離）屬性定義單元格之間的間距（以畫素為單位），cellpadding屬性定義表的單元格邊界與單元格內容之間的間距（以畫素為單位）。
<table border=2 cellspacing=2 cellpadding=6>
Border:邊框 padding：填充
cellspacing="0" cellpadding="0"
1.26.4 合併單元格
合併單元格分為合併行和合並列，合併行就是把不同的行合併起來，合併列就是把不同的列合併起來。
Column：柱狀體，柱子 col Span：跨度
Colspan：跨了幾列（合併列）
Rowspan：跨了幾行（合併行）
示例：
<table border="1" bordercolor="#00CCCC" height="400px" align="center" width="500">
<tr>
<th colspan="3">學生證</th>
</tr>
<tr><th width="30%">姓名</th>
<td width="30%"> </td>
<td rowspan="3" align="center">照 片</td></tr>
<tr><th width="30%">年齡</th>
<td width="30%"> </td></tr>
</table>
1.27 表單域
表單的用途：1.使用者註冊某種服務時，收集其姓名、地址、電話號碼、電子郵箱地址和其他資訊。
2.收集購買物品所需的資訊。例如填寫姓名、郵政地址和付款方式等。 表單域是表單的區域，用來控制表單提交時候的資料訪問。
<form></form>：表示表單的開始和結束。所有的表單元素都要放在表單中。
1.27.1 表單元素
1.文字框（單行文字）<form>
<table align="center" border="1" width="400" bordercolor="#FF0000">
<tr>
<td width="50%">使用者名稱</td>
<td>
<input type="text" name="username" size="10" maxlength="10" />
</td>
</tr>
</table>
</form>
Maxlength=10：表示最多輸入十個字元
Name=”username”：給文字框取得名字叫username
Type：類別 2.使用者名稱
<input type=”text” size=”10” maxlength=”10” name=”username”>
<tr>
<td >使用者名稱</td>
<td><input type="text" name="username" size="20" maxlength="10" />
</td>
</tr>
密碼：<input type=”password”size=”8” name=”pwd”>
Redio：按鈕 checked：過去已經選中的
<td>密碼</td>
<tr>
<td>
<input type="password" name="pwd" maxlength="6"/>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
*注意事項：同一組的名字要一致，必須給無法輸入的表單元素賦值，預設選中checked="checked"。
<tr>
<td>興趣愛好</td>
<td>
<input type="checkbox" name="hobby" value="爬山"/>爬山
<input type="checkbox" name="hobby" value="游泳"/>游泳
</td>
</tr>
*注意事項同單選按鈕相同。
<td>
<select name="graduation" >
<option value="高中">高中</option>
<option value="大專">大專</option>
<option value="本科" selected="selected">本科</option>
</select>
</td>
其中：
<select>是下拉選單。
<option>是下拉選單選項，selected="selected"表示預設選中。
<select size="4" multiple="multiple" name="dept">
<option value="1">人事部</option>
<option value="2">財務部</option>
<option value="3">專案部</option>
<option value="4">後勤部</option>
<option value="5">保衛科</option>
<option value="6">市場部</option>
<option value="7">研發部</option>
</select>
其中：
multiple="multiple"：可以多選（按住ctrl）。
<tr>
<td>留言</td>
<td><textarea name="leaveword" cols="30" rows="5"></textarea>
</td>
</tr>
其中：
Cols：表示容納的列數。（調節寬）
Rows：表示容納的行數。（調節高）
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" name="submit"/>
</td>
</tr>
<input type="reset" value="重置" name="botton" />
提交按鈕和重置按鈕都是帶有功能的按鈕，在很多情況下我們點選按鈕的時候不是需要提交和重置，而是執行我們自己的功能，這時候就需要一個不帶有功能的按鈕。
<input type="button" value="返回" name="return" />
表單中有兩個屬性：
Action=”資料提交的位置” action=”空”表示提交到本頁面。
Method=”get|post”資料提交的方法有兩種，get和 post。
Get（用的最多的）和 post的區別
| get | post | |
|---|---|---|
| 外觀上 | 在位址列上帶有？ | 位址列上沒有？ |
| 提交的資料量 | 少量資料，一般低於2K | 大量資料，PHP預設可以提交8M的資料 |
| 安全性 | 不安全 | 安全 |
| 提交原理 | 提交的資料之間都是獨立的 | 將所有資料作為一個整體提交 |
| 靈活性 | 很靈活，只要頁面跳轉就可以傳遞資訊 | 不靈活，必須有表單參與 |