web前端开发入门
在vscode里,我们输入一个感叹号”!“并敲击Tab键,就会生成一段代码,如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
</body>
</html>
那这些标签都表示什么呢?如下
关于文档类型声明标签:<!DOCTYPE>
文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>:意思是当前页面采取的是HTML5版本来显示网页
1.这个标签必须要写到文档中的最前面位置,位于html标签之前。
2.它不是一个HTML标签,就是文档类型声明标签
lang语言种类
用来定义当前文档显示的语言,就是language的缩写
en代表英语,zh-CN代表中文,不过英文文档也可以写中文,中文文档也可以写英文,不过如果文档中没有定义的语言,可能会显示错乱。
字符集
<meta charset="UTF-8"/>
charset就是字符集character set的缩写,是多个字符的集合,以便计算机能够识别和存储各种文字,在 head 标签内,可以通过 meta 标签的charset属性来规定HTML文档使用哪种字符编码。
charset常用的值有:GB2312、BIG5、GBK和UTF-8,其中UTF-8被称为万国码,基本包含了全世界所有国家需要用到的字符。使用时尽量统一写成标准的”UTF-8“,不要写成其他形式。
如果没有这段代码,文字就会显示成乱码
推荐的vscode插件
很多写前端的小伙伴都会使用vscode,不是因为这个编译器有多好,而是因为插件太好用了。在这里博主推荐几个很好用的vscode插件,我们可以在拓展里面下载。
1.View In Browser
这个插件就是可以在浏览器中预览网页,安装插件后只要在文档中单机鼠标右键找到这一行就可以使用啦,非常方便!
2.Auto Rename Tag
当我们修改一个标签时,还需要找到结尾标签再一次修改,很麻烦,而且容易出错,有了这个插件就可以自动修改结尾标签,很实用!
3.Path Intellisense
当你要插入图片什么的时候,可以自动路径提示
4.Beautify
可以自动格式化html,CSS,JS,让代码更规范
推荐的浏览器
谷歌浏览器自带代码检查功能,强烈安利,简直就是找bug的神器!
安利的学习视频
b站的pink老师讲解的前端视频,相当棒,条理清晰,而且还有案例可以做,比学校的老师讲的还好,最重要的是免费!
传送门:https://www.bilibili.com/video/BV14J4114768?from=search&seid=9857007138895278424