HTML元素(一)
本文用作个人记录笔记,有想学习的同学可以互相探讨
a元素
表示超链接,表示跳转到其他页面的操作都可以使用超链接。
属性
href(hyper reference)——表示引用(跳转地址)
- 跳转地址
<a href="http://www.baidu.com/">跳转到百度页面</a>
-
跳转到某个锚点
id:表示一个全局属性
<a href="#code1">第一个位置</a>
<p id="code1">
跳转到的位置
</p>
【注】:
在同一个页面跳转,不会刷新页面
不在同一个页面跳转,会刷新页面
-
功能链接
点击后,触发某个功能——执行JS代码
<a href="javascript:alert('你好')">
弹出“你好”
</a>
发送邮件:电脑中需要有发送邮件的软件,比如:exchange
<a href="mailto:reman1998@163.com">
点击发送邮件
</a>
拨打电话:非移动端需要拨打电话软件
<a href="tel:18389882512">
点我拨打电话
</a>
target属性——控制打开方式
-
_blank:
在新窗口打开。
-
_self:
在当前窗口打开(默认)。
路径的写法(独立知识点)
首先说明一下资源的概念,根据资源的区别主要分为两种:站内资源、站外资源
-
站内资源
当前网站的资源
-
站外资源
非当前网站的资源
接下来说明路径的区别
一般来说,站外资源使用绝对路径。而站内资源一般使用相对路径。——url地址
绝对路径
协议名://主机名:port/path
协议名:http(浏览器默认为http)、https、file(表示本地文件)
主机名:一般来说是域名或IP地址
port:端口号。如果协议是http,默认端口号为80;如果协议是https,默认端口号为443。
对于初学者来说可以按照通俗意思理解(理解含义就好,描述并不是很准确)
网站可以理解为为一个仓库
协议:表示去仓库所使用的交通工具(不是所有仓库都能通过任意一个交通工具就能到大,毕竟汽车不能依靠个体进行水运和空运)
主机名:表示仓库中的分区
端口号:该仓库分区中的具体货架
path:资源的具体位置
在将跳转的页面和当前页面的协议一致时,则协议可以省略——站外资源规则
综上所述,主机名、端口都可以根据情况省略
相对路径
./ 表示当前资源的所在目录(可以省略)
../ 表示返回上一级目录
图片元素
图片元素是一个空元素
<img src="" alt="">
属性
src(source)——表示资源的意思
src中书写的是资源的路径,同样可以分为绝对路径和相对路径,具体区别参考上文关于路径的说明
<img src = "https://img-blog.csdnimg.cn/20210717212237126.jpg">
alt——表示图片资源失效的时候,将使用该属性的文字进行替代
<img src = "https://img-blog.csdnimg.cn/20210717212237126.jpg" alt="当图片不能显示时,会显示这条文字">
一般来说,img元素经常与a元素配合使用,如果想要实现点击图片的不同位置访问不同的资源则需map元素配合使用
map元素——地图(区域)
表示将元素内的资源标记成地图,标记为地图的图片可以分区
<map name = "solarMap">
<area shape="" coords="" href="" alt="">
</map>
属性
shape——表示区域的形状(圆形,矩形,多边形)
<area shape="circle">
coords——关键点的坐标
图片坐标原点在图片的左上角,向右x增加,向下x增加
圆形一共需要三个参数:x,y,r(半径)
矩形一共需要四个参数:矩形左上角以及右下角
多边形一共需要多个参数,多边形每个顶点都需要提供坐标
href——点击形状的链接地址
表示该分区点击的链接资源地址
alt——显示的文字内容
表示该分区显示的文字
target——页面打开方式
和a元素的属性值一样
figure元素——包裹
通常用于将图片、文字说明等信息包裹起来,使得浏览器清楚包裹起来的数据是相关联的。
子元素——figcapcion
表示包裹起来的数据为一个标题。
多媒体元素
多媒体元素一般来说并不会经常用到,一般是播放音视频使用的元素
video元素——视频元素
<video src="视频链接"></video>
属性
src属性
和其他的src一样,都是标注资源的链接地址——一般使用站内资源,因为多数站外资源都是有版权的
controls属性
是否显示媒体控件——该属性为bool属性,只有两个状态,不写时默认false;写上该属性时则将属性值赋值为属性名
autoplay属性
表示自动播放,bool属性
muted属性
静音播放
loop
循环播放
audio元素——音频元素
<audio src="资源链接"></audio>
属性
src属性
同上
controls属性
同上
autoplay属性
同上
兼容性
- 旧版本的浏览器不支持这两个元素
- 不同浏览器支持的视频音频格式可能不一致
- 不支持的视频格式可以通过source属性来兼容
<video>
<source src=".mp4">
<source src=".webm">
<p>
对不起,你的浏览器不支持video元素,请点击这里下载最新版本的浏览器——<a href="#">点击下载</a>
</p>
</video>
在浏览器中,如果不支持第一个视频模式,则会读取第二个视频,如果都不支持则会选择代码中写好的p元素
总结
在本文中,主要讲解了HTML中的一些主要元素的使用以及相关细节。其中包括a元素、img元素、map元素、figure元素及figcapcion元素和video元素、audio元素。
大多数属性为全局属性,要注意一些局部属性的使用细节。