web

1. 表格標簽

1.1 表格的主要作用

表格主要是用于顯示、展示資料，因為它可以讓資料顯示的非常的規整，可讀性非常好，特別是后臺展示資料的時候，能夠熟練運用表格就顯得很重要，一個清爽簡約的表格能夠把繁雜的資料表現得很有條理，

總結：表格不是用來布局頁面的，而是用來展示資料的，

1.2 表格的基本語法

1.<table></table>是用于定義表格的標簽，

2.<tr></tr>標簽用于定義表格中的行，必須嵌套在<table></table>標簽中，

3.<td></td>用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，

4.字母td指表格資料，即資料單元格的內容，

1.3 表頭單元格標簽

一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的檔案內容加粗居中顯示，

<th>標簽表示HTML表格部分（table head的縮寫），

1.4 表格屬性

表格標簽這部分屬性我們實際開發我們不經常用，后面通過CSS來設定，

目的有2個：

1. 記住這些英語單詞，后面CSS會使用，

2. 直觀感受表格的外觀形態，

1.4.1 屬性標簽

注意：

1. 制作表格先書寫制作表格的結構，

2. 在書寫表格的屬性，

1.5 表格結構標簽

使用場景：因為表格可能很長，為了更好的表示表格的語意，可以將表格分割成表格頭部和表格主題兩大部分，

在表格標簽中，分別用：<thead>標簽表格的頭部區域、<tbody>標簽表格的主體區域，這樣可以更好的分清表格結構，

1.6 合并單元格

特殊情況下，可以把多個單元格合并成一個單元格，

1.6.1 合并單元格方式

跨行合并：rowspan="合并單元格的個數"

跨列合并：colspan="合并單元格的個數"

1.6.2 合并單元格三部曲

1. 先確定是跨行還是跨列合并，

2. 找到目標單元格，并寫上合并方式=合并的單元格數量，比如：<td colspan="2"></td>，

3. 洗掉多余的單元格，

2. 串列標簽

表格是用來顯示資料的，那么串列就是來布局的，

串列最大的特點就是整齊、整潔、有序，他作為布局會更加自由和方便，

根據使用場景不同，串列可以分為三大類：無序串列、有序串列和自定義串列，

2.1 無序串列

<ul>標簽表示HTML頁面中專案的無序串列，一般會以專案符號呈現串列項，而串列項使用<li>標簽定義，

無序串列的基本語法格式如下：

 注意：

1. 無序串列的各個串列之間沒有順序級別之分，是并列的，

2. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的，

3. <li>與</li>之間相當于一個容器，可以容納所有元素，

4. 無序串列會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設定，

2.2 有序串列

有序串列即為有排列的順序串列，其各個串列會按照一定的順序排列定義，

在HTML標簽中，<ol>標簽用于定義有序串列，串列排序以數字來顯示，并且使用<li>標簽來定義串列項，

有序串列的基本語法格式如下：

注意：

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標簽中輸入其他標簽或文字的做法是不被允許的，

2. <li>與</li>之間相當于一個容器，可以容納所有元素，

3. 有序串列會帶有自己樣式屬性，但在實際使用中，我們會使用CSS來設定，

2.3 自定義串列

自定義串列的使用場景：

自定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，

在HTML標簽中，<dl>標簽用于定義描述串列（或定義串列），該標簽會與<dt>(定義專案/名字)和<dd>（描述每一個專案/名字）一起使用，

其基本語法如下：

1. <dl></dl>里面只能包含<dt>和<dd>，

2. <dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>，

3. 表單標簽

3.1 為什么需要表單

使用表單目的是為了收集用戶資訊，

在我們網頁中，我們也需要跟用戶進行互動，手機用戶資料，此時就需要表單，

3.2 表單的組成

在HTML中，一個完整的表單通常是由表單域、表單控制元件（也成為表單元素）和提示資訊3個部分構成，

3.3 表單域

表單域是一個包含表單元素的區域，

在HTML標簽中，<form>標簽用于定義表單域，以實作用戶資訊的收集和傳遞，

<form>會把它范圍內的表單元素資訊交給服務器，

常用屬性：

注意：

1. 在我們寫表單之前，應該有個表單域把他們進行包含，

2. 表單域是form標簽，

3.4 表單控制元件

在表單域中可以定義各種表單元素，這些表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控制元件，

3.4.1 <input>表單元素

在英文單詞中，input是輸入的意思，而在表單元素中<input>標簽用于收集用戶的資訊，

在<input>標簽中，包含一個type屬性，根據不同的type屬性值，輸入欄位用有很多種形式（可以是文本欄位、復選框、掩碼后的檔案控制元件、單選按鈕、按鈕等），

注意：

1. <input />標簽為單標簽，

2. type屬性設定不同的屬性值用來指定不同的控制元件型別，

3.4.2 type型別的屬性值及其描述

除type屬性外，<input>標簽還有其他很多屬性，其常用屬性如下：

1. name和value是每個表單元素都有的屬性值，主要給后臺人員使用，

2. name表單元素的名字，要求單選按鈕個復選框要有相同的name值，

3. checked屬性主要是針對單選按鈕和復選框，主要作用一打開頁面，就可以默認選中某個表單元素，

4. maxlength是用戶可以在表單元素輸入的最大字符數，一般較少使用，

3.4.2 name屬性

頁面中的表單元素很多，name的主要作用就是用于區分不同的表單，

name屬性：當前input表單的名字，后臺可以通過這個name屬性找到這個表單，

radio（或者checked）如果是一組，我們必須給他們命名相同的名字，

3.4.3 <label>標簽

<label>標簽為input元素定義標注(標簽)，

<lable>標簽用于系結一個表單元素，當點擊<lable>標簽內文本時，瀏覽器就會自動將焦點（游標）轉到或者選擇對應的表單元素上，用來增加用戶體驗，

語法：

核心：<label>標簽的for屬性應當與相關屬性的id屬性形同，

3.4.4 <select>表單元素

使用場景：在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用<select>標簽空間定義下拉串列，

語法：

注意：

1. <select>中至少包含一對<option>，

2. 在<option>中定義selected=“selected”時，當前項即為默認選中項，

3.4.5 <textarea>表單元素

使用場景：當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽，

在表單元素中，<textarea>標簽是用于定義多行文本輸入的控制元件，

使用多行文本輸入控制元件，可以輸入更多的文字，該空間常見于留言板，評論，

語法：

注意：

1. 通過<textarea>標簽可以輕松地創建多行文本輸入框，

2. cols="每行中的字符數”，rows="顯示的行數”，我們在實際開發中并不會使用，都是用CSS來改變大小，

4. 查閱檔案

推薦的網址：

百度：http://www.baidu.com

W3C:http://www.w3school.com.cn/

MDN:https://developer.mozilla.org/zh-CN/

標籤：Html/Css

上一篇：初識web

下一篇：瀏覽器事件回圈相關概念及其理解