HTML基础认知 第一期

146 阅读3分钟

Hi! 大家好,我是一名刚入坑前端行业的小白,今天开始会开始写博客,主要是分享写比小白还小白的前端知识,还请大家多多支持

[神奇海螺][梗图生成器]-1686830017445.jpg

首先,先简单介绍下基础知识吧:

1,Web标准的构成

HTML(页面元素和内容),
CSS(网页元素的外观和位置等页面样式(如:颜色、大小等)),
JS(网页模型的定义与页面交互)

3,咱们程序员写的代码是通过什么软件转换成网页的?

浏览器(这应该不会有人不知道吧)

4,认识五大浏览器和渲染引擎

IE浏览器
火狐浏览器(Firefox)
谷歌浏览器(Chrome)
Safari浏览器
欧朋浏览器(Opera)

问:那么相同的网页在不同浏览器中显示效果会完全一致吗?
答:因为不同浏览器渲染引擎不同,解析的效果会存在差异
ps: 咱们前端工程师常用的浏览器是谷歌浏览器哦!

5,那么说到写前端代码,要在哪里写呢

Visual Studio Code 简称 VScode

官网地址:code.visualstudio.com/

图标:

vscode.JPG

下载好后内部界面就是这样的: (最近里面是我自己写的项目,不太方便放出来)

主体.JPG

如何安装中文:
我们可以在最右边看到这个名为扩展图标:

1.JPG

点他,然后会跳出个搜索框:

3.JPG

在里面输入chinese就可以找到这个语言包:

2.JPG

点进去,直接安装就完了:
注意:在扩展里安装好小插件,需要重启vscode

4.JPG

6,如何开始写项目

(个人建议先创建一个文件夹,然后在里面再创建html文件)
点击左上角的三条杠,选中打开文件夹(就是自己新建的文件夹)

Snipaste_2023-06-28_15-31-19.png

打开后右边就出现了你刚刚加进来的文件夹,此时再点你文件夹边上的第一个图标,新建文件

Snipaste_2023-06-28_15-33-47.png

然后新建一个后缀名为.html的文件,回车就OK了

Snipaste_2023-06-28_15-35-42.png

此时,我们就得到了一个网页文件,在里面输入一个英文状态下的感叹号,然后就可以开始愉快的敲代码了

Snipaste_2023-06-28_15-37-20.png

Snipaste_2023-06-28_15-37-46.png

那么敲完代码该如何展示你所敲打的代码呢
依然是在左边扩展图标里的这个图标里,搜索open in browser

Snipaste_2023-06-28_15-40-27.png

注意:在扩展里安装好小插件,需要重启vscode

然后在你的代码里右键,就可以看见一个 Open In Default Browser(快捷键为:Alt + B), 点击他就会自动在你默认的浏览器里显示了

Snipaste_2023-06-28_15-43-49.png

Snipaste_2023-06-28_15-47-26.png

注意!注意!注意!在你写代码的时候一定要经常保存(快捷键:Ctrl + S)你的文件,不要等你文件没了还没保存才后悔

好的,那么到这里,今天我介绍的东西也差不多了,所以就先介绍到这里吧,希望各位小白们可以看的懂吧,感谢观看

[神奇海螺][梗图生成器]-1687938825538.jpg