一、邂逅web

国维
99 阅读3分钟

1.1 世界上第一个网页

上世纪90年代，Berners-Lee上线了世界上第一个网站：

虽然目前我们会认为这个网页简单到不值一提，但是在当时它的发明是 “天才之作” 。

1.2 浏览器内核

浏览器的作用

我们已经明确知道了网页的组成部分：HTML + CSS + JavaScript。

那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢？

  • 我们知道是通过浏览器来完成；

    image-20220725131302456.png

浏览器的渲染引擎

浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为 “ 浏览器内核 ”

  • 负责解析网页语法，并渲染（显示）网页

不同浏览器的内核

常见的浏览器内核有

  • Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
  • Gecko（ 壁虎） ：Mozilla Firefox；
  • Presto（急板乐曲）-> Blink （眨眼）：Opera
  • Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
  • Webkit -> Blink ：Google Chrome

不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同(浏览器适配)。

1.3. 认识HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

  • HTML元素是构建网站的基石；

什么是标记语言（* markup language* ）* ？*

  • 由无数个标记（标签、tag)组成；
  • 是对某些内容进行特殊的标记，以供其他解释器识别处理；
  • 比如使用

    标记的文本会被识别为“标题”进行加粗、文字放大显示；
  • 由标签和内容组成的称为元素（element）

什么是超文本（ HyperText ）呢？

  • 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
  • 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

HTML文件的拓展名是.htm.html

  • 因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm
  • 现在统一使用 .html

1.4 元素的组成

image-20220725162252963.png

1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 ——

在本例中即段落由此开始。

2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落

在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。

4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

image-20220725162458257.png

元素也可以拥有属性（ Attribute）：

属性包含元素的额外信息，这些信息不会出现在实际的内容中。

一个属性必须包含如下内容：

  • 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
  • 属性名称，后面跟着一个等于号。
  • 一个属性值，由一对引号“ ”引起来。
avatar
文章
阅读
粉丝