HTML语义化标签（二）_超链接标签是不是语义化标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_53912712/article/details/125382578

本文详细介绍了HTML中关于超链接的使用，包括其作用、语法、注意事项和相对路径。同时讲解了图片标签的运用，包括不同格式的图片、内联框架的使用。此外，还探讨了音频和视频的播放，如audio和video标签的属性及应用场景。

摘要由CSDN通过智能技术生成

HTML语义化标签（二）

一、超链接

作用

从一个页面跳转到另一个页面，或者是我们当前页面的其他的位置
跳转到当前页面的其他位置

语法

使用a标签来定义超链接

注意点：

a标签可以嵌套任何元素，除了自身外。
href指定跳转的目标路径
值可以是一个外部网站的地址（例如百度网站），也可以是内部页面的地址（同一个文件夹下的文件）

例如：

 <a href="https://www.baidu.com/">
     百度
     <ol>
      <a href="https://www.bilibili.com/?spm_id_from=333.788.0.0">AAA</a>
      <a href="https://www.zhihu.com/">BBB</a>
     </ol>
  </a>
  <a href="A.html">跳转到内部网址</a>

效果：
请添加图片描述

解释：点击百度，则会跳到百度的官网（图一），AAA嵌套在百度的a标签内，点击AAA则会跳到哔哩哔哩的官网（图二），同理点击BBB则会跳到知乎官网（图三），点击跳转到内部网址，则会跳转到同文件夹下的A.html网页中。（图四）

请添加图片描述
图一

图二

请添加图片描述

图三

请添加图片描述
图四

相对路径

当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或…开头

在内部跳转使用./
跳转到外部使用../(不在本服务器即本文件夹内)
如果不写./也不写../则相当于是./

例如：

请添加图片描述

解析：
第一行XDLJ在text同一个文件夹中，属于内部服务器，使用./（./可以省略），第二行中XDLJ2.html在text文件夹下的path文件夹中，与text.html属于同一个服务器，但是在不同文件夹中，第三个XDLJ3.html与text不在同一个文件夹中（即同一个服务器），需要使用../来进行外部跳转

超链接的其他用处

target属性：用来指定超链接的打开位置
可选值：
_self是默认值，在当前页面打开超链接
_blank，在一个新的页面中打开超链接
例如：

  <a href="XDLJ.html">跳转到内部网址</a>
  <a href="./path/XDLJ2.html" target="_blank">跳转到外部网址1</a>

效果：
请添加图片描述
点击跳转到外部网址1时会出现新的页面

可以直接将超链接的href属性设置为#，这样点击超链接之后页面不会发生跳转，而是跳转到当前页面的顶部

格式为

<a href="#">回到顶部</a>

id属性（唯一不重复的）

每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，页面中不能出现重复的id属性
id属性的值是区分大小写的，例如id=“a”与id=“A”是不同的
也可以跳转到页面的指定位置，只需要将href属性设置#目标元素的属性值

例如：

请添加图片描述

解析：点击“去底部”按钮则会跳转到页面的底部，href="#p"则会跳转到id="p"的第三个自然段。#后面所带的值就是页面可以回到id值所对应的页面位置

二、图片

图片标签用于向当前页面中引入一个外部图片
1.基本格式：

<img src="图片地址">

使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间）
src属性指定的是外部图片的路径（路径规则和超链接一样）
alt属性是对一个图片的描述，默认情况下不会显示，有些浏览器会无法加载时显示，如果不写alt属性则图片不会被搜索引擎寻找到，类似于关键字。
width属性：指定图片的宽度
height属性：指定图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放。

例如：

<img width="200" src="../example/2.jpg" >
     <img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0B/0A/Cg-4WVWoZsyIfTtsAASUsXZC4JYAAHSFAF_TKwABJTJ986.jpg" width="200" height="200">
     <img src="https://i02piccdn.sogoucdn.com/1ae576712ff0bff4" alt="特朗普"  width="200" height="200">

效果：

请添加图片描述

其中第一张图片为内部服务器图片，地址格式与超链接相同，第二张与第三张图片为外部地址

注意：一般情况在pc端，不建议修改图片的大小（可以在放上去之前修改好图片大小）

2.图片的格式

jpeg（jpg）

支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来表示图片

支持的颜色较少，支持简单透明，支持动图适合表示颜色单一的图片，动图

支持的颜色丰富，支持复杂透明，不支持动图适合复杂透明的图片（专为网页而生）

webp

谷歌新推出的专门用来表示网页中的图片的一种格式具备其他图片格式的所有优点，文件大小还小。缺点是兼容性不好。例如IE浏览器不能正常显示。

base64

将图片使用base64进行编码，这样可以直接将图片转换为字符，通过字符的形式来引入图片。

base64通过网上base64在线编译器直接搜索解码

例如：
请添加图片描述
3.内联框架
内联框架，用于向当前页面中引入一个其他页面
格式：

<iframe src=""  frameborder="0"></iframe>

其中src指定要引入的网页的路径

例如：

<h1>我是内联框架</h1>
<iframe src="https://daohang.qq.com/?fr=hmpage"  width="500" height="500" ></iframe>

效果;

请添加图片描述

效果相当于把另一个网页作为当前网页的一个部分。

三、音视频播放

1.音频播放
audio标签向页面中引入一个外部的音频文件。音视频文件引入时候，默认情况下不允许用户自己控制播放停止的

格式

<audio src="" controls autoplay></audio>

controls属性：是否允许用户控制播放，controls没有值
autoplay属性：音频文件是否自动播放。如果设置了autoplay，则音乐在打开页面时会自动播放，目前来讲，大部分浏览器都不会自动对音乐进行播放。
loop属性：音频循环播放

2.视频文件
video标签向网页中引入一个外部的视频文件

格式

<video src=""></video>

例如：

<audio src="../example/鸟鸣.m4a" controls loop>鸟鸣音频</audio>
<video src="../example/3.mp4" width="800" height="500" controls></video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=a0043q8zbrw" allowFullScreen="true"></iframe>