可替换元素
可替换元素的规则及使用
一、图片
想要在页面上展示图片使用img标签
img ( 空元素、自闭合元素) 没有元素内容和结束标记
<img src="../IMG/tounao.jpg" alt="帅" title="帅的一匹"
src:属性值是图片的地址
title:为属性时,鼠标移入图片,会展示title的属性值
alt: 当图片无法展示时,alt的属性值会显示到页面上(用户体验 当引用不同的重置文件时alt会不显示)
图片语义化:
figure是父元素
img是子元素
figcaption是子元素(代表的是图片说明)
<figure> <img src="./IMG/miqi.jpg" alt="我是米奇"> <!-- 图片说明 --> <figcaption> 我是米奇XXXXXXXX </figcaption> </figure>
一张图片上,点击不同区域时,跳转到不同页面
map父元素
area区域
step1:img与map相关联
img的usemap属性值与map的name或id相同
step2:添加area标签
进行区域的划分
shape属性的取值: 圆形 circle 矩形 rectangle多边形 poly
step3:设置coords坐标
当shape的值是circle:先给中心点坐标(XY轴),现在圆的半径
当shape的值是rectangle:
A方案: 一共设置4个值,前2个是左上角的坐标,后2个是右下角的坐标
B方案:一共设置4个值,前2个是右上的坐标,后2个是左下角的坐标
注:对角线即可实现距形区域
当shape的值是poly:每个连接点的XY轴
step4:添加不同区域的跳转地址,即设置href的属性值。
<img src="../Demo" alt="" usemap="#F68"> <map name="F68" id="F68"> <area shape="circle" coords="450,215,37" href="../HTML/列表.html"> <area shape="rectangle" coords="108,423,42,500"href="../HTML/语义化.html"> <area shape="poly" coords="666,433,694,424,725,436,728,476,697,499,665,473" href="../HTML/样式.html">
</map>
为了解决兼容性:
有一些浏览器usemap关联的是name的值,还有一些浏览器关联的是id的值
二、audio音频
audio音频
<audio src="../gotime.mp3" controls loop autoplay muted></audio>
属性 src=“音频的地址”
controls在页面上显示音频的播放控件
loop当前音频循环播放
atuoplay当前音频自动播放 (Google为了提升用户体验)
muted 当前音频为静音状态(为了实现自动播放,必须添加 muted ,否者自动播放无效)
三、video视频
<video src="./Video/herocute.mp4" controls autoplay muted></video>
属性 src=“视频的地址”
controls在页面上显示音频的播放控件
loop当前音频循环播放
atuoplay当前音频自动播放 (Google为了提升用户体验)
muted 当前音频为静音状态(为了实现自动播放,必须添加 muted ,否者自动播放无效)
注:当前的HTML及CSS代码只能实现基础的页面展示,进阶版和高阶版需等待JS(交互效果)来实现。