HTML——Part1-初识

琥鱼
252 阅读7分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

1、 HTML 简介

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

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="Ge">我是禾几Ge</p>

2、 HTML 深入

2.1 HTML单个元素

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

截图.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 > 该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

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

2.3 < head > 标签

2.3.1 < meta >: 元数据标签

作用：说明文档、描述数据的标签
下面是掘金首页 (opens new window)的html文件中meta标签的内容

截图2.png meta标签分为三类： charset / name / http-equiv

  • charset ：定义文档字符编码
<meta charset="utf-8"> 
//charset 字符集，是多个字符的集合，UTF-8为最常用，包含全世界各国家所用字符 
//gb2312:简体中文，包含6763个汉字 
//BIG5：繁体中文，港澳台通用 //GBK：繁简大融合
  • name ：用键 / 值对定义元数据，用来说明文档
// 1. keywords 页面关键字
<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,nginx配置,Kotlin,RxJava,React Native,敏捷开发,Python">
// 2. description 页面描述
<meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">
// 3. author 页面作者
<meta name="author" content="禾几Ge">
// 4. viewport 定义设备屏幕上用来显示网页的区域（主要用于移动端）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=0">
  • 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">

2.3.2 < title >: 标题标签

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

<title>这是禾几Ge的第一个页面</title>

2.3.3 < style >: 样式标签

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

截图3.png

2.3.4 < link >: 链接标签

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

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

截图4.png

2.4 < body > 标签

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

截图5.png

2.4.1 内联元素 inline

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

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

2.4.2 块级元素 block

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

常⽤的块级元素：< div >、< p >、< h1 >~< h6 >、< ol >、< ul >、< table >、< dl >、< from > 等

2.4.3 行内块级元素 inline-block

  • 元素在⾏内排列，不会独占⼀⾏
  • ⽀持设置宽⾼以及垂直边距、边框
  • 常⽤的块级元素：< img>、< imput >、< td > 等

2.5 < script > 可执行脚本标签

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

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

<script type="text/javascript" src="javascript.js"> </script> 
<script type="text/javascript"> console.log('I am 禾几Ge') </script>

< script > 标签虽然可以放在文档的任意位置，但是一般还是推荐放在< head > 标签中，方便查看网页用到哪些脚本。
！等等，你是否还记得之前学习中遇到过说，有些JS应该放页面的底部，因为有些脚本需要操作DOM，要等页面DOM都解析好了才能操作，别慌< script > 标签中有两个属性，可以延迟加载与运行js文件代码

  • defer：⽴即下载，延迟执⾏，表示脚本可以等到dom被完全解析和显示之后再执⾏，只对外部脚本有效。有defer 属性的脚本会阻⽌DOMContentLoaded 事件，直到脚本被加载并且解析完成。
  • async：⽴即下载脚本，不妨碍其他操作，下载完成即执行，只对外部脚本有效
  • 没有defer或async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。

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

截图6.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、 浏览器渲染过程

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

截图7.png

  • 样式计算，构建CSSOM树CSS 解析CSS会产生CSS规则树，它和DOM结构比较像。
  • 加载js脚本文件 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。
  • 将DOM和CSSOM组合成⼀个Render树 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。

截图8.png

  • 布局计算
  • 绘制 最后通过调用操作系统Native GUI的API绘制。
avatar
文章
阅读
粉丝