目录
1.开发环境的准备
编译器里面写代码，浏览器中看效果。
2.VS Code的使用：
（1）新建文件：
a.在VS Code软件里面中新建
新建文本文档（新建时第一个选项）是没有代码颜色槽的；要新建文本文档类型（新建时的第二个选项）才可以在新建时选择所写的代码类型
b.直接拖入文件夹或打开文件夹
在这两种方式中的文件夹新建时可以有代码颜色槽
注：不同文件有不同的特殊名的（列：网页文件的特殊名为.html）
（2）设置默认浏览器
在笔记本系统中搜索默认程序
（eclipse中可以直接切换）
3.HTML
（1）HTML定义：
HTML（超文本标记语言）——Hyper Text Markup Language
超文本是什么：链接
标记是什么：标记也叫标签，带尖括号的文本
标签的定义：
a.标签成对出现
b.尖括号"< >"里面放英文字母（标签名）
c.结束标签比开始标签多"/"
拓展：
双标签：成对出行的标签
单标签：只有开始标签，没有结束标签。
注：保存HTML标签的文件拓展名是".html"，即新建文件时的文件名要.html格式
（2）HTML基本骨架（结构）
HTML基本骨架：即网页模板
标签所表示的功能：
html:整个网页
head：网页头部，存放给浏览器看的代码，列：CSS
body：网页主题，存放给用户看的代码，列：图片、文字
title：网页标题
VS Code中快速生成骨架：在HTML文件（.html）中，！（英文）配合Enter/Tab键
（3）标签的关系
作用：明确代码的书写位置
a.父子关系（嵌套关系）
b.兄弟关系（平级关系）
（4）注释
浏览器中不会显示注释内容
（5）标签
a.标题标签
一般用于在新闻标题、文章标题、网页区域名称、产品名称等等
（a）标签名：h1到h6（双标签）
标题标签一共有六个级别，标签名分别是h1到h6
（b）在浏览器中各个标签标题的效果显示是：
文字加粗、字号逐渐减小、独占一行
（c）一级标签（h1）有使用限制：一个网页就用一次，用来放新闻标题或网页logo
b.段落标签
一般用在新闻段落、文章段落、产品描述信息等等
（a）标签名：p（双标签） （b）显示特点：
独占一行、段落之间存在间隙
c.换行和水平线标签
因为浏览器不识别回车键换行
（a）标签名：br（换行）、hr（水平线）两个都是单标签
此标签不限制使用次数
d.文本格式化标签
（a）作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等
（b）标签名：
加粗：strong、b
倾斜：em、i
下划线：ins、u
删除线：del、s
一般我们都用第一列标签，因为它们都能实现加粗、倾斜、下划线、删除线含义，但是标签strong、em、ins、del自带强调含义（语义）
（c）显示特点：
两个文本格式化标签是在一行显示的
e.图形（图片）标签
（a）作用：在网页中插入图片
（b）标签名：img（单标签）
（c）格式：
(d)图像标签的属性
（a）格式：属性名="属性值"
属性写在尖括号里面，标签名后面；标签名和属性之间用空格隔开，不区分属性的先后顺序
（b）必须属性是：src
src用于指定图像的位置和名称，是<img>的必须属性
图片的URL：图像的位置和名称
注：在文件中，图像和文件（.html文件）是放在同一位置的，这样在写图像的位置和名称时以./开头，VS Code就会有提示
（c）非必须属性：
alt
作用：替换文本
说明：图片无法显示的时候显示文字
title
作用：提示文本
说明：鼠标悬停在图片上面的时候显示的文字
width
作用：图片的宽度
说明：值为数字，没有单位
height
作用：图片的高度
说明：值为数组，没有说明
在实际工作当中，设计图片的高度和宽度都是通过CSS来设置的
f.超链接标签
（a）作用：点击跳转到其他页面
（b）标签名：a（双标签）
（c）格式：
（d）必须属性：href
href属性值是跳转地址，是超链接的必须属性
用法：
网址的话直接复制就好了
自己计算机里面的文件
（建议找自己电脑里的文件用相对路径）
用法美化
实现跳转后还保留原来网址窗口方法
在尖括号里面写：空格target="_blank"
即：target="_blank"属性作用是在新窗口打开页面
小经验：
开发初期，不知道超链接的跳转地址时，href属性值写#，表示空链接，不会跳转；之后明确了超链接地址时再把#覆盖掉（改掉）
g.多媒体标签（音频、视频标签）
视频标签
（1）作用在网页中插入声音
（2）格式：audio双标签
(3)常见的属性：
a.必须属性：src
作用：音频URL
b.非必须属性：
controls
作用：显示音频控制面板
loop
作用：循环播放
autoplay
作用：自动播放
说明：为了提升用户体验，浏览器一般会禁用自动播放功能（就算写上还是会要手动播放，因为浏览器禁用）
注：在HTML中，如果属性名和属性值一样，可以简写成一个单词
音频标签：
（1）作用：在网页中插入视频
（2）格式：video双标签
（3）常见属性
a.必须属性：src
作用：视频URL
说明：支持MP4、WebM、Ogg格式
b.非必须属性
controls
作用：显示视频控制面板
loop
作用：循环播放
muted
作用：静音播放
autoplay
作用：自动播放
说明：为了提升用户体验，浏览器支持在静音状态下自动播放
4.路径：
（1）定义：
查找文件时，从起点到终点经历的路线
（2）分类：
相对路径：从当前文件位置出发查找目标文化
绝对路径：从盘符出发查找目标文件
"电脑的操作系统不同，绝对路径的起点也有区别：windows电脑从盘符出发；Mac电脑从根目录出发"
（3）路径写法中的符号表示
. 表示当前级文件所在文件夹
.. 表示当前文件上一级文件夹
/ 进入某个文件夹里面（haha/表示进入哈哈文件夹里）
诠释：
要进入哪个文件夹里面就在斜杠前面写文件夹名字（文件夹名/）
（4）找文件实践：
a.相对路径找法
进入当前文件一级所在的文件夹A：./文件夹A/
进入上一级文件夹找文件：../
b.绝对路径找法
格式：
写时注意：Windows默认是\，其他系统是/，所有建议写/
第一步：找到要添加的图片在盘符的文件夹
第二部：把斜杠手动改为反斜杠
c.到网站找图片法
第一步：选中图片后复制网址上的图片地址
第二步：粘贴到img的src中
（5）使用场景：
a.绝对路径的应用场景：
实现友情链接的效果
把文字未来做成链接，跳转位置做成对应网站的在线网址
b.相对路径：
找自己电脑的文件，一般用相对路径，不用绝对路径（就像盗版软件一样的道理）
6763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
