細線表格

在表格標簽中向通過指定外邊距為0來實現(xiàn)細線表格是不靠譜的，其實它是將2條線合并為一條線，所以看上去很不舒服

細線表格的制作方式
1.給 table 標簽設置 bgcolor
2.給 tr 標簽設置 bgcolor
3.給 table 標簽設置 cellspacing="1px"

注意點
table 標簽和 tr 標簽以及 td 標簽都支持 bgcolor 屬性，但是以上內(nèi)容僅僅作為了解，因為樣式以后都是通過 CSS 來控制的

<table bgcolor="black" cellspacing="1px">
        <tr bgcolor="white">
                <td bgcolor="red">1.1</td>
                <td>1.2</td>
        <tr bgcolor="white">
                <td>2.1</td>
                <td>2.2</td>

表格標簽的其他標簽

表格標題

• 在表格標簽中提供了一個標簽專門用來設置表格的標題這個標簽叫做 caption， 只要將標題寫在 caption 標簽中，那么標題就會自動相對于表格的寬度居中
• caption 標簽的注意點
• caption 一定要寫在 table 標簽中，否則無效
• caption 一定要緊跟在 table 標簽后面
• 標題單元格標簽
• 在表格標簽中提供了一個專門用來存儲每一列的標題，這個標簽叫做 th 標簽，只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字
• 到此為止我們就發(fā)現(xiàn)其實表格中有兩種單元格，一種是 td，一種是 th， td 是專門用來存儲數(shù)據(jù)的，th 是專門用來存儲當前列的標題的

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
        <caption>
                <h2>
                        今日小說排行榜
                </h2>
        </caption>
        <tr bgcolor="#a9a9aa9">
                <th>排名</th>
                <th>關鍵詞</th>
                <th>趨勢</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相關鏈接</th>
        </tr>
        <tr bgcolor="white" align="center">
                <td>1</td>
                <td align="left">暴走大事件</td>
                <td>
                          ![](images/up.jpg)
                </td>
                <td>623557</td>
                <td>4088311</td>
                <td>
                          <a href="#">貼吧</a>
                          <a href="#">圖片</a>
                          <a href="#">百科</a>
                </td>
        </tr>

表格的結構

• 由于表格中存儲的數(shù)據(jù)比較復雜，為了便于管理和閱讀以及提升語義，我們可以對表格中存儲的數(shù)據(jù)進行分類

表格中存儲的數(shù)據(jù)可以分為4類

• 表格的標題
• 表格的表頭信息
• 表格的主體信息
• 表格的頁尾信息

表格的完整結構

<table>
    <caption>表格的標題</caption>
    <thead>
        <tr>
            <th>每一列的標題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tfoot>
</table>

caption 作用：指定表格的標題
thead 作用：指定表格的表頭信息
tbody 作用：指定表格的主體信息
tfoot 作用：指定表格的附加信息

注意點

• 如果我們沒有編寫 tbody，系統(tǒng)會給我們添加 tbody
• 如果指定了 thead 和 tfoot，那么在修改整個表格的高度時，thead 和 tfoot 有自己默認的高度，不會隨之表格的高度變化而變化

<table border="1px" width="500px" height="300px">
    <caption>學生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2</td>
            <td>30</td>
        </tr>
    </tfoot>
</table>

單元格的合并

• 水平方向上的單元格合并可以給 td 標簽添加一個 colspan 屬性，來指定把某一個單元格當作多個單元格來看待（水平方向）

• 例如 <td colspan="2"></td>
  含義：把當前單元格當作兩個單元格來看待

• 垂直方向上的單元格合并可以給 td 標簽設置一個 rowspan 屬性，來指定把某一個單元格當作多個單元格來看待（垂直方向）

• 例如 <td rowspan="2"></td>
  含義：把當前單元格當作兩個單元格來看待

注意點

• 由于把某一個單元格當作了多個單元格來看待，所以會多出一些單元格，所以需要刪掉一些單元格才能正常顯示
• 一定要記住單元格合并永遠都是向后或者向下合并，而不能向前或者向上合并

<table bgcolor="black" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<table bgcolor="black" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td colspan="2"></td>
        <!--<td></td>-->
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td colspan="2"></td>
        <!--<td></td>-->
    </tr>
</table>

表單標簽

什么是表單
表單就是專門用來收集用戶信息的
什么是表單元素
什么是元素
在 html 中 標簽/標記/元素都是指 HTML 中的標簽

• 例如：<a>標簽/<a>標記/a 元素

表單元素其實還是 HTML 中的一些標簽，只不過這些標簽比較特殊，在瀏覽器中所有的表單標簽都有特殊的外觀和默認的功能

• 表單的格式

<form>
        <表單元素>
</form>

常見的表單元素

• input 標簽，input 標簽有一個 type 屬性，這個屬性有很多類型的取值，取值的不同就決定了 input 標簽的功能和外觀不同

注意：表單元素一定要寫在表單中t

明文輸入框

賬號：<input type="text">

暗文輸入框

密碼：<input type="password">

給輸入框設置默認值

賬號：<input type="text" value="wxy">
密碼：<input type="password" value="123">

單選框

