前言
当我们使用vscode编辑器编辑完一个html页面时,想看下呈现的网页时,可以通过vscode编辑器完成这一过程
使用
vscode安装HTML Snippets插件
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717163922388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
vscode安装View In Browser插件
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717164751259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
创建index.html文件
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717165349713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
编辑index.html
快捷生成html的基本信息
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717172444863.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717172453935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
一、编辑网页文本文字尺寸为5
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717172741274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
web页面浏览器展示
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020071717305513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717173104747.png)
二、编辑网页文本文字尺寸为9,并居中显示
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717174558757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
web页面浏览器展示
操作如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717174635757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNTIyNQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717174647884.png)
结语
… …