前端必备基础常识二

Rsquo
179 阅读5分钟

一、link元素

  • link元素是外部资源链接元素，规范了文档与外部资源的关系

    • link元素通常是在<head>元素中

  • 最常用的链接是样式表（CSS）

    • 此外也可以被用来创建站点图标（比如 “favicon” 图标）

  • link元素常见的属性：

    • href：此属性指定被链接资源的URL。URL可以是绝对的，也可以是相对的。

    • rel：指定链接类型，常见的链接类型：官方文档

      • icon：站点图标

      • stylesheet：CSS样式

      • dns-prefetch：提示浏览器该资源需要在用户点击链接之前进行DNS查询和协议握手 性能优化相关

        • 通俗来说：就是提前让DNS把域名解析成IP地址，但没有去请求资源；用户浏览网页用到该域名时，就可以直接在对应IP拿到资源，减少了DNS解析域名的时间
      <!-- 引入css -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入icon(站点的图标) -->
  <link rel="icon" href="../images/favicon.ico">

二、进制

2.1 进制的概念

  • 维基百科：进位制是一种记数方式，亦称进位计数法或位值计数法。

  • 通俗理解：当数字达到某个值时，进一位(比如从1位变成2位)。

2.2 按照进制的概念，来理解一下十进制

  • 当数字到9的时候，用一位已经表示不了了，那么就进一位变成2位。

  • 按照上面的来理解，二进制、八进制、十六进制：

    • 二进制：当数字到1的时候，用一位已经表示不了了，那么就进一位。

    • 八进制：当数字到7的时候，用一位已经表示不了了，那么就进一位。

    • 十六进制：用一位如何表示十六个数字呢？a(10)、b(11)、c(12) 、d(13) 、e(14)、f(15)

2.3 人类的十进制

  • 学习编程语言，需要了解进制的概念：

    • 我们平时使用的数字都是十进制的，当我写下一个数字的时候，你会默认当做十进制来使用。

    • 从发明数字的开始，人类就使用十进制，原因可能是人类正好十根手指。

    • 如果人类有八根手指，现在用的可能是八进制。

image.png

2.4 计算机中的进制

  • 如何表示二进制、八进制、十六进制?

    • 二进制（0b开头, binary）：其中的数字由0、1组成。

    • 八进制（0o开头, Octonary）：其中的数字由0~7组成。

    • 十六进制（0x开头, hexadecimal）：其中的数字由0~9和字母a-f组成（大小写都可以）。

  • 十进制 or 二进制:

    • 虽然计算机更喜欢二进制, 但是编程中我们还是以十进制为主.

    • 因为高级编程语言的目的就是更加接近自然语言, 让我们人类更容易理解.

    console.log(99)  // 99
// 二级制
console.log(0b11000001)  // 193

2.5 进制之间的转换

  • 十进制转其他进制：

    • 整除, 取余数.

  • 其他进制转十进制：

    • 比如二进制的1001转成十进制: 1 * 2³ + 0 * 2² + 0 * 2 + 1 = 9

    • 比如八进制的1234转成十进制: 1 * 8³ + 2 * 8² + 3 * 8 + 4 = 668

    • 比如十六进制的522转成十进制: 5 * 16² + 2 * 16 + 2 = 1314

程序员的情人节如果520情人节忘记了，在522那天过，因为十六进制的522，对应的十进制是1314。

三、颜色表示方法

3.1 颜色关键字（color keywords）

  • 是不区分大小写的标识符，它表示一个具体的颜色

  • 可以表示哪些颜色呢？

3.2 RGB颜色

  • RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色） 三原色来组成了不同的颜色

    • 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色

  • RGB各个原色的取值范围是 0~255

  • RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。

    • 方式一：十六进制符号：#RRGGBB[AA]

      • R（红）、G（绿）、B （蓝）和 A （alpha）是十六进制字符（0–9、A–F），A是可选的。

      • 比如：#ff0000等价于#ff0000ff；

    • 方式二：十六进制符号：#RGB[A]

      • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）

      • 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版

        • 比如，#f09和#ff0099表示同一颜色。

      • 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。

        • 比如，#0f38和#00ff3388表示相同颜色。

    • 方式三：函数符： rgb[a](R, G, B[, A])

      • R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%。

      • A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

    <style>
/* 值: 单词 red/white/black......... */
.box {
  /* color: red;
  background-color: black; */

  /* 黑色是最纯洁的颜色 */
  background-color: rgb(100, 100, 100);
  background-color: #646464;

  /* 表示一个纯黑色 */
  background-color: rgb(0, 0, 0);
  background-color: #000000;
  background-color: #000;

  /* 表示一个纯白色 */
  background-color: rgb(255, 255, 255);
  background-color: #FFFFFF;

  background-color: #e1251b;
}
</style>

四、Chrome调试工具

4.1 打开Chrome调试工具

  • 方式一：右键 – 检查

  • 方式二：快捷键 – F12

4.2 其他技巧

  • 快捷键：ctrl+ 可以调整页面或者调试工具的字体大小

  • 可以通过删除某些元素来查看网页结构

  • 可以通过增删css来调试网页样式

Chrome调试工具的使用.png

五、浏览器的渲染流程

image.png

  1. 加载HTML
  2. 解析HTML（文档声明、html、head）
  3. HTML解析到<head>中遇到link，下载CSS文件并解析CSS，会继续解析HTML
  4. HTML解析到<body>时，会将HTML的嵌套关系生成DOM树，等到CSS解析完成添加到DOM树种生成渲染树（Render Tree）
  5. 展示页面

ps 加载js的情况后续补充

浏览器的渲染流程.png

avatar
文章
阅读
粉丝