网页开发工具

  • VSCode的使用

  1. 双击打开软件

  2. 新建文件 Ctrl+N

  3. 保存 Ctrl+S  注意移动要保存为.html文件

  4. Ctrl+加号键 Ctrl+减号键  可以放大缩小视图

  5. 生成页面骨架结构:输入! 按下Tab键

  6. 利用插件在浏览器中预览页面,单击鼠标右键,在弹出出口中点击“Open In Default Browser”

  • 推荐安装的插件

插件

作用

Chinese(Simplified)LanguagePack for VSCode

中文(简体)语言包

Open in Browser

右击选择浏览器打开html文件

JS-CSS-HTML Formatter

每次保存都会自动格式化js,css,html代码

Auto Rename Tag

自动重命名配对的HTML/XML标签

CSS Peek

追踪至样式

  • 文档类型声明标签

<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>

这句代码的意思是:当前页面采取的是HTML5版本来显示网页

注意:

1、<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前

2、<!DOCTYPE>不是一个HTML标签,它就是文档声明标签

  • lang语言种类

用来定义当前文档显示的语言

1、en定义语言为英文

2、zh-CN定义语言为中文

简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页

对于文档显示来说,定义为en的文档也可以显示中文,定义为zh-CN的文档也可以显示英文,

这个属性对浏览器和搜索引擎(百度、谷歌等)还是有作用的

  • 字符集

字符集是多个字符的集合,以便计算机能够识别和存储各种文字

在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UTF-8" />

charset常用的值有:GB2312、BTG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符

注意:上面语法是必须要写的代码,否则可能会引起乱码的情况,一般情况下统一使用UTF-8编码,尽量统一写成标准的“UTF-8”

总结:

1、<!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面

2、<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站,本页面采用英文来显示

3、<meta charset="UTF-8"/>必须写,采取UTF-8来保存文字,如果不写就会乱码