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
1、linear：规定以相同速度开始⾄结束的过渡效果
2、ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
3、ease-in：规定以慢速开始的过渡效果
4、ease-out：规定以慢速结束的过渡效果
5、ease-in-out：规定以慢速开始和结束的过渡效果
设置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：字体样式html radio点击变颜
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表⽰选择列表中的最后⼀个标签
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;
white-space: nowrap;
跳转新页⾯时（新增⼀个加载页⾯）：target="_blank"
⽆图⽚时显⽰暂⽆图⽚这个图⽚：
onerror="javascript:this.src='/keditor/images/nopic.png';"
1、default
默认光标（通常是⼀个箭头）
2、auto
默认。浏览器设置的光标。
3、crosshair
光标呈现为⼗字线。
4、pointer
光标呈现为指⽰链接的指针（⼀只⼿）
伪元素：
::before（左边）
::after（右边）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。