前端开始（浏览器介绍、web标准、VSCode插件篇）

桃扇骨 2022-11-17 14:55 134阅读 0赞

### 文章目录 ###

*  1 网页
 *   *  1.1 什么是网页
     *  1.2 什么是html
     *  1.3 网页的形成
 *  2 常用浏览器
 *  3 Web标准
 *   *  3.1 为什么需要Web标准
     *  3.2 Web标准的构成
 *  4 VS Code插件安装
 *   *  4.1 安装方法
     *  4.2 推荐安装的插件

# 1 网页 #

## 1.1 什么是网页 ##

网站是指在因特网上根据一定的规则 .使用HTML等制作的用于展示特定内容相关的网页集合。  
网页是网站中的一页”, 通常是HTML格式的文件, 它要通过浏览器来阅读。  
网页是构成网站的基本元素,它通常由图片、链接、文字声音、视频等元素组成。通常我们看到的网页。常见以.htm或.html后缀结尾的文件.因此将其俗称为HTML文件。

## 1.2 什么是html ##

HTML指的是超文本标记语言(Hyper Text Markup Language) , 它是用来描述网页的一种语言。  
HTML不是一种编程语言.而是一种标记语言(markup language)。  
标记语言是一套标记标签(markup tag)。  
所谓超文本，有2层含义:

1.  它可以加入图片、声音、动画多媒体等内容(超越了文本限制).
2.  它还可以从一个文件跳转到另一个文件 ,与世界各地主机的文件连接(超级链接文本).

## 1.3 网页的形成 ##

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。

前端人员开发代码—>浏览器显示代码 (解析、渲染)---->生成最后的Web页面

# 2 常用浏览器 #

浏览器是网页显示运行的平台。常用的浏览器有IE、火狐( Firefox)、谷歌( Chrome )、Safari和Opera等。平时称为五大浏览器。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyaWZ0ZXJfR2FsYXh5_size_16_color_FFFFFF_t_70][]  
浏览器内核：

浏览器内核(渲染引擎)：负责读取网页内容. 整理讯息, 计算网页的显示方式并显示页面。  
![202104101823480.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyaWZ0ZXJfR2FsYXh5_size_16_color_FFFFFF_t_70 1]

# 查看浏览器使用的内核 (Console输入)
    navigator.appCodeName
    # 注释：在所有以 Netscape 代码为基础的浏览器中，它的值是 "Mozilla"。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 "Mozilla"
    # 获取浏览器的名称及信息
    navigator.userAgent.toLowerCase()
    # 查看版本号，操作系统和应用程序版本号
    navigator.appVersion

# 3 Web标准 #

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C (万维网联盟)是国际最著名的标准化组织。

## 3.1 为什么需要Web标准 ##

浏览器不同. 它们显示页面或者排版就有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外, 还有以下优点:

1.  让Web的发展前景更广阔。
2.  内容能被更广泛的设备访问。
3.  更容易被搜寻引掌搜索。
4.  降低网站流量费用。
5.  使网站更易于维护。
6.  提高页面浏览速度。

## 3.2 Web标准的构成 ##

主要包括结构( Structure)、表现( Presentation )和行为( Behavior )三个方面。  
![在这里插入图片描述][20210410182511532.png]  
Web标准提出的最佳体验方案：结构、样式、行为相分离。

简单理解：结构写到HTML文件中。表现写到CSS文件中，行为写到JavaScript文件中。

# 4 VS Code插件安装 #

## 4.1 安装方法 ##

![在这里插入图片描述][20210410182528731.png]  
![在这里插入图片描述][20210410182536743.png]

## 4.2 推荐安装的插件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyaWZ0ZXJfR2FsYXh5_size_16_color_FFFFFF_t_70 2]  
第三个不好用了, 不推荐啦

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyaWZ0ZXJfR2FsYXh5_size_16_color_FFFFFF_t_70]: /images/20221022/5fc3863506d94bd9aa08826e479fb16e.png
[202104101823480.png]: /images/20221022/43f0045ec78740ffbc5d32def33d22ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyaWZ0ZXJfR2FsYXh5_size_16_color_FFFFFF_t_70 1]: /images/20221022/1f3ab4e5ee23480f96f4007333b15999.png
[20210410182511532.png]: /images/20221022/cfb86e86526340a5a437399426600dff.png
[20210410182528731.png]: /images/20221022/36074cca4e5844db98efa22200b845d7.png
[20210410182536743.png]: /images/20221022/c5c80ca49068415a9fa1394e40f95694.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyaWZ0ZXJfR2FsYXh5_size_16_color_FFFFFF_t_70 2]: /images/20221022/b8b1b39aacb34dee83bb8094be0fc3d5.png