html表格标签以及CSS基础

一、form表单标签

form表单标签，主要应用在登录、注册页面。能够使input转为按钮之后的功能生效

示例：

<form>
	<input type="password" placeholder="请输入密码"><br>
	<input type="submit" value="登录">
	<input type="reset" value="重置">
</form>

二、表格标签

table标签：声明标签

tr标签：（table row）表格的每一行

th标签：（table head）表头

td标签：（table date cell）表格的单元格

表格涉及到的属性

table标签：

border - 设置表格的外边界（外边框）的宽度
cellspacing - 设置单元格和单元格以及单元格和边框的间距
width - 设置整体表格的宽度（每一列的宽度会自动调整比例）
height - 设置整体表格的高度（每一行的高度会自动调整比例）
bordercolor - 设置边框的颜色
bgcolor - 设置背景颜色
align - 调整表格水平位置（左对齐：left、右对齐：right、居中对齐：center）

tr标签

bgcolor - 设计背景颜色
align - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center）
valign - 调整文字垂直位置（顶部：top；底部：bottom；中间：middle）
height - 修改一行的高度

td标签

width - 修改单元格的宽度（本行其他单元格自动缩小或增大，本列单元格宽度也随之增加或缩小
height - 修改单元格的高度（本行单元格高度随之增加或缩小）
align - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center）
valign - 调整文字垂直位置（顶部：top；底部：bottom；中间：middle）

colspan - 列合并

rowspan - 行合并

一个具体的示例：

<table bordercolor="pink" cellspacing="0" border="1">
	<tr>
		<td colspan="8" align="center">简历</td>
	</tr>
	<tr align="center">
		<td rowspan="5" width="15">个人信息</td>
		<td>姓名</td>
		<td width="60"></td>
		<td>性别</td>
		<td width="60"></td>
		<td>出生年月</td>
		<td width="60"></td>
		<td rowspan="4">
		</td>
	 </tr>

三、div

div标签：无语意标签（盒子标签）

div：一般把一个范围中涉及到的所有的标签会放到一起

div是调整页面布局前的最后一个标签

四、CSS：层叠样式表

(一).CSS代码写在哪

1. 内部样式表：将style标签放到head标签或者body标签内
2. 内联样式：可以把样式直接作为一个标签的属性，写入到标签中，使用style属性
3. 外部样式：有一个后缀名为.css的文件专门用来存放CSS代码。只需要在html代码中使用link标签将CSS文件引入即可

（二）link标签语法

<link rel="" type="" href=""></link>

1.如果rel为icon，表示给页面标签页设置图标，type为image/图片格式，表示引入xxx格式的图片
rel=“icon” type=“image/图片格式（png、jpg）” href=“图片的链接或路径”

2.rel为stylesheet，表示给页面引入样式表，type固定为text/css
rel=“stylesheet” type=“text/css” href=“css文件的链接或路径”

（三）CSS样式如何写？

语法：
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}

1.选择器：通过标签来选择被修改的内容或者通过属性（id属性、class属性）选择被修改的内容

2.{} ：固定语法（内部样式、外部样式）

3.内部样式、外部样式、内联样式：修改内容的样式使用 属性:属性值;

（四）CSS选择器

1.通配符选择器

*：能改变所有标签的样式

2.标签选择器

标签名 ->不加限定条件，能够修改页面中所有某标签

3.id选择器和class选择器

一般在页面标签中会添加id属性和class属性，其对应的属性值一般都是独一无二的

或者同一类数据使用一个属性值；通过调用id属性值和class属性值变相的等于调用对应的标签

id选择器： #id属性值
class选择器： .class属性值

4.父子选择器

父标签 > 子标签 （被修改样式的为子标签）

5.后代选择器

祖先标签 后代标签 （中间是空格）（被修改样式的为后代标签）

6.兄弟选择器

长兄 ~ 弟弟

7.相邻兄弟选择器

