HTML 知识点（未完）

最新推荐文章于 2024-11-18 12:11:58 发布

置顶 ton365

最新推荐文章于 2024-11-18 12:11:58 发布

阅读量259

点赞数

分类专栏： http 前端基础面试文章标签： javascript css html5 css3 chrome

本文链接：https://blog.csdn.net/u012015672/article/details/105931291

版权

前端基础同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

面试

4 篇文章 0 订阅

订阅专栏

http

2 篇文章 0 订阅

订阅专栏

HTML 知识点

三列布局- (高度已知，左右宽度固定，中间自适应)

布局方案	优点	缺点
浮动	兼容性好	脱离文档流，需清除浮动
绝对定位	比较快捷。	因为其本身脱离了文档流，导致了其子元素都脱离了文档流，使用性较差。
flex布局	目前是比较完美的方案。	只兼容到ie9。
表格布局	兼容性好，当需要兼容ie8时可以用表格布局。	多栏布局时，某栏高度增加，会使其他栏高度一起增加。
网格布局	新技术，代码量少

<!-- 网格布局 -->
<body>
    <section class="layout grid"> 
        <style media="screen">
            .layout.grid .left-right-center{
                display: grid;
                width: 100%;
                grid-template-rows: 100px; // 设置行高
                grid-template-columns: 300px auto 300px; // 设置每列的宽度

        </style>
    	<article class="left-right-center">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>
</body>

css盒模型

CSS盒模型的认识

css属性: content padding border margin

两种模型：IE盒模型（怪异盒模型）和标准盒模型

两种模型的区别：计算高度和宽度的不同

两种模型如何设置：box-sizing: content-box(标准盒模型)； box-sizing: border-box(IE盒模型)

JS如何设置获取盒模型对应的宽和高

获取方式	优缺点
dom.style.width/height	只能获取内联样式设置的宽和高
dom.current style.width	获取浏览器渲染后的宽和高，只支持ie
window.getcomputedstyle(dom).width	兼容性更好
dom.getboundingclentreact().width	适用于取元素的绝对位置。能取到 left top width height 四个属性。// 获取浏览器渲染后的宽和高一般用于获取元素绝对位置

实例题（根据盒模型解释边距重叠）子元素边距成了父元素边距
1. 块级元素包含了子块级元素，子元素是100像素
2. 子元素与父元素上边距是10像素
3. 父元素是110px还是100px (100px，设置了overflow:hidden就成了110px)
- 另一种兄弟块级元素-
  - 挨着每个都有上边距或每个都有下边距。-
  - 该重叠的原则就是取最大值
  - 空元素的边距-取margin-top和margin-bottom的最大值
- 解决方案：
  
  父元素创建成一个BFC (无论父子，兄弟情况)

4. BFC (Block formatting context)

是一个边距重叠解决方案

BFC（边距重叠解决方案）

1、BFC的基本概念：块级格式化上下文；

2、BFC的原理：BFC的渲染规则。

①：在BFC这个元素的垂直方向的边距会发生重叠。(同一个BFC下外边距会发生重叠)

②：BFC的区域不会与浮动元素的box重叠。（清除浮动）

③：BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。

④：计算BFC高度时，浮动元素也会参与计算

3、如何创建BFC

①：float不为none。

②：position不为static或者relative。

③：display为inline-block或者是table相关的。

④：overflow不为visible。

⑤ : body 根元素

应用场景:

左右布局时,float
相邻div使用margin产生边距重叠

dom事件

基本概念： DOM事件的级别
- DOM0: element.οnclick=function()
- DOM2: element.addEventListener(‘click’, function(){}, false)
- DOM3: element.addEventListener(‘keyup’, function(){}, false)
DOM事件模型
1. event.target 2. event.currentTarget
  event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素
DOM事件流
1. 事件流 -->《捕获》 2. 目标阶段 3. 冒泡
- 描述DOM事件捕获的具体流程
  1. window 2. document 3. html 4. body 5. 按html结构 6. 目标元素
Event对象的常见应用
1. e.preventDefault() 2. e.stopPropagation() 3. e.stopImmediatePropagation() 4. e.currentTarget() 5. e.target()

自定义事件

var eve = new Event('custome');
ev.addEventListener('custome', function() {
    console.log('custome');
});
ev.dispatchEvent(eve);

http协议

HTTP协议的主要特点

简单快速（资源的URI是固定的，输入URI)、灵活（头部分有不同数据类型，一个http协议不同传输）、
1. 无连接（连接一次就断掉）
  - 无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。
2. 无状态（两次连接身份）
  - 是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传
HTTP报文的组成部分
- 请求报文
  
  请求行请求头空行请求体
- 响应报文
  
  状态行响应头空行响应体
- HTTP方法
  
  方法名方法作用注意
  GET 获取资源
  POST 传输资源
  PUT 更新资源
  DELETE 删除资源
  HEAD 获得报文首部

