文章目录
1、开发环境准备
在编辑器中写代码，在浏览器中看效果
以VSCode为例，基本使用：
- 打开文件：任意文件夹 →拖拽至 VS Code 空白位置即可
- 插件的安装：扩展 → 搜索插件 → 安装 → 重启 VS Code，如下，安装一个打开网页的插件
- 字号的放大缩小：Command 和 + -
- 添加 / 删除注释的快捷键：Command + /
2、html介绍
html，HyperText Markup Language，超文本标记语言
- 超文本，即链接🔗
- 标记，即标签、尖括号
如下图左侧，即为html
标签语法：
- 双标签成对出现，中间包裹内容
- 单标签只有开始标签，没有结束标签，如换行
<br>、水平线<hr>
Ctrl + S，保存后，右键Open In Browers，看下效果：
3、html基本骨架
html基本骨架，即网页模板
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如CSS
- title：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字
在VSCode中，生成这个骨架模板：
在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键
4、标签的关系
如下图，图片和外层是父子关系，和底下的文字则是并列关系，这个关系，决定了标签书写的位置
标签之间有两种关系：
- 父子关系（嵌套关系）：换行要缩进
- 兄弟关系（并列关系）：换行要对齐
5、常用标签
5.1 标题
- h1 ~ h6
<h1>这是h1标题</h1>
文字加粗、独占一行、字号逐渐减小
使用场景：新闻标题、文章标题、商品名称
一般，h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo， h2 ~ h6 没有使用次数的限制
5.2 段落
- p（双标签）
<p>这是一个段落。</p>
- 独占一行，段落之间有间隙
- 使用场景：新闻段落、文章段落、产品描述信息
5.3 换行与水平线
单标签（不需要包裹文字内容）
<br>
// 水平线
<hr>
5.4 文本格式化标签
如下，左右两边都行，但一般用左边的标签，因为语意明确：strong、em、ins、del
// 建议
<strong>加粗效果</strong>
// 不建议
<b>加粗效果</b>
5.5 图像标签
用于在网页中插入图片，src熟悉用于指定图像的位置和名称，是 <img> 的必需属性
<img src="图片的 URL">
路径的书写时，./后VSCode有提示
注意，src可以是一个相对路径、绝对路径，还可以是一个URL地址，img标签的其他属性：
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
5.6 超链接标签
a标签，作用是点击跳转到其他页面
<a href="https://www.baidu.com">跳转到百度</a>
- href 属性值是跳转地址，是超链接的必须属性
- 超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新开一个窗口去打开跳转页面
- href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次
// 原地跳，且新开一个窗口，就像是浏览器复制标签页的功能
<a href="#" target="_blank">return</a>
5.7 音频标签
<audio src="音频的 URL"></audio>
其余属性：
注意，属性controls并不是常规的 xx='zz’格式，而是只有一个controls，这是因为，写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词
5.8 视频标签
<video src="视频的 URL"></video>
其余属性：
6、路径
根据出发点，分为：
- 相对路径：从当前文件位置出发查找目标文件
- 绝对路径：从盘符出发查找目标文件（Windows 电脑从盘符出发，Mac 电脑从根目录出发）
路径的写法：
.当前文件所在文件夹..当前文件上一级文件夹/进入某个文件夹里面
7、网页制作
用上面的标签，制作以下网页：
制作思路：从上到下，先整体再局部 ，先整体再局部，这里的局部，如上面的Vue.js有个超链接，需要额外处理
