Document

--- theme: github --- ## 一、前端开发三件套 > 前端开发最基础的知识，是前端工程师入门的起点，也是陪伴我们整个职业生涯的伙伴。 - HTML (Hyper Text Markup Language)：构建页面基本结构； - CSS (Cascading Style Sheet)：定义前端页面的展现效果； - JS (JavaScript)：实现页面的交互等功能。 ## 二、HTML 简史 ^[1] - HTML 1.0：在 1993 年 6 月作为互联网工程工作小组(IETF)工作草案发布,由此超文本标记语言第一版诞生。 - HTML 2.0：1995 年 1 1 月作为 RFC 1866 发布，于 2000 年 6 月发布之后被宣布已经过时。 - HTML 3.2：1997 年 1 月 14 日，W3C 推荐标准。 - HTML 4.0：1997 年 12 月 18 日，W3C 推荐标准。 - HTML 4.01（微小改进）：1999 年 12 月 24 日，W3C 推荐标准。 - HTML 5：HTML5 是公认的下一代 Web 语言，极大地提升了 Web 在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。 2014 年 10 月 28 日，W3C 推荐标准。 ## 三、HTML 结构先来看一个示例。 ```html Document ``` HTML 文件内容为树形结构。一对尖括号包裹的字符称为一个标签，大多数标签都有开始标签与闭合标签。 ### 3.1 `` `` 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。现在 HTML 5 已经普及，所以我们在前端开发过程中，写 HTML 时需要按照这种方式声明文档类型。这是 HTML 5 指定的唯一 `doctype`。在支持 HTML 5 的浏览器中，如果不写这个声明，浏览器会自动补充；但对于不支持 HTML 5 的老版本 IE 浏览器而言，如果不写这个声明，显示效果会有偏差。为了兼容性，一般网页都会写这个声明。 ### 3.2 `` 这是网页的根元素，其他的标签都包裹在这个标签之内。 #### 3.2.1 `` `head` 标签主要包含浏览器相关的元素以及一些对用户不可见的元素。 - `title`：网页的标题，显示在浏览器的**标题栏**； - `meta`：元标签，可以保存诸如 _keywors_、_description_ 之类的 SEO 相关的信息，在搜索引擎中可见，**在网页内不可见**。 - `link`：链接标签，用于引入外部静态资源，例如 _favicon_、_CSS_ 以及 _JS_ 文件等，该标签**不受同源策略限制**。 - `style`、`script`：可以将 CSS、JS 代码直接写在 HTML 文件中。 #### 3.2.2 `` `body` 标签中包含展示在浏览器主题区域的内容，常用的标签可分为三类： - 行内元素 - 块级元素 - 行内块级元素三者的主要区别如下： | | 行内元素 | 块级元素 | 行内块级元素 | | :---------: | :------------------: | :-----------------------: | :--------------: | | **宽度** | 内容的宽度，不可设置 | 父容器宽度的 100%，可设置 | 内容宽度，可设置 | | **高度** | 不可设置 | 可设置 | 可设置 | | **margin** | 只有左右，没有上下 | 正常 | 正常 | | **padding** | 只有左右，没有上下 | 正常 | 正常 | 常见的行内元素以及块级元素整理如下：^[2] | 行内元素 | 块级元素 | | :------: | :--------: | | a | address | | abbr | blockquote | | big | center | | br | div | | cite | dl | | code | form | | em | h1 等标题 | | font | hr | | i | menu | | img | ol | | input | p | | kbd | table | | label | ul | | select | - | | small | - | | span | - | | strong | - | | sub | - | | sup | - | | textarea | - | > 表格左右列无对应关系。元素转换可以通过设置元素样式中的 `display` 属性完成。如果将一个元素设置为 `float: left/right;`，那么这个元素将成为一个块级元素，并且具有浮动属性。如果将一个元素设置为 `position: absolute/fixed;`，那么这个元素也将成为一个块级元素，并且遵循新的定位要求。 ## 四、语义化标签 HTML 5 提出了语义化标签。使用语义化的标签，可以增加 HTML 文件的可读性。下面对仅使用 `div` 标签和使用了语义化标签的两段 HTML 文本进行对比。 ```html

``` ```html

