## 列表标签
### 1、无序列表`<ul>`,无序列表中的每一项是`<li>`
```html
<ul>
<li>默认1</li>
<li>默认2</li>
<li>默认3</li>
</ul>
```
**属性:**
- `type="属性值"`。属性值: `disc`(实心原点,默认),`square`(实心方点),`circle`(空心圆)。
列表之间是可以**嵌套**的。代码:
```html
<ul>
<li><b>北京市</b>
<ul>
<li>海淀区</li>
</ul>
</li>
</ul>
```
**li里面什么都能放,甚至可以再放一个ul**。
```css
list-style-position: inside /* 给 ul 设置这个属性后,将小圆点包含在 li 元素的内部 */
```
### 2、有序列表`<ol>`
**属性:**
- `type="属性值"`。属性值:1(阿拉伯数字,默认)、a、A、i、I。结合`start`属性表示`从几开始`。
```html
<ol type="1">
<li>呵呵</li>
</ol>
<ol type="i" start="4">
<li>哈哈</li>
</ol>
```
### 3、定义列表`<dl>`
备注:dt、dd只能在dl里面
```html
<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行</a>
</dd>
</dl>
```
## 表格标签:`<table>`表示。
一个表格`<table>`是由每行`<tr>`组成的,每行是由每个单元格`<td>`组成的。
```html
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
```
例如,3行4列的单元格:3个tr 4个td
**`<table>`的属性:** (记觉得重要的)
- `border`:边框。像素为单位。
- `style="border-collapse:collapse;"`:单元格的线和表格的边框线合并(表格的两边框合并为一条)
- `bordercolor`:表格的边框颜色。
- `cellpadding`:单元格内容到边的距离,像素为单位。设置属性`dir="rtl"`,指的是内容到右边那条线的距离。
- `cellspacing`:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0
- `bgcolor="#99cc66"`:表格的背景颜色。
- `background="路径src/..."`:背景图片。
- `bordercolorlight`:表格的上、左边框,以及单元格的右、下边框的颜色
- `bordercolordark`:表格的右、下边框,以及单元格的上、左的边框的颜色
- `dir`:公有属性,单元格内容的排列方式(direction)。 可以 取值:`ltr`:从左到右(left to right,默认),`rtl`:从右到左(right to left)
单元格带边框的效果:
```css
style="border-collapse:collapse;"
```
### `<tr>`:行
**属性:**
- `dir`:公有属性,设置这一行单元格内容的排列方式。可以取值:
- `ltr`:从左到右(left to right,默认)
- `rtl`:从右到左(right to left)
- `align="center"`:一行的内容水平居中显示,取值:left、center、right
- `valign="center"`:一行的内容垂直居中,取值:top、middle、bottom
### `<td>`:单元格
**属性:**
- `align`:内容的横向对齐方式。属性值:left right center。
- `valign`:内容的纵向对齐方式。属性值:top middle bottom
- `background`:设置这个单元格的背景图片。
### 单元格的合并
单元格的属性:
- `colspan`:横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
- `rowspan`:纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
### `<th>`:加粗的单元格。相当于`<td>` + `<b>`
### `<caption>`:表格的标题。使用时和`tr`标签并列
- 属性:`align`,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom
## 表单标签:`<form>`表示,用于与服务器的交互。
**属性:**
- `name`:表单的名称,用于JS来操作或控制表单时使用;
- `id`:表单的名称,用于JS来操作或控制表单时使用;
- `action`:指定表单数据的处理程序,一般是PHP,如:action=“login.php”
- `method`:表单数据的提交方式,一般取值:get(默认)和post
注意:表单和表格嵌套时,是在`<form>`标记中套`<table>`标记。
### `<input>`:输入标签(文本框)'用于接收用户输入。
```html
<input type="text" />
```
**属性:**
- **`type="属性值"`**:文本类型。属性值可以是:
- `text`(默认)
- `password`:密码类型
- `radio`:单选按钮,如果想互斥,必须要有相同的name属性。
- `checkbox`:多选按钮,**name 属性值相同的按钮**作为一组进行选择。
- `checked`:将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时,可以用这个属性。
- `hidden`:隐藏框,在表单中包含不希望用户看见的信息
- `button`:普通按钮,结合js代码进行使用。
- `submit`:提交按钮,传送当前表单的数据给服务器或其他程序处理。
- `reset`:重置按钮,清空当前表单的内容,并设置为最初的默认值
- `image`:图片按钮。
- `file`:文件选择框。
- **`value="内容"`**:文本框里的默认内容(已经被填好了的)
- `size="50"`:表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
注意**size属性值的单位不是像素哦**。
- `readonly`:文本框只读,不能编辑。
- `disabled`:文本框只读,不能编辑,光标点不进去。属性值可以不写。
```html
<form>
姓名:<input value="呵呵" >逗比<br>
昵称:<input value="哈哈" readonly=""><br>
名字:<input type="text" value="name" disabled=""><br>
密码:<input type="password" value="pwd" size="50"><br>
性别:<input type="radio" name="gender" id="radio1" value="male" checked="">男
<input type="radio" name="gender" id="radio2" value="female" >女<br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="button" value="普通按钮"><br>
<input type="image" value="图片按钮1"><br>
<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
```
### `<select>`:下拉列表标签
**属性:**
- `multiple`:可以对下拉列表中的选项进行多选。可以写成 `multiple=""`,`multiple="multiple"`。
- `size="3"`:如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。
- `<option>`标签的属性:`selected`:预选中。没有属性值。
```html
<form>
<select>
<option>小学</option>
<option selected="">研究生</option>
</select>
<br><br><br>
<select size="3">
<option>高中</option>
<option>研究生</option>
</select>
<br><br><br>
<select multiple="">
<option>小学</option>
<option selected="">大学</option>
<option>研究生</option>
</select>
<br><br><br>
</form>
```
### `<textarea>`标签:多行文本输入框
**属性:**
- `rows="4"`:指定文本区域的行数。
- `cols="20"`:指定文本区域的列数。
- `readonly`:只读。
```html
<form>
<textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
</form>
```
### `<label>`标签
```html
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
```
```html
<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>
```