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

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

off999 2024-10-19 07:12 18 浏览 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的世界(上)》


相关推荐

Python 数据分析——利用Pandas进行分组统计

话说天下大势,分久必合,合久必分。数据分析也是如此,我们经常要对数据进行分组与聚合,以对不同组的数据进行深入解读。本章将介绍如何利用Pandas中的GroupBy操作函数来完成数据的分组、聚合以及统计...

python数据分析:介绍pandas库的数据类型Series和DataFrame

安装pandaspipinstallpandas-ihttps://mirrors.aliyun.com/pypi/simple/使用pandas直接导入即可importpandasas...

使用DataFrame计算两列的总和和最大值_[python]

【如果对您有用,请关注并转发,谢谢~~】最近在处理气象类相关数据的空间计算,在做综合性计算的时候,DataFrame针对每列的统计求和、最大值等较为方便,对某行的两列或多列数据进行求和与最大值等的简便...

8-Python内置函数

Python提供了丰富的内置函数,这些函数可以直接使用而无需导入任何模块。以下是一些常用的内置函数及其示例:1-print()1-1-说明输出指定的信息到控制台。1-2-例子2-len()2-1-说...

Python中函数式编程函数: reduce()函数

Python中的reduce()函数是一个强大的工具,它通过连续地将指定的函数应用于序列(如列表)来对序列(如列表)执行累积操作。它是functools模块的一部分,这意味着您需要在使用它之...

万万没想到,除了香农计划,Python3.11竟还有这么多性能提升

众所周知,Python3.11版本带来了较大的性能提升,但是,它具体在哪些方面上得到了优化呢?除了著名的“香农计划”外,它还包含哪些与性能相关的优化呢?本文将带你一探究竟!作者:BeshrKay...

最全python3.11版12类75个内置函数大全

获取全部内置函数:importbuiltins#导入模块yc=[]#异常属性nc=[]#不可调用fn=[]#内置函数defll(ty=builtins):...

软件测试笔试题

测试工程师岗位,3-5年,10-14k1.我司有一款产品,类似TeamViewer,向日葵,mstsc,QQ远程控制产品,一个PC客户端产品,请设想一下测试要点。并写出2.写出常用的SQL语句8条,l...

备战各大互联网巨头公司招聘会,最全Python面试大全,共300题

前言众所周知,越是顶尖的互联网公司在面试这一part的要求就越高,需要你有很好的技术功底、项目经验、一份漂亮的简历,当然还有避免不了的笔试过关。对于Python的工程师来说,全面掌握好有关Python...

经典 SQL 数据库笔试题及答案整理

马上又是金三银四啦,有蛮多小伙伴在跳槽找工作,但对于年限稍短的软件测试工程师,难免会需要进行笔试,而在笔试中,基本都会碰到一道关于数据库的大题,今天这篇文章呢,就收录了下最近学员反馈上来的一些数据库笔...

用Python开发日常小软件,让生活与工作更高效!附实例代码

引言:Python如何让生活更轻松?在数字化时代,编程早已不是程序员的专属技能。Python凭借其简洁易学的特点,成为普通人提升效率、解决日常问题的得力工具。无论是自动化重复任务、处理数据,还是开发个...

太牛了!102个Python实战项目被我扒到了!建议收藏!

挖到宝了!整整102个Python实战项目合集,从基础语法到高阶应用全覆盖,附完整源码+数据集,手把手带你从代码小白变身实战大神!这波羊毛不薅真的亏到哭!超全项目库,学练一站式搞定这份资...

Python中的并发编程

1.Python对并发编程的支持多线程:threading,利用CPU和IO可以同时执行的原理,让CPU不会干巴巴等待IO完成。多进程:multiprocessing,利用多核CPU...

Python 也有内存泄漏?

1.背景前段时间接手了一个边缘视觉识别的项目,大功能已经开发的差不多了,主要是需要是优化一些性能问题。其中比较突出的内存泄漏的问题,而且不止一处,有些比较有代表性,可以总结一下。为了更好地可视化内存...

python爬虫之多线程threading、多进程、协程aiohttp批量下载图片

一、单线程常规下载常规单线程执行脚本爬取壁纸图片,只爬取一页的图片。importdatetimeimportreimportrequestsfrombs4importBeautifu...

取消回复欢迎 发表评论: