目录
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.相对路径:
找自己电脑的文件,一般用相对路径,不用绝对路径(就像盗版软件一样的道理)