HTML5学习2（初级）

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元素是一个单独的元素，和图片是分隔开的。

1. name元素
   相当于ID元素，用来标记和命名map地图。

name命名法有两种，一种是驼峰命名法：第一个单词的第一个字母小写，第二个单词的第一个字母大写，例solarMap；短横杠命名法：两个单词之间用-来连接，例solar-map。

在图片中使用地图的话，需要在img中加入usemap,和锚链接差不多，例

    <img usemap="#solarMap" src="./map.png">
    <map name="solarMap">

    </map>

2. 使用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属性中的内容

1. 圆形map地图的使用
   当使用的是圆形时，需要用到两个坐标，即圆形的圆心的坐标和半径的长度。
   坐标的测量方法：以图片的左上角为坐标系的原点，向右为x轴，向下为y轴，单位为像素。
   如下图
   
   代码如下
   
2. 矩形map地图的使用
   当需要点击的区域是矩形时，则需要确立两个坐标，一个矩形的走上角一个右下角。
   代码如下
   
3. 多边形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音频

1. 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属性：布尔顺序，表示的是循环播放。

2. audio音频元素的使用方法和video元素一致
3. 关于这两个元素的兼容性问题
   1.旧版本的浏览器不支持这两个元素
   2.不同的浏览器支持的音视频格式可能不一致
   3.为了保证兼容性，比如视频需要两种正常的格式，mp4和webm格式，这样浏览器会选择一个支持的格式播放。写法则是需要使用子元素source，如下

    <audio >
        <source src="1.mp4">
            <source src="1.webm">
    </audio>