2021-03-04

HTML第一天学习笔记（3.3补）
1、 养成良好的习惯听课时，word随时记笔记，没听懂的地方记录下来，复习的时候重点寻求答案。把重要的内容截屏保存下来。打字速度达到70~100/分钟，养成学习的习惯，为后续高强度的学习做准备，做好笔记，上传，问题汇总，完成作业。
2、 特殊按键
ctrl键是英语control“控制”的意思，要和其他的按键配合使用。
shift键是英语shift“换挡”的意思，按下这个按键同时击打字母，打出的就是大写字母。熟悉shift键来打大写字母，尽量少用大小写锁定键capslock。这是对程序员的要求。
alt键是英语alternate“调整”的意思，和ctrl一样，自己按没啥用，都要和其他的按键一起按才有用。比如alt+f4，表示关闭快速当前窗口。
tab键是用于table“制表符”的意思，经常实现“切换的功能”。比如我们在浏览器中同时打开了两个多个页面，可以用ctrl+tab键，来在两个页面之间切换。 当然，可以用alt+tab键来切换程序。

1、 快捷键
2、 ctrl+c 复制
3、 ctrl+v 粘贴
4、 ctrl+x 剪切（就是移动文件，在原来的文件夹ctrl+x一个文件，然后在新文件夹中ctrl+v粘贴）
5、 ctrl+tab 切换（具体切换什么，要看是什么软件）
6、 alt+F4 关闭程序
7、 F2 重命名（对文件操作，重新命名）
8、 F5 刷新，比如刷新网页
9、 ctrl+z 撤销
10、 windows+E 打开资源管理器11、 windows+D 显示桌面
12、 alt+tab 切换窗口
13、 ctrl+空格
切换中英文，严禁用shift键切换，(因为我们在js中会出现大量的程序代码段，中文英文切换，大小写和标点符号，大写字母要用shift，切换中文，程序里中文使用少，英文使用多，所以严禁用shift 切换，管好中英文。

4、第一个网页
新建文本文档.Txt, 保存时编码为ANSI（纯文本格式，这是我们编写代码文件的方式），修改文件的拓展名，从txt更改为html，我们会发现图标就变成浏览器的图标了。养成 编辑器里面编辑 → 保存ctrl+s → 浏览器里面刷新F5 的习惯。文件夹最好英文命名。
HTML是英语HyperText Markup Language的缩写，超文本标记语言现在的业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
5、VSCode下载与安装（https://blog.csdn.net/weixin_43691058/article/details/93919967）
(1)配置中文插件:快捷键：ctrl shift +p输入:Configure Display Language
(2)其他插件：①Vetur —— 语法高亮、智能感知、Emmet等包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
②EsLint —— 语法纠错
③open in browse——设置在网页中打开快捷键
④Live Server——一款可以在浏览器实时显示当前vscode代码的插件
(3) Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。


6、vscode常用快捷键总结
Ctrl+Shift+P,F1 展示全局命令面板
Ctrl+P 快速打开最近打开的文件
Ctrl+Shift+N 打开新的编辑器窗口Ctrl+Shift+W 关闭编辑器
Ctrl + X 剪切
Ctrl + C 复制
Alt + up/down 移动行上下
Shift + Alt up/down 在当前行上下复制当前行
Ctrl + Shift + K 删除行
Ctrl + Enter 在当前行下插入新的一行
Ctrl + Shift + Enter 在当前行上插入新的一行Ctrl + Shift + | 匹配花括号的闭合处，跳转Ctrl + ] 或 [ 行缩进
Home 光标跳转到行头
End 光标跳转到行尾
Ctrl + Home 跳转到页头
Ctrl + End 跳转到页尾
Ctrl + up/down 行视图上下偏移
Alt + PgUp/PgDown 屏视图上下偏移
Ctrl + Shift + [ 折叠区域代码
Ctrl + Shift + ] 展开区域代码
Ctrl + / 添加关闭行注释
Shift + Alt +A 块区域注释
Alt + Z 添加关闭词汇包含

导航快捷键
Ctrl + T 列出所有符号
Ctrl + G 跳转行
Ctrl + P 跳转文件
Ctrl + Shift + O 跳转到符号处
Ctrl + Shift + M 或 Ctrl + J 打开问题展示面板
F8 跳转到下一个错误或者警告
Shift + F8 跳转到上一个错误或者警告
Ctrl + Shift + Tab 切换到最近打开的文件
Alt + left / right 向后、向前
Ctrl + M 进入用Tab来移动焦点
Ctrl + F 查询
Ctrl + H 替换
F3 / Shift + F3 查询下一个/上一个
Alt + Enter 选中所有出现在查询中的
Ctrl + D 匹配当前选中的词汇或者行，再次选中-可操作

多行光标快捷键
Alt + Click 插入光标-支持多个
Ctrl + Alt + up/down 上下插入光标-支持多个
Ctrl + U 撤销最后一次光标操作
Shift + Alt + I 插入光标到选中范围内所有行结束符
Ctrl + I 选中当前行
Ctrl + Shift + L 选择所有出现在当前选中的行-操作
Ctrl + F2 选择所有出现在当前选中的词汇-操作
Shift + Alt + right 从光标处扩展选中全行Shift + Alt + left 收缩选择区域
Shift + Alt + (drag mouse) 鼠标拖动区域，同时在多个行结束符插入光标
Ctrl + Shift + Alt + (Arrow Key) 也是插入多行光标的[方向键控制]
Ctrl + Shift + Alt + PgUp/PgDown 也是插入多行光标的[整屏生效]
Esc Esc 连续按两次Esc键取消多行光标
Shift + Alt + F 格式化代码
F12 跳转到定义处
Alt + F12 代码片段显示定义
Ctrl + K F12 在其他窗口打开定义处
Ctrl + . 快速修复部分可以修复的语法错误Shift + F12 显示所有引用
F2 重命名符号
Ctrl + Shift + . / , 替换下个值

编辑器管理快捷键
Ctrl + F4, Ctrl + W 关闭编辑器
Ctrl + |切割编辑窗口
Ctrl + 1/2/3 切换焦点在不同的切割窗口
Ctrl + Shift + PgUp/PgDown 切换标签页的位置

文件管理快捷键
Ctrl + N 新建文件
Ctrl + O 打开文件
Ctrl + S 保存文件
Ctrl + Shift + S 另存为
Ctrl + F4 关闭当前编辑窗口
Ctrl + W 关闭所有编辑窗口
Ctrl + Shift + T 撤销最近关闭的一个文件编辑窗口
Ctrl + Enter 保持开启
Ctrl + Shift + Tab 调出最近打开的文件列表，重复按会切换
Ctrl + Tab 与上面一致，顺序不一致
Ctrl + P 复制当前打开文件的存放路径
Ctrl + R 打开当前编辑文件存放位置【文件管理器】

显示快捷键
F11 切换全屏模式
Ctrl + =/- 放大 / 缩小
Ctrl + B 侧边栏显示隐藏
Ctrl + Shift + E 资源视图和编辑视图的焦点切换
Ctrl + Shift + F 打开全局搜索
Ctrl + Shift + G 打开Git可视管理
Ctrl + Shift + D 打开DeBug面板
Ctrl + Shift + X 打开插件市场面板
Ctrl + Shift + H 在当前文件替换查询替换
Ctrl + Shift + J 开启详细查询
Ctrl + Shift + V 预览Markdown文件【编译后】
Ctrl + K v 在边栏打开渲染后的视图【新建】

调试快捷键
F9 添加解除断点
F5 启动调试、继续
F11 / Shift + F11 单步进入 / 单步跳出
F10 单步跳过

集成终端快捷键
Ctrl + 打开集成终端 Ctrl + Shift + 创建一个新的终端
Ctrl + C 复制所选
Ctrl + V 复制到当前激活的终端
Shift + PgUp / PgDown 页面上下翻屏
Ctrl + Home / End 滚动到页面头部或尾部
注意：比如要打一个标签

,先打一个p，然后按tab键，自动生成一对。

可以参考以下链接：
https://www.cnblogs.com/awkflf11/p/9412344.html
比如 li*10 按tab，重复10

7、HTML骨架和基本语法
vscode快速生成标准的html代码步骤：
一、先输入一个 !
二、点击 tab 键
三、自动生成标准的html代码
注意：文件后缀为html，然后再输入!(英文)，Tab就有了
1
2
3
4
5
6
7
8
网页的最外层的标签对儿是标签对儿，里面有两部分，分别是head和body。
head标签中，描述网页的配置；body中的内容，才是用户可以看见的内容。

完整的骨架：

第1行，就是网页的声明头，术语叫做DocType Defintion，文档类型定义，简称DTD。这行语句非常的复杂，里面暗含了一个网址。W3C就是出web规范的组织机构。html、css、js的规范都是W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器，这是一个什么标准的页面。
第2行，是最大的html标签，所有的网页内容，都要包裹在这个标签对儿里面。
我们发现，html标签中，有两个属性：
xmlns=“http://www.w3.org/1999/xhtml” 命名空间，就是一个规范；
xml:lang=“en” 语言是英语
第3行，就是head标签，就是配置。
第4行， 字符集的配置。
第5行， 网页的标题，可以显示在浏览器的标签栏中。
第7行，body标签就是网页的内容，用户能够看见。