HTML5學(xué)習(xí)（六）：基礎(chǔ)標(biāo)簽(二)

基礎(chǔ)標(biāo)簽

  • 表格標(biāo)簽

  • 作用：用來給數(shù)據(jù)添加表格語義的。其實表格是一種數(shù)據(jù)展現(xiàn)形式，數(shù)據(jù)量大的時候，表格這種展現(xiàn)形式被認(rèn)為是最清晰的一種展現(xiàn)形式。

  • 格式：
    <table boder=“100”> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

  • 屬性：
    寬度和高度屬性 ：可以給table標(biāo)簽和td標(biāo)簽使用

1.1表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來調(diào)整的。也可以通過table標(biāo)簽設(shè)置width/height屬性的方式來手動制定表格的寬度和高度
<able boder="100" width="500px" height="300px" align="center">
<tr valign="center">
<td width="150px" height="50px">1.1</td>
</tr>
<tr> 
</tr>
</table>

水平對齊和垂直對齊屬性：水平對齊可以給Table標(biāo)簽和Tr標(biāo)簽和Td標(biāo)簽使用;垂直標(biāo)簽只能給tr和td標(biāo)簽使用
外邊距和內(nèi)邊距的屬性：只能給Table標(biāo)簽使用.

 <able boder="100" width="500px" height="300px" align="center" cellspacing="12px" cellpadding="20px">
<tr valign="center">
<td width="150px" height="50px">1.1</td>
</tr>
</table>
  • 細(xì)線表格
  • 作用：就是讓表格只有一條線來展示
  • 格式：
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
  • caption 標(biāo)簽
    • 作用：讓標(biāo)簽內(nèi)部的內(nèi)容居中
    • 格式：
    <table bgcolor="black" cellspacing="2px" width="1000px" align="center">

<caption>
<h1>新聞大事件</h1>
</caption>
<tr bgcolor="#b8b8b8">
<th>中國崛起</th>
<th>中國崛起</th>
<th>中國崛起</th>
<th>中國崛起</th>
<th>中國崛起</th>
</tr>
</table>

- 表格的結(jié)構(gòu)
- 標(biāo)題
- 表頭信息
- 主題信息
- 頁尾信息

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

- 單元格合并
 - 水平方向的單元格合并

<table bgcolor="black" width="2px" height= "1000px" align="center">
<tr bgcolor="while">
<td colspan="2"></td> // 代表水平方向上的融合
<td></td>
<td></td>
</tr>
<tr bgcolor="while">
<td></td>
<td></td>
<td></td>
</tr>
</table>

 - 垂直方向的單元格合并

<table bgcolor="black" width="2px" height= "1000px" align="center">
<tr bgcolor="while">
<td rowspan="2"></td> // 代表垂直方向上的融合
<td></td>
<td></td>
</tr>
<tr bgcolor="while">
<td></td>
<td></td>
<td></td>
</tr>
</table>

 - 多單元格合并

<table bgcolor="black" cellpadding="10px" cellspacing="1px" width="300px" height="300px" align="center">
<tr bgcolor="white">
<td>345</td>
<td >345</td>
<td>345</td>
</tr>
<tr bgcolor="#adff2f">
<td >123</td>
<td colspan="2" rowspan="2">123</td>
</tr>
<tr bgcolor="#adff2f">
<td>153</td>
</tr>
<tr bgcolor="#adff2f">
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>


![多單元格合并](http://upload-images.jianshu.io/upload_images/642887-4a2a613b8cbbfeac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 表單標(biāo)簽
 - 作用：
   收集用戶信息
 - 元素：
  在HTML中標(biāo)簽就是元素，表單元素是比較特殊的標(biāo)簽。
 - 格式：

<form><表單元素></form>
表單元素
<input type=“text”>標(biāo)簽

 - 常用方式：

<form>
賬號：<input type="text">

密碼：<input type="password">
// name="gender" 起名字就是讓其只能選擇一個，checked表示默認(rèn)選中，type="radio"表示單選
性別：<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
// 多選
愛好<input type="checkbox" checked="checked">中國 <input type="checkbox">足球 <input type="checkbox">牛逼
<input type="button" value="點擊跳轉(zhuǎn)">
<input type="image" src="image/pic.png">
<input type="reset" value="清空">
<input type="number">
<input type="data">
<input type="color">
<input type="email">
</form>
//提交方式
<form action="http://www.lxweimin.com">
賬號：<input type="text">

密碼：<input type="password">

// 將表單中填好的數(shù)據(jù)，提交到服務(wù)器
<input type="submit" value="提交">
// 隱藏域，其實就是隱藏數(shù)據(jù)提交
<input type="hidden" name="cc" value="kuku">
</form>

- Lable標(biāo)簽
 - 格式

<form action="">
<lable for="account">賬號:</lable><input type="text" id="account">
<lable>賬號：<input type="text">
</lable>


</form>

- select標(biāo)簽
 - 作用：用于定義下拉列表
 - 格式：

<select>
<option>北京</option>
<option>北京</option>
<option>北京</option>
<option>北京</option>
</select>

- datalist標(biāo)簽
 - 作用：下拉選框，可以自己輸入內(nèi)容，同時還會幫助你篩選輸入內(nèi)容是否與下拉框有相同的。
 - 格式：

請輸入你的車型：<input type="text" list="cars">
<datalist id="cars">
<option >車型</option>
<option>徹心</option>
<option >輸電</option>
</datalist>

![image.png](http://upload-images.jianshu.io/upload_images/642887-d5696cf8f324c6f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  - 其他用法：

請輸入你的車型：<input type="text" list="cars">
<datalist id="cars">
<option value="123">車型</option>
<option value="345">徹心</option>
<option value="678">輸電</option>
</datalist>

![image.png](http://upload-images.jianshu.io/upload_images/642887-8ff0c71c0f2a374f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- select標(biāo)簽
 - 作用：生成一個下拉選項，但是不可以書寫內(nèi)容
 - 格式：

<select>
<option>朋友圈</option>
<option>支付寶</option>
<option>全資氣</option>
</select>

![image.png](http://upload-images.jianshu.io/upload_images/642887-884f9706464a3244.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  - 其他用法

<select>
<optgroup label="騰訊">
<option>深圳總部</option>
<option>北京總部</option>
<option>上海總部</option>
</optgroup>
<optgroup label="百度">
<option>北京百度</option>
<option>廣州百度</option>
<option>深圳百度</option>
</optgroup>
</select>

![image.png](http://upload-images.jianshu.io/upload_images/642887-81c5ee8d617cc9d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- textarea標(biāo)簽
 - 作用：定義多行的輸入框，默認(rèn)就有拉伸的功能
 - 格式:

<head>
<meta charset="UTF-8">
<title>datalist</title>
<style type="text/css">
textarea{ // 不讓它拉伸
resize: none;
}
</style>
<textarea cols="3" rows="3">
</textarea>

 - 注意點：雖然指定了行數(shù)烈數(shù)，但是還是可以無線輸入
   `&nbsp;` 這個用來空格

<form action="http://www.taobao.com">
<fieldset>
<legend>雷潮博客</legend>
姓名：<input value="name" type="text">

密碼：<input value="密碼" type="password">

<p>
性別:<input type="radio" name="sex" >男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>保密
</p>
<p>
個人簡介：<textarea></textarea>
</p>
<p>
<input type="submit" value="提交">???&nbsp <input type="reset" value="重置">
</p>
</fieldset>
</form>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容