Python Web全栈之旅02--Web前端●走入HTML的世界(中)
off999 2024-10-19 07:12 31 浏览 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的GUI可视化工具（python 可视化工具）
-
在Python基础语法学习完成后，进一步开发应用界面时，就需要涉及到GUI了，GUI全称是图形用户界面（GraphicalUserInterface，又称图形用户接口），采用图形方式显示的计算机操...
- 教你用Python绘制谷歌浏览器的3种图标
-
前两天在浏览matplotlib官方网站时，笔者无意中看到一个挺有意思的图片，就是用matplotlib制作的火狐浏览器的logo，也就是下面这个东东（网页地址是https://matplotlib....
- 小白学Python笔记:第二章 Python安装
-
Windows操作系统的python安装：Python提供Windows、Linux/UNIX、macOS及其他操作系统的安装包版本，结合自己的使用情况，此处仅记录windows操作系统的python...
- Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字
-
Python程序开发之简单小程序实例（9）利用Canvas绘制图形和文字一、项目功能利用Tkinter组件中的Canvas绘制图形和文字。二、项目分析要在窗体中绘制图形和文字，需先导入Tkinter组...
- 一文吃透Python虚拟环境（python虚拟环境安装和配置）
-
摘要在Python开发中，虚拟环境是一种重要的工具，用于隔离不同项目的依赖关系和环境配置。本文将基于windows平台介绍四种常用的Python虚拟环境创建工具：venv、virtualenv、pip...
- 小白也可以玩的Python爬虫库，收藏一下
-
最近，微软开源了一个项目叫「playwright-python」，作为一个兴起项目，出现后受到了大家热烈的欢迎，那它到底是什么样的存在呢？今天为你介绍一下这个传说中的小白神器。Playwright是...
- python环境安装+配置教程（python安装后怎么配置环境变量）
-
安装python双击以下软件：弹出一下窗口需选择一些特定的选项默认选项不需要更改，点击next勾选以上选项，点击install进度条安装完毕即可。到以下界面，证明安装成功。接下来安装库文件返回电脑桌面...
- colorama，一个超好用的 Python 库!
-
大家好，今天为大家分享一个超好用的Python库-colorama。Github地址：https://github.com/tartley/coloramaPythoncolorama库是一...
- python制作仪表盘图（python绘制仪表盘）
-
今天教大家用pyecharts画仪表盘仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针...
- 总结90条写Python程序的建议（python写作）
-
1.首先 建议1、理解Pythonic概念—-详见Python中的《Python之禅》 建议2、编写Pythonic代码 （1）避免不规范代码，比如只用大小写区分变量、使用容易...
- [oeasy]python0137_相加运算_python之禅_import_this_显式转化
-
变量类型相加运算回忆上次内容上次讲了是从键盘输入变量input函数可以有提示字符串需要有具体的变量接收输入的字符串输入单个变量没有问题但是输入两个变量之后一相加就非常离谱添加图片注释，不超过1...
- Python入门学习记录之一:变量（python中变量的规则）
-
写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...
- 掌握Python的"魔法":特殊方法与属性完全指南
-
在Python的世界里，以双下划线开头和结尾的"魔法成员"（如__init__、__str__）是面向对象编程的核心。它们赋予开发者定制类行为的超能力，让自定义对象像内置类型一样优雅工...
- 11个Python技巧 不Pythonic 实用大于纯粹
-
虽然Python有一套强大的设计哲学（体现在“Python之禅”中），但总有一些情况需要我们“打破规则”来解决特定问题。这触及了Python哲学中一个非常核心的理念：“实用主义胜于纯粹主义”...
- Python 从入门到精通 第三课 诗意的Python之禅
-
导言：Python之禅，英文名是TheZenOfPython。最早由TimPeters在Python邮件列表中发表，它包含了影响Python编程语言设计的20条软件编写原则。它作为复活节彩蛋...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python字典遍历 (54)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (60)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)