day2-标签进阶与标签属性

宠溺怪

已于 2023-06-18 22:24:13 修改

阅读量68

点赞数

分类专栏：前端学习-html篇文章标签：前端

于 2023-06-18 22:13:19 首次发布

本文链接：https://blog.csdn.net/jkkxc/article/details/131276773

版权

前端学习-html篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建项目文件夹

一般在做项目时.会把代码/素材放到专门的文件夹里保存.更方便管理 --> 项目文件夹

在写前端项目时.一般会有这3个文件
   img --> 图片文件夹
   css --> 样式文件夹
   js --> 脚本文件夹
网页的主页. 一般命名为index.html
网页的文件名字要做到见名知意

2.绝对路径与相对路径

绝对路径: 文件的完整路径.从盘符出发,一直到具体的文件
相对路径: 有参考位置的路径,默认为当前文件所在的位置

绝对路径: 江西省南昌市红谷滩区万达星城C栋2楼 (精准)
相对路径: 我家隔壁 (基于我家的情况)

代码例子:
   D:\software\Game\play.exe --> 绝对路径
   相对路径默认就是当前文件所在的位置.
   相对路径中,如果要返回上一层文件夹: ../

3.标签属性

什么是标签属性: 对标签信息的补充/描述 --> 颜色,大小,位置

<标签名属性名='属性值' 属性名 = '属性值'>
<小李性别='男' 爱好='打篮球'>

4.图片标签(img)

img --> 图片标签,单标签.用来显示图片
<img src='图片路径' alt='图片描述' width='宽度' height='高度'>
   src = 图片路径.可以用绝对/相对/网络路径
   alt = 图片的描述
   width,height = 宽高

默认有一个src就可以了.其他可以不写. 可以写下alt --> 让搜索引擎知道你的图片是啥

写路径时,最推荐的是相对路径.
   相对路径的常见情况:
       1.代码和图片在同一个文件夹 --> src='图片名'
       2.图片在当前文件的另外一个文件夹里 --> src = '文件夹名/图片名'
       3.图片在上一层目录中 --> src='../图片名'

5.超链接标签(a)

超链接标签a标签. 类似于哆啦A梦里面的任意门. 可以通过a标签,让你跳转/传送到一个指定的位置
   1.跳转到一个指定的网站
   2.跳转到网页里的指定位置 --> 先给目标标签设置id属性. 在href里写 #id名就可以跳转到指定的位置
   3.跳转到一个指定的文件

<a href='要跳转的位置'>超链接内容</a>
href --> 要跳转的位置

6.a标签还有一个标签属性,叫target (可以不用设置,浏览器会有默认的)
   target的作用为设置打开方式
       _self : 在当前页面跳转
       _blank : 新开一个页面打开

6.列表

前端的列表和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内容
自定义列表主要是用在双层菜单里的.可以表示等级区别

单层菜单(无序列表) 手机电脑平板耳机
双层菜单(自定义列表) 笔记本电脑游戏本轻薄本全能本三防本

内容都是写在li/dd/dt标签里的. ul,ol,dl只是作为容器使用.
ul/ol里面只能有li. 不要直接在ul里面写img/p/a标签. 要放,放li里

7.案例 -- 图片放大镜

里面用到了css知识点.
   1.有六张图片
   2.有一个背景盒子 --> 居中
   3.当鼠标经过时.图片就会变大

作案流程:
   1.创建一个矩形/盒子来装图片 -- 宽高,颜色,排版
   2.放入6张图片
   3.设置放大功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大镜</title>
    <style>
        #photo{
            margin: 100px auto;
            padding: 10px;
            width: 800px;
            height: 400px;
            background-color: #096;
            text-align:center;
        }
        #photo img{
            width: 250px;
            height: 190px;
        }
        #photo img:hover{
            transform: scale(2); /* 缩放到2倍大小 如果是0.X倍可以直接写  .x   .3*/
            transition: 2s; /* 在2秒时间里完成缩放操作*/
        }
    </style>
</head>
<body>
    <div id="photo">

        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">

    </div>
</body>
</html>

8.vscode快捷键

1.选中一行 ctrl+c 复制当前行 ctrl+x剪切当前行
2.alt + shift + ↑/↓ --> 快速复制当前行
3.标签名*n --> n为数字.快速生成n个标签. p*3
4.标签名{} --> 生成一个标签.大括号里放入内容 p{多喝热水}
5.标签名[] --> 生成一个标签.中括号里写入标签属性
6.$ --> 一个变量.从1到X. p{多喝热水.这是第$杯}*10
7.快速生成一个包裹标签: ul>li*3 --> ul里面包裹着3个li标签
8. alt + 点击 = 选中多行 alt + shift + 拖选 = 拖选多行

宠溺怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
day2-标签进阶与标签属性

img src='图片路径' alt='图片描述' width='宽度' height='高度'>2.图片在当前文件的另外一个文件夹里 --> src = '文件夹名/图片名'默认有一个src就可以了.其他可以不写. 可以写下alt --> 让搜索引擎知道你的图片是啥。ol,li --> 有序列表. ol是容器标签,li是内容标签. 两者是包含关系。ul,li --> 无序列表. ul是容器标签,li是内容标签.两者是包含关系。3.图片在上一层目录中 --> src='../图片名'
复制链接

扫一扫