HTML基础(2)
学习目标：
学习HTML表格、列表、表单；
熟悉所涉及的标签、制作包含表格、列表、表单等元素的注册网页。
学习内容：
一、表格
1.介绍
不用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。
2.创建表格
<table>
<tr>
<td>单元格内容</td>
</tr>
</table>
table、tr、td 是创建表格的基本标签，缺一不可；th、caption是作为标题标签出现。
以下逐一进行介绍：
table标签：用于定义一个表格标签。
tr标签 ：用于定义表格中的行，必须嵌套在 table标签中。
td标签 ：用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。
表头单元格标签th：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签替代相应的单元格标签即可。
表格标题caption：通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。
3.表格属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格边框 | 像素值 |
| cellspacing | 设置单元格与边框间的空白间距 | 像素值 |
| cellpadding | 设置单元格内容与边框之间的空白间距 | 像素值 |
| width | 设置表格宽度 | 像素值 |
| height | 设置表格高度 | 像素值 |
| align | 设置表格在网页中的对齐方式 | left\center\right |
PS：平时开发时三个参数border、cellpadding、cellspacing 默认为 0
4.合并单元格
合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
5.表格划分标签
对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。
<table>
<thead>
<!--定义表格的头部。用来放标题之类的东西。
<thead> 内部必须拥有<tr> 标签！-->
</thead>
<tbody>
<!--用于定义表格的主体。放数据本体 。-->
</tbody>
<tfoot>
<!--放表格的脚注之类-->
</tfoot>
</table>
二、列表
列表容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。
列表最大的特点就是整齐 、整洁、 有序，跟表格类似，但是它可组合自由度会更高。
1.无序列表(ul)
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不对的。
2. 有序列表(ol)
<ol type="1">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
ol标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序；常用的type属性值分别为是1，a，A，i，I。
ol reversed="reversed"中的reversed属性能够让有序列表中的序列倒序排列。
3.自定义列表(dl)
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
...
</dl>
三、表单
HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
表单：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
1.input 标签
input 标签为单标签；type属性设置不同的属性值用来指定不同的控件类型；除了type属性还有别的属性。
| 属性 | 属性值 | 说明 |
|---|---|---|
| type | text\password\radio\checkbox\submit等 | 单行文本输入框\密码输入框\单选按钮\复选框\提交按钮等 |
| name | 用户自定义 | 控件名称 |
| value | 用户自定义 | input控件的默认文本值 |
| size | 正整数 | 页面显示宽度 |
| checked | checked | 控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
用户名:<input type="text" name="username" value="请输入用户名">
2.label 标签
label 标签为 input 元素定义标注（标签）。
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
3. textarea控件(文本域)
通过textarea控件可以轻松地创建多行文本输入框；cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用。
<textarea>
文本内容
</textarea>
4.select 下拉列表
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表；在option 中定义selected =" selected "时，当前项即为默认选中项。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
5.form表单域
通过form表单域收集用户信息传递给服务器；在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
<form action="xxx.php" method="xx" name="表单名称">
表单控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单名称以区分同一页面的多个表单 |
注册页面代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<h4>个人信息注册</h4>
<table width="600" align="left">
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"> <label for="nv">女</label>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<td>所在地区:</td>
<td><input type="text" value="北京"></td>
</tr>
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry">已婚
</td>
</tr>
<tr>
<td>学历:</td>
<td>
<input type="text" value="大学">
</td>
</tr>
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love"> 1
<input type="checkbox" name="love"> 2
<input type="checkbox" name="love" checked="checked"> 都喜欢
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺:</h5>
<ul>
<li>年满18</li>
<li>态度严肃</li>
<li>真诚寻找</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
页面效果：
学习路径：黑马程序员pink老师前端入门教程
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
