一、开发坏境的准备

1，在微软商店下载并安装VS Code  以及谷歌浏览器或者其他浏览器（我这里使用的是Microsoft Edge）

 2，打开vs code ，在电脑桌面新建一个文件夹命名为code，将文件夹拖拽到vs code 中的右边空白处 如图就有文件夹CODE（以下是已经汉化版本的，下面会提到）

3，安装插件

扩展--->搜索插件--->安装---->重启VS Code

打开网页插件：open inbrowser  ---可以直接打开浏览器查看代码

汉化菜单插件：Chinese

下载完之后要重启！！！！重启！！！重启！！！

4,缩放代码字号：

放大：ctrl +加号

减小：ctrl +减号

5，将浏览器设置为默认浏览器

二，标签语法

1.HTML定义：超文本标记语言

超文本——链接

标记——也叫标签，带尖括号的文本

2.标签语法

标签成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多“/”

练习：先创建一个网页文件，以“.html”结尾，ctrl+b可以隐藏左边侧边栏

结果如下：记得按ctrl+s保存，右键鼠标,再打开浏览器查看

双标签：成对出现的标签

单标签：只有开始标签，没有结束标签"<hr> 水平线标签"和“<br> 换行”

写<hr>后会出现水平线

三，HTML基本骨架

HTML基本骨架是网页模板

html：整个网页

head：网页头部，存放浏览器看的代码，例如CSS

body：网页主体，存放给用户看的代码，例如图片，文字

title：网页标题

VS Code快速生成骨架：在HTML文件（.html）中，英文！配合Enter/Tab键

进行改写

四，标签的关系

作用：明确代码的书写位置

父子关系（嵌套关系）：html---head,body

兄弟关系（并列关系）:head---body

平时在写代码的过程中，需要注意:使用Tab键进行缩进，不得使用空格键，使用shift+Tab进行删除空格操作

五，注释

注释是对代码的解释和说明，提高程序代码的可读性

<!--...-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示

添加/删除注释的快捷键：ctrl+/

六，排版标签-标题和段落

1.标题标签

一般用于新闻标题，文章标题，网页区域名称，产品名称等等

标签名：h1~h6（双标签）

特点：字体加粗，字号逐渐减小，单独成行

因此：h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo

h2~h6没有使用次数的限制

2.段落标签

标签名：P（双标签）

 

特点:独占一行，段落之间存在间隙

七，换行和水平线标签

换行：<br>(单标签)

不可以使用enter键换行

 enter键不可以换行

 

加两个<br> 空格变大了

水平线：<hr>(单标签)

八，文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗，倾斜，下划线，删除线等。

一般使用左边的标签，因为自带强调含义

九，图像标签

1.文本格式

作用：在网页中插入图片

<img src="图片的URL">

src用于指定图像的位置和名称，是<img>的必须属性

练习：先保存几张图片到CODE文件夹里面，系统会自动识别放入图像标签的html文件中，输入img回车，再输入“./”会出现提示，刷新浏览器查看，会根据图片大小自动换行。

2.属性 ——重点掌握前两个

正常显示，其中alt的内容不显示

 当改变图像的属性时，或者网速慢时，导致图片加载不出来，为不影响网页内容的浏览，用alt替换

使用title的属性，在浏览器中查看时，鼠标放到图片上面等几秒钟就会出现文字

练习其他两个属性 

图片的高和宽都发生等比例变化 

属性名=“属性值”

属性写在尖括号里面，标签名后面。标签名和属性之间用空格隔开，不区分先后顺序

十，路径-相对和绝对

路径指的是查找文件时，从起点到终点经历的路线

1.相对路径：从当前文件位置出发查找目标文件

 /表示进入某个文件夹里面 ——文件夹名字/

. 表示当前文件所在文件夹——./

.. 表示当前文件的上一级文件夹——../

 1.jpg 直接在文件夹CODE里面创建的，所以是当前文件所在文件夹./

 2.gif  文件是在images文件夹里面创建的，所有首先进入./images文件夹中，再/写文件夹名字

 3.jpg文件是在相对路径.html的上级目录相对路径里面的，所以是当前文件的上一级文件夹../

2，绝对路径：从盘符（文件所在盘CDE盘）出发查找目标文件

windows电脑从盘符（CDE盘）出发

Mac电脑从根目录（/）出发

练习写绝对路径时，找到图片复制路径到代码中，再写上图片的名称即可

可以看到上面图片/\符号都可以出现

还可以使用在线网址的方法实现友情链接，复制csnd的logo链接，复制到代码中，在我浏览器中可以看到下面图片中有csdn的logo

文件的在线网址https://img-home.csdnimg.cn/images/20201124032511.png