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有个超链接，需要额外处理