开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情
创建项目文件夹
一般在做网站开发的时候.是把代码素材放到一个文件夹里.进行管理 -- 项目文件夹
目前阶段开发项目时,需要有3个文件夹
img --> 把图片放在文件夹里
css --> 把css代码放这里
JavaScript --> 把js代码放这里面
网页的主页. 一般命名为index.html
网页文件的名字要做到见名知意
绝对路径与相对路径
绝对路径: 文件的路径,一般从盘符触发,一直到具体的文件
相对路径: 有参考位置的路径.默认为当前文件夹
绝对路径: 广东省广州市天河区联合社区C栋2楼
相对路径: 我家楼下(有个参考坐标)
代码例子:
F:\SteamLibrary\多喝热水.jpg --> 绝对路径
相对路径中如果要退回上一层文件夹: ../
也可以直接选中文件.右键选择复制路径
一般来说.更建议使用相对路径
标签属性
什么是标签属性:
对标签信息的补充/描述 颜色 大小 位置
<标签名 属性1='值1' 属性2='值2'>
<七零 性别='男' 爱好='同学们'>
图片标签(img)
img --> 图片标签,单标签.用来显示图片
<img src='图片路径' alt='图片描述' height='高度' width='宽度'>
src = 图片路径.可以用绝对,相对,网络路径
width,height = 宽高 --> 设置的话不用给单位
alt = 图片的描述
默认有一个src就可以了.其他的可以不写.最好写下alt.
alt(图片的介绍) --> 让搜索引擎知道你的图片是个啥东西
超链接标签(a)
超链接标签a标签.类似于哆啦A梦里的任意门,火影忍者里的飞雷神.可以通过a标签,让你跳转/传送到一个指定的位置
1.跳转到一个指定的网站
2.跳转到网页里的指定位置
3.跳转到一个指定的文件'
<a href='要跳转的位置' target='跳转方式'> 超链接内容</a>
href --> 要跳转的地方
target --> 用什么方式跳转:
_self : 在当前网页跳转过去
_blank : 新开一个网页跳转过去
target一般不用设置.直接用浏览器默认的就好
列表
前端的列表和python列表不是一个东西.
列表的主要作用就是用来保存一些带有关联性的数据. 分为有序列表/无序列表/自定义列表
比如歌曲/游戏排行榜
1.
2.
3.
4.
5.
像这种内容就可以通过有序列表来定义
ul,li --> ul是无序列表的容器.li是列表元素. 两者是包含关系
默认的无序列表样式是一个小黑点.嵌套无序列表就是小白点
ol,li --> ol是有序列表的容器.li是列表元素 两者也是包含关系
默认的有序列表是从数字1开始计算的.可以通过设置type属性修改样式
i -- 罗马数字
1 -- 阿拉伯数字
a -- 小写字母
A -- 大写字母
自定义列表 --> dl,dt,dd dl大容器 dt小容器 dd内容
p标签是一个单纯的文本标签.不能不好表现关系
如果有很多的文本..想表现出他们是有关系的,那就用自定义列表
网站介绍: 合作伙伴 推荐网站
小实战 -- 图片放大镜
1.有一个相册背景框/盒子 --> 网页中间
2.有6张图片
3.鼠标放到图片上,图片会变大
1.创建一个盒子来装图片
2.设置盒子大小,颜色
