HTML 表格表單

文章目錄

表格

表單

表格

在 HTML 中，使用 table 標籤創建一個表格。表格也是一個塊級元素

基本語法

<tr>表示表格中的一行，有幾行就有幾個 <tr>
<td>在<tr>中需要使用 <td>來創建單元格，有幾個單元格就創建幾個 <td>
<th>可以使用<th>標籤來表示表頭的內容，它的用法和 <td> 一樣，不同的是有一個默認的樣式，加粗並且居中

<body>
	<!-- table 表示一個表格-->
    <table>
    	<!-- tr 代表一行 -->
        <tr>
        	<!-- td 代表一列 -->
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

合併單元格

rowspan 跨行合併單元格

<body>
    <table border="1">
        <tr>
            <td rowspan="2">我佔2行</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

colspan 跨列合併單元格

<body>
    <table border="1">
        <tr>
            <td colspan="2">我橫跨2列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

表格的樣式

border-spacing table 和 td 之間默認有一個距離，通過 border-spacing 屬性可以設置這個距離.

例如：
border-spacing:0px; 設置table和 td之間沒有距離。

<style>
    table {
        border: 1px solid deeppink;
        border-spacing: 0;
    }

    td {
        border: 1px solid deeppink;
    }
</style>

<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>

border-collapse可以用來設置用來設置表格的邊框合併

可選值：
collapse 表示合併

注意：設置了 border-collapse 以後，則 border-spacing 自動失效。

<style>
	table {
        border: 1px solid deeppink;
        border-spacing: 0;  /* 自動失效 */
        border-collapse: collapse;
 	}

    td {
        border: 1px solid deeppink;
    }
</style>

隔行變色的效果

<style>
	table {
        border: 1px solid deeppink;
        border-collapse: collapse;
 	}

    td {
        border: 1px solid deeppink;
    }
    /* 設置偶數行背景顏色 */
    tr:nth-child(even) {
    	background: deepskyblue;
    }
    /* 設置奇數行背景顏色 */
    tr:nth-child(even) {
    	background: yellowgreen;
    }
</style>
<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
        </tr>
        <tr>
            <td>第五行第一列</td>
            <td>第五行第二列</td>
            <td>第五行第三列</td>
        </tr>
        <tr>
            <td>第六行第一列</td>
            <td>第六行第二列</td>
            <td>第六行第三列</td>
        </tr>
        <tr>
            <td>第七行第一列</td>
            <td>第七行第二列</td>
            <td>第七行第三列</td>
        </tr>
    </table>
</body>

長表格

有一些情況下，表格非常的長。這時，就需要將表格分爲3個部分【表頭、主體、底部】。

在HTML中，提供了三個標籤：
<thead></thead> 中的內容永遠會顯示在表格的頭部。
<tbody></tbody> 中的額內容永遠都會顯示在表格的中間。
<tfoot><tfoot> 中的內容永遠都會顯示在表格的底部。

這三個標籤的作用就是用來區分表格的不同部分，他們都是table的子標籤，都需要直接寫到 table 中。
如果表格中沒有寫tbody 瀏覽器會自動在表格中添加 tbody，並且將所有的 tr放到 tbody 裏邊。
所以注意：tr 不是 table 的子元素，而是tbody的子元素。

<style>
    table {
        border: 1px solid deeppink;
        border-collapse: collapse;
    }

    td {
        border: 1px solid deeppink;
        text-align: center;  /* 設置文字居中 */
    }
</style>
<body>
    <table>
    	<!-- 表頭 -->
        <thead>
            <tr>
                <th colspan="4">編程語言</th>
            </tr>
        </thead>
        <!-- 表格主要內容 -->
        <tbody>
            <tr>
                <td>Java</td>
                <td>PHP</td>
                <td>Python</td>
                <td>web前端</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>Node.Js</td>
                <td>Vue.js</td>
                <td>React</td>
            </tr>
        </tbody>
        <!-- 底部 -->
        <tfoot>
            <tr>
                <td>世界上最優雅的語言是:</td>
                <td colspan="3">Python</td>
            </tr>
        </tfoot>
    </table>
</body>

表格佈局

以前表格更多的情況是對頁面進行佈局的，但是這種方式早已被CSS淘汰了。

表格的列數由td最多的那行決定。
表格可以嵌套，可以在 td中再放置一個table

表單

表單的作用就是將用戶的信息提交給遠程服務器的。比如：註冊、登錄、百度的搜索框

創建表單

使用 <form action="#"></form>標籤創建一個表單，form 標籤中必須指定一個 action 屬性，該屬性指向的是一個服務器的地址，當提交表單的時候，會提交到action屬性所對應的地址。

表單項

如果希望表單項中的內容提交到服務器中，還必須給表單項指定一個 name 屬性，表示提交內容的名字。

用戶填寫的信息會附在 URL 字符串的後邊，以查詢字符串的形式發送給服務器。
格式：
url地址?屬性名=屬性值&屬性名=屬性值&...

文本框

使用<input />來創建一個文本框，<input /> 是一個行內塊元素，可以通過 value 屬性設置文本框的默認值。
例如：

<body>
	<form action="#">
	    <input type="text" name="user-name" value="這是文本框的默認值">
	</form>
</body>

密碼框

