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