Html5總結筆記1（標簽+屬性+事件）

1. 項目裏面一個分頁面的html文件結構基本如下：

<link href="...css">//每個分頁面都會加載的css文件

<div>

<section>

...//裏面又包含裏n個<div>

</section>

<link rel="stylesheet" href="...css">

<script type="text/javascript" src="..."></script>

</div>

2.每個<div>裏面就會有各式各樣的標簽

• <form></form>:一個表單
• <form>元素包含一個或多個如下的表單元素：

<input>:輸入框。該標簽沒有結束標簽。

<textarea></textarea>:文本框。比輸入框大一些，右下角有斜劃線。

<button type="button"></button>:按鈕。一般要寫 type="button"。

<select></select>:下拉列表。裏面會有<option value="..."></option>標簽,value屬性定義送往服務器的選項值。

<optgroup><optgroup>:把幾個<option>組合在一起。<optgroup lable="..."></optgroup>

<fieldset></fieldset>:將表單中的元素進行分組。並且可以用<legend>...</legend>框起來。

<lable></lable>:給<input>元素定義標註。一般用在input框前面的文字說明那裏。

• 還有一些其他常用標簽：

<table></table>:定義html表格。<table>標簽經常會包含其他標簽，如下。

<thead></thead>:定義表頭。

<tbody></tbody>:定義表格主體。

<tfoot></tfoot>:一般定義表格最後一行。

thead、tbody、tfoot裏面都會包含一個或者多個<tr></tr>。

<tr></tr>:表格的一行。

<td></td>:表格一行中的一格。

<ul></ul>:定義無序列表。下面會包含<li></li>，<li>標簽定義列表項目。

<span></span>:可以對一行文字中的幾個文字進行組合，進而對這幾個文字單獨操作。

目前經常用到的也就這些了。。後面繼續補充。

3.標簽內常用屬性總結。

• class 類。就是寫各種類，在用選擇器進行選擇元素的時候會用到
• style 樣式。裏面定義樣式，裏面會包含一些css屬性。經常用到的有width、height、position(常用的值有absolute、relative等，absolute是絕對位置，參照點是瀏覽器的左上角；relative是相對位置，參照點是父級的原始點)、border:1px solid #顏色、float、overflow(常用值有scroll、auto)、display、text-align、font-weight、font-size、line-height(設置以百分比計的行高)、margin(外邊框)、padding(內邊框)、vertical-align(設置元素垂直對齊)等等。
• name 名稱。與後臺數據庫中的字段相對應。
• id 。有點像類，但是id不能重復，class可以重復。jquery中選擇器進行選擇的時候選id用‘#’，選class用‘.’
• type 定義input框的類型。可選的有button、checkbox、file、hidden、image、password、radio、reset、submit、text。
• tabindex 規定元素的 tab 鍵控制次序。
• aria-hidden 殘障人士如失明的人使用識讀設備（自動讀取內容並自動播放出來），播放到帶此屬性的內容時會自動跳過，以免殘障人士混淆。
• value 定義input框的值。input框的type不一樣，value值也不一樣。
• placeholder 用來寫提示信息。在字段獲得焦點時消失。
• role 供殘障人士使用。主要是表單，比如輸入密碼，對於正常人可以用placaholder提示輸入密碼，但是對於殘障人士是無效的，這個時候就需要role了。

Html5總結筆記1