``` 语义化标签并 **不能** 对浏览器解析 HTML 起到什么帮助，并非所有语义化标签都有默认样式，但是语义化标签对于代码可读性的提升有重要意义。下面整理了 HTML 5 中常见的语义化标签及其含义。 | 标签名 | 含义 | | :--------: | :--------------------------------------: | | header | 顶部栏 | | nav | 导航栏 | | article | 文章或一整块内容 | | section | 会出现在文档大纲中 | | aside | 侧边栏、次要信息 | | footer | 底部栏 | | figure | 图表 | | figcaption | 图题、表题 | | blockquote | 引用 | | dl/dt | 键值对 | | cite | 引用 | | time | 时间（机器只能读懂特定格式的时间或日期） | | address | 地址 | | mark | 标记 | | code | 代码 | | small | 小字体，用于写注意事项 | | track | 字幕 | ## 五、HTML 解析 ### 5.1 看似简单的 “上网冲浪”，竟有这么深的门道 > **经典面试题**：从在浏览器地址栏中输入网址到看到网页的过程，都发生了什么？当用户输入了键盘字符，键盘控制器就会产生扫描码数据，并将其缓冲在键盘控制器的寄存器中…… ^[3] 不皮了不皮了 😂 - URL 解析 ^[4] - 判断 URL 格式是否合法 - HSTS 强制使用 HTTPS 访问 - 其他操作（例如访问限制） - 检查缓存 - 有缓存 - 页面加载成功 - 无缓存 - 继续向下进行 - 解析域名对应的 IP 地址 - 本地 DNS 缓存 - 浏览器缓存 - 操作系统缓存 - 路由器缓存 - 本地 DNS 服务器缓存 - 根域名服务器 - 递归 - 迭代 - 请求 HTML 文件 - HTTP - 构建 HTTP 请求头和请求体 - TCP - 构建 TCP 请求头和请求体 - 三次握手建立 TCP 连接 - IP - 加入源 IP 和目的 IP - 以太网成帧 - 服务器接收请求 - 将以上过程倒过来 - 服务器处理请求 - 主进程监听 - 子进程处理请求 - 浏览器接收响应 - 分析资源（response header） - 解压 - 缓存 - 解析 HTML 文件 - 解码 - 预解析 - 请求静态资源文件 - 符号化 - 解析区分 HTML 的标签 - 渲染 - 构建 DOM - 构建 VSSOM - 合并 DOM 和 CSSOM，构建渲染树 - 计算布局 - 绘制当然，在初识 HTML 的时候，可以只简单了解最后的 “渲染” 部分即可，后期通过这种拓展学习，拓宽知识广度，加深知识深度。 ### 5.2 重绘与回流关于 HTML 的渲染，还有两个相关概念，重绘和回流。只看概念太枯燥，先来举一个例子 🌰。我们现在画了一幅画，画上从左到右依次是 _一个苹果、一个香蕉和一个橘子_。画上的苹果是红色的，我们感觉不好看，想把它变为深空灰，那只需要给苹果刷一层新的颜色就可以了，这就叫做重绘。交画的时候，老师说我们的画布太大了，留白太多，让我们换一块小的画布，并且把黑苹果去掉；于是我们重新画了一幅画，把香蕉和橘子画小了一些，画进了一块小画布，并且没有再画苹果，这就是回流（重拍）。栗子 🌰 一炒会 “崩开”，可能会不太 “严谨（紧）”，所以还是要看一下更权威的解释 ^[5] 👇。 - **重绘** > 当页面中 **元素样式的改变并不影响它在文档流中的位置时**（例如：`color`、`background-color`、`visibility` 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。 - **回流（重排）** > 当 `Render Tree` 中部分或全部元素的 **尺寸、结构、或某些属性发生改变时**，浏览器重新渲染部分或全部文档的过程称为回流。会导致回流的操作： - 页面首次渲染 - 浏览器窗口大小发生改变 - 元素尺寸或位置发生改变 - 元素内容变化（文字数量或图片大小等等） - 元素字体大小变化 - 添加或者删除可见的 DOM 元素 - 激活 CSS 伪类（例如：:hover） - 查询某些属性或调用某些方法一些常用且会导致回流的属性和方法： - clientWidth、clientHeight、clientTop、clientLeft - offsetWidth、offsetHeight、offsetTop、offsetLeft - scrollWidth、scrollHeight、scrollTop、scrollLeft - scrollIntoView()、scrollIntoViewIfNeeded() - getComputedStyle() - getBoundingClientRect() - scrollTo() --- 了解了以上 HTML 的基础之后，我们就可以尝试着用 HTML 去标记一段文本，并在浏览器中打开了。 [实战小项目链接在这里](https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/Marking_up_a_letter) ^[6] ## 参考 [1][HTML 的简介和历史发展过程- 泰斗贤若如 - 博客园](https://www.cnblogs.com/zyx110/p/13113457.html) [2][前端面试题-行内元素和块级元素 - SegmentFault 思否](https://segmentfault.com/a/1190000013966321) [3][键盘敲入 A 字母时，操作系统期间发生了什么 - 博客园](https://www.cnblogs.com/xiaolincoding/p/13550711.html) [4][在浏览器输入 URL 回车之后发生了什么（超详细版） - 知乎专栏](https://zhuanlan.zhihu.com/p/80551769) [5][浏览器的回流与重绘(Reflow & Repaint) - 掘金](https://juejin.cn/post/6844903569087266823) [6][标记信件 - 学习 Web 开发 | MDN](https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/Marking_up_a_letter "标记信件 - 学习 Web 开发 | MDN")