特殊的属性

1. id:该页面不能重复，用来标识标签唯一身份。
2. class:类似于Python的继承，会按照class内的css样式进行渲染标签。

常用标签

1. img标签：可以插入图片
	
如果宽和高只定义一个的话，那么就会等比例改变

2. a标签：传送门标签
	
	target=‘_self/_blank‘  打开新页面的方式，前者表示本页面打开，后者是新建页面打开，默认前者
	
tip:本页面跳转的功能
a标签具有锚点功能，这时候就要说到一个特殊的属性了：id=‘‘，这个id必须是本页面唯一，作为每个标签的身份标识，我们可以通过查找某标签的id直接定位到该标签，所以a标签中的href属性就可以写为本页面的id值，完成点击之后即跳转到该标签。

3. 列表标签
列表标签有三种，这里只记录一下无序列表。
	

默认是带小黑点的子集排列
    	
如下展示
	

• 无序列表就是这样
• 可以有多行

4. 表格标签
  # 声明一个表格
      # 表头
          # 每一个tr标签代表一行数据
              # 表身
        
加粗的字段1
            
字段2
            
字段3
        


一行数据的第一个字段值
            
一行数据的第二个字段值
            
一行数据的第三个字段值
        



html本身子代的表格是比较丑的，但是仍然可以添加一些属性的变化使其稍微好看点。
border=‘数字‘:表格的边框样式
rowspan=‘数字‘:向下的单元格合并几行
colspan=‘数字‘:向右的单元格合并几行

4. 表单元素

这个表单属性可以实现向服务端发送数据，如果我们填写一部分数据向后端提交，就要使用到这个表单元素。

    			输入文本
    		密码输入
    			日期输入
    		单选框：从给出的选项进行选择
    		多选框：从给出的选项中可以进行多选
    		提交按钮，触发提交动作
    		可以进行自定义功能按钮，空白的只能点着玩
    		重置按钮：刷新本页面
    			选择文件，可进行上传，但有前提条件
	
        		input标签在label内，能让用户再点到文本提示信息的时候自动进入到数据输入状态，即获得焦点。
    
    

action的3种状态：

1. 不填：默认是向本页面所在的url提交数据。
2. 写全路径：向该url提交数据。如’www.baidu.com‘。
3. 只写路径后缀：自动识别当前的ip和port，然后拼接。如:‘/index/‘

主要记得就是当在内部输完数据准备进行提交的时候，action决定了提交的方向。

几个特殊状态：

1. checked：对于给出的选项（针对radio和check）问题，可使用这个值作为设定默认值。
2. disabled:不能获得焦点（不能输入）。
3. readonly:只能读。

上传文件的前提条件：

1. 请求方式为POST
2. 必须定义enctype=‘multipart/form-data‘属性。

注意事项：

1. name属性：数据是按k:v进行提交的，因此input内部务必填写一个name属性作为数据的key。
2. value属性：针对输入文本类型，value为输入文本，针对按钮类为按钮显示文本，针对选项类为传送数据的键值对的值。

select标签：默认是单选的,下拉式选项。想要多选需添加mutiple  selected为默认选中状态

        1
2
3

    
textarea标签是获取用户大段文本输入，本身是一个大的可输入多行的文本框。

认识css

css相当于一个化妆盒，用来给html打造的东东进行华丽大变身。

既然要进行装饰，那么就首先要找到被装饰的对象。

css的引入方式有几种：

1. head内的link标签引入外部css文件
2. head内的style标签内写入css
3. 在标签内部直接定义style=‘{属性：属性值.....}‘

一般情况建议使用第一种方式，方便后期维护，第三种方式不建议大批量使用，耦合度较高。

选择器

这个就很好理解，就是通过一些方法精确定位到某一个标签。

选择器分类：

/*我是注释语法：选择器是定位某标签，大括号内的内容是定义的css的一些样式*/
选择器 {属性1：属性值1;属性2：属性值2.....}

/*基本选择器*/
/*1. id选择器： 关键符号为# */
#id值 {属性1：属性值1;属性2：属性值2.....}

/*2. 类选择器： 关键符号为点 */
.类 {属性1：属性值1;属性2：属性值2.....}

/*3. 元素选择器*/
标签名 {属性1：属性值1;属性2：属性值2.....}

/*4. 通用选择器*/
* {属性1：属性值1;属性2：属性值2.....}

/*组合选择器：先找到某一个确定的标签，根据这个标签的亲戚关系进行查找*/
后代选择器：凡是在标签内部的标签都是后代		  #id a {}
儿子选择器：在标签内部第一层级的标签			   #id>a {}
毗邻选择器：同级别紧挨着标签的下一个标签		  #id+a {}
弟弟选择器：同级别下方所有的标签				 #id~a {}

/*属性选择器：以[]为标识，查找含有某属性的标签*/
[name] {}  			含有name属性的标签都被选择
[name=‘tom‘]  		含有name属性且值为tom的所有标签
标签名[name=‘tom‘]   标签名内含有属性为name的且值为tom的所有标签

