HTML笔记2
图片元素
img元素
img元素是image的缩写,是一个空元素,该元素有两个属性
src属性:source,代表资源
alt属性:当图片资源失效时,将使用该属性的文字替代图片
<img src="./1.png" alt="该图片失效">
和a元素联用
当img元素和a元素联用的话,点击图片则跳转到相应的地址上
<a href="./index.html">
<img src="1.png" alt="该图片失效">
</a>
和map元素联用(非重点)
map:地图,相当于把整张图片当成一个地图,在地图中划分区域,然后点击该区域会跳转到指定的链接。map元素是一个单独的元素,和图片是分隔开的。
- name元素
相当于ID元素,用来标记和命名map地图。
name命名法有两种,一种是驼峰命名法:第一个单词的第一个字母小写,第二个单词的第一个字母大写,例solarMap;短横杠命名法:两个单词之间用-来连接,例solar-map。
在图片中使用地图的话,需要在img中加入usemap,和锚链接差不多,例
<img usemap="#solarMap" src="./map.png">
<map name="solarMap">
</map>
- 使用map的子元素:area,表示地区,区域的意思,是一个空元素
<img usemap="solarMap" src="./map.png" alt="this is image">
<map name="solarMap">
<area shape="" coords="" href="" alt="">
</map>
map元素的属性:
shape属性:形状元素,有圆形cricle、矩形renct、多边形。
coords属性:表示坐标
href属性:点击这个形状的链接地址
alt属性:当图片显示不出的时候,会显示alt属性中的内容
- 圆形map地图的使用
当使用的是圆形时,需要用到两个坐标,即圆形的圆心的坐标和半径的长度。
坐标的测量方法:以图片的左上角为坐标系的原点,向右为x轴,向下为y轴,单位为像素。
如下图
代码如下
- 矩形map地图的使用
当需要点击的区域是矩形时,则需要确立两个坐标,一个矩形的走上角一个右下角。
代码如下
- 多边形map地图的使用
当需要点击的区域是多边形时,则需要确定每个点的坐标。这里只举四边形的例子,代码如下
<img usemap="solarMap" src="./map.png">
<map name="solarMap">
<area shape="poly" coords="601,371,645,321,678,338,645,392" href="#">
</map>
衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:ps、pxcook
和figure元素联用
figure元素是指代、定义的意思。通常用于把图片标题和描述包裹起来,表示这整个区域都是和图片相关的信息。用法则是用figure元素将图片标题和描述包裹起来,是为了明确语义化。
figure元素的子元素:figcaption,表示指代的东西的标题,用法和figure元素一样。
多媒体元素
多媒体有两种:video视频 audio音频
- video元素的使用方法
<video src="资源地址"></video>
注:资源格式是有要求的,通常用mp4格式
controls:控制控件的显示,因为一般默认控件是不打开的。所以如果想要视频的控件开启则需要修改controls属性。取值只能是controls,例
<video controls="controls" src="../优酷视频/庆余年/庆余年.46集全/庆余年.Qing.Yu.Nian.2019.E28.WEB-DL.1080p.H264.AAC-PTHome.mp4"></video>
某些属性只有两种状态:1.不写 2.取值为属性名,这种属性叫做布尔属性。布尔属性在HTML5中可以不书写属性值。
autoplay属性:布尔属性,作用是自动播放。
muted属性:布尔属性,表示的是静音播放。
loop属性:布尔顺序,表示的是循环播放。
- audio音频元素的使用方法和video元素一致
- 关于这两个元素的兼容性问题
1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音视频格式可能不一致
3.为了保证兼容性,比如视频需要两种正常的格式,mp4和webm格式,这样浏览器会选择一个支持的格式播放。写法则是需要使用子元素source,如下
<audio >
<source src="1.mp4">
<source src="1.webm">
</audio>