結構標記，表單，其他標記
阿新 • • 發佈：2019-02-01
1、結構標記
1、作用
增強標籤的語義性
2、結構標記
1、<header>元素
用作與網頁頭部，可能包含網頁標題、LOGO、導航資訊
該元素可以出現多次
等同於 <div id="header"></div>
<header>
<img src="logo.gif"/>
<h1>歡迎光臨。。。</h1>
</header>
2、<nav>元素
用於定義網頁導航
<nav>
<ul>
<li>首頁</li>
<li>母嬰用品</li>
<li>家居用品</li>
</ul>
</nav>
等同於：<div id="nav"></div>
3、<section>元素
section：小節
該元素標識網頁內容中的某一具體部分。定義文章章節、內容的樓層（購物類網站居多）
4、<article>元素
article:文章，內容 。。。
在論壇中表式某一具體帖子資訊、新聞類網站的某一具體新聞資訊、部落格類網站具體部落格條目、使用者評論等
5、<footer>元素
定義網頁底部資訊，多用於企業介紹、標識等部分內容
等同於 <div id="footer"></div>
6、<aside>元素
側邊欄，可以標識正規內容額外的部分內容
邊欄內容優先使用<aside>元素
2、表單
1、表單的作用
1、顯示、收集使用者資訊
2、將收集到的資訊提交給伺服器
2、表單語法
語法:<form></form>
注意：表單中的內容是可以提交給伺服器的，提交給伺服器的內容要放在表單元素裡
屬性:
action : 表單提交時的動作，提交地址,值為url,預設值為本頁
method : 提交方式，常用取值：get或post
get(預設值) : 明文提交，安全性較低，提交資料大小有限制，為2kb(根據瀏覽器決定)
post : 密文提交,安全性較高，無大小限制
注意：使用者登入、使用者註冊一律使用post提交
向伺服器索取資料時(搜尋引擎搜尋資料)，可以使用get，也可以使用post
enctype : 表單資料的編碼方式
取值 :
1、application/x-www-form-urlencoded(默
認)
可以將正常字元、特殊符號(&)提交給伺服器(不支援檔案上傳)
2、text/plain
可以將正常字元提交給伺服器
3、multipart/form-data
如果上傳檔案的時候，必須使用該值
name : 定義表單名稱
<form action="...." method="post/get">
....
</form>
3、表單元素
表單元素指的是出現在表單中能夠與使用者進行互動的控制元件
表單元素分類:
1、input元素
input元素是空標記 <input />
屬性:
type : 可以建立各種型別的input元素，比如：文字框、密碼框、單選按鈕、複選框
value : 當前表單元素的值，可以是提交給伺服器的值，也可以是預設顯示的初始值
name : 名稱，要提交給伺服器去使用
id : 唯一標識，只能在當前頁面使用，伺服器不能用
disabled : 禁用控制元件
1、文字框
type="text"
<input type="text" />
注意：如果type不寫，或不在指定值範圍內，那麼預設都為 text
<input />
<input type="abcdefg" />
2、密碼框
以密文的方式接收和顯示使用者的資料
type="password"
<input type="password" />
以上兩個控制元件的通用屬性:
1、name，id，value，
2、maxlength : 限制輸入的字元數
3、readonly : 設定控制元件為只讀
3、單選按鈕
type="radio"
<input type="radio" />
name : 定義名稱、分組
value : 值
checked : 預設被選中
4、複選框
能夠實現多選的控制元件
type="checkbox"
<input type="checkbox" />
name :定義名稱、分組
value :值
checked :預設被選中
5、按鈕
1、提交按鈕
功能固定化，用於將表單的資料提交給伺服器
語法:
type="submit"
<input type="submit" value="按鈕上的文字" />
2、重置按鈕
功能固定化，將表單控制元件值恢復到預設狀態
語法:
type="reset"
<input type="reset" value="文字" />
3、普通按鈕
沒有任何功能的標準按鈕，用於執行客戶端指令碼（自定義功能）
語法:
<input type="button" value="文字" />
6、檔案選擇框
<input type="file" />
注意:如果有檔案上傳的話，必須將表單的enctype更改為 multipart/form-data,同時method必須為post
7、隱藏域
<input type="hidden" name="" value="" />
使用場合：隱藏域在頁面中是看不到的，一般會配合後臺開發一起使用，從來不單獨使用。
2、get提交資料的格式
url?name=value&name1=value1&name2=value2 ...
...test.jsp?uName=SanFeng&uPass=Hello&gender=3
2、選項框
別名:下拉框、下拉列表
1、下拉列表
2、滾動列表
語法：
<select></select>
屬性:
name : 定義名稱
size : 大於1，則為滾動列表，否則，九十下拉列表
multiple : 設定多選
<option></option>
屬性:
value : 選項的值
selected : 預選中
<select name="province">
<option value="0451">黑龍江</option>
<option value="0431">吉林</option>
<option value="021">遼寧</option>
</select>
3、多行文字域
語法:
<textarea>預設顯示文字</textarea>
屬性:
name : 名稱
cols : 指定文字域的列數，一行能顯示多少個字元，表示寬度（以字元個數為單位）
rows : 指定文字域的行數，如果真是資料超出設定行數，將出現滾動條,表示高度
4、其他表單元素 - <label>
關聯文字 與 表單元素
語法:
<label>文字</label>
屬性:
for : 表示與該元素相關聯的控制元件的ID值
3、其他標記
1、浮動框架
在一個瀏覽器中同時顯示多個頁面文件
語法:
<iframe></iframe>
屬性:
src : 引入的網頁路徑(url)
width : 寬度
height : 高度
frameborder : 邊框
注意：儘可能的少使用 iframe 元素
2、摘要與細節
將一部分內容進行 收縮或展開 的動作
語法:
<details>
<summary>標題</summary>
顯示的內容
</details>
3、度量元素
語法:
<meter></meter>
屬性:
min : 度量範圍的最小值，預設為0
max : 度量範圍的最大值，預設為1
value : 當前的度量值，預設為0
4、時間元素
語法:
<time datetime="時間值">顯示的文字</time>
5、分組元素
<fieldset>
<legend></legend> 定義組標題
顯示內容
</fieldset>定義組
6、高亮文字顯示
以突出的方式顯示一段文字
語法：<mark>高亮顯示的文字</mark>
1、作用
增強標籤的語義性
2、結構標記
1、<header>元素
用作與網頁頭部，可能包含網頁標題、LOGO、導航資訊
該元素可以出現多次
等同於 <div id="header"></div>
<header>
<img src="logo.gif"/>
<h1>歡迎光臨。。。</h1>
</header>
2、<nav>元素
用於定義網頁導航
<nav>
<ul>
<li>首頁</li>
<li>母嬰用品</li>
<li>家居用品</li>
</ul>
</nav>
等同於：<div id="nav"></div>
3、<section>元素
section：小節
該元素標識網頁內容中的某一具體部分。定義文章章節、內容的樓層（購物類網站居多）
4、<article>元素
article:文章，內容 。。。
在論壇中表式某一具體帖子資訊、新聞類網站的某一具體新聞資訊、部落格類網站具體部落格條目、使用者評論等
5、<footer>元素
定義網頁底部資訊，多用於企業介紹、標識等部分內容
等同於 <div id="footer"></div>
6、<aside>元素
側邊欄，可以標識正規內容額外的部分內容
邊欄內容優先使用<aside>元素
2、表單
1、表單的作用
1、顯示、收集使用者資訊
2、將收集到的資訊提交給伺服器
2、表單語法
語法:<form></form>
注意：表單中的內容是可以提交給伺服器的，提交給伺服器的內容要放在表單元素裡
屬性:
action : 表單提交時的動作，提交地址,值為url,預設值為本頁
method : 提交方式，常用取值：get或post
get(預設值) : 明文提交，安全性較低，提交資料大小有限制，為2kb(根據瀏覽器決定)
post : 密文提交,安全性較高，無大小限制
注意：使用者登入、使用者註冊一律使用post提交
向伺服器索取資料時(搜尋引擎搜尋資料)，可以使用get，也可以使用post
enctype : 表單資料的編碼方式
取值 :
1、application/x-www-form-urlencoded(默
認)
可以將正常字元、特殊符號(&)提交給伺服器(不支援檔案上傳)
2、text/plain
可以將正常字元提交給伺服器
3、multipart/form-data
如果上傳檔案的時候，必須使用該值
name : 定義表單名稱
<form action="...." method="post/get">
....
</form>
3、表單元素
表單元素指的是出現在表單中能夠與使用者進行互動的控制元件
表單元素分類:
1、input元素
input元素是空標記 <input />
屬性:
type : 可以建立各種型別的input元素，比如：文字框、密碼框、單選按鈕、複選框
value : 當前表單元素的值，可以是提交給伺服器的值，也可以是預設顯示的初始值
name : 名稱，要提交給伺服器去使用
id : 唯一標識，只能在當前頁面使用，伺服器不能用
disabled : 禁用控制元件
1、文字框
type="text"
<input type="text" />
注意：如果type不寫，或不在指定值範圍內，那麼預設都為 text
<input />
<input type="abcdefg" />
2、密碼框
以密文的方式接收和顯示使用者的資料
type="password"
<input type="password" />
以上兩個控制元件的通用屬性:
1、name，id，value，
2、maxlength : 限制輸入的字元數
3、readonly : 設定控制元件為只讀
3、單選按鈕
type="radio"
<input type="radio" />
name : 定義名稱、分組
value : 值
checked : 預設被選中
4、複選框
能夠實現多選的控制元件
type="checkbox"
<input type="checkbox" />
name :定義名稱、分組
value :值
checked :預設被選中
5、按鈕
1、提交按鈕
功能固定化，用於將表單的資料提交給伺服器
語法:
type="submit"
<input type="submit" value="按鈕上的文字" />
2、重置按鈕
功能固定化，將表單控制元件值恢復到預設狀態
語法:
type="reset"
<input type="reset" value="文字" />
3、普通按鈕
沒有任何功能的標準按鈕，用於執行客戶端指令碼（自定義功能）
語法:
<input type="button" value="文字" />
6、檔案選擇框
<input type="file" />
注意:如果有檔案上傳的話，必須將表單的enctype更改為 multipart/form-data,同時method必須為post
7、隱藏域
<input type="hidden" name="" value="" />
使用場合：隱藏域在頁面中是看不到的，一般會配合後臺開發一起使用，從來不單獨使用。
2、get提交資料的格式
url?name=value&name1=value1&name2=value2 ...
...test.jsp?uName=SanFeng&uPass=Hello&gender=3
2、選項框
別名:下拉框、下拉列表
1、下拉列表
2、滾動列表
語法：
<select></select>
屬性:
name : 定義名稱
size : 大於1，則為滾動列表，否則，九十下拉列表
multiple : 設定多選
<option></option>
屬性:
value : 選項的值
selected : 預選中
<select name="province">
<option value="0451">黑龍江</option>
<option value="0431">吉林</option>
<option value="021">遼寧</option>
</select>
3、多行文字域
語法:
<textarea>預設顯示文字</textarea>
屬性:
name : 名稱
cols : 指定文字域的列數，一行能顯示多少個字元，表示寬度（以字元個數為單位）
rows : 指定文字域的行數，如果真是資料超出設定行數，將出現滾動條,表示高度
4、其他表單元素 - <label>
關聯文字 與 表單元素
語法:
<label>文字</label>
屬性:
for : 表示與該元素相關聯的控制元件的ID值
3、其他標記
1、浮動框架
在一個瀏覽器中同時顯示多個頁面文件
語法:
<iframe></iframe>
屬性:
src : 引入的網頁路徑(url)
width : 寬度
height : 高度
frameborder : 邊框
注意：儘可能的少使用 iframe 元素
2、摘要與細節
將一部分內容進行 收縮或展開 的動作
語法:
<details>
<summary>標題</summary>
顯示的內容
</details>
3、度量元素
語法:
<meter></meter>
屬性:
min : 度量範圍的最小值，預設為0
max : 度量範圍的最大值，預設為1
value : 當前的度量值，預設為0
4、時間元素
語法:
<time datetime="時間值">顯示的文字</time>
5、分組元素
<fieldset>
<legend></legend> 定義組標題
顯示內容
</fieldset>定義組
6、高亮文字顯示
以突出的方式顯示一段文字
語法：<mark>高亮顯示的文字</mark>