表格，表单,CSS基础，选择器的权重*选择器的权重

#表格，表单,CSS基础，选择器的权重*选择器的权重

表格

结构标签

table 声明表格
tr 行
td 列，每一个单元格
表格的基本结构：

  <table>
       <tr>
       <td></td>
       <td></td>
       </tr>
    </table>

表格的属性
width 宽度
height 高度
border 边框
cellspacing 单元格之间的间隙
cell padding 单元格与内容之间的距离
align=“left/right/center” 表格水平对齐方式：左/右/中
valign=“top/bottom/middle"垂直对齐方式：顶部/底部/中间
colspan=” 合并列数"合并列
rowspan="合并行数"合并行
高级表格
表格的结构
table
caption
tr
th
td
表格的标题
caption
标题列
th
表格的数据行分组
thead
tbody
tfoot
数据列分组
colgroup
col
table的属性
css属性
合并表格相邻的边框
border-collapse :collapse
设置单元格和单元格的间距
border-spacing
设置表格无内容隐藏
empty-cells:hide 隐藏
show 默认值
注意：转义也是内容，键盘打的空格不识别
加快表格的运行速度，设置行和列的算法（设置单元格的宽 ）
table-layout:
fixed 固定单元格的宽度
auto 宽度由内容决定（默认）
table的html的属性
rules
cols 列分割线
rows 行分割线
all 行和列
groups 数据列的分割线
数据列分组（需要配合表格rules="groups"一起使用）

 <table rules="groups"> 

colgroup 可以设置多个数据列分组
col 只能设置一个数据列分组

 <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <col span="1">
    <col span="1">

表单的所有标签
块元素
form
fieldset
legend
option
内联
label
input
select
textarea
行内块
input
select
textarea
自带边框线
hr
fieldset
textarea
input

表单

<form></form>

属性：
1.name 表单名称
2.method 设置数据的提交方式：get&post
get 提交数据2kb
post 提交数据(推荐使用 安全性更高) 没有数据大小限制
3.action 提交数据地址
表单控件

<input />

input标签有type属性，属性值不同，显示的类型则不同
type属性值
1. text 文本框
2. password 密码框
3. submit 提交按钮
4. button 空按钮
5. checkbox 多选框，多选按钮
6.radio 单选框，单选按钮 实现此功能要加 name属性，并且属性值要相同
input的属性
1. checked 默认选中，适用于多选和单选
2. value 设置框或者按钮的内容，内容占位
3. placeholder 提示信息（h5的属性），内容不占位
4.maxlength 控制用户输入的字符数量
5.name 如果文本框提交数据，必须设置name，使访问的网页可以读取.实现单选功能加上name属性，并且属性值要相同

---

### 高级表单 表单字段集，对表单元素进行分组和嵌套filedset（自带边框线) **表单字段集的标题** legend **结构** 个人信息 **表单的提示信息（可以绑定表单控件）** label 姓名 上传文件 ``` ``` **下拉列表**

select和option
下拉列表的属性
seleted和option
下拉列表的属性
selected 下拉列表的默认选中

<select>
<option disabled selected>--请您选择地址--</option>
 <option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
 </select>

文本域
textarea
属性
取消文本域的拖拽
resize ：none

 <textarea name="" id=""></textarea>

表单元素的全局属性
取消表单元素点击激活边框线的样式(css声明)
outline：none
disabled 禁用，适用于所有的表单元素（标签的属性）
不能点击也不能使用

CSS

.CSS(cascading style sheet)层叠样式表，用于控制网页样式

CSS语法：

由两部分组成：选择符，声明。
声明包括：属性和属性值
选择符{属性：属性值；属性：属性值}
选择符说明：CSS选择符（选择器），表示要定义样式的对象（标签名字），可以是本身也可以是一类元素的名字
注意
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5）在书写样式过程中，空格、换行等操作不影响属性显示。

CSS样式表

共分四种

1.内部样式表

语法：
<style type="text/css">
       css语句
       </style>

2.外部样式表

语法：
<link rel="stylesheet" type="text/css" href="目标文件的路径" />

3.导入外部样式表

<style type="text/css">
import url("目标文件的路径以及文件名全称");
</style>

4.内联样式表

<标签 style="属性1:值1;属性2:值2;......"></标签>

link和import的区别
1.link功能更多,可以定义RSS,REL等,import只能加载css
2.link会同时加载CSS,import后加载
3.link兼容性更好
4.link支持js的dom，@import不支持js
样式表选择小结
写大型项目，用外部样式表，写小练习，用内部，（后期需要提升权重，可能会用内联）

CSS权重

对同一元素设置相同属性,但是属性值不同,谁的权重高听谁的

样式表的权重

内联样式权重最高,内部和外部权重相同,谁的顺序在下面,则听谁的

选择器

css选择器:方便选择设置样式的元素
1.id选择器:名字不能重复,一个名字只能用一次
2.class选择器:名字可以重复使用
高级用法:class可以设置多个名字(空格隔开)

<div class="box2 font">老三</div>

3.通配符选择器: * 可以选择网页的所有标签
*{
margin:0;
外边距清空
padding:0;
内边距清空
}
4.标记选择器: 标签名选择相同的标签
5.群组选择器：可以对不同的内容设置相同的样式

#header,.nav,div{}

6.包含选择器
父子选择器(>)

<style>
div>span{}
</style>
<div>
		<span>这是一个span</span>
</div>

7.后代选择器（空格）只要是嵌套关系就可以选中

div span{}

8.伪类选择器
格式 a:link{
color:red;
}
:link 访问前的状态
:visited 访问后的状态
:hover 鼠标划过的状态
:active 鼠标按下的状态（激活状态）
想要四种状态都有效果，需要按顺序设置 :hover
:active 这两种状态可以设置其他元素
选择器的命名规则
英文、数字、下划线、-组成
不能中文，特殊字符
开头英文开头
规范
不能用关键字命名，标签名
词必达意
选择器的权重
内联样式表1000
ID 0100
class 0010
标签 0001
通配符 0000
伪类选择器权重 10
包含选择器是计算所有选择器的权重之和
群组选择器不会产生权重冲突