HTML/CSS/JS基础大复习

其他 2021-12-13 21:18:02 阅读次数: 0

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. 网页请求与显示( 输入网址到网页显示的整个流程)

网页请求是一个单向请求的过程，即是一个主机向服务器请求数据，服务器返回相应的数据的过程。

  1. URL形式为[协议https://域名(hosts)www.abc.com/地址index.html/打开方式], 首先得进行DNS解析, 把域名转换为具体得IP地址, 后面才好寻址MAC-物理
  2. 浏览器发宋 HTTP 请求至服务器, 建立TCP连接
  3. 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
  4. 服务器将得到的 HTML 文件发送给浏览器(http响应)；
  5. 在浏览器还没有完全接收 HTML 文件时便开始通Ajax（Asynchronous Javascript And XML 异步 JavaScript 和 XML）渲染、显示网页；服务器响应之后，页面会进行一个局部的刷新，也就是不会刷新整个页面，极大提高了页面加载与服务器处理的效率
  6. 在执行 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的三大特性

  1. 层叠性: 给相同选择器设置相同样式, 哪个离结构近就执行哪个(如果样式冲突, 按照就近原则)

  2. 继承性: 子标签会继承父标签的某些的样式

  3. 优先级: 权重

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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;/* 合并相邻边框*/
		}

如果是相邻盒子边框:

  1. 设置border-left: none;
  2. 设置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;

盒子垂直居中的方法:

  1. margin的一个典型案例就是水平居中, 但必须满足两个条件: 盒子必须指定宽度, 然后盒子左右外边距设置为auto;
  1. flex布局
  2. position 50%配合margin或者transform: translate(-50%)

水平居中的方法有哪些?举例; 区别是什么

水平居中分块级盒子水平居中和行内块的水平居中

块级盒子方法有: margin

行内(块)元素方法有: 父盒子设置text-align:c;

  1. margin的一个典型案例就是水平居中, 但必须满足两个条件: 盒子必须指定宽度, 然后盒子左右外边距设置为auto;
  2. flex布局
  3. 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%;

怎么改背景透明

  1. 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=“提示字符”

注意:

  1. video的属性设置autoplay: autoplay可以自动播放, 但是在谷歌浏览器中禁用了自动播放, 需要再添加: muted=“muted”
  2. 改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: 持续时间;

注意:

  1. 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的子盒子, 就不会失效

  2. 过渡transition也是样式, 有样式冲突的问题, 改多个属性的时候,必须写在一个transition里,逗号隔开; 或者直接写transition: all .5s;

1. 视频标签在chorm浏览器中特性

css3新增:
background: rgba();//设置背景透明度

2. 怎么解决CSS中边框和padding撑大盒子的问题

  1. 盒子不给大小, 比如没宽度, 那padding-left/right就不会再撑开盒子

JS基础

JS 一定要放在 Body 的最底部么？

其实并不是一定必须放在最底部, 但是从渲染角度看, 放在底部对用户的使用是最好的.

这就涉及到浏览器的渲染过程

  1. 浏览器在请求到HTML代码后, 在生成DOM的最开始阶段, 就会并行发起CSS, 图片, js的请求, 无论他们是否写在head里
  2. 如果没有碰到js, 那么浏览器在执行html的时候, 会不断更新DOM树和CSSOM树来生成Render tree, 生成后浏览器就知道该怎么布局, 不太影响用户观看
  3. 但是, js的执行优先级很高, 一旦碰到, 浏览器就会停止更新DOM, 可以说DOM被阻断了, 一直到该js代码被下载-解析-执行完成后, 才开始继续更新DOM.
  4. 如果碰上延迟,或者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, location

DOM的顶级对象是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中出现同步和异步

image-20210326233524762

1. 异步任务的类型

一般异步任务有以下三种类型:

1.普通事件(如click,resize); 2.资源加载(如load,error); 3.定时器(如setInterval)

异步任务相关回调函数添加到任务队列(消息队列)中

2. JS执行机制

  1. 先执行同步任务
  2. 异步任务(callback函数)放入任务队列中
  3. 一旦同步任务执行完毕,按次序读取队列中的异步任务,此任务进入执行栈执行

解决img与父盒子底部空白间隙问题

移动端

1. 如何禁用长按页面弹出菜单

img, a {
    
    -webkit-touch-callout: none}

2. 如何清除按钮的点击遮罩/链接的点击高亮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n8DGCDVf-1617258089290)(mkdown图片/移动端)]

猜你喜欢

转载自blog.csdn.net/Fky_mie/article/details/115373221
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022