刘关张：刘 + 关 关 + 张

8.nth_child选择器

a:nth_child(数字)

a:nth_child(3):找每一级标签下第三个标签，并且是a标签（html下标从1开始）

五、CSS边框样式和文字样式

（一）CSS边框样式

border:边框粗细 边框的样式(solid单实线 double双实线 dashed虚线 dotted点) 边框的颜色;

border-radius:num1 (num2 num3 num4)

1.num1 - 表示将图形（必须存在四个角）的四个角统一改为一个弧度
2.num1 num2 - num1：图形的左上角和右下角，num2：图形的右上角和左下角
3.num1 num2 num3 - num1：左上角，num2：右上角和左下角，num3：右下角
4.num1 num2 num3 num4 - 左上、右上、右下、左下

border-top
border-bottom
border-left
border-right
等价于border

（二）CSS文字常用属性

color：修改文字颜色
font-size：字体尺寸
font-family：字体
text-align：位置（left、right、center)
text-decoration:在文字的下方或上方或中间添加一条横线（underline、overline、line-throught)

颜色：三原色：红、绿、蓝;每种颜色有0-255，一共256个等级

1. 颜色可以用英语单词表示
2. 可以使用三原色的数字等级表示 rgb（0,0,0）或者rgb（0,0,0,透明度）
3. 可以使用颜色的 # + 十六进制符号表示

六、选择器的优先级

优先级和选择器相关

第1级： 在属性后面添加！important
第2级： 内联样式

其他的任何样式都小于这两级，优先级看权重，权重越大，优先级越高

*---- 1
标签选择器 ---- 1
class选择器 ---- 2
id选择器 ---- 4

父子、后代、兄弟、相邻兄弟 ----- 看符号之间各个选择器的权重和,但是先看符号前边的，如果符号相等再比较符号后边的
如果权重相等，最后写的谁，实现的就是谁
但是，如果权重不一样，但是都是修改的一个标签，不重叠的样式都能够实现

七、伪类选择器

（一）什么是伪类选择器

普通选择器：伪类选择器{}

普通选择器选择的是标签，伪类选择器是选中的标签在不同场景下的某个状态

普通标签的状态：鼠标悬停，鼠标点击，激活（成为焦点）

（二）常见的伪类选择器

1）两个通用状态
hover - 鼠标悬停
active - 鼠标在某个元素上按下

2）超链接a标签特有的
link - 超链接地址没有被成功访问展示的状态
visited - 超链接地址被成功访问展示的状态

（三）CSS常用背景属性

blackground-color：背景颜色
background：url（图片地址） 是否平铺 x方向位置 y方向位置 背景颜色

是否平铺：no-repeat、repeat
x方向位置：left\right\center、x坐标值
y方向位置：top\bottom\center、y坐标值

八、标准流与脱流布局

（一）标准流布局

没有设置任何布局样式，使用标签自己的特性

a.块级布局标签：一个标签占一行：h1~h6、p等
b.行内标签：一行可以显示多个标签，设置宽高无效：a、span
c.行内块标签：一行可以显示多个标签，设置宽高有效：img、input

（二）display

block - 块级

（三）脱流（脱离标准流布局）

1）脱流使用的是浮动、定位两种方式
2）所有标签脱流以后，布局都是以行内块样式布局

九、定位

定位就是设置一个标签到参考对象上、下、左、右的间距

定位对应的属性：

left、right、top、bottom

定位的前提：选择参考对象

position属性：–专门用于选定参考对象的属性
absolute：绝对定位 – 在盒子中还存在一个真实的元素，但是这个元素不占据任何空间

relative：相对定位 – 在盒子中存在以真实元素，此元素可以任意移动位置，但是其原位置不能被其他元素占用

fixed：固定定位 – 盒子中存在一真实元素，此元素也不占据任何空间，此元素位置不受盒子大小影响

固定定位一般用于返回顶部、某些培训网站右下角联系咨询窗口等