HTML/CSS/JS基础大复习
一, 浏览器
1. 什么是内核
内核即“Rendering Engine”,“渲染引擎”, 我们叫它内核.
负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。
2. 常见内核
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7RZ7ztqD-1617258089274)(mkdown图片/image-20210327135017907.png)]
二, 网页
1. 什么是网页
网页是网站中的一个页面,通常是HTML格式,通过浏览器阅读.
网页通常由 文字/链接/图片/视频等等元素组成
2. 什么是HTML
HTML(Hyper Text Markup Language超文本标记语言), 描述网页的一种语言
3. 网页请求与显示( 输入网址到网页显示的整个流程)
网页请求是一个单向请求的过程,即是一个主机向服务器请求数据,服务器返回相应的数据的过程。
- URL形式为[协议https://域名(hosts)www.abc.com/地址index.html/打开方式], 首先得进行DNS解析, 把域名转换为具体得IP地址, 后面才好寻址MAC-物理
- 浏览器发宋 HTTP 请求至服务器, 建立TCP连接
- 服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
- 服务器将得到的 HTML 文件发送给浏览器(http响应);
- 在浏览器还没有完全接收 HTML 文件时便开始通Ajax(Asynchronous Javascript And XML 异步 JavaScript 和 XML)渲染、显示网页;服务器响应之后,页面会进行一个局部的刷新,也就是不会刷新整个页面,极大提高了页面加载与服务器处理的效率
- 在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML ;
4. Web标准
Web标准的构成
Web标准主要由**结构(structure), 表现(presentation)和行为(behavior)**组成, 记成SPB;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gBDmoDSC-1617258089278)(…/…/Users/杨杨/AppData/Roaming/Typora/typora-user-images/image-20210327135525001.png)]
标准化组织
Web标准由W3C制定, 细分又有其他组织各管各的语法标准
JavaScript语法的标准化组织是ECMA, DOM的是W3C, BOM无
三, 协议
1. TCP连接的三次握手四次挥手
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pu8c0eYh-1617258089280)(mkdown图片/TCP三次握手四次挥手.jpg)]
SYN: SYNchronize sequence numbers同步序列编号
ACK: ACKnowledge Character 确认字符
RST: Reset重定位,重新建立TCP连接
2. 网页用什么协议传输
应用层协议HTTP, 传输层协议TCP(可靠安全)
3. HTTP协议简介
Hyper Text Transfer Protocol(超文本传输协议),是一个基于TCP/IP通信协议来传递数据
4. https与http区别, 加密的原理是什么
http是无状态无连接的并且不加密, 而https会额外使用SSL协议加密传输
(1)首先客户端发送HTTPS请求到服务端的443端口,服务端返回证书,作为身份凭证,实现身份验证。证书内容包含颁发机构与过期时间等。
(2)客户端解析证书,如果证书过期,客户端弹出警告框,提示证书存在问题。如果证书不存在任何问题后,客户端生成一个随机数,也就是等会作为机密传输的私钥,并用该证书对此随机数进行加密,传输给服务端。
(3)服务端利用对应的私钥对该加密数据进行解密,得到该随机数具体的数值。
(4)在以后数据传输中,客户端与服务端利用此随机数对传输数据进行对称加密,实现加密传输。
对称加密, 用加密过的随机数当作公钥, 随机数由客户端生成
5. 页面当中怎么强制使用https
多种方法,以下用JS强制网页重定向成https: 利用location.protocol判断是否是https连接, 然后用拼接字符串的方法把https拼接到location.href前面
<script type= "text/javascript">
var targetProtocol = "https:";
if (window.location.protocol != targetProtocol){
window.location.href = targetProtocol + window.location.href.substring(window.location.protocol.length);
}
</script>
https://blog.csdn.net/qq_24090689/article/details/78092407
6. http状态码
服务器的回应被定义在几个状态码之间:5开头表示服务器错误,4开头表示客户端错误,3开头表示需要做进一步处理,2开头表示成功,1开头表示在请求被接受处理的同时提供的额外信息。
403forbidden, 404not found, 408request timeout请求超时
500内部服务器错误(我上线时候就是这样,明明端口都打开了), 599网络连接超时
100继续 200ok
四, HTML
1. 视口标签viewport里面都是什么
首先看一下viewport元标签极其属性:
html 代码:
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
这里是每个属性的详细介绍:
属性名 | 取值 | 描述 |
---|---|---|
width | 正整数 或?device-width | 定义视口的宽度,单位为像素 |
height | 正整数 或?device-height | 定义视口的高度,单位为像素,一般不用 |
initial-scale | [0.0-10.0] | 定义初始缩放值 |
minimum-scale | [0.0-10.0] | 定义缩小最小比例,它必须小于或等于maximum-scale设置 |
maximum-scale | [0.0-10.0] | 定义放大最大比例,它必须大于或等于minimum-scale设置 |
user-scalable | yes/no | 定义是否允许用户手动缩放页面,默认值yes |
1. label标签是什么
label标签常用于绑定一个表单元素, 给label标签加个for值, 然后表单元素里id跟这个for值一样, 就可以实现: 点击label标签也能自动focus表单
<label for="sex">男</label> <input type="radio"(单选框) id="sex"/>
为什么只有写在form表单内才能传给服务器
五, CSS
页面布局三个核心: 盒子模型, 浮动, 定位
CSS的三大特性
层叠性: 给相同选择器设置相同样式, 哪个离结构近就执行哪个(如果样式冲突, 按照就近原则)
继承性: 子标签会继承父标签的某些的样式
优先级: 权重
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6QLVanp-1617258089282)(mkdown图片/权重)]
怎么清楚网页元素们自带的内外边距
//通配选择器
*{
padding: 0;
margin: 0;
}
* a{} //选择所有a
em是什么单位, rem呢
em是相对单位, 相对文字来说的. 1个文字大小就是1em
比如: text-indent: 2em; 缩进2个字的距离
CSS height() innnerHeight outerHeight 位置的区别
opacity和rgba设置透明度的区别
用法:
div{opacity: 0.5;}
div{background: rgba(255,255,255,0.5);}
rgba()和opacity都能实现背景透明效果,但最大的不同是opacity有继承性, opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)比如,我们写透明的黑色部分都是用opcity(0.5),但这带出来一个问题就是如果你在这一div上写字的话,然后那个字体也会变成透明色。
CSS有哪些复合选择器,举例
后代选择器 ol a (空格) 选择子孙后代元素 子代选择器 .nav>p 只选亲儿子 并集选择器 .nav, .header{} 集体声明 链接伪类选择器 比如a:hover/a:visited 鼠标经过的/访问过的链接 :focus选择器 比如input:focus{} 选择获得光标的表单
CSS盒子模型
合并相邻元素的边框
如果是表格内单元格的合并:
table,th,td{ border: 1px dashed red; /*此时会出现边框重叠*/ border-collapse: collapse;/* 合并相邻边框*/ }
如果是相邻盒子边框:
- 设置border-left: none;
- 设置z-index, 让一个遮住另一个
圆角边框原理
怎么设置盒子阴影和文字阴影
//盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px 3px rgba(0,0,0,0.3) inset;
h-shadow: 水平阴影的位置, 正右负左;
v-shadow: 垂直阴影的位置, 正下负上;
blur: 可选, 模糊距离(虚实)
spread: 可选, 阴影的尺寸, 跟blur区别开
color: 可选, 阴影的颜色
inset: 可选, 默认为outset(外部阴影)时不用写也不能写, 写成inset改为内部阴影
盒子阴影不占用空间, 不影响布局排列
//文字阴影
text-shadow: h-shadow v-shadow blur color;
垂直居中的方法及原理
文字垂直居中的方法: line-hight=hight;
盒子垂直居中的方法:
- margin的一个典型案例就是水平居中, 但必须满足两个条件: 盒子必须指定宽度, 然后盒子左右外边距设置为auto;
- flex布局
- position 50%配合margin或者transform: translate(-50%)
水平居中的方法有哪些?举例; 区别是什么
水平居中分块级盒子水平居中和行内块的水平居中
块级盒子方法有: margin
行内(块)元素方法有: 父盒子设置text-align:c;
- margin的一个典型案例就是水平居中, 但必须满足两个条件: 盒子必须指定宽度, 然后盒子左右外边距设置为auto;
- flex布局
- position 50%配合margin或者transform: translate(-50%)
text-align: center;
网页布局
1. 传统PC端网页布局的三种方式
普通流(标准流): 块级,行内块这种
浮动: 设置浮动后会脱标,并具有行内块元素特性; 浮动的盒子不占位置,类似排队飞起, 不影响他前面的排队,但影响排在后面的元素, 即浮动的盒子总是贴着前面一个标准流盒子的下沿显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I1vfCm4E-1617258089284)(mkdown图片/浮动)]
定位:
2. 移动端常用的布局方式
flex布局
3. 清除浮动
为什么要清除浮动:
一般来说,浮动子盒子搭配一个标准流父盒子使用. 大部分时候这个父盒子是给了宽高的, 那么后面的标准流就不会被影响. 但是存在一些情况, 不给父盒子宽高, 比如淘宝下边"猜你喜欢"展示多个商品, 越拉越长, 不方便给高度而是让子盒子撑开父盒子. 如果这个时候不清除浮动, 会发生问题: 父元素高度为0, 影响后续布局
清除浮动三种方法
清除浮动的本质: 清除浮动元素造成的影响; 如果父盒子有宽高, 则不需要清除, 否则需要
清除浮动的方法 | 写法 | 原理 |
---|---|---|
额外标签法(隔墙法) | 在最后一个浮动的子盒子后面添加一个块级盒子, 里面建墙, 然后给墙样式clear:both; | 闭合浮动(不常用) |
给父级元素添加overflow属性 | 给父亲添加overflow: hidden/auto/scroll; | 猜想: 由于其触发了BFC,需要包含子元素,所以高度不是0,而是子元素高度。(常用) |
给父级元素添加after伪元素 | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2o8NUXYW-1617258089286)(mkdown图片/image-20210329230940611.png)] | 跟隔墙法原理一样, 闭合浮动 |
给父级元素添加双伪元素 | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sgjV1S0a-1617258089287)(mkdown图片/image-20210329231106334.png)] | 跟隔墙法原理一样, 闭合浮动 |
< img>和背景图片(background-img: url();)的使用区别
常用背景图片做的有: logo; 装饰性小图片; 超大背景图(游戏官网背景)
背景图片的典型应用: 精灵图
背景图片的优点: 通过控制盒子位置,非常容易精确控制背景图片的位置
常用插入图片的有: 商品图, 广告等
如何让背景图片水平居中显示
考点: background-pisition: x, y; 中x,y既可以是像素百分比,也可以是方位名词left, top, right等等. 如果是方位名词则书写顺序不影响效果, 并且只写一个方位名词默认着第二个方位居中对齐.
中心居中: bg-p: center ;或者50%, 50%;
怎么改背景透明
- background: rgba(0,0,0, 0.6); 不是bgc, 而是得直接改background;
display:none和visible:none区别
display:none
的节点不会被加入Render tree, 而visibility: hidden
则会,所以,如果某个节点最开始是不显示的,设为display:none
是更优的。补充: DOM 和 CSSOM 合并后生成 Render Tree; CSSOM: CSS Object Model,浏览器将CSS代码解析成树形的数据结构; Render Tree 和DOM一样,以多叉树的形式保存了每个节点的css属性、节点本身属性、以及节点的孩子节点
HTML5和CSS3新增了哪些
1. HTML5新增
HTML5新增标签名称 | 举例 | 用法及特殊解释 |
---|---|---|
语义化标签 |
| 不靠css渲染,页面结构仍然清晰; 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页; 有利于SEO; 便于开发维护; |
新增多媒体标签(视频) | /而不需要用flash或其他插件; vidos尽量用mp4格式, 所有浏览器都支持 | |
新增input类型 | type=“email”/“url”/“date”… | |
新增input属性 | placeholder=“提示字符” |
注意:
- video的属性设置autoplay: autoplay可以自动播放, 但是在谷歌浏览器中禁用了自动播放, 需要再添加: muted=“muted”
- 改placeholder样式时如下: input::placeholder {color: xxx}
2. CSS3新增
新增的东西 | ||
---|---|---|
新增选择器 | 属性选择器inpit[value]{}; div[class^icon]以icon开头的类们/结构伪类选择器nth-child(n)/伪元素选择器::before, ::after默认为行内元素,无大小 | |
新盒子模型 | box-sizing: border-box;(盒子大小为width) content-box;(默认跟以前一样,width+padding+border) | 前提padding和border不超过width宽度时, 用border-box就不会撑开盒子了 |
其他特性(了解) | calc函数(css里执行一些计算); filter: blur(5px); 模糊处理 | |
过渡(重点!!) | transition: 属性 花费时间 运动曲线 开始时间; 比如: transition: width 0.5s ease 1s, height .5s ease 1s; 一般配合::hover{新属性}使用 | 多个属性逗号分隔, linear(线性), ease(渐慢), ease-in(渐快)… |
2D转换 | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YTXFJord-1617258089288)(mkdown图片/2D)]translate移动/rotate(45deg)旋转/scale(0.5,2)缩放/综合写法 transform-origin: x y;还可设置转换中心点 | 转换不会影响其他盒子 |
3D转换 | translate3d; perspective | |
动画 | 1.先定义动画 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukEL22aI-1617258089288)(mkdown图片/动画)]2.再调用动画: animation-name: 动画名; animation-duration: 持续时间; |
注意:
nth-child(even)和nth-of-type(even)的区别:
child先看child排序,type先看type再排序.
section div:nth-child(1)会把所有孩子都排序,但是1号孩子并不一定是div,可能是个a, 那就对不上了,会导致失效;
而section nth-of-type(1)会选择第一个类型为div的section的子盒子, 就不会失效
过渡transition也是样式, 有样式冲突的问题, 改多个属性的时候,必须写在一个transition里,逗号隔开; 或者直接写transition: all .5s;
1. 视频标签在chorm浏览器中特性
css3新增:
background: rgba();//设置背景透明度
2. 怎么解决CSS中边框和padding撑大盒子的问题
- 盒子不给大小, 比如没宽度, 那padding-left/right就不会再撑开盒子
JS基础
JS 一定要放在 Body 的最底部么?
其实并不是一定必须放在最底部, 但是从渲染角度看, 放在底部对用户的使用是最好的.
这就涉及到浏览器的渲染过程
- 浏览器在请求到HTML代码后, 在生成DOM的最开始阶段, 就会并行发起CSS, 图片, js的请求, 无论他们是否写在head里
- 如果没有碰到js, 那么浏览器在执行html的时候, 会不断更新DOM树和CSSOM树来生成Render tree, 生成后浏览器就知道该怎么布局, 不太影响用户观看
- 但是, js的执行优先级很高, 一旦碰到, 浏览器就会停止更新DOM, 可以说DOM被阻断了, 一直到该js代码被下载-解析-执行完成后, 才开始继续更新DOM.
- 如果碰上延迟,或者js文件很多, 这会导致在下载过程中,用户只能看到空白
突然想起来, 我的"taopao"项目就没放底部,难怪加载慢
css内部样式表用
网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面
为什么css用link标签的href引入而js用script标签的src引入
href和src的区别
一般加载CSS用href,并放在头部;加载script用src,放在body内的下方。href
是hypertext reference的缩写,表示超文本引用,用来建立当前元素和文档间的链接。常用的有link,a。
当CSS使用href引用,浏览器会识别该文档问CSS,并行下载,不会停止对当前文档的加载。src
是source的缩写,是资源,页面必不可少的一部分,src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。
当script使用src引用,浏览器解析到该元素时会停止对文档的渲染,直到该资源加载完成。这也是将script放底部而不是头部的原因。
BFC
BFC 块级格式化上下文
边距重叠问题的解决
BFC的渲染规则[原理]
1.在垂直方向的边距会发生重叠
2.BFC的区域不会与浮动元素的box重叠
3.在页面是一个独立的容易,外边的元素不会影响内部的元素,内部的元素也不会影响外边的元素
4.计算BFC高度的时候,浮动元素也会参与计算
怎么创建BFC
1.overflow:hidden; overflow不为visibile
2.float值不为none
3.postion值不为static和relative
4.display:inline-box,table-cell
DOM
BOM
什么是BOM
BOM(Browser Object Model) 即
浏览器对象模型
, 它提供了独立于内容而与浏览器窗口进行交互的对象, 比如window, locationDOM的顶级对象是document, BOM的顶级对象是window
举例常见的BOM对象
window对象的常见事件
window.onload = function(){}
//或者
window.addEventListener("load", function(){});
//当文档内容完全加载完成时触发, 把JS写在里面就可以放在页面任何位置
//第一种传统注册方式只能写一个, 后一种方法监听就没有限制
//根据浏览器改变窗口大小
window.onresize = function() {
var nwidth = document.documentElement.clientWidth;
//这里有时也常用window.innerWidth,但有略微区别
var nheight = document.documentElement.clientHeight;
main.style.width = (nwidth - 40) + 'px';
main.style.height = (nheight - 40) + 'px';
}
//同样可以写成方法监听形式
onload当文档内容完全加载完成时触发;onresize在窗口大小发生改变时触发,做碰壁游戏时有用到;
onresize常用于响应式布局,当窗口大小改变时触发,除了上个案例还有如下
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
location对象的常见属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GxmeOp06-1617258089289)(mkdown图片/image-20210326234433730.png)]
location.search里包含各种参数, 比如登陆界面form表单里输入姓名, 下个页面根据姓名显示欢迎词时, 就需要用location.search获取用户姓名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyJ6dOh9-1617258089289)(mkdown图片/image-20210326235145369.png)]
location对象除了属性以外还有方法函数, 你能举例吗
location.assign() 重定向页面,类似href; location.reload(true), 清空缓存强制刷新
navigator对象
判断用户用的移动端还是PC端打开,因为navigator对象里包含浏览器的信息, 比如
navigator.userAgent
history对象
实现前进后退等, 与浏览器历史进行交互
history.back(); history.forward(); history.go()
事件高级
this/event.target区别
总结: this指向调用它的那个对象, 如果在函数里, 那么this指向函数调用者; 如果是window对象的常见事件, this指向window; 构造函数里的this指向新创建的实例对象
<script>
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)
console.log(this); //window
function fn() {
console.log(this); //window
}
//其实调用的时候是 window.fn();
//定时器里的this也指向window
window.setTimeout(function() {
console.log(this);
}, 1000);
// 2. 方法调用中谁调用this指向谁
var o = {
sayHi: function() {
console.log(this); // this指向的是 o 这个对象
}
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
// console.log(this); // this指向的是btn这个按钮对象
// }
btn.addEventListener('click', function() {
console.log(this); // this指向的是btn这个按钮对象
})
// 3. 构造函数中this指向构造函数的实例
function Fun() {
console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();
</script>
还有种情况, ul里有li, 给ul绑定事件click, 按li也会触发(冒泡)
window.onload和document.addEventListener(‘DOMContentLoaded’, function(){})的区别
window.onload的加载完指所有内容(包括图形,脚本等), 但DOMContentLoaded只加载好DOM树的内容,不包括样式表,图片等.
淘宝的flexible.js就是用的DOMContentLoaded, 因为有很多图,加载慢也不影响功能使用
document.body和document.documentElement区别
(1)什么是document.body?
返回html dom中的body节点 即
(2)什么是 document.documentElement?
返回html dom中的root 节点 即
window.innerHeight和document.documentElement.clientHeight区别
1.window.innerHeight属于BOM(浏览器对象模型),而document.documentElement.clientHeight则属于文档对象模型
2.window.innerHeight获取的高度包含横向滚动条,而document.documentElement.clientHeight不包含横向滚动条
JS的同步和异步
因为JS是单线程,按顺序执行, 为了防止有的时候一个任务耗费过多时间, 并且利用多核CPU的计算能力, JS中出现同步和异步
1. 异步任务的类型
一般异步任务有以下三种类型:
1.普通事件(如click,resize); 2.资源加载(如load,error); 3.定时器(如setInterval)
异步任务相关
回调函数
添加到任务队列(消息队列)中
2. JS执行机制
- 先执行同步任务
- 异步任务(callback函数)放入任务队列中
- 一旦同步任务执行完毕,按次序读取队列中的异步任务,此任务进入执行栈执行
移动端
1. 如何禁用长按页面弹出菜单
img, a {-webkit-touch-callout: none}
2. 如何清除按钮的点击遮罩/链接的点击高亮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n8DGCDVf-1617258089290)(mkdown图片/移动端)]