HTML基本标签及css小结

html的基本标签

标题标签： h1-h6 h1最大，h6最小
段落标签： p
换行标签： br
水平线标签： hr
加粗标签：strong
斜体标签：em
删除线：del
上下标 ：sup，sub
超链接标签：a
-herf ：打开的链接
-target ：self （本来的页面） black （新建的页面）

列表标签：
1 无序 ul-> li
2 有序 ol-> li
3 自定义 dl-> dt-> dd

表格标签：
table ：表格标签
tr：换行标签

表单

 <form action="服务器地址" method="get/post" name="formname">
 <input type="text/password/radio/checkbox/submit/reset/button/file/hidden" 
 name="表单元素的名称" value="表>

可以将name和value看做是 map表中的键和值

在对于input的type来说 date类型和datetime-local类型可以获取到当前的时间
后者能够精确到分钟

range作为滑块类型，能够用max ，min，step属性来设置滑块的取值范围
step属性能够设置滑块的步长，默认为1

对于电话号码的判断 因为type=“tel” 在大多数浏览器上不被兼容 ，所以一般采用 text 类型
在后面使用pattern设定正则表达式来判断电话号码的格式。

input的属性：（即value的属性） 只读 readonly： 放在定义好的value后 ，表示只读不能修改 禁用 disabled：
放在定义好的value后，表示禁用 size： 表示输入框的宽度 最大长度 maxlength： 表示输入框的最大长度 文字提示内容
placeholder： 表示输入框的提示信息 必须填写 required： 表示输入框必须填写

css:级联样式表

1.样式的使用

1.1 内联样式（行内样式）： 直接在标签中使用style属性来定义样式
1.2 内部样式表： 在head标签中使用style标签来定义样式
1.3 外部样式表： 在head标签中使用link标签来引入外部样式表
对于外部样式来说，在定义好的css文件中，我们可以使用来引入外部样式表

2.样式的优先级

2.1 内联样式 > 内部样式表 > 外部样式表
2.2 样式的优先级是按照从上到下的顺序进行加载的
2.3 样式的优先级是按照从左到右的顺序进行加载的
当几个样式同时作用在一个元素上时，优先级高的样式会覆盖优先级低的样式

基本选择器：

选择器：选择对应的元素设置对应样式效果
eg: div{
width: 100px;
height: 100px;
background-color: red;
}

选择器的分类：

1. 标签选择器： 选择对应的标签设置样式

2. 类选择器： 选择对应的类设置样式 （以.开头的选择器 运用时用class=“?”）

3. id选择器： 选择对应的id设置样式（以#开头 运用时用id=“?”） —一个标签只能有一个id选择器
   一个id选择器也只能被一个标签所使用

4. 通配选择器： 选择所有的元素设置样式（以*开头）–其优先级特别低

eg：
*{
    margin：0px；
    padding：0px；
}

取消全部元素的内外边距 全部设置为0

5.群组选择器： 选择多个选择器设置样式

eg：h3，p{
    color: red;
}

注意： 选择器之前存在冲突时： id选择器>类选择器>标签选择器>通配选择器

层次选择器：

1. 后代选择器： 选择对应的元素的后代元素设置样式

eg：div p{
    color: red;
    }

再次例子中，p标签是div标签的后代元素，所以p标签也会被设置为红色，只要他出现在div标签的后面。

2. 子代选择器： 选择对应的元素的后代元素设置样式

eg：div>p{
    color
    }

子代选择器只能选择对应元素的后代元素，不能选择对应元素的子代元素

3. 相邻选择器： 选择对应的元素相邻的元素设置样式

eg：div+p{
    color: red;
    }

相邻选择器只能选择对应元素相邻的元素，不能选择对应元素的其它元素。

4. 兄弟选择器： 选择对应的元素相邻的元素设置样式

eg：div~p{
    color: red;
    }

兄弟选择器只能选择对应元素相邻的元素，不能选择对应元素的其它元素。

结构伪类选择器：

1. 第一个元素选择器： 选择对应的元素中的第一个元素设置样式（frist child）

