HTML元素（一）

HTML元素（一）

本文用作个人记录笔记，有想学习的同学可以互相探讨

a元素

表示超链接，表示跳转到其他页面的操作都可以使用超链接。

属性

href（hyper reference）——表示引用（跳转地址）

1. 跳转地址

<a href="http://www.baidu.com/">跳转到百度页面</a>

2. 跳转到某个锚点

   id：表示一个全局属性

<a href="#code1">第一个位置</a>
<p id="code1">
    跳转到的位置
</p>

【注】：

在同一个页面跳转，不会刷新页面

不在同一个页面跳转，会刷新页面

3. 功能链接

   点击后，触发某个功能——执行JS代码

<a href="javascript:alert('你好')">
	弹出“你好”
</a>

​ 发送邮件:电脑中需要有发送邮件的软件，比如：exchange

<a href="mailto:reman1998@163.com">
	点击发送邮件
</a>

​ 拨打电话:非移动端需要拨打电话软件

<a href="tel:18389882512">
        点我拨打电话
</a>

target属性——控制打开方式

1. _blank:

   在新窗口打开。

2. _self:

   在当前窗口打开（默认）。
   

路径的写法（独立知识点）

首先说明一下资源的概念，根据资源的区别主要分为两种：站内资源、站外资源

1. 站内资源

   当前网站的资源

2. 站外资源

   非当前网站的资源

接下来说明路径的区别

一般来说，站外资源使用绝对路径。而站内资源一般使用相对路径。——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属性

同上

兼容性

1. 旧版本的浏览器不支持这两个元素
2. 不同浏览器支持的视频音频格式可能不一致
3. 不支持的视频格式可以通过source属性来兼容

<video>
	<source src=".mp4">
    <source src=".webm">
    <p>
        对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器——<a href="#">点击下载</a>
    </p>
</video>

在浏览器中，如果不支持第一个视频模式，则会读取第二个视频，如果都不支持则会选择代码中写好的p元素

总结

在本文中，主要讲解了HTML中的一些主要元素的使用以及相关细节。其中包括a元素、img元素、map元素、figure元素及figcapcion元素和video元素、audio元素。

大多数属性为全局属性，要注意一些局部属性的使用细节。