前端入门之~html,css,java script，浏览器工作原理

前端学习

最近打算学习下前后端的东西，跟着cto学院的前后端课程，发现对前端有些基础知识还不够了解，特地查资料梳理了前端的相关知识，主要分为：html,css,javascript,同时也需要了解浏览器的工作原理。

1、html是什么？

超文本标记语言（HTML，HyperText Markup Language）用于描述、定义网页内容。是一种网页版文本标记语言。有各种标记关键字，代表在网页中的文本的等级格式

2、css是什么？

层叠样式表（CSS，Cascading Style Sheets）用于描述网页内容的外观与展示。是一种渲染html的语言，单独的html太过於单调，通常在html文件的顶部可以添加链接的css文件

3、css文件怎么影响html？

因为html每一块有响应的栏标记限定，css可以利用栏进行引用，外加字典的方式对栏的各种展示属性进行设置，比如字体大小、颜色、布局、边框等等；

例如，里面涉及到不同的引用方式：相邻引用，h1+p表示紧邻标题的第一个段落；

p.special表示p中的special类的部分，还可以通过span.special进行复用。

css的级联复用和关联规则触发。

浏览器有默认匹配模板。

总结一下就是：css包含了对html文档里面对应内容的定位引用，复用，还有就是区分不同的关键段落里面的元素。学习前端关于浏览器布局渲染展示的所有编程相关资料可参考MDN。

4、MDN是什么？

MDN是MDN Web Docs（MDN 网络文档）这个网站的简称。其实他指的是一个网站，我们搜索MDN，打开的是这个链接：https://developer.mozilla.org/zh-CN/

它是一个浏览器web开发的开源网站，包含了html,css，js等的开源资料与学习社区；来源参考：网景和微软的浏览器之争；参考：https://www.jianshu.com/p/f1d3be17f0c6

5、nodejs是什么？

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。

• HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
• CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。
• JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

这三层依次建立，秩序井然。以文本标签(text label)的简单示例。首先用 HTML 将文本标记起来，从而赋予它结构和目的：

<p>玩家1：小明</p>

玩家1：小明

然后我们可以为它加一点 CSS 让它更好看：

p {
  font-family: sans-serif, '黑体';
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

最后，我们可以再加上一些 JavaScript 来实现动态行为：

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('输入一个新的名字：');
  para.textContent = '玩家1：' + name;
}

• JavaScript

  JavaScript 是在浏览器中运行的编程语言。它可以为你的网站或应用程序添加交互性和其他动态功能。

  随着 Node.js 的出现，你也可以在服务器上运行 JavaScript。

6 、浏览器的工作原理

6.1 、浏览器的主要功能

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI（统一资源标示符）指定。

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。
多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。如今，大多数的浏览器都是或多或少地遵从规范。

浏览器的用户界面有很多彼此相同的元素，其中包括：

• 用来输入 URI 的地址栏
• 前进和后退按钮
• 书签设置选项
• 用于刷新和停止加载当前文档的刷新和停止按钮
• 用于返回主页的主页按钮
  奇怪的是，浏览器的用户界面并没有任何正式的规范，这是多年来的最佳实践自然发展以及彼此之间相互模仿的结果。HTML5 也没有定义浏览器必须具有的用户界面元素，但列出了一些通用的元素，例如地址栏、状态栏和工具栏等。当然，各浏览器也可以有自己独特的功能，比如 Firefox 的下载管理器。

6.2、 浏览器的高层结构

浏览器的主要组件为 (1.1)：

• 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
  浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
• 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
• 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
• JavaScript 解释器。用于解析和执行 JavaScript 代码。
• 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
  
  图：浏览器的主要组件。
  值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

7、 参考

什么是JavaScript：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript
Vue参考：https://www.runoob.com/vue2/vue-tutorial.html
浏览器的工作原理：https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browser_high_level_structure