分组：多个元素样式相同可通过逗号隔开选择器的方式设置。

嵌套：多种选择器嵌套使用，可以想想后代选择器

div,#d1,.c1 {}  选择div标签、id为d1、继承c1类的标签
#d1 a {}		选择id为下的a标签

伪类选择器

一般在a标签使用比较频繁

a:link {color：blue}  		# 未访问链接时的颜色
a:visited {color：blue}  	# 访问链接之后的颜色
a:hover {color：blue}  		# 鼠标悬浮在链接时颜色
a:active {color：blue}  		# 鼠标点击链接不松时的颜色
input：focus {color:bule}  	# 输入框获得焦点时的样式

伪元素选择器

p:first-letter {}  设置文本首字母的字体样式
p:after {content:‘content必须定义‘}  在p元素之后添加一个不可选中的内容，多用于清除浮动 
p:before {content:‘content必须定义‘}  在p元素之前添加一个不可选中的内容，多用于清除浮动

优先级

在标签内部的所有标签都会默认继承该标签的样式，但是如果内部标签也有自己的样式，这个时候就要考虑优先级的问题了。

选择器的优先级是按照权重来决定的，谁的权重高那么就听谁的。按照通俗的话说就是哪一个选择器精确就听谁的。

针对相同的选择器：就近原则。后执行的会将前面执行的覆盖。

针对不同的选择器：行内选择器》id选择器>类选择器>标签选择器。谁查找的精度高，范围小。就听谁的。

属性

宽和高

这两个属性是块级标签通用的，用来设置高和宽，行内标签是无法生效宽属性的，它的宽是由其本身文本内容决定

width:100px;  设置宽
height:100px; 设置高

字体属性

font-family: "Microsoft Yahei", "微软雅黑", "Arial";字体的版式，前面不能使用就用备胎
font-size:10px	字体的大小
font-weight:250px  字体的粗细
color:red		颜色的英文
	#abc456		16进制的6位数
	rgb(111,222,255)	三基色。范围0~255
	rgba(111,222,255,0.5)	三基色加透明度，透明度范围0~1

文字样式属性

text-align:left/right/center/justify  水平对齐方式
text-decoration:none  无样式,常用语去掉a标签默认的下划线
		underline  文本下的一条线
		overline  文本上的一条线
		line-through  穿过文本的一条线
text-indent:2em	空两个字符大小

背景属性

background-color：white  背景颜色
background-image：url(‘‘)  背景图片
background-repead:repead  默认图片会铺满整个网页
		  no-repead  背景图片不平铺
		  repead-x  水平平铺
		  repead-y  垂直平铺
background-position:center center 确定背景位置
background-attachment:fixed  背景不会随着文档的向下移动而滚动

对于上述都是以同样开头的属性是支持简写的
background:White url() no-repead center center

边框

可以设置整体的边框样式，也可单独设置边框的样式,例如：border-left-width
border-width:10px;					边框宽
border-style:solid/none/dotted/dashed;			边框的样式
border-color:red;					边框的颜色

简写：border：10px solid red;

border-radius:50%  					可以设置为圆，半径为长与宽的一半

display属性

display:none;	文档中元素存在，但是不显示
	block;	将标签设置为块级标签
	inline; 将标签设置为行内标签
	inline-block; 标签可以在一行，且可以设置宽和高

css盒子模型

margin：用于控制元素周围空间的间隔，通俗点就是与邻居标签的距离
border：本身边框
padding：标签内部内容与边框的巨鹿
content：盒子的内容

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
简写：margin:10px 10px 10px 10px ;
margin:0 auto;  水平居中

padding方法和margin相似

float浮动

假设我们看到的页面是一个平面的话，那么浮动就会让元素从平面升到空中，任何元素都可以浮动，浮动之后就会自动成为块级元素，只可以向左或向右浮动，知道碰到边框为止。

注意：浮动有可能导致父标签塌陷的问题

float:right  向左浮动
float:left   向右浮动

clear清除浮动

在clear规定的属性的某一侧是不允许有浮动元素的。

clear:left;		该标签的左侧是不能有浮动元素的
clear:right;	该标签的右侧不能有浮动元素
clear:both;		两个均不能出现浮动元素

清除浮动的影响，除了使用clear还有两种方式：
1.自己添加一个有高度的div。
2.通用的解决方式是继承一个自定义的类clearfix，
.clearfix:after {
    content:‘‘;
    display:block;
    clear:both;
}

溢出属性overflow

overflow:visible;		多出内容默认可见，在框外可见
overfloe:hidden;		多出部分在框外不可见
overflow:scroll;		加一个滚动条
overflow:auto;			内容被修剪的话，就会显示滚动条

最佳案例：原型头像的设置。


    

position定位

定位分为四种：
position:static;	默认值，没有定位过。无法作为绝对定位的参照物
position:relative;	相对定位。以自己原始位置为参照物定位
position:absolute;	绝对定位。相对定位过的父元素为原点定位
position：fixed;	固定定位。固定在某一个位置Ç