前端html--超連結，表格，表單屬性
1. 圖片與超連結
1. 圖片標籤
<img src="">
預設按照圖片原始尺寸顯示
標籤屬性 ：
1. width : 取px為單位的畫素值，設定圖片寬度
2. height : 取畫素值，設定圖片的高度
3. title : 用來設定滑鼠懸停於圖片上方時的顯示文字
4. alt : 當圖片載入失敗時顯示的文字
注意 ：
寬高尺寸可以只給一個值，另外一個方向會自適應
2. 超連結標籤
1. 什麼是超連結
能夠實現檔案跳轉的文字，叫超連結文字
2. 使用超連結
1. 語法 ：
<a href="連結地址">超連結文字</a>
注意 ：
1. href屬性是必填項，省略的話，超連結文字跟
普通文字無差別
2. 如果是網路路徑，必須加協議
3. 連結地址可以使網路路徑，也可以是本地路徑
2. 標籤屬性
target : 設定目標檔案的開啟方式，預設在當前視窗開啟
取值 ：
1. _self : 預設值
2. _blank : 新建視窗開啟目標檔案
3. href 屬性的特殊取值:
1. href="" :表示連結至本頁面,包含重新整理操作
2. href="javascript:void(0)" : 連結至本頁,無重新整理
3. href="#" :連結至本頁的錨點位置,無重新整理
3. 使用錨點連結
1. 通過定義錨點,實現跳轉至指定檔案的指定位置
2. 使用 :
1. 定義超連結,連結到本頁的指定位置
2. 在頁面相應位置新增錨點
et :
<a href="#7">7. 早年經歷</a>
<a name="7"></a>
使用name屬性定義錨點名稱,超連結的連結地址中
使用#表示本頁,跟上錨點名稱,表示跳轉至錨點位置
練習 :
模擬回到頂部
2. 表格標籤
1. 語法 :
1. <table></table> 表示表格標籤
2. <tr></tr> 表示表格中的一行 table row
3. <td></td> 表示行中的一個單元格 table data
et :
<table>
<tr>
//單元格
<td></td>
<td></td>
</tr>
<tr></tr>
<tr></tr>
</table>
2. 表格的標籤屬性
1. table 標籤的屬性
1. border
可以為表格設定邊框,取畫素值
2. width height
設定表格的寬高大小,取畫素值.預設情況下,表格尺寸
由內容自適應
3. bgcolor
設定表格背景顏色,取英文單詞
4. align
設定表格在父元素中的水平對齊方式
取值 : left(預設值) / center / right;
5. cellspacing
設定單元格與單元格之間的距離
取畫素值
6. cellpadding
設定單元格內容與單元格邊框之間的距離
取畫素值
2. tr 標籤的屬性
1. bgcolor
設定行的背景顏色
2. align
設定單元格內容的水平對齊方式
取值 : left(預設) / center / right
3. valign
設定單元格內容的垂直對齊方式
取值 : top / middle(預設) / bottom
3. td 標籤的屬性
1. width height
設定單元格尺寸,取畫素值
2. align valign
設定單元格內容的水平和垂直對齊方式
3. bgcolor
設定單元格的背景顏色
3. 單元格合併
單元格合併涉及表格結構的調整
1. 跨列合併
屬性 : colspan
取值 : 無單位的數值,表示跨幾列
2. 跨行合併
屬性 : rowspan
取值 : 無單位的數值,表示跨幾行
注意 :
1. 跨行和跨列是單元格的操作,所以屬性是單元格td的
屬性
2. 一旦發生單元格合併,要刪除多餘的單元格:
跨列合併 :
影響當前行中單元格的數量,刪除當前行中多餘單元格
跨行合併 :
影響其後行中的單元格數量,需要刪除後面行中多餘的
單元格
4. 表格行分組
表格在瀏覽器中渲染時,會自動新增結構標籤
表格可以分為 thead tfoot tbody 三部分
1. thead
<thead></thead>標籤用來劃分表頭
表頭中可以有若干行組成
<thead>
<tr>
<td></td>
</tr>
</thead>
2. tfoot
<tfoot></tfoot>用於劃分表尾,由若干行組成
3. tbody
<tbody></tbody>表示表格主體,預設情況下,所有的行
會自動加入tbody
注意 :
如果涉及在HTML程式碼中完整書寫行分組標籤,建議按照
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
順序書寫
3. 表單
1. 用來接收使用者輸入的資料並且提交給伺服器
表單二要素
1. 表單元素
<form></form>
2. 表單控制元件
提供一系列視覺化的元件,能夠實現跟使用者的互動
例如 : 輸入框,按鈕,檔案上傳等
2. 表單元素
1. 標籤 :
<form></form>
用來提交資料到伺服器,表單控制元件都應書寫在form標籤中
2. 標籤屬性
1. method
用來設定資料提交方式,取值 get / post
預設是get請求方式提交
get 請求 :
1. 資料會以引數的形式拼接在url後面
2. 安全性較低
3. 最大提交資料2kb
post 請求:
1. 資料會打包在請求頭中,隱式提交
2. 安全性較高
3. 沒有資料大小限制
2. action
必填,指定資料的提交地址
3. enctype
指定資料的編碼方式,表單提供的編碼型別有 :
1. application/x-www-form-urlencoded(預設)
將表單中的資料轉換成字串格式(name=zhangsan
&pwd=123456),附加在url後面,使用?與url隔開
2. multipart/form-data
專門用來上傳特殊型別資料的,例如圖片,檔案,mp3
資料的提交方式必須是post
3. text/plain
資料以純文字形式編碼,不含任何控制元件和格式字元
3. 表單控制元件(重點)
1. 表單控制元件的資料只有放在表單元素中才可以被提交
2. 分類
1. 文字框和密碼框
1. 語法 :
文字框 <input type="text">
密碼框 <input type="password">
標籤屬性 :
1. type 指定控制元件型別
2. name 指定控制元件名稱,缺少的話無法提交
3. value 指定控制元件的值,可以通過JS獲取
4. maxlength 指定最大輸入字元數
5. placeholder 設定提示文字
6. autocomplete 設定是否自動補全
2. 單選按鈕和複選框
1. 語法 :
單選鈕 : <input type="radio">
複選框 : <input type="checkbox">
2. 標籤屬性
1. name :
1. 定義控制元件名稱
2. 一組的按鈕控制元件名稱必須保持一致,實現單選
2. value :
定義控制元件的值,最終將傳送給伺服器,按鈕的value
屬性必須指定
3. checked
表示選中當前按鈕
3. 特殊用法 label for id
將按鈕文字與按鈕控制元件繫結在一起,實現點選文字與
點選控制元件等價的效果
使用 :
1. 使用<label></label>標籤包括按鈕文字
2. 為按鈕控制元件新增id屬性,屬性值自定義
3. 為label標籤新增for屬性,屬性值與控制元件的id屬性
值保持一致,實現文字與控制元件繫結
3. 隱藏域和檔案選擇框
1. 隱藏域
需要提交給伺服器,但是不需要呈現給使用者的內容,
都可以使用隱藏域表示
例如 : 使用者id
語法 :
<input type="hidden" name="uid" value="0001">
name定義控制元件名稱,value設定控制元件的值,都是必填項
2. 檔案選擇框
1. 語法
<input type="file" name="">
2. 涉及二進位制資料提交,檔案,圖片,mp3
需要設定form enctype屬性,指定資料提交
方式為post
4. 下拉選擇框
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
5. 文字域,可以支援多行輸入
語法 :
<textarea name="uinfo"></textarea>
標籤屬性 :
cols : 指定文字域預設寬度,寬度是通過列數控制的
以英文字元數量為準,中文字元減半
rows : 指定文字域行數
特點 : 文字域的大小可以由使用者手動調整
6. 按鈕
分類 :
1. 提交按鈕 :
點選時,將表單資料傳送給伺服器
<input type="submit" value="">
value 屬性設定按鈕的顯示文字
2. 重置按鈕 :
點選時,會將表單資料還原成預設狀態
<input type="reset" value="">
3. 普通按鈕
<input type="button" value="">
繫結自定義事件
4. <button>按鈕顯示文字</button>
1. 按鈕標籤,可以在HTML中任意地方使用,需要繫結
自定義事件
2. 如果按鈕標籤放在form標籤中使用,預設具備提交
功能,等同submit