HTML5学习（六）：基础标签(二)

基础标签

• 表格标签

• 作用：用来给数据添加表格语义的。其实表格是一种数据展现形式，数据量大的时候，表格这种展现形式被认为是最清晰的一种展现形式。

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

• 属性：
  宽度和高度属性 ：可以给table标签和td标签使用

1.1表格的宽度和高度默认是按照内容的尺寸来调整的。也可以通过table标签设置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标签和Tr标签和Td标签使用;垂直标签只能给tr和td标签使用
外边距和内边距的属性：只能给Table标签使用.

 <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>

• 细线表格
• 作用：就是让表格只有一条线来展示
• 格式：

<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 标签
  • 作用：让标签内部的内容居中
  • 格式：

  <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>

- 表格的结构
- 标题
- 表头信息
- 主题信息
- 页尾信息

<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列标题</th>
</tr>
</thead>
<tbody>
<tr>
<th>数据</th>
</tr>
</tbody>
<tfooty>
<tr>
<th>表尾数据</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>

![多单元格合并](https://img.haomeiwen.com/i642887/4a2a613b8cbbfeac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 表单标签
 - 作用：
   收集用户信息
 - 元素：
  在HTML中标签就是元素，表单元素是比较特殊的标签。
 - 格式：

<form><表单元素></form>
表单元素
<input type=“text”>标签

 - 常用方式：

<form>
账号：<input type="text">

密码：<input type="password">
// name="gender" 起名字就是让其只能选择一个，checked表示默认选中，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="点击跳转">
<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.jianshu.com">
账号：<input type="text">

密码：<input type="password">

// 将表单中填好的数据，提交到服务器
<input type="submit" value="提交">
// 隐藏域，其实就是隐藏数据提交
<input type="hidden" name="cc" value="kuku">
</form>

- Lable标签
 - 格式

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


</form>

- select标签
 - 作用：用于定义下拉列表
 - 格式：

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

- datalist标签
 - 作用：下拉选框，可以自己输入内容，同时还会帮助你筛选输入内容是否与下拉框有相同的。
 - 格式：

请输入你的车型：<input type="text" list="cars">
<datalist id="cars">
<option >车型</option>
<option>彻心</option>
<option >输电</option>
</datalist>

![image.png](https://img.haomeiwen.com/i642887/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](https://img.haomeiwen.com/i642887/8ff0c71c0f2a374f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- select标签
 - 作用：生成一个下拉选项，但是不可以书写内容
 - 格式：

<select>
<option>朋友圈</option>
<option>支付宝</option>
<option>全资气</option>
</select>

![image.png](https://img.haomeiwen.com/i642887/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](https://img.haomeiwen.com/i642887/81c5ee8d617cc9d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- textarea标签
 - 作用：定义多行的输入框，默认就有拉伸的功能
 - 格式:

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

 - 注意点：虽然指定了行数烈数，但是还是可以无线输入
   ` ` 这个用来空格

<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>