方法名	方法作用	注意
GET	获取资源
POST	传输资源
PUT	更新资源
DELETE	删除资源
HEAD	获得报文首部

POST和GET的区别

get	post
在浏览器回退时是无害的	会再次提交请求
产生的URL地址可以被收藏	post不可以
`请求会被浏览器主动缓存`	不会，除非手动设置
只能进行url编码	支持多种编码方式
`请求参数会被完整保留在浏览器历史记录里`	参数不会被保留
`请求在URL中传送的参数是有长度限制的`	没有限制
对参数的数据类型，get只接受ASCII字符	没有限制
更不安全，因为参数直接暴露在URL上，所以不能咏柳传递敏感信息	没暴露
参数通过URL传递	放在Request body中

HTTP状态码

状态码	意义
1xx	指示信息 - 表示请求已接收，继续处理。
2xx	成功 - 表示请求已被成功接收。
3xx	重定向 - 要完成请求必须进行更进一步的操作。
4xx	客户端错误 - 请求有语法错误或请求无法实现。
5xx	服务器错误 - 服务器未能实现合法的请求。

状态码	意义
200 OK	客户端请求成功
206 Parital Content	客户发送了一个带有Range头的GET请求，服务器完成了它
301 Moved Permanently	所请求的页面已经转移至新的url
302 Found	所请求的也么已经临时转移至新的url
304 Not Modified	客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
400 Bad Request	客户端请求有语法错误，不能被服务器所理解
401 Unanthorized	请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden	对被请求页面的访问被禁止
404 Not Found	请求资源不存在
500 Internal Server Error	服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503 Server Unavaliable	请求未完成，服务器临时过载或当机，一段时间后可能恢复正常

什么是持久连接

HTTP协议采用“请求-应答”模式，当使用普通模式，即非Keep-Alive模式时, 每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）

当使用Keep-Alive模式（又称持久连接、连接重用）时, Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。
- 使用了持久连接
  
  请求1->响应1->请求2->响应2->请求3->响应3
  
  变成了
  
  请求1->请求2->请求3->响应1->响应2->响应3
什么是管线化
- 管线化通过持久连接完成，仅http/1.1 支持此技术
- 只有get和head请求可以进行管线化，而post则有所限制
- 初次创建连接不应启动管线机制，因为对方（服务器）不一定支持HTTP/1.1版本的协议
- …

安全

CSRF

基本概念和缩写
- CSRF, 通常称为跨站请求伪造，英文名Cross-site request forgery 缩写CSRF。
攻击原理
访问网站B时，网站B引诱点击链接，用户浏览器携带的cookie就被网站B的某些代码访问了。例如：正文隐藏着<img src=xxx.com/pay?id=200 />

这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

基本概念和缩写
- XSS, 跨站脚本攻击, 英文名Cross Site Scripting 缩写XSS。
攻击原理
访问网站：嵌入

跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
xss漏洞通常是通过php的输出函数将javascript代码输出到html页面中，通过用户本地浏览器执行的，所以xss漏洞关键就是寻找参数未过滤的输出函数。

渲染机制类

什么是DOCTYPE及作用
- DTD (document type definition, 文档类型定义)是一系列的语法规则，用来定义XML或HTML的文件类型。
  - 作用：浏览器会使用它来判断文档类型, 决定使用何种协议来解析，以及切换浏览器模式。
- DOCTYPE是用来声明文档类型和DTD规范的,
  - 作用：一个主要的用途便是文件的合法性验证。如果文件代码不合法, 那么浏览器解析时便会出一些差错。
HTML5的DOCTYPE:

HTML4有严格模式和传统模式
浏览器渲染过程

一些概念

名称	概念
DOM Tree	浏览器将HTML解析成树形的数据结构。
CSS Rule Tree	浏览器将CSS解析成树形的数据结构。
Render Tree	DOM和CSSOM合并后生成Render Tree。
layout	有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting	按照算出来的规则，通过显卡，把内容画到屏幕上。

1。当用户输入一个URL，浏览器就会发送一个请求，请求URL对应的资源
2。HTML解析器会将这个文件解析，构建成一棵DOM树
3。构建DOM树时，遇到JS和CSS元素，HTML解析器就将控制权转让给JS或者CSS解析器
4。JS或者CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成
5。DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树
6。接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树
7。最后浏览器根据这棵layout树，将页面渲染到屏幕上去

重排Reflow
- 定义：当浏览器发现某个部分发生了变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。
- 触发Reflow:
  1. 当你增加、删除、修改dom节点时，会导致Reflow或Repaint
  2. 当你移动DOM的位置，或是搞个动画的时候
  3. 当你修改CSS样式的时候
  4. 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候
  5. 当你修改网页的默认字体时
重绘Repaint
- 定义：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
- 触发Repaint：
  1. DOM改动
  2. CSS改动