目录
一、开发坏境的准备
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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
