百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

Python Web全栈之旅02--Web前端●走入HTML的世界(中)

off999 2024-10-19 07:12 37 浏览 0 评论


一、a元素

HTML <a> 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

1、 a链接分类:

普通链接

①举个栗子:

<a href = "https://www.toutiao.com"></a>

锚点

简单说:锚点用于页面内部定位

①举个栗子:

Python大星正刷微博,现在Python大星想回到最顶层,该怎么做呢?

当你选择B选项时,其实你正在使用HTML锚点

②一般是这样使用的:

功能链接

①举个栗子:

手机浏览某些网站,点击“客服电话”的图标,会触发电话功能。

②示例:


二、路径(地址)的写法

1、路径资源出处

站内资源

站外资源

这两者的区别,举个栗子:

Python大星在腾讯视频APP搜索《海贼王》时,页面提示“正在为您跳转第三方网站”。

《海贼王》的视频资源就是第站外资源。当Python大星搜索《哪吒之魔童降世》时,没有提示,直接播放,说明《哪吒之魔童降世》是站内资源。

2、地址分类

绝对路径

一般引用站外资源时使用

书写格式:

协议名://主机名:端口号/路径

schema://host:port/path

协议名:常用的有http,https,比如头条号主页用的https

主机名:域名或者ip地址,比如说头条的域名是mp.toutiao.com,或者百度39.156.66.14

端口号:一般网站不写也能访问。作为开发者,经常会接触8080端口

路径:相当资源文件目录

注意:

当跳转目标和当前页面的协议相同时,可以省略协议名

相对路径

一般引用站内资源时使用

① 当前资源所在的目录可以使用./

注意:当表示当前资源所在路径,./可以隐藏。

②可以书写../表示返回上一级目录


三、图片元素img

1、img基本用法

img 是imge的缩写,是空元素(查看上一篇解释)

有2个常用的属性:

src :source的缩写,表示图片资源路径

alt:当图片资源失效时,将使用该属性的文字替代图片


2、img元素与a元素的使用

<a href="/" class="logo">
<img src="//s3.pstatp.com/toutiao/static/img/logo.271e845.png" alt="今日头条" style="width: 108px; height: 27px;">
</a>

3、img元素与map元素的组合

举个栗子:

Python大星参加砸金蛋活动,点击其中一个金蛋,就会破碎弹出相应的奖品。

这就可以用到img和map的组合。

<area shape="circle" coords="180,139,14" href ="/example/html/venus.html" alt="Venus" />

解释:circle代表圆形区域,圆心x=180,y=139,半径r=14个像素


四、多媒体元素

1、多媒体元素分类

video 视频

controls: 控制控件的显示,取值只能为controls

某些属性,只有两种状态:1. 不写 2. 取值为属性名,这种属性叫做布尔属性

布尔属性,在HTML5中,可以不用书写属性值

autoplay: 布尔属性,自动播放。

muted: 布尔属性,静音播放。

loop: 布尔属性,循环播放


audio 音频

和视频完全一致

兼容性:

① 旧版本的浏览器不支持这两个元素

② 不同的浏览器支持的音视频格式可能不一致

mp4、webm

五、上一篇

>>>《Python Web全栈之旅01--Web前端●走入HTML的世界(上)》


相关推荐

大文件传不动?WinRAR/7-Zip 入门到高手,这 5 个技巧让你效率翻倍

“这200张照片怎么传给女儿?微信发不了,邮箱附件又超限……”62岁的张阿姨对着电脑犯愁时,儿子只用了3分钟就把照片压缩成一个文件,还教她:“以后用压缩软件,比打包行李还方便!”职场人更懂这...

电脑解压缩软件推荐——7-Zip:免费、高效、简洁的文件管理神器

在日常工作中,我们经常需要处理压缩文件。无论是下载软件包、接收文件,还是存储大量数据,压缩和解压缩文件都成为了我们日常操作的一部分。而说到压缩解压软件,7-Zip绝对是一个不可忽视的名字。今天,我就来...

设置了加密密码zip文件要如何打开?这几个方法可以试试~

