携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
css 选择器中的标签指定属性选择
- (可用于自定义属性,多个有相同类名的同标签选择某一标签时) 图中三个input标签,类名,tpye相同,name属性不同,我们用name属性来选中具体的标签
- css选择器中选中标签有几种方法:
- 1.标签名选择器
- div{}
- 2.类名选择器
- .box{}
- 3.id选择器
- #name{}
- 4.指定属性选择器,今天讲的这一种,一般来说上面三种足够我们开发使用了,但是在特殊情况时,我们会使用这种方法来选中标签.(可用于自定义属性,多个有相同类名的同标签选择某一标签时)
- 标签名[属性名:'属性值']{}
css 选择器中的标签指定属性选择
input[name="bookname"]{
background: #000;
}
- 同时由于JavaScript获取DOM对象的document.queryselector('css选择器')中使用的也是css选择器,所以该种方法在获取dom对象时也可以使用
- 利用css选择器来获取DOM对象
const bookname = document.querySelector('input[name="bookname"]').value
const author = document.querySelector('input[name="author').value
const publisher = document.querySelector('input[name="publisher').value
TCP三次握手
-
TCP : 一种 传输控制协议 传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议
-
TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的）
-
TCP三次握手 :
第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送) 第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送) 第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)
渲染引擎渲染HTML流程图
渲染引擎渲染响应返回的HTML文本
如下图所示
解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流) :根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘) :根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display: 将像素发送给GPU，最后通过调用操作系统Native GUI的API绘制，展示在页面上。
