# 技术栈知识点巩固——Html

Posted 2022-12-09 爱码代码的喵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了# 技术栈知识点巩固——Html相关的知识，希望对你有一定的参考价值。

技术栈知识点巩固——html

Src 和 href 的区别

src

表示对资源的应用，它指向的内容会嵌入到当前标签所在的位置。

href

超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。

Doctype(文档类型)的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档。

行内元素

行级元素不能设置宽高
a b span img input select strong

块级元素

块级元素可以设置宽高
块级元素是独占一行
div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p

cookies、sessionStorage、localStorage

cookies

网站为了标示用户身份而储存在用户本地端上的数据
cookie数据始终在同源的http请求中携带，会在浏览器和服务器间来回传递
数据大小不能超过4K
设置过期时间之前一直有效

sessionStorage

不会自动把数据发送给服务器，只在本地保存
比cookie的容量大
当前浏览器窗口关闭后自动删除

localStorage

不会自动把数据发送给服务器，只在本地保存
比cookie的容量大
浏览器关闭数据不会主动丢失除非主动删除数据

crossorigin 属性

设置 crossorigin属性后，script标签去请求资源的时候，request会带上origin头，然后会要求服务器进行 cors校验，跨域的时候如果response header 没有 Access-Control-Allow-Origin 是不会拿到资源的。cors验证通过后，拿到的script运行内部报错的话，window.onerror 捕获的时候，内部的error.message可以看到完整的错误信息。

Html 事件冒泡

事件冒泡

如下面的html代码，在点击外面和里面的 div时都会触发 OutFunction 方法，这个就是事件冒泡

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>事件冒泡</h1>
        <div class='Out' onclick='OutFunction(event)'>
            <div class='Middle'>
                 <div class='Inner' onclick='InnerFunction(event)'></div>
            </div>
       </div>
       <script type="text/javascript">
        function InnerFunction(e)
            debugger
        
        function OutFunction(e)
            debugger
        
        </script>
        <style>
            .Out
                border: 1px solid red;
                height: 200px;
                padding: 10px 10px 10px 10px;
            
            .Middle
                border: 1px solid black;
                height: 100px;
            
        </style>
    </body>
</html>

阻止事件冒泡

在触发InnerFunction时，不让他冒泡触发OutFunction。
使用 e.stopPropagation();

 function InnerFunction(e)
     // 业务逻辑
     alert('InnerFunction()触发了')
     //如果提供了事件对象，则这是一个非IE浏览器 
     if ( e && e.stopPropagation ) 
         //因此它支持W3C的stopPropagation()方法 
         e.stopPropagation(); 
     
     else 
         //否则，我们需要使用IE的方式来取消事件冒泡 
         window.event.cancelBubble = true; 
     
 
function OutFunction(e)
    alert('OutFunction()触发了')

script标签中defer和async的区别

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析。
执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

Html BOM

BOM是一套操作浏览器的API（接口/方法/属性）
Bom：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
Browser对象：指BOM提供的多个对象，包括：Window、Navigator、Screen、History、Location等。

其中Window对象为顶层对象，其他对象都为Window对象的子对象。

Bom 对象

Window 对象：表示浏览器打开的窗口，包括获取焦点、改变滚动条、设置定时器等等。
Navigator 对象：包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。
Screen对象：包含屏幕信息。如：获取屏幕高度、宽度等等。
History对象：可对当前页的浏览历史进行操作，如：前进、后退等。
Location对象：可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。

浏览器渲染的过程

页面加载过程

DNS域名解析：拿到服务器IP
与服务器建立TCP连接
服务器建立了TCP连接后，向服务器发起请求
web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。
返回响应结果
关闭TCP连接

浏览器渲染过程

解析HTML、生成DOM树、解析CSS、生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display: 将像素发送给GPU，最后通过调用操作系统Native GUI的API绘制，展示在页面上。

构建 DOM 流程

浏览器将HTML解析成树形的数据结构，简称DOM。
字节数据——>字符串——>Token——>Node——>Dom

构建 CSSOM流程

解析CSS文件（如果是link的）
将字节转换成字符。
确定tokens（标签）
将tokens转换成节点
最后根据节点构建CSSOM树

构建渲染树

从 dom 树的根节点开始遍历每一个可见的节点
从 css 规则树中找到对应的节点，然后根据节点信息和样式组合成渲染树

布局与绘制

当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）
这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。
布局完成后，浏览器会立即发出Paint Setup和Paint事件，将渲染树转换成屏幕上的像素。

懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载测试</title>
  <style>
    img 
      height: 450px;
      display: block;
      margin-bottom: 20px;
    
  </style>