• 默認情況下單選框不會互斥，要想單選框互斥那么必須給每一個單選框標簽都設置一個 name 屬性，然后 name 屬性還必須設置相同的值
• 要想讓單選框默認選中某一個框，那么可以給 input 標簽添加一個 checked 屬性
• 在 html 中如果屬性的取值和屬性的名稱一樣，可以只寫一個，但是在 xhtml 中必須寫上取值，所以在企業(yè)開發(fā)中我們推薦不省略取值

性別
<input type="radio" name="xx" checked="checked">男

<input type="radio" name="xx">女

<input type="radio" name="xx">保密

多選框

愛好
<input type="checkbox">籃球

<input type="checkbox">足球

<input type="checkbox">棒球

<input type="checkbox" checked=checked>足浴

普通按鈕

• 可以通過 value 屬性來給按鈕指定標題
• 作用：配合 JS 完成一些操作
  <input type="button" value="我是按鈕">

圖片按鈕

• 作用：配合 JS 完成一些操作

<input type="image" src="images/register.jpg">

input type="image" src="image/register.jpg" 這里 image 有提交的功能
重置按鈕

• 作用:用于清空表單中已經(jīng)填寫好的數(shù)據(jù)
• 注意點：如果想要修改重置按鈕默認的按鈕標題可以通過 value 屬性來修改

<input type="reset">

提交按鈕

• 作用：將表單中已經(jīng)填寫好的數(shù)據(jù)提交到遠程服務器
• 注意點：要想把表單中填寫好的數(shù)據(jù)提交到遠端服務器必須具備兩個條件
• 需要給 form 表單添加一個 action 的屬性，通過這個 action 屬性指定需要提交到的服務器地址
• 需要給需要提交到服務器的表單元素添加一個 name 屬性

賬號：<input type="text" name="aa">
<input type="submit">

隱藏域

• 作用：配合提交按鈕將一些數(shù)據(jù)默默的悄悄咪咪的提交到服務器，Ajax相關

<input type="hidden" name="cc" value="kukuku">

label 標簽

• 默認情況下文字和輸入框是沒有關聯(lián)關系的，也就是說點擊文字輸入框不會聚焦，如果向點擊文字時讓對應的輸入框聚焦，那么就需要讓文字和輸入框進行綁定
• 要想讓輸入框和文字綁定在一起，那么我們可以使用 label 標簽
• 綁定格式：
• 將文字利用 label 標簽包裹起來
• 給輸入框添加一個 id 屬性
• 在 label 標簽中通過 for 屬性和輸入框中的 id 進行綁定即可

<label for="account">賬號：</label><input type="text" id="account">
 <label for="pwd">密碼:</label><input type="password" id="pwd"><br>

datalist 標簽

• 作用：給輸入框綁定待選項
• datalist 格式：

<datalist>
        <option>待選內(nèi)容</option>
</datalist>

• 如何給輸入框綁定待選項
• 搞一個輸入框
• 搞一個 datalist 列表
• 給 datalist 列表標簽添加一個 id
• 給輸入框添加一個 list 屬性，將 datalist 的 id 對應的值賦值給 list 屬性即可

<input type="text" list="cars">
<datalist id="cars">
        <option>寶馬</option>
        <option>奔馳</option>
        <option>奧迪</option>
        <option>路虎</option>
        <option>賓利</option>
</datalist>

H5新增的表單標簽

郵箱表單
可以自動校驗輸入的內(nèi)容是否符合郵箱的格式

郵箱：<input type="email">

URL表單
可以自動校驗輸入的內(nèi)容是否是 URL 地址

域名：<input type="url">

數(shù)字表單
輸入框中只能輸入數(shù)字

電話：<input type="number">

日歷表單
可以通過日歷來選擇日期

時間：<input type="date">

取色板表單
可以通過取色板來選擇顏色

顏色：<input type="color">

select 標簽

作用：用于定義下拉列表
格式：

<select>
        <optgroup label="分組名稱">
                <option>列表數(shù)據(jù)</option>
        </optgroup>
</select>

注意點

• 下拉列表不能輸入內(nèi)容，但是可以直接在列表中選擇內(nèi)容
• 可以通過給 option 標簽添加一個 selected 屬性來指定列表的默認值
• 可以通過給 option 標簽包裹一層 optgroup 標簽來給下拉列表中的數(shù)據(jù)分類

<select>
        <optgroup label="北京">
                <option selected="selected">朝陽區(qū)</option>
                <option>昌平區(qū)</option>
                <option>通州區(qū)</option>
        </optgroup>
        <optgroup label="廣州">
                <option>天河區(qū)</option>
                <option>越秀區(qū)</option>
                <option>黃浦區(qū)</option>
        </optgroup>
</select>

textarea 標簽

作用：定義一個多行輸入框
格式：

<textarea>
</textarea>

注意點

• 默認情況下輸入框可以無限換行
• 默認情況下輸入框有自己的寬度和高度
• 可以通過 cols 和 rows 來指定輸入框的寬度和高度，但是雖然指定了列數(shù)和行數(shù)，仍然可以無限往下輸入
• 默認情況下輸入框是可以手動拉伸的

fieldset 標簽

fieldset 標簽，可以給表單添加一個邊框，legend 標簽，可以給邊框指定一個標題

<fieldset>
        <legend>注冊界面</legend>
</fieldset>