YK菌

总体概述

# 总体概述

# 1. HTML 起步

HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org) (opens new window)

# 1.1 网页的“三驾马车”

  • HTML：网页的基本结构
  • CSS：网页的展示效果
  • JavaScript：网页的功能与行为

# 1.2 HTML 是什么

HTML 全称 HyperText Markup Language 翻译过来就是 超文本标记语言 是用来构建网页基本结构及其内容的标记语言

那，什么是超文本，什么又是标记语言呢？

  • 超文本：文本中包含指向其他文本的链接

  • 标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档的结构。常见的标记语言有HTML、XML、Markdown等

疑问标记语言是编程语言嘛？ 解答不是，标记语言不具有编程语言的逻辑与行为的能力

# 1.3 HTML的发展历史

  • 1989 伯纳斯 · 李在1989年提出了基于互联网的超文本系统
  • 1993 1993年IETF(互联网工程任务组)发布首个HTML提案,由此HTML语言第一版诞生
  • 1995 在经历过几个草案之后HTML2.0于1995年发布，包括了基于表单的文件上传、表格、国际化等功能
  • 1997 1994年W3C成立，随后接管了HTML的标准化工作，并在1997年发布了HTML3.2
  • 1997 随后发布的 HTML4.0 中采用许多特定浏览器的元素类型和属性
  • 2014 2014年HTML5作为W3C推荐标准发布

HTML的构成：标签，标签体，属性

<p class="yk">我是YK菌</p>

# 2. HTML 深入

下面的内容推荐你按下键盘上的F12键，选到Elements选项中，跟着掘金网站的html文件，一起探索HTML文档的结构

# 2.1 HTML元素

HTML文档包含多个HTML元素，元素具备不同的特性

image.png

  • HTML元素 = 开始标签 + 结束标签 + 元素内容
  • 一些元素只有一个标签，如img、input、br等
  • HTML元素标签不区分大小写
  • 元素可以嵌套在其他元素中间
  • 元素可以拥有属性，属性包含有元素的额外信息

其实在我平时使用和说明的时候都把元素直接称为标签，所以后面的博文，可能会混用这两种说法~

# 2.2 HTML结构

虽然HTML元素可以任意组合，但是HTML是有一些固定的结构的~

先来看一个标准的HTML文档的示例

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title> 页面标题</title> 
    </head> 
    <body> 
        <h1>我的第一个标题</h1> 
        <p>我的第一个段落。</p> 
    </body> 
</html>

  • <!DOCTYPE html> 放在HTML文档最前面，浏览器会按照W3C的HTML5标准来解析渲染页面

  • <html> 根元素，包含整个页面的内容

  • <head> 对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等

  • <body> 该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

image.png

下面我们来深入了解一下<head>标签和<body>标签以及一个很重要的<script>标签

# 2.3 <head> 标签

# <meta>：元数据标签

作用 说明文档、描述数据的标签

下面是掘金首页 (opens new window)的html文件中meta标签的内容

image.png

meta标签分为三类： charset/name/http-equiv

  1. charset 定义文档字符编码
<meta charset="utf-8">
  1. name 用名/值对定义元数据 用来 说明文档

① keywords 页面关键字

<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,nginx配置,Kotlin,RxJava,React Native,敏捷开发,Python">

② description 页面描述

这里可以去看各大网站的页面描述与关键字，要写好可是一个技术活~ 因为这有利于网站的SEO

掘金首页 页面描述 示例

<meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">

百度首页 页面描述 示例

<meta name="description" content="全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。">

③ author 页面作者

<meta name="author" content="YK菌">

④ viewport 定义设备屏幕上用来显示网页的区域（主要用于移动端）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=0">
  1. http-equiv 模拟 HTTP 标头字段

此例将标头字段expires用于指定网页缓存时间的期限，一旦网页缓存时间过期，网页就必须从服务器上重新缓存一次，才可以继续浏览页面

<meta http-equiv="expires" content="25 Aug 2021">

此例将标头字段refresh的值设置为5，其作用是让浏览器每隔5秒就再次载入页面

<meta http-equiv="refresh" content="5">

此例来自百度首页html文件，是另一种声明HTML页面所用字符编码的方法

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  1. 当然还可以自定义meta标签

⾃定义meta，⽤于向特定⽹站提供⼀些信息https://wiki.whatwg.org/wiki/MetaExtensions

# <title> 标题标签

页面的标签。显示在浏览器的标签页上