Zip是一种常见的压缩格式文件,文件还可以设置密码保护。那设置了密码的Zip文件要如何打开呢?不清楚的小伙伴一起来看看吧。当我们知道密码想要打开带密码的Zip文件,我们需要用到适用于Zip格式的解压缩...

大文件想要传输成功,怎么把ZIP文件分卷压缩

不知道各位小伙伴有没有这样的烦恼,发送很大很大的压缩包会受到限制,为此,想要在压缩过程中将文件拆分为几个压缩包并且同时为所有压缩包设置加密应该如何设置?方法一:使用7-Zip免费且强大的文件管理工具7...

高效处理 RAR 分卷压缩包:合并解压操作全攻略

在文件传输和存储过程中,当遇到大文件时,我们常常会使用分卷压缩的方式将其拆分成多个较小的压缩包,方便存储和传输。RAR作为一种常见的压缩格式,分卷压缩包的使用频率也很高。但很多人在拿到RAR分卷...

2个方法教你如何删除ZIP压缩包密码

zip压缩包设置了加密密码,每次解压文件都需要输入密码才能够顺利解压出文件,当压缩包文件不再需要加密的时候,大家肯定想删除压缩包密码,或是忘记了压缩包密码,想要通过删除操作将压缩包密码删除,就能够顺利...

速转!漏洞预警丨压缩软件Winrar目录穿越漏洞

WinRAR是一款功能强大的压缩包管理器,它是档案工具RAR在Windows环境下的图形界面。该软件可用于备份数据,缩减电子邮件附件的大小,解压缩从Internet上下载的RAR、ZIP及其它类...

文件解压方法和工具分享_文件解压工具下载

压缩文件减少文件大小,降低文件失效的概率,总得来说好处很多。所以很多文件我们下载下来都是压缩软件,很多小伙伴不知道怎么解压,或者不知道什么工具更好,所以今天做了文件解压方法和工具的分享给大家。一、解压...

[python]《Python编程快速上手:让繁琐工作自动化》学习笔记3

1.组织文件笔记(第9章)(代码下载)1.1文件与文件路径通过importshutil调用shutil模块操作目录,shutil模块能够在Python程序中实现文件复制、移动、改名和删除;同时...

Python内置tarfile模块:读写 tar 归档文件详解

一、学习目标1.1学习目标掌握Python内置模块tarfile的核心功能,包括:理解tar归档文件的原理与常见压缩格式(gzip/bz2/lzma)掌握tar文件的读写操作(创建、解压、查看、过滤...

使用python展开tar包_python拓展

类Unix的系统,打包文件经常使用的就是tar包,结合zip工具,可以方便的打包并解压。在python的标准库里面有tarfile库,可以方便实现生成了展开tar包。使用这个库最大的好处,可能就在于不...

银狐钓鱼再升级:白文件脚本化实现GO语言后门持久驻留

近期,火绒威胁情报中心监测到一批相对更为活跃的“银狐”系列变种木马。火绒安全工程师第一时间获取样本并进行分析。分析发现,该样本通过阿里云存储桶下发恶意文件,采用AppDomainManager进行白利...

ZIP文件怎么打开?2个简单方法教你轻松搞定!

在日常工作和生活中,我们经常会遇到各种压缩文件,其中最常见的格式之一就是ZIP。ZIP文件通过压缩数据来减少文件大小,方便我们进行存储和传输。然而,对于初学者来说,如何打开ZIP文件可能会成为一个小小...

Ubuntu—解压多个zip压缩文件.zip .z01 .z02

方法将所有zip文件放在同一目录中:zip_file.z01,zip_file.z02,zip_file.z03,...,zip_file.zip。在Zip3.0版本及以上,使用下列命令:将所有zi...

如何使用7-Zip对文件进行加密压缩

7-Zip是一款开源的文件归档工具,支持多种压缩格式,并提供了对压缩文件进行加密的功能。使用7-Zip可以轻松创建和解压.7z、.zip等格式的压缩文件,并且可以通过设置密码来保护压缩包中的...

取消回复欢迎 发表评论: