python标签进阶与标签属性

创建项目文件夹

在正式写项目的时候,需要有三个文件夹
img–>把图片放在里面
css–>把css代码放在里面
js–>把javaScript代码放在里面
网站是由很多的网页组成
网站的主页一般命名为 index.html

高内聚低耦合
高内聚–做事情专一 一个模块专心做好一件事情 本分工作
低耦合–程序 功能之间的链接尽量要少 避免一个错步步错

绝对路径与相对路径

绝对路径: 从盘符出发完整的具体位置
相对路径: 简单位置 有一个参考的坐标

标签属性

标签是由我们标签名 标签属性 文本内容 三部分组成
标签属性就是对标签进行一种描述的方式(颜色,大小,描述)
<标签名 属性1 = ‘值1’ 属性2 = ‘值2’>内容</标签>
<小明 性别 = ‘男’ 爱好 = ‘打游戏’>小明特别喜欢打游戏</小明>

注:
1.标签属性写在开始标签内部
2.标签上可以同时存放多个属性
3.属性之间以空格分开
4.属性之间没有顺序之分

通用属性

1.id:用来给标签取一个唯一的名字(重复的话 就是先来的为准)
2.style:用来设置该标签的行内样式(配合css样式)
3.title:鼠标放在上时,所显示的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p style="color:brown;">小明在睡觉</p>
    <p title="这是小明">小明在睡觉</p>
</body>
</html>

图片标签

在当前网页中插入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p style="color:brown;">小明在睡觉</p>
    <p title="这是小明">小明在睡觉</p>
    <img src="图片路径" alt="图片描述" width="宽度" height="高度" title="图片标题">
</body>
</html>


img是image图片的缩写
src是source的缩写 src='图片路径'
width="宽度" height="高度"  可以不用px单位
alt=图片描述
当图片丢失 显示文字 视力不方便就可以知道指定的图片显示的是什么
title=当鼠标放上去显示的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="./1.jpg" alt=""><!-- 从当前文件夹进行上传使用 -->
    <img src="1.jpg" alt=""><!-- 如果在当前文件夹可以直接输入图片名称 -->
    <img src="./img/1.jpg" alt=""><!-- 使用img中的图片需要输入相对路径 -->
    <img src="E:\项目文件夹\img\1.jpg" alt=""><!-- 使用绝对路径 -->
    <img src="https://pic.sogou.com/d?query=%E5%A5%B3%E7%94%9F%20%E5%A4%B4%E5%83%8F&forbidqc=&entityid=&preQuery=&rawQuery=&queryList=&st=191&did=14" alt=""><!-- 必须有网才可以用网络图片 -->
     <img src="1.jpg" alt="剪刀手" width="300" title="剪刀手自拍">
</body>
</html>

绝对路径一般不常用 换了环境就没有了 一般都是使用相对路径

直接选中文件 右键选择复制图片路径

注意:
1.图片必须是要项目文件夹中(好管理)
2.Image Preview查看插入图片的缩片图
3.如果只设置宽或者高中的一个 另一个没设置会自动等比例缩放
4.一般情况下直接有一个src就可以了 最好alt
5.更推荐相对路径

超链接标签

超链接类似于机器猫的传送门 可以通过a标签指定停留的位置

a标签 超级链接标签 当移动到链接区域鼠标会成小手

href=‘链接的路径’

target 表示以什么方式打开网页

_blank 新窗口 原窗口不变

_self 默认 覆盖原窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="1.jpg" target="_blank">跳转下一界面>></a>
    <a href="1.jpg" target="_self" title="点击跳转">欢迎看美女图片</a>
</body>
</html>

锚点

页面中添加锚点功能跳转到页面特定的位置

​1.给元素设置id名

​2.使用a标签设置href属性名为#id名字 点击a标签就可以跳转到所需要的位置

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="1.jpg" target="_blank">跳转下一界面>></a>
    <a href="1.jpg" target="_self" title="点击跳转">欢迎看美女图片</a>

    <a href="https://pic.sogou.com/pics?query=%E5%A5%B3%E7%94%9F%20%E5%A4%B4%E5%83%8F&st=191&ie=utf8">即将跳转</a>
    <a href="图片标签.html">点击跳转</a>
    href="#three" target="_blank">在该页面跳转</a>
    <p><strong>妖精的尾巴</strong><em>日本动漫</em></p>
    <h2 id="one">第一集</h2>
    <p>在一个名叫菲欧雷的魔法王国里,存在著许多专门替魔导士中介任务的魔导士公会,
        其中最有名的公会就是“妖精的尾巴”,这里聚集了许多厉害的魔导士。
        少女露西一直希望能加入云集众多厉害魔导士的名为“妖精尾巴”的公会,
        在纳兹的引导下,露西终于得偿所愿,随后,露西跟纳兹、格雷、艾露莎和哈比组成最强队伍,
        他们的旅程就此展开。故事叙述在一个充满魔法的世界——“阿斯兰特
        (EARTH LAND)”中,位于菲奥雷王国的一个众多厉害魔导士云集
        的魔导士公会“FAIRY TAIL”。露西一直希望能加入,成为其中的成
        员。在纳兹的引导下,露西终于得尝所愿,并结识了许多厉害的魔导
        士。随后,露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”,在
        这个全世界最吵闹、最暴力,但也是最快乐的公会里,创造出数不清
        的传说的,借着各种委托人的任务而不断变强,伙伴也一个一个加
        入,故事就这样渐渐揭开。</p>
    <h2 id="two">第二集</h2>
    <p>故事叙述在一个充满魔法的世界——“阿斯兰特(EARTH LAND)”中,位于菲奥雷王国的一
        个众多厉害魔导士云集的魔导士公会“FAIRY TAIL”。露西一直希望能加入
        ,成为其中的成员。在纳兹的引导下,露西终于得尝所愿,并结识了许多
        厉害的魔导士。随后,露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”
        ,在这个全世界最吵闹、最暴力,但也是最快乐的公会里,创造出数不清
        的传说的,借着各种委托人的任务而不断变强,伙伴也一个一个加入,故
        事就这样渐渐揭开。故事叙述在一个充满魔法的世界——“阿斯兰特
        (EARTH LAND)”中,位于菲奥雷王国的一个众多厉害魔导士云集的
        魔导士公会“FAIRY TAIL”。露西一直希望能加入,成为其中的成员。
        在纳兹的引导下,露西终于得尝所愿,并结识了许多厉害的魔导士。
        随后,露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”,
        在这个全世界最吵闹、最暴力,但也是最快乐的公会里,
        创造出数不清的传说的,借着各种委托人的任务而不断变强,
        伙伴也一个一个加入,故事就这样渐渐揭开。</p>
</body>
</html>

列表

无序列表

没有顺序的列表(购买清单)

展示无序的列表内容 ul li必须组合出现代表无序列表
li不能单独使用 只能放在ol和ul作为他们的子标签
规范上 子标签只能是li
li里可以放其他标签
列表嵌套(里面会是白的小圆点)

type=“square” 方块
type=“disc” 实心圆点
type=“circle” 空心圆点
type=“none” 不显示符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul type="disc">王者荣耀
        <li>亚瑟
            <p>亚瑟是战士</p>
        </li>
        <li>海月
            <p>海月是法师</p>
        </li>
        <li>蔡文姬
            <p>蔡文姬是辅助</p>
        </li>
    </ul>


    <ul>
        <li>
            <h3>美食</h3>
            <ul>
                <li>烧烤</li>
            </ul>
        </li>
        <li>
            <h3>特产</h3>
        </li>
    </ul>
</body>
</html>

有序列表

通过type属性 设置编号类型
a 表示小写英文字母编号 多出来的是aa ab
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号 (默认)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1">成绩排名
        <li>小明</li>
        <li>小红</li>
        <li>小刚</li>
        <li>小李</li>
        <li>小胖</li>
     
     
     <ol reversed>成绩排名
        <li>小明</li>
        <li>小红</li>
        <li>小刚</li>
        <li>小李</li>
        <li>小胖</li>
</body>
</html>

自定义列表

单纯写个p标签是不能表现他们的关系

结合dl标签去使用dd,dt标签 dd,dt标签同级 不能相互嵌套

