凹凸学习

# 网页开发工具

# VSCode 的使用

使用VSCode开发html

  • 新建文件（Ctrl+N ）
  • 保存（Ctrl+S）, 注意文件要保存为 .html 文件
  • Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图
  • 生成页面骨架结构：输入! 按下 Tab 键
  • 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”

主命令窗口查找快捷键

  • 查找文件窗口： Ctrl+P

  • 跳转到行数： Ctrl+G

  • 搜索变量或者函数(跳转到symbol)： Ctrl+Shift+O

代码编辑快捷键

  • 代码格式化：Alt + Shift + F

  • 删除一行： Ctrl+Shift+K

  • 移动整行：Alt+上下键

  • 在当前行下面插入一行： Ctrl+Enter

  • 在当前行上插入一行： Ctrl + Shift + Enter

  • 向上向下复制一行： Alt + Shift + Up 或者 Alt + Shift +Down

  • 列操作： Alt + Shift + 拖动鼠标

HTML代码快速生成快捷键

  • 生成指定id为app的div：div#app
  • 生成class为box的div：div.box
  • 生成多个指定class的div：div.nav+div.header+div.box+div.footer
  • 生成多个div：div*8{$}
  • 生成多个li：ul>li*4{$}

# VSCode 工具生成骨架标签新增代码

  1. <!DOCTYPE> 标签

  2. lang 语言

  3. charset 字符集

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

# 文档类型声明标签

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

<!DOCTYPE html>
1

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

注意:

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

  2. <!DOCTYPE>不是一个 HTML 标签，它就是 文档类型声明标签。

# lang 语言种类

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

  1. en定义语言为英语

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

简单来说，定义为 en 就是英文网页，定义为 zh-CN 就是中文网页。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文。这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

# 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

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

<meta charset=" UTF-8" />
1

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

注意：字符集代码是必须要写的，否则可能会引起页面乱码。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。

# 总结

  1. 以上三个代码 vscode 自动生成，基本不需要我们重写

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

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

  4. <meta charset=“ UTF-8” /> 必须写，采取 UTF-8来保存文字，如果不写遇到中文不同的浏览器会出现乱码

← HTML 常用标签 →