使用 <input /> 創建一個密碼框，它的 type 屬性值是 password
例如：

<body>
    <form action="#">
        <input type="password" name="user-pwd" />
    </form>
</body>

按鈕

創建按鈕有2中方式

使用 <input /> 標籤來創建，它的 type 屬性有三個值分別是botton 普通按鈕、submit 提交按鈕、reset重置按鈕

<body>
    <form action="#">
        <input type="button" value="普通按鈕" />
        <input type="submit" value="提交按鈕" />
        <input type="reset" value="重置按鈕" />
    </form>
</body>

使用 <botton></botton>標籤來創建，它的 type 屬性有三個值分別是botton 普通按鈕、submit 提交按鈕、reset重置按鈕

<body>
    <form action="#">
        <button type="button">普通按鈕</button>
        <button type="submit">提交按鈕</button>
        <button type="reset">重置按鈕</button>
    </form>
</body>

單選按鈕

使用 <input /> 來創建一個單選按鈕，它的 type 屬性值使用 radio

– 單選按鈕通過 name 屬性進行分組，name 屬性相同的是一組按鈕。
– 像這種用戶選擇的但不需要用戶直接填寫內容的表單項，還必須指定一個 value 屬性，這樣被選中的表單項的 value 值，將會被提交到服務器。

<body>
    <form action="#">
        <input type="radio" name="gender" value="man"> 男
        <input type="radio" name="gender" value="woman"> 女
    </form>
</body>

多選框

使用 <input> 創建一個多選框，它的 type 屬性使用 checkbox ，用法和 單選按鈕類似。

<body>
    <form action="#">
        <input type="checkbox" name="hobby" value="lq" />籃球
        <input type="checkbox" name="hobby" value="zq" />籃球
        <input type="checkbox" name="hobby" value="ppq" />乒乓球
    </form>
</body>

下拉列表

使用 select 來創建一個下拉列表，在下拉列表中，使用 option 創建列表項。
下拉列表的 name 屬性需要指定給 select，value屬性指定給 option

<body>
    <form action="#">
        <select name="star">
            <option value="fbb">范冰冰</option>
            <option value="zbs">趙本山</option>
            <option value="fw">範偉</option>
        </select>
    </form>
</body>

可以通過在 option 中通過添加 selected = "selected"將選項設置爲默認選中狀態。

<body>
    <form action="#">
        <select name="star">
            <option value="fbb">范冰冰</option>
            <!-- 默認選中 趙本山 -->
            <option value="zbs" selected="selected">趙本山</option>
            <option value="fw">範偉</option>
        </select>
    </form>
</body>

當給下拉列表 select 添加一個 multiple="multiple" ，則下拉列表變爲一個多選的下拉列表。

<body>
    <form action="#">
        <select name="star" multiple="multiple">
            <option value="fbb">范冰冰</option>
            <option value="zbs">趙本山</option>
            <option value="fw">範偉</option>
        </select>
    </form>
</body>

可以通過 optgroup對選項進行分組，同一個optgroup中的選項是一組。在optgroup中可以通過 lable 屬性來指定分組的名字。

<body>
    <form action="#">
        <select name="star">
            <optgroup label="男孩">
                <option value="zs">張三</option>
                <option value="ls">李四</option>
                <option value="ww">王五</option>
            </optgroup>
            <optgroup label="女孩">
                <option value="zs">小紅</option>
                <option value="ls">小蘭</option>
                <option value="ww">小張</option>
            </optgroup>
        </select>
    </form>
</body>

文本域

使用 textarea 創建一個文本域。
cols 設置列數
rows 設置行數

<body>
    <form action="#">
        <textarea name="test" cols="30" rows="10"></textarea>
    </form>
</body>

label 標籤

<label></label> 標籤專門用來選中表單中的提示文字。
該標籤可以指定一個 for 屬性，該屬性的值需要指定一個表單項的 ID 值，這樣再選中文字的時候可以選擇相應的表單項。

<body>
    <form action="#">
        <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />籃球</label>
        <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label>
        <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label>
    </form>
</body>

表單項分組

在表單中可以使用 <fieldset></fieldset> 來對錶單項進行分組。可以將表單項中的同一組放到 <fieldset></fieldset> 中。
在<fieldset>中可以使用 <legend> 子標籤來指定組名。

<body>
    <form action="#">
        <fieldset>
            <legend>用戶信息</legend>
            用戶名:<input type="text">
            密碼:<input type="password">
        </fieldset>
        <fieldset>
            <legend>愛好</legend>
            <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />籃球</label>
            <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label>
            <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label>
        </fieldset>
        <fieldset>
            <legend>提交</legend>
            <button type="submit">提交按鈕</button>
            <button type="reset">重置按鈕</button>
            <button type="button">普通按鈕</button>
        </fieldset>
    </form>
</body>

文章目錄

表格

基本語法

合併單元格

表格的樣式

長表格

表格佈局

表單

創建表單

表單項

文本框

密碼框

按鈕

單選按鈕

多選框

下拉列表

文本域

label 標籤

表單項分組

DAPPER 事務 TRANSACTION

Java中線程的創建方式

使用 js 面向對象封裝一個 ajax

yarn 安裝 node-sass 依賴報錯

gulp 常用插件

CSS3 中新增的UI樣式

初步認識Vue.js

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結