dd内容是用来描述dt的 dd可以有多个

dl的子标签只能是dt dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 快捷方法:dl>dt>dd*7就是以下代码行 -->
    <dl>动植物展示
        <dt>动物
            <dd>老虎</dd>
            <dd>狮子</dd>
            <dd>大象</dd>
        </dt>
        <dt>植物
            <dd>松树</dd>
            <dd>杨树</dd>
            <dd>枯藤</dd>
            <dd>槐树</dd>
        </dt>
    </dl>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/19168.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Lombok工具 : 常用注解介绍 (全)

文章目录 介绍引入Maven依赖常用的注解 NoArgsConstructor/AllArgsConstructorRequiredArgsConstructorGetter/SetterToString/EqualsAndHashCodeDataBuilderAccessors 其他注解 SneakyThrowsValueCleanupNotNullSynchronizedLog、Log4j、Slf4j、Log4j2、CommonsLog、XSlf4j等…

Type-C显示器是什么,Type-C显示器的5大优势

在显示器领域内&#xff0c;USB Type-C接口还处于发展阶段&#xff0c;目前已经在新推出的一些高端显示器和旗舰显示器中有配置。USB Type-C接口的出现&#xff0c;将会形成以显示器为核心的桌面解决方案&#xff0c;用户可以把任何笔记本、手机、平板等等的画面转移到一台大屏…

docker php安装redis扩展

有这么一个情况&#xff0c;我在docker中&#xff0c;安装了镜像&#xff0c;也启动了容器&#xff0c;容器有&#xff1a;nginx、mysql、redis、php 是一个基本的开发环境 容器启动成功&#xff0c;我们先连接一下&#xff0c;看看是否正常。 先保证这些都ok&#xff0c;我们…

数据可视化工具 - ECharts以及柱状图的编写

1 快速上手 引入echarts 插件文件到html页面中 <head><meta charset"utf-8"/><title>ECharts</title><!-- step1 引入刚刚下载的 ECharts 文件 --><script src"./echarts.js"></script> </head>准备一个…

一顿饭的事儿,搞懂了Linux5种IO模型

大家好&#xff0c;我是老三&#xff0c;人生有三大难题&#xff0c;事业、爱情&#xff0c;和 ——这顿吃什么&#xff01; 人在家中躺&#xff0c;肚子饿得响&#xff0c;又到了不得不吃的时候&#xff0c;这顿饭该怎么吃&#xff1f;吃什么呢&#xff1f; Linux里有五种I…

chatgpt搜索脚本

安装地址 https://greasyfork.org/zh-CN/scripts/459997 注意事项 &#xff01;&#xff01;注意&#xff1a;如果你在360相关浏览器上使用插件。360搜索将不会生效&#xff0c;因为已被浏览器禁用在so.com网址上使用。 &#xff01;&#xff01;尽量选择tampermonkey脚本管…

Datax的使用说明及入门操作案例演示

1.DataX DataX 是阿里云 DataWorks数据集成 的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, dat…

第四十九章 Unity UI适配器组件

首先&#xff0c;我们介绍内容大小适配器 (Content Size Fitter)组件。 我们新建一个“SampleScene6.unity”场景&#xff0c;然后添加一个Text UI元素&#xff0c;让其居中显示&#xff0c;并且尺寸设置为50*30。 由于我们设置Text的尺寸在水平方向上面太小&#xff0c;也就是…

计算机毕业论文内容参考|基于神经网络的网络安全态势感知技术研究

文章目录 导文文章重点摘要前言绪论课题背景国内外现状与趋势课题内容相关技术与方法介绍技术分析技术设计技术实现总结与展望导文 基于神经网络的网络安全态势感知技术研究 文章重点 摘要 随着互联网的快速发展,网络攻击的频率和复杂度也在逐年增加。为了更好地保护信息系统…

【Python】【进阶篇】27、Django url标签详解

目录 27、Django url标签详解1. url标签基本使用2. 给定参数的动态url 27、Django url标签详解 在 Django 的模板语言中除了我们前面章节介绍过的 if 标签和 for 标签之外&#xff0c;还有许多我们时常用到标签&#xff0c;比如 url 标签。 1. url标签基本使用 Django 的模板…

