html css知识点总结

浏览器内核和搜索引擎

1. 五大浏览器：IE，火狐，谷歌，Safari，欧朋。
2. 浏览器内核：渲染引擎和JS引擎，用于渲染页面和解析JS。
3. 搜索引擎：浏览器是由浏览器内核和搜索引擎构成的，像谷歌搜索引擎，百度搜索引擎等，用于将各大公司的 部署在web上的网站（服务器）排列出来，方便用户的浏览。

web是什么？

1. web（万维网），可以理解为因特网上最大的应用，而因特网（internet）又是互联网（Internet）上最大的应用，很多的应用服务器就部署在web上面，web是以www开头的，比如www.baidu.com是部署在web上的应用服务器，这段网址代表了域名和默认的80端口号，等同于www.baidu.com:80，通过这段网址我们就可以访问到百度的服务器，通过HTTP协议建立TCP连接请求到百度的html页面返回到浏览器，并通过渲染引擎进行渲染，通过js引擎解析js。

web是如何实现端与端通信的

1. 网络协议：TCP/IP五层模型分为应用层（HTTP协议）、传输层（TCP、UDP协议）、网络层（IP协议）、数据链路层、物理层。
2. 网络协议的作用：确保能够实现端到端之间的通信，它就相当于一种规则，网络通信需要遵循一定的规则，这样才能够更方便的去通信，就像我们人与人交流需要使用普通话一样，也是为了更方便的交流。
3. 例如：www.baidu.com，我们要通过这个网址访问百度的服务器，在网络中有非常多的主机，我们需要找到百度服务器具体是哪一台，这一点是通过网络层去确认其ip地址，这里的baidu是主域名，通过DNS域名解析可以得到其ip地址，可以理解为域名就是ip，这样就可以找到主机了，在通过后面的端口号（不写默认是80）访问到对应的软件。
4. 对网络通信的理解：从第三条可以宏观的看出端到端之间的通信是水平的，我们平时所写的网站都是基于应用层的，都是应用层之间的水平交互，应用层的数据要经过操作系统的一系列封装，自上而下，每一层遵循相应的协议，我们的浏览器向服务器发起http请求，建立传输层协议，根据网络层的逻辑ip寻址能力确定对端的地址，到数据链路层中进行物理寻址，在到物理层中实现在具体的物理介质上完成每一个比特的传输，在发起端中，这一系列的步骤需要组包，自上而下的完成每一个数据的封装，这一过程由操作系统完成，最后通过交换网络将数据包传送到对端的操作系统，然后再自下而上的对数据进行解包从而准确的解析出发送过来的请求数据，最后连接数据库服务器将html返回给发起端。

HTML标签

1.<h1></h1>--<h6></h6> 标题标签
2.<p></p> 段落标签
3.<br> 换行
4.<hr> 水平分割线
5.b加粗，u下划线，i倾斜，s删除线，strong加粗，ins下划线，em倾斜，del删除线
6.<img src="" alt="" title="" > 插入图片，src图片路径，alt图片加载失败时显示的内容，title鼠标移动上去的
内容
7.<audio src="" controls>音频标签，controls显示播放控件
8.<vedio src="" controls>视频标签
9.<a href="#" target=""></a>超链接,最佳实践：写页面结构的时候不知道超链接路径可以加#，方便后期添加路径时可
以很快找到a标签的位置
10.ul li 无序列表
11.ol li 有序标签
12.dl dt，dl dd 自定义列表，没有无序列表前面的小圆点，没有有序列表前的数字，只是有个缩进dt表示自定义列
表的主题，dd标签内可以包含任意内容，自定义列表常用于页面底部导航
13.table >tr >td 表格标签，table可以添加caption属性表示表格标题，tr>td 可以写成tr>th表示表头（加粗显示）
14.table标签中内容默认是在tbody标签中的，实际上table标签分为thead,tbody,tfoot
15.合并单元格：rowspan垂直合并（合并行），colspan水平合并（合并列），td中的属性，上下合并只保留最上
的其他的删除，
左右合并只保留最左边的td其他的删除，不能跨标签合并，在tbody中只能合并tbody的，tfoot中只能合并tfoot的
16.input：表单输入
17.input中的name和value属性，input表单是提交数据给后台的，value内容会提供给后台，后台拿到数据侯会得到
name=value
18.button:按钮
19.select option：下拉框
20.textarea:多行文本输入框
21.label：把内容和表单绑定起来，比如input单选框，只能点击那个圆圈才可以选中，使用label绑定后，点击圆圈外围
的label文本区域也可以选中，扩大了用户可操作的面积避免点不到的情况出现，两种使用方法：1.使用label把内容文
本包起来，让label中的for属性等于input中的id属性。2.用label把input和文本包起来，将label中的for属性删掉。
22.div span 俩容器标签
23.&nbsp 空格

CSS

