1.12&1.14学习如何安装插件了解初步快捷键,以及6个标签:
安装vscode常用的插件(新手时期,不需要安装过多的,掌握适用的就好) 1.Chinese (simplified)汉化:软件转中文版本 2.Auto Rename Tag:自动化更正(修订)文字插件 3.One Dark Pro:用于更改vscode的颜色主题 4.格式化代码(vscode系统里会自带) 5.Live Server 实时预览服务器:用于检验书写代码的效果 6.vscode-icons:设置文件图标主题:显示出文件类型是html、css、js等的图标 7.Easy LESS 编译less文件:后续的学习less文件时会用到,提前安装好 8.会了吧:学习单词插件(遇到不懂的单词是选中之后用过插件可以自动翻译)
常用快捷键:
- win + 左右箭头 :快速调整浏览器和vscode的位置方向(在桌面显示的位置)
- shift + alt + 上下箭头/(或者ctrl + c , ctrl + v ) :快速复制一行
- ctrl + d :选定多个相同的单词 先双击选定一个单词(标签名→尖括号里面的单词),按下快捷键" ctrl + d " 就能依次往下选择相同的单词,有利于同时修改相同个的单词,变更标签.
- ctrl + alt + 上下箭头 : 添加多个光标 用于要在多个位置添加新的相同内容时,通过添加多的光标,实现同时输入新的内容
- ctrl + h :全局替换某些单词 类似word文档里的文字替换, 通过快捷键" ctrl + h"查找出要修订的文字,再点击右下角的"全部替换"实现全局替换
- ctrl + g :快速定位到某一行 用于当编写的代码页面很长的时候,快速跳到制定的行数时,通过快捷键" ctrl + g",输入相应的行数,回车键便能迅速定位
- shift + alt + 拖动鼠标 :选择某个区块 用于同时选取 同一列 的内容,进行修改或补充
- ctrl + 加号 或者 减号 :放大缩小整个编辑器界面
- 自定义快捷键的设置方法: 例如修改 javascript 里面的"多行注释"的快捷键是" shift + alt + a ",要变更为" ctrl + shift + / " 管理按键--键盘快捷方式--输入" shift + alt + a "找到这个快捷键--点击编辑按钮(笔的符号)--直接按下"ctrl + shift + / "--最后按下回车键完成自定义修改
初步了解html骨架结构的3个重要标签: 1." " 这是一个 文档类型声明 标签 , 作用就是告诉该浏览器使用的是哪种html版本,来显示网页 例如" " : 说明当前页面采取的是HTML最新版本html5版本来显示网页的
注意: " "声明,是位于文档中 最前面的位置 , 一定要写到第一行, 处于标签之前; " " 不是 html标签 , 它只代表文档类型声明标签 2. lang = Language,用于定义当前文档(编写的html文档)显示的语言,即告诉人们这个网站是属于中文网站还是英文网站,等等 常见的有: lang = "en" (定义语言为英语,即英文网页) , lang = "zh-CN"(定义语言为中文,即中文网页)
注意: 提倡使用 " zh-CN ". 大多数时候,虽然告诉了网站是什么类型的语言,但文档里面写什么语言普遍是可以的, 即对于文档显示来说,定义成"en"的文档,也可以显示成中文, 定义成"zh-CN"的文档也可以显示英文 (这个属性是对浏览器和搜索引擎 例如百度.谷歌等)有作用(→浏览器会自行跳转是否进行翻译)
3."Character set" : 多个字符的集合,便于计算机识别和存储各种文字. 出现在" "标签内, 通过" "标签的 charset属性来规定该html文档应该使用哪种字符编码. 这一条标签是必须要写的,否则可能造成他人打开网页时出现乱码的情况.
举例: ↑ 常见的charset的值有: GB2312、BIG5、GBK 和UTF-8
其中: 采取中文的编码方式的有 : GB2312、BIG5、GBK 分别对应: 简体中文、繁体中文、国标编码(包含简体、繁体中文) UTF-8: 称为 万国码, 基本包含了全世界所有国家需要用到的字符 注意: 应统一使用" UTF-8 "编码, 不能写成小写的utf8也不能省略中间的"-"
这三个代码( " " 、" <html lang='en' " 、"meta charset='UTF=8'") vscode会自动生成,基本不需要重写.
-
--
:标题标签,其中的h=head的缩写,译为头部、标题
html一共有6个标级选,没有h7 h8的网页标题,作为标题使用,要依据内容的重要性进行区分如何选取对应的标题标签(h1-h6)
注意: 加了标题标签的内容,字体会变加粗,字号也会依次变化 (h1的字体＞h2的字体,以此类推) 每个标题都会 独占 一行,意思是结束标签后再填写东西,会自动跳到下一行显示
-
:用于定义段落,将整个网页分为若干个段落,其中的p=paragraph的缩写,译为段落
特点: 段落标签内的内容, 会根据浏览器窗口的大小自动换行(即放大或者缩小窗口,段落还是整体的段落,但行数有变化) 段落与段落之间 , 会保有空隙间隔开(类似于平时打字按回车键,切到下一段) 注意: 在html文档中,无法通过输入"回车键"或者"空格键"进行内容的分段显示,只有输入段落标签,才能实现分段落的效果
或者
: 换行标签,将某段文本进行 强制换行 显示(即 另起一行,而不是换段落),其中的br=break的缩写,译为打断、换行 特点:
或者
是个单标签, 没有结束标签,因此可在后尖括号(">" )前输入"/"表示,也可省略
或者
和不一样,前者只是简单的开始新的一行,后者是段落与段落之间会存在垂直的间距 在html文档中,每个段落中的文字都会从左到右依次排列,直到浏览器窗口的右端后,才自动换行,若希望某段文本单独换行显示,就需要使用该换行标签实现强制换行的效果
