前端基本介绍
web系统：以网站形式开发，通过浏览器访问，完成一定功能的系统。
前端即网页上为用户呈现的部分。
我们可以看到，上述样例图片中的Edge网页有最基本的框架（标题、文本、表单与超链接等），也有丰富多彩的样式（图片，字体样式等），下文中的工具可以帮助我们实现这些。
Web前端开发用到的编程语言主要有javascript，以及伴随有标记性文本语言html和样式渲染方式CSS。
HTML 指的是超文本标记语言 (Hyper Text Markup Language),是一套用来描述网页的标记标签。
单个标签由尖括号与关键词组成。下列是最基本的框架。更多内容在前端基础（二）介绍。
<html>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>CSS指的是层叠样式表* (Cascading Style Sheets)。CSS可以定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
样例如下：
body {
background-color: lightblue;/*背景颜色*/
}
h1 {
color: yellow;/*标题颜色*/
text-align: center;/*文字居中对齐*/
}
p {
font-family: verdana;/*段落字体颜色*/
font-size: 20px;/*字体大小*/
}JavaScript 是属于 HTML 和 Web 的编程语言。JavaScript对网页行为进行编程。通过编程改变HTML，CSS的元素、内容等，使页面呈现更好的效果，更丰富的功能。
注：JavaScript与Java是完全不同的编程语言哦~
样例：
<html>
<body>
<h2>一段 JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击这里来显示日期和时间
</button>
<p id="demo"></p>/*使用效果：点击方框即可显示日期与时间*/
</body>
</html>VScode介绍及安装
VScode（全称Visual Studio Code）是前端开发工具之一，具有体积小、可安装多个插件、页面简洁等优点。PS：免费。其他还有Dreamweaver,Hbuilder等。
进入官网Visual Studio Code - Code Editing. Redefined即可下载。
前端基础常用插件介绍：打开扩展界面，搜索并安装插件。
Chinese (Simplified) (简体中文)
将页面语言转换成中文。
open in browser
在浏览器中查看编辑好的HTML文件效果。
Auto Close Tag
标签一般成双成对出现，此插件可以自动闭合HTML标签。
但新版本VScode中已经内置此插件，无需下载，仅作了解。
jQuery Code Snippets
jQuery是一个快速，小型且功能丰富的JavaScript库。此插件拥有许多jQuery相关的代码提示。
了解浏览器
浏览器是用来检索、展示、以及传递web信息资源的应用程序（百度百科）。
浏览器是多进程架构，主要包括：
浏览器主进程：负责界面显示、用户交互、子进程管理等。
渲染进程：将HTML，CSS，JS转换成页面。
GPU进程：绘制。
网络进程：负责网络资源的加载。
插件进程
简述浏览器从接收URL到显示页面过程：
用户在浏览器地址栏里输入信息，浏览器判断此信息是否为URL，如果是，直接转给网络进程。如果是关键字，那么浏览器会自己合成一个URL。
输入信息后开始导航，主进程会与网络进程进行通讯（ipc），即准备发起URL请求。
但在这之前，浏览器会先检查本地是否缓存了相应的网络资源，如果有，则向主进程返回资源，否则才发起URL请求，进入网络请求流程。
网络进程--DNS解析（获取请求域名对应服务器的IP地址）（如果是HTTPS协议的话，会建立起tls的链接），建立TCP链接，构建请求头、行、Cookies。然后读取响应头信息。
信息提交到主进程，主进程与渲染进程通信，提交文档，准备渲染进程。
渲染进程--与网络进程建立管道，读取响应体，向主进程提交确认信息，完成页面解析与资源加载。
主进程负责协调整个流程。
如果在浏览器输入同一个域名及传输协议，会被认为同一个站点，此时多个页面共用一个JS渲染。（如果理解有误请指出。）
更多详情参考图解浏览器的基本工作原理 - 知乎 (zhihu.com)。
浏览器内核：
浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也会有所不同。
主流浏览器是有一定市场份额且有自己独立研发内核的浏览器：IE/Edge，Chrome，Safari，Opera，Firefox。
Gitee
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
