一、a元素

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

1、 a链接分类：

● 普通链接

①举个栗子：

<a href = ""></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的世界（上）》