前端基础
基于浏览器的 web 开发
-
输入 URL 发生了什么？
（1）URL 解析
（2）DNS 查询
域名解析
（3）TCP 连接
三次握手、四次挥手
（4）HTTP 请求
（5）响应请求
（6）页面渲染 -
浏览器渲染解析过程
html 解析–>js 解析–>css 解析
DOM 树有 script 插入，阻塞渲染
- 构建 dom 树
- 构建 cssom 树
- 合并两树，生成渲染树（render tree)
- 布局，创建文档流
- 绘制
- 重排和重绘
-
核心技术
三驾马车：html、css、javascript
查询学习文档：
https://developer.mozilla.org/zh-CN/ -
nginx 简单使用
（1）开启
1 | start nginx |
（2）关闭
1 | nginx -s quit |
（3）查看启动情况
1 | tasklist /fi "imagename eq nginx.exe" |
（4）重新加载并且重启
1 | nginx -s reload |
（5）配置文件
conf/nginx.conf
（6）日志文件
logs/error.log
初识 HTML 和 DOM
- HTML 标签分类
内容分类
- 主内容分类
- 表单相关内容类
- 特殊内容类
(1) 展示类
(2) 表单类 - 文本标签
- 图像标签
- 语义标签
…
DOM 节点操作
用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分。（例如：页面元素、字符串或注释等等）。
- 查询
querySelector
querySelectorAll
getElementById - 创建 & 插入
createElement
createTextNode
appendChile - 删除
removeChild - 替换
获取元素
- 根据 id 获取元素
getElementById - 根据标签名获取元素
getElementsByTagName - 根据类名获取元素
getElementsByClassName - 根据选择器
querySelector
querySelectorAll - 获取特殊元素
（1）body
document.body
（2）html
document.documentElement
事件绑定两种方法
事件：触发 - 响应机制
- on 事件名字
1 | onclicke"alert()" |
- addEventListener/removeEventListener
DOM 生命周期
- DOMContentLoaded-- 完全加载构造 DOM 树
- load -- 加载额外图片样式等资源
- beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
- unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。
鼠标与键盘事件
- 鼠标点击事件
单击
双击
右键 - 键盘事件
- 阻止默认事件
事件传递和绑定和委托
- 冒泡
- 捕获
000
BOM 和 DOM
开发工具
浏览器开发者模式
- F12 使用
（1）元素
查看 dom 结构
（2）控制台
调试 js 代码信息，类似于打断点调试