eg：div>p:first-child{
    color: red;
    }

第一个元素选择器只能选择对应元素中的第一个元素，不能选择对应元素的其它元素。

2. 最后一个元素选择器： 选择对应的元素中的最后一个元素设置样式（last child）

eg：div>p:last-child{
    color: red;
    }

最后一个元素选择器只能选择对应元素中的最后一个元素，不能选择对应元素的其它元素。

3. 任意一个元素选择器： 选择对应的元素中的任意一个元素设置样式（nth-child）

eg：div>p:nth-child(2){
    color: red;
    }

任意一个元素选择器只能选择对应元素中的任意一个元素，不能选择对应元素的其它元素。

4.先筛选元素，再选择是对应元素中的哪一个元素
4.1
first-of-type： 选择对应的元素中的第一个元素设置样式

eg：div>p:first-of-type{
    color: red;
    }

first-of-type只能选择对应的元素中的第一个元素，不能选择对应元素的其它元素。

4.2
nth-of-type： 选择对应元素中的哪一个元素设置样式

eg：div>p:nth-of-type(2)
{
    color: red;
} 

表示选择对应的元素中的第二个元素设置样式。
4.3
last-of-type： 选择对应的元素中的最后一个元素设置样式

eg：div>p:last-of-type{
    color: red;
    }

last-of-type只能选择对应的元素中的最后一个元素，不能选择对应元素的其它元素。

超链接选择器：

1. 未访问状态： 选择对应的元素中的未访问状态设置样式（a:link）

eg：a:link{
    color: red;
    }

2. 已访问状态： 选择对应的元素中的已访问状态设置样式（a:visited）

eg：a:visited{
    color: red; 
    }   

3. 鼠标悬停状态： 选择对应的元素中的鼠标悬停状态设置样式（a:hover）

eg：a:hover{
    color: red;
    }

4. 鼠标点击状态： 选择对应的元素中的鼠标点击状态设置样式（a:active）其状态为链接点击未释放状态

eg：a:active{
    color: red;
    }

注意： 在编写超链接选择器的时候要一定注意按照
未访问-. 已访问-. 鼠标悬停-. 鼠标点击顺序来写，否则会出现样式错乱的情况。
不然可能会导致我们设计的样式失效

css中常用样式属性：

背景属性：
background-color: 设置背景颜色
颜色的表示方式：

1. 英文单词： red, blue, green
2. 十六进制： #FF0000, #00FF00, #0000FF
3. RGB： rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)

注意： 也可以在rgb后加个a表示透明度 它的取值范围为（0,1）越趋近于1，越不透明

background-image: 设置背景图片

background-repeat: 设置背景图片是否重复（平铺）
1.repaeat 2.no-repeat 3.repeat-x 4.repeat-y;

background-position: 设置背景图片的位置
background-size:设置背景尺寸

文本属性：
设置文本颜色：color
设置文本缩进（单位长度为em）：text-indent
设置文本装饰：text-decoration

1. none 2. underline 3. overline 4. line-through
   设置文本水平对齐：text-align
2. left 2. right 3. center
   设置行高：line-height
   设置字符间距：letter-spacing
   设置单词间距：word-spacing
   设置文本阴影：text-shadow :相关参数[阴影颜色 x轴偏移 y轴偏移 模糊程度]

字体属性
设置字体大小：font-size
设置字体类型：font-family
设置字体粗细：font-weight
4. normal 2. bold 3. bolder 4. lighter 5. 100-900
设置字体风格：font-style
5. normal 2. italic（斜体）
设置小型大写字母：font-variant
6. normal 2. small-caps

列表属性
设置列表项标记：list-style-type
7. disc 实心圆 2. circle 空心圆 3. square 实心方块 4. none

设置列表项标记图片：list-style-image
已图片作为列表的排序前缀

设置列表项标记位置：list-style-position

1. inside 2. circle 3. outside

垂直居中

1. 设置父元素的高度
2. 设置父元素的line-height等于父元素的高度
3. 设置子元素的margin-top等于子元素的高度的一半
   vertical-align: middle;