表格标签（table）
表格标签，用来处理、显示表格式数据。
创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
……
</tr>
……
</table>
在上面的语法中，包含三对HTML标签，分别是<table></table>、<tr></tr>、<td></td>。它们是创建表格的基本标签，缺一不可，下面对它们进行具体的解释：
- table 用于定义一个表格。
- tr 用于定义表格中的一行，必须嵌套在 table 标签中，在 table 中包含几对 tr ，就有几行表格。
- td 用于定义表格中的单元格，必须嵌套在 tr 标签中，一对 tr 中包含几对 td ，就表示该行中有多少列（或多少个单元格）。
表格属性
| 属性名 | 含义 | 属性值 |
|---|---|---|
| border | 设置表格的边框（默认border="0"无边框） | 像素值 |
| cellspacing | 设置单元格与单元格之间的空白间距 | 像素值（默认为2像素） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1像素） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
美观规则：三参为零，即border、cellspacing、cellpadding均为0
表头标签
表头单元格一般位于表格的第一行或第一列，其文本加粗居中。
设置表头非常简单，只需要用表头标签<th></th>替代响应的单元格标签<td></td>即可。
表格标题 caption
caption元素定义表格标题
<table>
<caption>我是表格标题</caption>
……
</table>
caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不再赘述），具体如下：
<thead></thead>：用于定义表格的头部。
必须位于<table></table>标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其它内容。
合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：将多个内容合并的时候，就会有多余的东西，把它删除。例如，把3个 td 合并成一个，那就多余了两个，需要删除。
公式：删除的个数 = 合并的个数 - 1
合并的顺序：先上 先左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="400" height="100" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3">123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td colspan="2">abc</td>
</tr>
</table>
</body>
</html>
表格总结
- 表格提供了HTML中定义表格式数据的方法。
- 表格中由行中的单元格组成
- 表格中没有列元素，列的个数取决于行的单元格个数
- 表格不要纠结于外观，那是CSS的作用
表单标签
表单是为了收集用户信息。
在我们网页中，因为我们也需要跟用户进行交互，收集用户资料，此时需要使用表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域 3个部分构成。
概念解释：
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传到后台服务器。
input 控件（重点）
<input />标签为单标签，type属性为其最基本的属性，其属性值有多种，用于指定不同的控件类型。除了type属性之外，<intput />标签还可以定义很多其它的属性，其常用属性如下表所示。
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| type | password | 密码输入框 |
| type | radio | 单选按钮 |
| type | checkbox | 复选框 |
| type | button | 普通按钮 |
| type | submit | 提交按钮 |
| type | reset | 重置按钮 |
| type | image | 图像形式的提交按钮 |
| type | file | 文件域 |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控制允许输入的最多字符数 |
label 标签（理解）
label标签为input元素定义标注（标签）。
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。
<label>用户名：<input type="text"/></label>
如何绑定元素呢？
for属性规定label与那个表单元素绑定。for属性值为表单元素的id值。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"/>
textarea 控件（文本域）
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件，可以轻松的创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
使用select标签定义下拉菜单的基本语法格式如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
……
</select>
注意：
1.<select></select>中至少应包含一对<option></option>
2.在option中定义selected=“selected”，当前项即为默认选中项。
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
1.Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定，接收并处理表单数据的服务器程序的URL地址。
2.method
用于设置表单数据的提交方式，其取值为get或post。
3.name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意：
每个表单都应该有自己的表单域。
CSS初始（全称及功能）
CSS：Cascading Style Sheets
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用户设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版面的布局等显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以根据不同的浏览器设置不同的样式。
引入CSS样式表（书写位置）
CSS可以写到哪个位置？是不是一定写到HTML文件里面呢？
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把它放在HTML文档的任何地方。
type="text/CSS"在HTML5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。
行内样式表（内联样式）
内联样式，又有人称为行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet"/>
</head>
注意：link是个单标签
该语法中，link标签需要放在head头标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为"text/CSS"，表示链接的文件为外部的CSS样式表
rel：表示当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/05style.css" type="text/CSS" rel="stylesheet"/>
</head>
<body>
<div>宫保鸡丁</div>
<div>糖醋里脊</div>
<div>鱼香肉丝</div>
</body>
</html>
div{
color:red;
}
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现样式和结构相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先要了解CSS样式规则，具体格式如下：
在上面的样式规则中：
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以键值对的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文":“连接。
5.多个键值对之间（包括最后一个键值对后面）用英文”;"进行区分。
可以用段落或表格的对齐演示。
选择器（重点）
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
CSS基础选择器
标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 或
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时，这也是它的缺点，不能设计差异化样式。
类选择器
口诀：上面点声明，下面class调用
类选择器使用"."（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
下面调用：
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用"_"下划线来命名CSS选择器。
输入的时候少按一个shift键
浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名使用"_"）
3.不要纯数字、中文等命名，尽量使用英文字母来表示。
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