4.6k Star,SpringBoot+Vue+App+硬件实现的智能家居系统,一套带走

今天&#xff0c;推荐一个智能家居系统项目。这是我目前见过的最好的智能家居系统项目&#xff0c;功能完整&#xff0c;代码结构清晰。值得推荐。 4.6k Star&#xff0c;SpringBootVueApp硬件实现的智能家居系统&#xff0c;一套带走 简介 FastBee是一个简单易用的物联网平…

【设计模式】责任链模式的介绍及其应用

责任链的介绍 责任链模式是一种对象的行为模式。在责任链模式里&#xff0c;很多对象由每一个对象对其下家的引用而连接起来形成一条链。请求在这个链上传递&#xff0c;直到链上的某一个对象决定处理此请求。发出这个请求的客户端并不知道链上的哪一个对象最终处理这个请求&a…

谷歌浏览器 | Chrome DevTools系统学习篇-Device Mode

大家好&#xff0c;文接上回谷歌浏览器 | Chrome DevTools系统学习篇-概述。所谓“工欲善其事&#xff0c;必先利其器”&#xff0c;我们进一步来熟悉谷歌开发者工具。今天分享的是Device Mode&#xff0c;使用设备模式来估算您的页面在移动设备上的外观和性能。 设备模式是 Ch…

QT多线程基础

文章目录 前言一、多线程概念介绍二、创建一个线程三、start和terminate函数四、如何不使用terminate函数终止线程总结 前言 本篇文章来讲解一下QT中的多线程使用方法。 其实线程这个概念对于我们来说并不陌生&#xff0c;main函数在多线程中一般就被称为主线程。 在QT中&am…

如何在IVD行业运用IPD?

IVD&#xff08;体外诊断&#xff0c;In Vitro Diagnostic&#xff09;是指对人体样本&#xff08;血液、体液、组织&#xff09;进行定性或定量的检测&#xff0c;进而判断疾病或机体功能的诊断方法。IVD目前已经成为疾病预防、诊断治疗必不可少的医学手段&#xff0c;约80%左…

这才是 玩转Github 的正确姿势

这才是 玩转Github 的正确姿势 GitHub各位应该都很熟悉了&#xff0c;全球最大的开源社区&#xff0c;也是全球最大的同性交友网站~~&#xff0c;但是大部分同学使用GitHub应该就是通过别人的开源链接&#xff0c;点进去下载对应的项目&#xff0c;而真正使用Github来查找开源…

camunda的Java委托如何使用

一、camunda的Java委托有什么用途 在Camunda中&#xff0c;Java委托是一种用于在流程执行期间执行自定义逻辑的Java类。使用Java委托&#xff0c;您可以在流程执行期间通过Java代码实现各种复杂的业务逻辑。 以下是一些使用Java委托的常见用途&#xff1a; 1、计算值&#x…

有什么好用的云渲染?

在CG制作流程中&#xff0c;离线渲染一直是必要且耗时的环节。你的场景越复杂&#xff0c;渲染出现问题的可能性就越大&#xff0c;尤其是当你独自工作&#xff0c;没有人给你建议的时候&#xff0c;灯光、模型、场景任何一个环节渲染时出现问题都可能让你焦头烂额&#xff0c;…

基于Kubernetes集群构建大中型企业CICD应用平台(2)--code阶段工具gitlab安装

这里我们为gitlab服务器准备一台虚拟机&#xff1a;192.168.19.6-gitlab服务器 在code阶段&#xff0c;我们需要将不同版本的代码存储到一个仓库中&#xff0c;常见的版本控制工具就是SVN或者Git&#xff0c;这里我们采用Git作为版本控制工具&#xff0c;GitLab作为远程仓库。…

5 创建映射

5 映射 上边章节安装了ik分词器&#xff0c;如果在索引和搜索时去使用ik分词器呢&#xff1f;如何指定其它类型的field&#xff0c;比如日期类型、数 值类型等。 本章节学习各种映射类型及映射维护方法。 5.1 映射维护方法 1、查询所有索引的映射&#xff1a; GET&#xf…
最新文章