一、VS Code
Ctrl + O 打开新的文件
Ctrl + N 新建
Ctrl + C 复制
Ctrl + X 剪切
Ctrl + V 粘贴
Ctrl + W 关闭当前文件
Ctrl + Shift + S 另存为
Ctrl + S 保存
Alt + ↑ 上移当前行
Alt + ↓ 下移当前行
Alt + Shift+鼠标左键 选中多行进行同时编辑
Alt + F4 关闭软件
1.2 快捷键
! | html:5 => tab 快速生成一个html骨架
标签名 => tab 快速创建标签
标签名*数量 => tab 快速创建一定数量的同种标签。
标签名+标签名 => tab 快速创建两个标签
标签名{内容} => tab 快速创建带有内容的标签
标签名{内容$}*数量 => tab 快速创建带有内容序号的标签
标签名>标签名 => tab 快速创建嵌套关系的标签
1.3 常用插件
Auto Close Tag 自动闭合标签插件
Auto Rename Tag 自动重命名标签插件
open in browser 自动开启浏览器插件
文件|文件名 => 右键 => 选择浏览器
Live Server 在服务器下打开html页面（暂时不建议安装）
配置插件
ctrl + ,
file => Prefrences => Settings
1.4 文件拓展名
文本文档 .txt
压缩文件 .zip/.rar
word文件 .doc/.docx
音频文件 .wma/.mp3
excel文件 .xls/.xlsx
网页文件 .html/.htm
ppt文件 .ppt/.pptx
样式文件 .css
视频文件 .wmv/.flv/.mp4/.avi/.mkv
javascript文件 .js
图片文件 .png/. jpg/. gif/. psd/.bmp/.ico
1.5 DOS指令
查看IP地址
右下角小电脑 打开网络和共享中心 => 更改适配器设置 => 本地链接 => 属性 => IpV4地址
DOS查看：
Win + R 打开运行
输入命令cmd 点击确定
ipconfig 点击回车
基本操作：
cd 打开目录 dir 查看目录内容
d: 进入d盘
## 二、HTML 骨架
2.1 DTD
DocType Definition：文档类型定义（DTD），用来定义文档的规范。可以内部声明也可以外部声
明。
- 内部声明：
- 例如：
- 外部声明：
- 例如：
作用：规定了html使用的是哪个版本的html书写规范。
html、css、js规范维护更新的组织W3C组织。
网址：http://www.w3.org/
中文学习网址：http://www.w3school.com.cn/
2.2 DTD版本
html4.01版本，结构和样式做了分离。
Xhtml1.0版本，规范做了拓展升级。
代码必须用小写字母，属性必须用双引号包裹，结束标签必须写关闭符号/等等。
html4.01 和 Xhtml1.0这两个规范分别包含了3个小规范：
- Strict 严格版：不能使用font/b/u/i等废弃标签，不能使用框架集（Framesets）。
- Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集（Framesets）
- Frameset 框架集版：可以使用框架集
严格程度：XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01 transitionl
html5 不基于 SGML规范，不再区分3个小规范，所以不需要引用 DTD。
<!-- DTD网页说明书（文档定义模型），告诉浏览器该如何显示页面，能使用哪些标签等 -->
<!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>
2.3 html标签
html标签是双标签，表示我们的整个网页。
html标签有两个属性。
manifest 定义一个 URL，在这个 URL 上描述了文档的缓存信息（html5 新增）。
xmlns HTML 不支持。只有 XHTML 支持。 规定 XML 的 namespace 属性
如：http://www.w3.org/1999/xhtml
注意：在html5 规范中，html标签上的lang属性是全局属性。
xmlns表示命名空间：namespace
因为我们制作的网页给不同的用户来浏览，命名空间规定我们的标签代表的含义，必须将命名空间进
行统一。
2.4 元素，标签与属性
元素：网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，所以说，HTML元素就是构
成HTML文件的基本对象，HTML元素是一个统称。HTML元素就是通过使用HTML标签进行定义的。
标签：标签就是、、
是成对出现的，如
<br >、<img>等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
注意：元素是实体，标签是名称（标记），后面的课程中，不再强调区分标签和元素。
属性：为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形
式出现，而且属性总是在HTML元素的开始标签中进行定义。
2.5 注释
注释：就是一段用来解释说明的文档，渲染页面的时候会被浏览器忽略，而不会显示在页面中。
语法：
快捷键： ctrl + /
注：在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够说明的 HTML 文档。可以利用注释在 HTML 中定义通知和提醒信
息。
2.6 head 标签
<head>标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指
示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档
的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为
内容显示给读者。
下面这些标签可用在 head 部分：, , ,
<title>。
base 标签为页面上的所有链接规定默认地址或默认目标。
href：规定页面中所有相对链接的基准 URL。
target：在何处打开页面中所有的链接（_blank，_parent，_self，_top，framename）
title 标签内部放的是网页的名字。
里面的内容可以帮我们提高搜索引擎优化（SEO）。
link 定义文档与外部资源的关系。如：引入外部样式，shortcut icon
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head表示视口外部的内容（网页中看不到的） -->
<!-- 常用标签：base，link，style，script，meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link用来引入与页面相关的文件 -->
<!-- href功能：找到文件资源, ./代表当前目录 （路径） -->
<!-- ref功能：文件与页面的关系 -->
<!-- stylesheet： 样式规则表 -->
<!-- 图标：icon|shortcut icon -->
<!-- <link rel="icon" href="./favicon.ico"> -->
<link rel="shortcut icon" href="./favicon.ico">
<!-- base定义资源从哪里找，页面从哪里打开 -->
<!-- href：定义文件的查找位置 -->
<!-- target：定义页面从哪里打开: _blank表示新标签，_self表示当前页面 -->
<!-- 全局配置 -->
<base href="https://www.baidu.com" target="_blank">
<title>Document</title>
</head>
<!-- 网页主题，视口（显示页面的区域）内部的内容 -->
<body>
<a href="https://www.icketang.com" target="_self">爱创乐育</a>
</body>
</html>
2.7 字符集
字符集：定义了当前文件使用的字库。
中文字库：
UTF-8：国际标准字库。包含了人类所有语言的文字。一个汉字3个字节。
GBK/gb2312：中国字库，国家标准。包含所有的简体中文，大部分繁体，一些特殊符号，片假
名。一个汉字2个字节。
分情况使用：网页是外文网站，用UTF-8字库。有大量的中文，要求网页加载速度快，用gbk字库。
注意：必须保证设置的字符集和软件保存的字符集类型一致。
2.8 body标签
作用：body部分是我们的网页主体，给客户浏览的区域。
内容：里面放置的是我们的html标签书写的网页结构。
2.9 html基本语法
标签之间对空格、缩进、换行不敏感。对我们的标签的嵌套关系敏感。
tab：缩进。 shift+tab：撤销缩进。
空白折叠现象：文本内容区域内如果有一个或多个空格或者缩进或者换行，在浏览器中显示的时候，
只显示一个空格。即将所有空白区域折叠为一个空格。
标签的语法
① 标签必须写在一对尖括号里面，里面写的是我们的标签关键字。
② 双标签必须成对儿出现。
③ 结束标签必须写关闭符号/。
④ 标签分类：容器级标签、文本级标签。
2.10 标签分类
html中标签的分类：
容器级标签：h1-h6 pre div
文本级标签：p code span
文本级标签一般不能或不建议嵌套容器级标签，但是容器级可以嵌套文本级标签
三、标签介绍
3.1 h系列标签
h1-h6标题标签
给文本添加标题语义用，不能互相嵌套
默认加粗
具有换行符
h1-h6字体逐渐变小
由于 h 标签拥有确切的语义，因此要选择恰当的标签层级来构建文档的结构。
注意：请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到
漂亮的显示效果
3.2 p 标签
给文本添加段落语义
具有换行符
注意：
p 标签可以嵌套在块级元素内，
但 p 标签不能嵌套其它块元素，如 div，h系列标签，p标签等
3.3 属性
元素的属性：对元素的描述以及控制信息。
语法 文本内容
属性分类：
必选属性 img 图片标签中的 src alt
可选属性 img 图片的标签 width height
标准(全局)属性 id class style lang
事件属性 onclick onmouseover onmouseout
必选属性以及可选属性也可以看做是特有属性。
3.4 img 标签
img 标签是一个单标签 ，单标签在标签内使用 / 结束，当然目前是可以省略的。
img 标签的属性：
src 添加资源文件的路径
alt 图片加载失败后的文本提示
title 文本提示信息（鼠标悬停）
width 设置图片的宽度
height 设置图片的高度
border 设置图片的边框厚度（默认黑色实线，且不可修改）
1098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
