html中各种标签和属性（最基础的基本都有）

1、标题标签： h1~h6  ctrl+1~6

2、段落标签： p      ctrl+shift+p

3、换行标签： br     shift+回车

4、水平线：   hr

5、加粗标签： strong  ctrl+b

6、倾斜标签： em     ctrl+i

7、空格标签：  

8、图片标签：<img src=’图片路径’ alt=’图片加载错误提示文字’ title=’鼠标悬停文字’ width=’宽度’  height=’高度’ />

9、超链接：<a href=’链接路径’  traget=’_blank’>文本/图片</a>

10、锚链接：

(1)      定义锚：给标签加id属性，id=”top”

(2)      跳转到锚：<a href=”#top”>top</a>

11、行级标签

1.Strong

2.Em

3.A

4.Img

12、块级标签

1.标题标签

2.段落标签

Display：inline-block设置元素具有行级标签和块级标签的属性

.da dl dd p:nth-of-type(1)：当dd下面的段落p有好几个的时候，你有只想给第一个段落p加样式的时候用到这个！！！

Float：浮动

Z-index：层次 z-index：1比z-index：2 低一层

设置div半透明的代码：opacity:0.7；

设置div溢出隐藏的代码：overflow:hidden;

设置css的动画效果：transition: all 0.5s linear

设置css时图片在div中同比例放大或者同比例缩小：transform: scale(1.1)

第二章

1、无序列表标签： ul  li

2、有序列表标签： ol  li

3、定义列表标签： dl  dt  dd

4、表格：

(1)      Table

①     Tr 行

②     Td 单元格

③     thead标签：表格的表头

④     Tbody标签：表格的主体

(2)      合并行：rowspan

(3)      合并列：colspan

(4)      表格内部的框合并（双线框变单线框）border-collapse:collapse;

5、视频播放

(1)      Video autoplay自动播放 control控制按钮

①     Sorce src=’视频的地址’

1、内联框架

(1)      Iframe

6、网页结构

(1)      头部：header

(2)      主体：section

(3)      底部：footer

第三章

1、表单：<form  method=post action=’提交的地址’>表单元素</form>

2、表单元素：<input type=’表单元素类型’ name=’名称’ value=’默认值’ />

(1)      文本框：type=text  （用户名，编号....）

(2)      密码框：type=password（密码）

(3)      单选按钮：type = radio（选男还是选女）

(4)      复选框：type=checkbox（爱好.....）

(5)      数字：type=number

(6)      电子邮箱：type=email

(7)      网址：type=url

(8)      文件：type=file（上传头像....）

(9)      下拉列表框<select name=’city’><option>济南市</option><option>青岛市</option></select>（像选择城市，选择时间）

(10)   文本域：<textarea cols=’列’ rows-’行’></textarea>（像个人简介之类的）

(11)   图像按钮：type=image（注册选择的是点击图片就用到了这个）

(12)   提交按钮：type=submit（立即注册）

(13)   重置按钮：type=reset（重新注册）

(14)   想让文本框中出现提示词语的话用这个：placeholder:”请填写正确的密码”；

3、表单的高级应用

(1)      只读（readonly="readonly"）

(2)      禁用（）

(3)      表达你的初级验证：placeholder（搜索提示）

Required（非空）

Pattern（正则表达式，就是手机号必须是11位之类的）

第四章

1、选择器

(1)      标签选择器：直接用标签名字命名，不需要调用

(2)      类选择器：.类名   调用：class=’类名’

(3)      ID选择器：#名称   调用：id=’名称’  id选择器一个页面只能用一次

(4)      优先级：id>类>标签

2、高级选择器

(1)      层次选择器

①     后代选择器：E F

②     子选择器：E>F

③     相邻兄弟选择器：E+F

④     通用兄弟选择器：E~F

(2)      结构伪类选择器

①     E:fist-child  取得第一个标签

②     E:last-child  取得最后一个标签

③     E:nth-of-type(n) 取得第n个标签

(3)      属性选择器

①     E[attr]:具有attr属性的E标签