1. css的三种书写方式：通过link标签引入外部css文件，在head标签中通过style标签写内嵌样式，直接在html标
签中写style行间样式。
2. text-align:center 让内部元素水平居中
3. margin:auto 让元素（块级）本身水平居中
4. background-color:gray 设定背景颜色
5. font-size:24px 设定字体大小，浏览器默认字体大小16px
6. color:white 设定文字颜色
7. border:dashed 1px gray 设定边框为虚线1px灰色
8. letter-spacing:2px 字间距
9. word-spacing 词间距
10. 中文在容器中可自动换行（一行满了的时候）英文长单词不行，数字也不行
11. word-break:break-all 非常强烈的折行
12. word-wrap:break-word 不是非常强烈的这行，会产生一些空白区域
13. 使用line-height属性让字高度等于容器的高度，可使文字在容器内上下居中
14. style="text-decoration:none" 去掉文本修饰，例如去掉a标签的修饰
15. border-right:solid 1px color 添加右边线
16. text-indent: 文本缩进
17. font-weight: 文字粗细，正常normal,加粗bold，正常400加粗700
18. font-style文字样式
19. font-family字体系列
20. font:style weight size family，字体的连写，只能省略前两个，如果省略了相当于设置了默认值
21. 后代选择器：选择器1 选择器2，用空格隔开
22. 子代选择器：选择器1>选择器2，只能选择紧跟着的子代
23. 并列选择器：选择器1,选择器2
24. 交集选择器：选择器1选择器2
25. background-image:url() 背景图片
26. background-repeat 背景平铺
27. background-position 背景图片位置
28. p标签中不要嵌套div、p、h等块级元素
29. a标签不能嵌套a标签
30. css有继承性：特性:子元素有默认继承父元素样式的特点（子承父业)可以继承的常见属性(文字控制属性都可以继承)
31. 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
32. css优先级：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
33. !important写在属性值的后面，分号的前面!!important不能提升继承的优先级，
34. 只要是继承优先级最低，实际开发中不建议使用!important 。
35. css权重的比较规则：不进位，比如选择了id选择器，哪怕是有10多个类选择器依然生效的是id选择器
36. 标准盒模型：content，padding，border，margin，内容为content
37. css3盒模型：box-sizing:border-box，内容为content+padding+border，实际要长*宽可以用它，用上面的盒子会被撑大
38. margin合并：垂直布局的块级元素，上下的margin会合并，最终两者的距离为margin的最大值，解决方案：只给其中一个设置margin就行
39. margin塌陷：父子块级元素，给子元素设置margin-top，父元素会跟着下移，解决方案：1.给父元素设置overflow:hidden，2.转化成行
	内块，3.设置浮动，4.给父元素设置padding-top或border-top
40. 浮动的特点：1.浮动脱离标准流（飘起来），2浮动元素比普通高半个级别，可以覆盖标准流中的元素，3.浮动找浮动，下一个浮动元素会在
	上一个浮动元素的左右浮动，4.浮动元素一行可以显示多个，可以设置宽高（不论是行内还是块级），5.浮动元素不能通过
	text-algin:center或者margin: 0 auto设置
41. 清除浮动的方法：1.给浮动元素设置父级并为其添加高度以避免后面的元素受到浮动的影响，2.给浮动元素设置clear:both，
	3.为浮动元素的父级添加overflow:hidden，overflow:auto，4，双伪元素清除法：.clearfix::before,
	.clearfix::after{content: " "; display:table;}.clearfix::after{clear:both;}
42.定位的常见应用场景：解决盒子与盒子之间的层叠问题，定位之后元素的层级最高可以层叠在其他盒子上，2.可以让盒子固定在屏幕的某一
   个位置。
42. 相对定位：position:relative,没有脱离标准流，相对于自己原来的位置进行移动
43. 绝对定位：position:absolute,脱离标准流，默认相对于浏览器可视窗口区域移动，最近的父级有定位时相对于其移动
44. 固定定位：position:fiexed，脱离标准流，相对于浏览器可视窗口移动
45. 使用定位实现水平垂直居中：1.子绝父相，2.left:50% top:50%，3.transform:translate(-50%,-50%)
46. 脱离标准流后的元素宽高由内容撑开
47. 不同布局方式的层级关系：标准流<浮动<定位
48. z-index：改变层级，越大层级越高
49. cursor：光标类型，pointer为小手形状，默认为default箭头
50. border-radius：设置圆角，后面属性为圆角半径，当设置为百分比时是按照宽高的百分比作为半径的
51. opacity：设置透明度
52. 属性选择器：input[type="text"]{}

css3

1.transform:translate 实现位移效果
2.transform:rotate(角度) 旋转
3.transform:origin 改变原点
3.transform:scale 缩放
4.transform: translate3d(x, y,z); 实现空间位移效果
5.transform: translateX(值);
6.transform: translateY(值);
7.transform: translateZ(值);
8.使用perspective属性实现透视效果，数值一般在800-1200。
9.transform: rotateZ(值); 空间旋转
10.transform: rotateX(值);
11.transform: rotateY(值);
12.判断旋转方向:左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
13.使用transform-style: preserve-3d呈现立体图形
14.transform: scaleX(倍数);transform: scaleY(倍数);transform: scaleZ(倍数);transform: scale3d(x, y, z); 实现空间缩放效果

注意点

1. 文字对齐问题：当图片和文字在一行显示时其实底部不是对齐的，可以使用vertical-align 进行top middle bottom垂直对齐
2. 不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题，推荐使用浮动或者css3中的flex布局
3. 布局顺序：由外向内，先设置宽高背景色再设置边距，再设置内部样式，最后再设置文字样式大小
4. css书写顺序：（浏览器执行效率更高）1.浮动/display 2.盒子模型：margin border pading宽高背景色，3.文字样式
5. 浮动元素可以设置宽高，不论是行内还是块级元素
6. 遇到文字排列例如导航，不设置宽高，用margin padding给他往开顶
7. 给标签的某些属性添加样式，例如input中的placeholder属性，input::placeholder{}
8. position:absolute后，下面的块不会移动到上面，但是上面被设置绝对定位下面的会上去，都是绝对定位的情况下，html结构中在下面的会覆盖上面的，而不是根据css样式的设置顺序，可以使用z-index改变层级
9. 显示隐藏的案例可以这样写 .box:hover .mask{display:block}，mask是隐藏内容没办法直接添加hover，可以为其父级.box添加
   10.设计图中有很多小图片，可以使用bcakground-image background-position去拿对应的图