标签进阶&&标签属性

2023-12-29 10:22:04

绝对路径和相对路径

绝对路径： 文件的完整路径，从盘符出发，一直到具体的文件

? ? ? ? ? ? ??D:\Google\Chrome\Application

相对路径： 有参考位置的路径，默认为当前文件所在的文件

还有一种特殊的网络路径

一般都采用相对路径

相对路径的常见情况：

  1. ? ?和当前文件在同一文件位置? ? ? ? "文件名"
  2. 在当前文件夹里的文件夹里? ? ? ? ? ?"文件夹名/文件名"
  3. 在上级文件夹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"../文件名"

标签属性

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

<标签名 属性名="属性值"? ?属性名="属性值">

图片标签(img)

img--->图片标签,单标签,用来显示图片

? ? ? ? <img src="图片路径"? alt="图片描述"? width="宽度"? height="高度">

????????src = 图片路径. 可以用绝对/相对/网络路径
?? ??? ?alt = 图片的描述
?? ??? ?width,height = 宽高
?? ?默认有一个src就行了.其他可以不写

超链接标签(a)

超链接标签a,类似于任意门,可以通过点击a标签,跳转/传送到指定位置

  1. 跳转到指定网页
  2. 跳转到该网页的指定位置
  3. 跳转到一个指定文件

<a href="跳转位置"> 超链接内容 </a>

a标签有个标签属性target(一般不用设置,遵循浏览器规则)

????????target的作用为设置页面打开方式
?? ???????????_self: ?当前页面打开
?? ??? ???????_blank: 新页面打开

列表

列表一般用来保存一些相关联的数据,一般分为:有序列表 ,无序列表, 自定义列表

ul,li --> 无序列表,ul是容器标签.li是内容标签.两者是包含关系
?? ?无序列表的默认样式为小黑点,嵌套无序列表为小白点

ol,li --> 有序列表,ol是容器标签.li是内容标签.两者是包含关系
?? ?有序列表的默认样式为数字. 可以通过type属性修改样式

dl,dt,dd --> 自定义列表,dl是容器标签 dt是标题标签 dd是内容标签
?? ?自定义列表主要用于二级目录列表?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 代码和图片同级.直接写图片名 src='图片名' -->
    <img src="下载.jpg" width="300" height="200">

    <!-- 图片在下级目录,通过 文件夹名/图片名的方式访问 src='文件夹名/图片名'-->
    <img src="照片/IMG_20230704_171911.jpg" width="300" height="200">

    <!-- 图片在上级目录,通过../可以返回上级文件夹 src='../图片名' -->
    <img src="../images.jpg" width="300" height="200" >

    <!--网络路径-->
    <img src="https://lh5.googleusercontent.com/p/AF1QipM0ErHUIUZoxXNCSGeRk6SbyTax2q2nHb0Z0vQB=w810-h468-n-k-no" alt="">
<br>
    <!--跳转到一个网页-->
    <a href="https://blog.csdn.net/ffmlll?spm=1000.2115.3001.5343">点我加关注</a>
<br>
    <!--跳转到指定网站或文件-->
    <a href="照片/IMG_20230704_170230.jpg">点我西湖</a>
<br>
    <!--跳转到网页指定位置 #id名-->
    <a href="#computer">点我看电脑</a>
<br>
    <!--a标签还可以放图片列表等-->
    <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B9%96/4668821">
        <img src="照片/IMG_20230704_170230.jpg" width="300" height="200">
    </a>
<br>
    <!-- target:选择网页打开方式 一般不用设置 -->
    <a href="https://www.taobao.com/" target="_self"> 在当前页面打开淘宝</a>
    <a href="https://www.taobao.com/" target="_blank"> 在新建页面打开淘宝</a>
<br>
    <!-- 有序列表的默认样式为数字. 可以通过type属性修改样式 -->
    <ol>电影
        <li>潜行</li>
        <li>年会不能停</li>
        <li>一闪一闪亮星星</li>
        <li>三大队</li>
        <li>怒潮</li>
    </ol>

    <!-- 无序列表的默认样式为小黑点,嵌套无序列表为小白点 快捷键:ul>li*n  n为数字  ul>li*3 -->
    <ul>
        <li>吕智</li>
        <li>霁风</li>
        <li>小明</li>
        <li>樊宇</li>
        <li>王临</li>
        <ul>
            <li>吴楠</li>
            <li>王祥鹏</li>
            <li>迷娘</li>
        </ul>
    </ul>

    <!-- dl,dt,dd  自定义列表,dl是容器标签 dt是标题标签 dd是内容标签 快捷键:dl>dt+dd*n -->
    <dl id="computer">
        <dt>笔记本电脑</dt>
        <dd>游戏本</dd>
        <dd>办公本</dd>
        <dd>三防本</dd>
        <dd>全能本</dd>
    </dl>
</body>
</html>

由于部分图片资源在本地，可能无法显示。

文章来源:https://blog.csdn.net/ffmlll/article/details/135266358
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。