②     E[attr=val]:具有attr属性且值等于val的E标签

③     E[attr^=val]: 以val开头的.....

④     E[attr$=val]:以val结尾的....

⑤     E[attr*=val]：包含val的....

第五章

1. Color:字体颜色
2. Font-size：字体大小
3. Font-weight：字体粗细：bold粗，lighter细
4. Font-family：字体样式
5. Letter-spacing：字间距
6. Line-height：行间距
7. Width：宽度
8. Height：高度
9. Left左
10. Right右
11. Bottom下
12. Top上
13. Center中间
14. Justify两端对齐
15. Backgroun-color：背景颜色
16. Text-align：水平对齐
17. Text-indent：首行缩进
18. Border-radius:10px设置边框角的弧度
19. Text-decoration：none去掉超链接下划线
20. Text-decoration：underline加上超链接下划线
21. Text-shadow：color  x-offset  y-offset  blur-radius（color阴影颜色x-offset沿横向移动y-offset沿纵向移动blur-radius阴影模糊 ）
22. Font-style：italic倾斜
23. Vertical-align:middle当图片和字一起，让字在图片的中间对齐时引用这个

1. Margin：0px去掉外边距
2. Padding：0px去掉内边距
3. Margin：auto网页中的整个元素在网页中左右居中
4. List-style：none去掉列表默认样式，去掉小黑点
5. A:hover鼠标悬停样式
6. 背景图像：background-repeat属性 1.repeat：沿水平和垂直方向平铺2. no-repeat不平铺，只显示一次3. repeat-x横向平铺4. 3. repeat-x横向平铺4.3. repeat-y纵向平铺（background：url（图片） no-repeat 横向 纵向 ）

 

第六章

一、盒子模型：border：边框

border-color: #F00;    边框的颜色

border-width: 10px;    边框的线条大小

border-style          边框的线型

边框的线型：solid实线double双实线dotted点线dashed虚线

background: linear-gradient(to bottom, #cdcdff, #FFF)*背景颜色的渐变

to  bottom从上往下

Border-top：#C0F 1px  dotted意思是上边框颜色是#c0f 线条的宽度是1px

用的是点线！

二、圆：border-radius: 50%;实现圆的效果，

三、box-shadow:2px 2px 10px #333; 阴影

box-shadow:阴影水平偏移值（可取正负值）； 阴影垂直偏移值（可取正负值）；阴影模糊值阴影颜色；

四、position:relative; /*相对定位*/ 相对于自己的位置发生了偏移，但是原来的位置还 是占据！

五、Position：absolute； /*绝对定位*/ 相对于自己的位置发生了偏移，但是原来的位置还 是不占据！

css获取li标签中的第几个标签选择器：

1.li: first-child表示选择列表中的第一个标签

2.li:last-child表示选择列表中的最后一个标签

3.nth-child(3) 表示选择列表中的第3个标签

4. nth-child(2n) 这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签

5. nth-child(2n-1) 这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。

6. nth-child(n+3) 这个表示选择列表中的标签从第3个开始到最后。

7. nth-child(-n+3) 这个表示选择列表中的标签从0到3，即小于3的标签。

8. nth-last-child(3) 这个表示选择列表中的倒数第3个标签。

文本多行溢出时只显示三行其余用点点点显示（多行文本）：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:3;

文本多行溢出时只显示100px长度的文字，其余用点点点显示（单行文本）：

width:100px;

overflow: hidden;

text-overflow:ellipsis;

whitewhite-space: nowrap;

跳转新页面时（新增一个加载页面）：target="_blank"

无图片时显示暂无图片这个图片：

onerror="javascript:this.src='/keditor/images/nopic.png';"

1、default

默认光标（通常是一个箭头）

2、auto

默认。浏览器设置的光标。



3、crosshair

光标呈现为十字线。



4、pointer

光标呈现为指示链接的指针（一只手）

伪元素：

::before（左边）

::after（右边）

content: attr(data-content);自定义一个属性名称，data-后面是自定义的属性名称