建議學習時長：90分鐘
學習方式：深入
學習目標
- 知道 超鏈接，標題，段落，圖片，列表，標簽，表格，表單相關（文本輸入框，單選框，多選框，下拉框）的標簽怎么寫。
- 知道注釋怎么寫。
詳細介紹
鏈接
鏈接由 <a>定義。
常用屬性
-
href鏈接地址，常見的鏈接地址有如下幾種https://gusouk.com//a.html-
#aaa頁面滾動至name或id為aaa的地方 javascript:void(0);-
mailto:nowhere@mozilla.org郵件鏈接 -
tel:+491570156電話鏈接
-
title提示內容 -
target鏈接的文檔在何處顯示- 默認在當前頁顯示
-
_blank在新窗口顯示 - 值若為iframe的name值一致，則在iframe中打開
前端在做頁面寫鏈接地址時，若不知道地址，可將href設置成###。若點擊a不跳轉頁面，而是綁定點擊事件,則href設置為javascript:void(0);。
標題
1號到6號標題分別由 <h1>到<h6>定義。
段落
段落是由 <p> 標簽定義。
圖片
圖像由 <img> 標簽定義。常用屬性
-
src圖片地址 -
alt加載圖片失敗時，顯示的文字
列表
有序列表由<ol>定義，列表的條目由<li>定義。如
<h3>最熱單曲</h3>
<ol>
<li>時間都去哪兒了</li>
<li>泡沫</li>
<li>卷珠簾</li>
</ol>
無序列表由<ul>定義，列表的條目由<li>定義。如
<h3>a的常見屬性包括</h3>
<ul>
<li>href</li>
<li>title</li>
<li>name</li>
<li>target</li>
</ul>
標簽
標簽由<label>定義。常見屬性
for
表格
表格由<table>元素定義。一個普通的表格，如下：
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>路飛</td>
<td>男</td>
</tr>
<tr>
<td>索隆</td>
<td>男</td>
</tr>
<tr>
<td>香吉士</td>
<td>男</td>
</tr>
<tr>
<!-- 跨兩列 -->
<td colspan="2"></td>
</tr>
<tr>
<!-- 跨兩行 -->
<td rowspan="2"></td>
</tr>
</tbody>
</table>
表單
表單由<form>來定義。它用于把用戶輸入的數據提交到后臺。常見屬性
-
action提交地址。 -
method提交方式。默認為GET
點擊提交按鈕時，表單進行提交。
提交的內容為表單元素的name屬性的值與用戶輸入的對應元素的值。
一個普通的表單
<form action="" method="POST">
<div>
<label for="">名稱</label>
<input name="name" type="text" placeholder="請輸入名稱">
</div>
<div>
<label for="">介紹</label>
<textarea name="des"></textarea>
</div>
<button type="reset">重置</button>
<button type="submit">提交</button>
</form>
常見的表單輸入元素有：
- 文本框
<input type="text">常見屬性placeholdervalue-
maxlength最大長度
- 文本域
<textarea></textarea>和文本框相比，可輸入更多文字。常見屬性placeholdervalue-
maxlength最大長度IE9(不包括)以下不支持
- 單選框
<input type="radio" name="gendar">。其中name的值一樣的單選框只有一個能被選中 - 復選框
<input type="checkbox" name="gendar"> - 下拉選擇框
<select><option value="1">蘋果</option><option value="2">橘子</option></select> - 數字框
<input type="number">。注意，其不支持maxlength屬性-
min最小值 -
max最大值
-
- 提交按鈕
<button type="submit">提交</button>點擊 - 重置按鈕
<button type="reset">重置</button>
注意：為了能讓后臺辨別不同的表單元素，表單元素輸入必須加name屬性。
div
<div>組合文檔中的塊級元素
span
<span>組合文檔中的行內元素
注釋
注釋由
<!-- 注釋內容 -->
來定義。
更多學習資源
練習題
1 寫下 百度首頁 的 HTML。
2 用戶調查的頁面的HTML。調查的內容包括：
- 姓名
- 性別 (單選按鈕)
- 所在國家 (下拉框)
- 年齡
- 愛好 可多選 (復選框)
- 自我介紹
3 用 table 元素做一個課程表。
