iframe

作用：iframe 元素會建立包含另外一個文件的內聯框架（即行內框架）。
優點：

● 用來載入速度較慢的內容（如廣告）

● 可以使指令碼並行下載

● 可以實現跨子域通訊

缺點：

● iframe 會阻塞主頁面的 onload 事件

● 無法被一些搜尋引擎索識別

● 會產生很多頁面，不容易管理

label 

<label> 標籤為 input 元素定義標註（標記）

作用：label標籤來定義表單控制元件的關係：當用戶選擇label標籤時，瀏覽器會自動將焦點轉到和label標籤相關的表單控制元件上。

使用方法：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

table

結構
thead、tbody

tr：行

th：表頭/td：行內每個元素

樣式

align=“center/left/right”

border=“1”或者“”

合併單元格

合併行：rowspan=“合併單元格個數”【跨行合併】

合併列：colspan=“合併單元格個數”【跨列合併】

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</
 
td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

表單標籤

input

type

text：文字

radio：單選

password：密碼

button：按鈕

checkbox：多選

file：檔案

image：圖片

submit：提交

reset：重置

hidden：隱藏

H5新增：number：數字；tel：電話；search：搜尋；email：郵箱；url：地址；date：年月日；time：時分秒；month：月；week：周；time：時間；color：生成顏色選擇表單；

range：範圍

屬性

name：input名稱【radio單選及checkbox多選的name要一致】

value：規定input裡面的值

checked：input自動聚焦

maxlength：規定輸入欄位的最大長度

H5新增表單屬性：required ；placeholder； autofocus ；autocomplete（=on/off） multiple； pattern=" " 裡面寫入想要的正則模式，例如手機號patte="^(+86)?\d{10}$" form=" form表

單的ID"

事件

click：點選事件

focus：聚焦事件

blur：失焦事件

change：失焦且value值改變

submit：form提交事件

input：每當input裡的輸入框內容發生變化都會觸發此事件

invalid：當驗證不通過時觸發此事件

  <input type="text" size="20" maxlength="20" value="文字輸入框" style="height: 30px; color:cyan">

  <input type="password" size="30" maxlength="20" value="">

  籃球<input type="radio" value="bb" name="bool">
  足球<input type="radio" value="fb" name="bool" checked>
  All<input type="radio" value="all" name="bool">

  北京<input type="checkbox" value="北京" name="city">
  上海<input type="checkbox" value="上海" name="city">
  深圳<input type="checkbox" value="深圳" name="city">
  香港<input type="checkbox" value="香港" name="city">
  澳門<input type="checkbox" value="澳門" name="city">

value屬性中的值用來設定使用者選中改專案後提交到資料庫中的值，name為複選框的名稱

  <input type="image" src="圖片URL" name="Yes" width="80" height="25" />
  <input type="image" src="圖片URL" name="No" width="80" height="25" />

這個功能是將圖片轉為圖片形式按鈕，其中src是連結圖片的路徑，name為圖片名稱，width為圖片寬度，height為圖片高度，當按下圖片按鈕會以name中的值向伺服器傳送資訊。

select：下拉表單元素

結構：option

屬性

selected=“selected”當前option預設選中

multiple=“multiple”支援多選option（按住ctrl）

size=“2”，展示兩個option選項

<select multiple="multiple" size="2">

  <option value ="volvo" selected>Volvo</option>

  <option value ="saab">Saab</option>

  <option value="opel">Opel</option>

  <option value="audi">Audi</option>

</select>

textarea：文字框

rows=“2”

cols=“2”

<textarea rows="10" cols="30">
我是一個文字框。
</textarea>

列表標籤

ul-li：無序列表

list-style-type：disc

ol-li：有序列表

list-style-type：decimal

dl-dt-dd：自定義列表

去除列表樣式：list-style： none

參考文章：

<table> - HTML（超文字標記語言） | MDN (mozilla.org)

(41條訊息) input標籤屬性詳解大全__吉爾伽的部落格-CSDN部落格_input屬性有哪些