</head>
<body>
  <!--图片地址暂时先保存在data-src这个自定义属性上面-->
  <img data-src="./image/img-loop/1.jpg" alt="懒加载1" />
  <img data-src="./image/img-loop/2.jpg" alt="懒加载2" />
  <img data-src="./image/img-loop/3.jpg" alt="懒加载3" />
  <img data-src="./image/img-loop/4.jpg" alt="懒加载4" />
  <img data-src="./image/img-loop/5.jpg" alt="懒加载5" />
  <script>
    const imgs = document.getElementsByTagName('img');
    function lazyLoad(imgs) 
      // 视口的高度；
      const clientH = document.documentElement.clientHeight;
      // 滚动的距离，这里的逻辑判断是为了做兼容性处理；
      const clientT = document.documentElement.scrollTop || document.body.scrollTop;
      for(let i = 0; i < imgs.length; i++) 
        // 逻辑判断，如果视口高度+滚动距离 > 图片到浏览器顶部的距离就去加载；
        // !imgs[i].src 是避免重复请求，可以把该条件取消试试：可以看到不加该条件的话往回滚动就会重复请求；
        if(clientH + clientT > imgs[i].offsetTop && !imgs[i].src) 
          // 使用data-xx的自定义属性可以通过dom元素的dataset.xx取得；
          imgs[i].src = imgs[i].dataset.src;
        
      
    ;
    // 一开始能够加载显示在视口中的图片；
    lazyLoad(imgs);
    // 监听滚动事件，加载后面的图片；
    window.onscroll = () => lazyLoad(imgs);
  </script>
</body>
</html>

Iframe

iframe会阻塞主页面onload事件；不利于搜索引擎识别；增加http请求；
展现嵌入的网页；加载速度较慢的内容，如广告；可以跨子域通信；

<iframe src="home.html"></iframe>

Dom 节点获取

getElementById // 按照 id 查询
getElementsByTagName // 按照标签名查询
getElementsByClassName // 按照类名查询
querySelectorAll // 按照 css 选择器查询

// 按照 id 查询
var imooc = document.getElementById('main') // 查询到 id 为 main 的元素
// 按照标签名查询
var pList = document.getElementsByTagName('p')  // 查询到标签为 p 的集合
console.log(divList.length)
console.log(divList[0])
// 按照类名查询
var moocList = document.getElementsByClassName('main') // 查询到类名为 main 的集合
// 按照 css 选择器查询
var pList = document.querySelectorAll('.main') // 查询到类名为 main 的集合

选择器优先级

！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承

从浏览器输入 Url 到显示页面的步骤

根据Url进行DNS域名解析，找到真实IP
向服务器发送请求，服务器交给后端处理完成返回数据，浏览器接收后端返回的数据
浏览器加载到的资源进行语法解析，建立相应的内部数据结构。见上面浏览器渲染的过程。
载入解析到的资源文件、渲染页面、完成。

网站性能优化

Content 方面

减少HTTP请求
减少DNS查询：DNS缓存
减少DOM元素数量

Server方面

使用CDN
配置ETag
对组件使用压缩

Cookie方面

减小cokkie大小

Css 方面

样式放到页面顶部
不使用CSS表达式
使用<link>不适用@import

JS方面

脚本放到页面底部
压缩JS和Css
较少DOM访问

图片方面

优化图片：压缩
优化css精灵
不要在Html中拉伸图片

浏览器内核

渲染引擎

负责拿到网页的内容，将网页的内容进行整理、加工最终显示到电脑屏幕上。

Js 引擎

解析和执行javascript来实现网页的动态效果
在构建DOM时，Html解析器若遇到了JavaScript那么它会暂停文档的解析，将控制权交给JS引擎，等JS引擎执行完毕后，浏览器再从中端的地方恢复继续解析文档

一次完整的 HTTP 请求

建立TCP连接：三次握手
Web浏览器向Web服务器发送请求：一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令
Web浏览器发送请求头
Web服务器应答
服务器发送响应头
服务器向浏览器发送数据
服务器关闭TCP连接

Http 和 Https

https有ca证书，http一般没有
http是超文本传输协议，信息是明文传输
https具有安全性的ssl加密传输协议
http默认端口80，https默认端口443

Html 语义化

指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

Http 请求方法

方法	描述
`HEAD`	与 `GET` 相同，但只返回 `HTTP` 报头，不返回文档主体。
`PUT`	上传指定的 `URI` 表示。
`DELETE`	删除指定资源。
`OPTIONS`	返回服务器支持的 `HTTP` 方法。
`CONNECT`	把请求连接转换到透明的 `TCP/IP` 通道。