HTML+CSS学习④

1.嵌套列表

列表之间可以相互嵌套形成嵌套列表。
示例：


图例中辽宁省和山东省位于第一层级，而底下的沈阳、济南等位于第二层级，如有需要，也可以添加第三第四第五层级。

2.表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题
注：它们之间有嵌套关系，要符合嵌套规范。
语义化标签：<tHead>、<tBody>、<tFood>
使用语义化标签会使程序更加符合Html规范，同时便于搜索引擎检索以及团队协作
，虽然看起来对程序没有作用，但是还是推荐在写程序的时候将其添加进去。
在一个Body中tBody是可以出现多次的，但是tHead、tFood只能出现一次。

示例：

3.表格属性

<border>：表格边框
<cellpadding>：单元格内的空间
<cellspacing>：单元格之内的空间
<rowspan>：合并行
<colsoan>：合并列
<align>：左右对齐方式
<valign>：上下对齐方式

border使用示例：



可以看到，表格有了边框。
cellpadding使用示例：


可以看到，表格内的距离变宽了。

cellspacing使用示例：


可以看到，表格之间的距离变宽了。

colspan使用示例：


"2"所代表的含义为包括这一列的两列。

可以看到，第一行的前两个单元格被合并在了一起。

rowspan使用示例：

align、valign的相关内容。
align:left、center、 right(依次分别是左、中、右)
valign:top、middle、bottom(依次分别是上、中、下)
示例：

4.表单标签

<form>：表单的最外层容器
<input>：标签用于搜索用户信息，根据不同的type属性值，知识不同的控件，如
输入框、密码框、复选框等。
imput(单标签)标签有一个type属性，决定是什么控件。

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

示例：

图中划线处为表单的提交地址或路径

复选框的相关扩展
checked：默认选择。
disabled：禁止选择。
示例：


输入框以及密码框的相关扩展：
placeholder：提示语。
示例：

<textarea>：多行文本文档
<select>、<option>：下拉菜单

txetarea使用示例：


注：cols是行宽，rows是列宽。

select使用示例：

注：select默认会选择第一个选项。
想要select默认选择其他选项，可在该选项前添加selected来实现。
示例：

<select size="">：限制下拉菜单的选项数，引号内为几就显示几个选项。
<select multiple>：表示多选（通过鼠标划动或ctrl进行多选）同样适用于<input type>
<label>：辅助表单

5.表格表单组合

表格表单之间可以相互组合形成数据展示效果
示例：

div与spawn表示标签

div（块）：
    div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，
    相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。
    即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层
    <div>，用来将网页分割成独立的、不同的部分，来实现王爷的规划和布局。

span（内联）：
    用来修饰文字，div与span都是没有任何默认样式的，必须配合CSS才行。

示例：


两者在看上去在输出上没有区别，其实是有的，其区别与CSS相关。