【Vichy的学习日记 #2】html基础（2）

*表格标签

1. 主要作用：
展示，显示数据
2. 基本语法：

<table>
        <tr>
            <td>单元格内的文字</td>
        </tr>
</table>

3. 表头单元格<th>
4. 表头属性（后通过CSS设置）

属性名	属性值	描述
align	left、center、righ	规定表格相对周围元素的对齐方式
border	1或" "	规定表格单元是否拥有边框，默认为""，表示没有表格
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

5. 表格结构标签
头部区域<thead>
主体区域<tbody>
6. 合并单元格
（1）合并方式
跨行合并：rowspan=“合并个数”
跨列合并：colspan=“合并个数”
（2）目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
（3）步骤
a.确认合并方式：跨行/跨列
b.合并方式=合并的单元格数量
例:<td colspan="2"></td>
c.删除多余的单元格

*列表

用来布局：整齐整洁有序
1.无序列表<ul>

<ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
</ul>

（1）无排序，并列
（2）<ul></ul>中只能嵌套<li></li>
（3）<li></li>之间可以容纳所有元素
（4）带有自己的样式属性
2.有序列表<ol>

<ol>
     <li>1</li>
     <li>1</li>
     <li>1</li>
</ol>

（1）<ol></ol>中只能嵌套<li></li>
（2）<li></li>之间可以容纳所有元素
（3）带有自己的样式属性
3.自定义列表
对术语名词进行解释操作

<dl>
     <dt>1</dt>
     <dd>2</dd>
     <dd>2</dd>
</dl>

（1）<dl></dl>中只能嵌套<dt></dt><dd></dd>
（2）<dt></dt><dd></dd>无个数限制，通常为一个<dl></dl>对多个<dd></dd>

*表单

1.目的：
收集用户信息
2.构成：

1. 表单域
2. 表单控制
3. 表单信息

3.表单域：
一个包含表单元素的区域
定义：<form>把它范围内的表单元素信息提交给服务器
例：

<form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

4.表单控制（元素）

1. input：输入表单元素
   例：

<input type="属性值"/>

（单标签，设置不同的属性值来指定不同的控件类型）
type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下通过Javascript启动脚本）
check	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

2. <label>为input元素定义标准标签
   可用于绑定一个表单元素
   例：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

5.select标签
使用场景：多个选项供用户选择

<select>
        <option>A</option>
        <option>B</option>
        <option>C</option>
</select>

至少存在一对<option></option>
<option>中设定selected = "selected"时，默认选中
6.textarea文本域
使用场景：用户输入的内容较多时，尤其是留言板，评论
<textarea>定义多行文本输入，
例：

<textarea rows="3" cols="20">
        文本内容
</textarea>

cols=每行字符数
rows=显示的行数