<title>【青训营】HTML基础 - 语义化标签 - 浏览器渲染过程 - 笔记及拓展</title>

# <style> 样式标签

这里是大家熟悉的放CSS样式的标签，可用来定义HTML文档内嵌的CSS样式 image.png

链接标签用来指定外部资源（CSS样式表是最典型的情况），建立HTML文档与外部资源的联系

  • rel 属性用来说明HTML页面与关联资源的关系类型，如 icon、license、help、author
  • type 属性用来指定所关联资源的MIME类型，如text/css、image/x-icon
  • href 属性用来指定外部资源的URL

image.png

当前⻚⾯的favicon

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

链接到样式表

<link rel="stylesheet" href="my-css-file.css">

# 2.4 <body>标签

在此标签内写的结构，是用户可以看到的，可以将这里的元素分为三类

image.png

# 内联元素 inline

  • 只占据它对应标签的边框所包含的空间
  • 只能容纳⽂本或其他内联元素
  • 只能通过修改⽔平边距、边框或者⾏⾼的⽅式改变尺⼨

常见的内联元素有：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

# 块级元素 block

  • 占据其⽗元素的整⾏，总是从新⾏上开始
  • 能容纳其他块元素或者内联元素
  • 可以控制宽⾼、⾏⾼、边距、边框等改变其尺⼨

常⽤的块级元素： <div> <p> <h1>-<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

# 行内块级元素 inline-block

  • 元素在⾏内排列，不会独占⼀⾏
  • ⽀持设置宽⾼以及垂直边距、边框

常⽤的内联元素：<img>、<input>、<td>

# 2.5 <script> 可执行脚本标签

可以通过src属性引入外链的js，也可以在标签体里写js代码（内嵌脚本）

PS: 设置了src属性的script元素不能含有任何内容。不能用同一个script元素既定义内嵌脚本又引用外部脚本。

<script type="text/javascript" src="javascript.js"> </script>
<script type="text/javascript"> console.log('I am YK菌') </script>

<script>标签虽然可以放在文档的任意位置，但是一般还是推荐放在<head>标签中，方便查看网页用到哪些脚本

等等，你是否还记得之前学习中遇到过说，有些JS应该放页面的底部，因为有些脚本需要操作DOM，要等DOM都解析好了才能操作，别慌<script>标签中有两个属性，可以延迟加载与运行js文件代码

  • defer：⽴即下载，延迟执⾏，表示脚本可以等到dom被完全解析和显示之后在执⾏，只对外部脚本有效。有defer 属性的脚本会阻⽌DOMContentLoaded 事件，直到脚本被加载并且解析完成。

  • async：⽴即下载脚本，不妨碍其他操作，⽐如下载其他资源或者加载其他脚本，只对外部脚本有效

  • 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。

这张图很形象的展示了js异步加载执行方式的区别，蓝色表示加载js，红色表示执行js，绿色表示解析HTML

image.png

defer-script 加载时HTML并未停止解析，这两个过程是并行的。整个 document 解析完毕且 defer-script 也加载完成之后，会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。

async-script与 defer-script的区别在于，如果已经加载好，就会开始执行。这种方式加载的 JavaScript 依然会阻塞 load 事件 （加载好就会执行）。 async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行

在加载多个JS脚本的时候，async-script是无顺序的加载，而defer-script是有顺序的加载。

补充知识： window.onload 与 DOMContentLoaded 的区别

  • window.onload 资源全部加载完成才能执行，包括图片
  • DOMContentLoaded DOM渲染完成即可，图片可能尚未下载

# 3. 浏览器渲染过程

  1. 构建DOM树 HTML字符串描述了一个页面的结构，浏览器会把HTML结构字符串解析转换DOM树形结构。

image.png

  1. 样式计算，构建CSSOM树CSS 解析CSS会产生CSS规则树，它和DOM结构比较像。

  2. 加载js脚本文件 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。

  3. 将DOM和CSSOM组合成⼀个Render树 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。

image.png

  1. 布局计算
  2. 绘制 最后通过调用操作系统Native GUI的API绘制。

# 参考

字节跳动青训营 HTML基础 视频 + PPT

菜鸟教程 HTML (opens new window)

w3school HTML (opens new window)

MDN HTML (opens new window)

掘金首页HTML文档 (opens new window)

你不知道的浏览器页面渲染机制 (opens new window)

《HTML5 权威指南》

上次更新: 2022/5/11 19:41:01

常用标签