HTML&CSS-Day2

P1 a元素

1.超链接：引用，通常用于表示跳转地址。

(1)跳转地址（普通链接）

（2）跳转某个锚点（锚链接）

①利用快捷方式写出对应的章节

((h2>{章节$})+p>lorem)*6

②写出id属性：全局属性，表示元素在文档中的唯一编号。

((h2[id="chapter$"]>{章节$})+p>lorem1000)*6

a[href="#chapter$"]*6{章节$}

③回到顶部

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

④跳转到某个页面

<a href="a元素-锚链接.html#chapter3">
        锚链接的第三章
</a>

（3）功能链接：点击后触发某个功能

①执行JS代码，javaScript:

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

②发送邮件，mailto:

<a href="mailto:2077688932@qq.com">
        点击给我发送邮件
</a>

要求用户计算机上安装有邮件发送软件exchange

③拨号，tel:

 <a href="tel:19950631897">
        点击给我拨打电话
</a>

要求用户计算机上安装有拨号软件或使用移动端访问。

target属性：表示跳转窗口位置。

<a href="https.//douyu.com">
        斗鱼直播
</a>

target取值：

①_self 在当前页面窗口打开，默认值

<a href="https.//douyu.com" target="_self">

②_blank 在新窗口中打开

<a href="https.//douyu.com" target="_blank">
        斗鱼直播
</a>

title属性：全局属性。

<a href="https.//douyu.com" target="_blank"title="每个人的直播平台">
        斗鱼直播
</a>

P2 路径的写法

1.站内资源和站外资源

（1）站内资源：当前网站资源

（2）站外资源：非当前网站资源

2.绝对路径和相对路径

（1）站内资源：相对路径

（2）站外资源：绝对路径

3.绝对路径的书写格式：url地址

协议名：//主机号：端口号/路径

schema://host:port/path

其中协议名:http、https、file 主机名：域名、IP地址

端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号443；

（1）绝对路径：当跳转目标和当前页面的协议相同时，可以省略协议。

（2）相对路径：以./开头，./表示当前资源所在的目录。可以书写../返回上一级目录，相对路径中：./可以省略。

<a href="./a.html">
        day2 -> a.html
</a>

P3 图片元素

1.img元素：空元素

src属性：source

 <img src="1.png" >

alt属性：当图片资源失效时，将使用该属性的文字替代图片。

 <img src="1.png" alt="这是一张图片">

2.和a元素联用

<a  target="_blank"  href="https://www.baidu.com/">
        <img src="1.png" alt="这是一张图片">
</a>

3.和map元素

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：ps、pxcook

<a  target="_blank"  href="https://www.baidu.com/">
        <img usemap="#solarMap" src="1.png" alt="这是一张图片">
</a>
<map name="solarMap">
        <area shape="circle" coords="360,204,48" href="https://home.firefoxchina.cn/">
</map>

<map name="solarMap">
<area shape="circle" coords="360,204,48" href="https://home.firefoxchina.cn/">
<area shape="rect" coords="323,282,395,320" href="https://home.firefoxchina.cn/">
<area shape="poly" coords="601,371,645,312,678,338,645,392" href="https://home.firefoxchina.cn/">
</map>

4.和figure元素:指代、定义、通常用于把图片、图片标题、描述包裹起来。

子元素：figcaption

<figure>
    <a  target="_blank"  href="https://www.baidu.com/">
          <img usemap="#solarMap" src="1.png" alt="这是一张图片">
    </a>
    <figcaption>
          <h2>图片</h2>
    </figcaption>
    <p>
          这是一张图片。
    </p>
</figure>

P4 多媒体元素

1.video（视频）元素

<video src="./music0.mp3"></video>

controls:控制控件的显示，取值只能为controls

<video controls="controls" src="./music0.mp3" style="width:500px;"></video>

某些属性，只有两种状态：①不写；②取值为属性名，这种属性叫布尔属性；③布尔属性：在HTML5中，可以不用书写属性值。

autoplay：布尔属性，自动播放。

<video  controls autoplay muted src="./music0.mp4" style="width:500px;"></video>

muted：布尔属性，静音播放。

loop：布尔属性，循环播放。

 <video  controls autoplay muted loop src="./music0.mp4" style="width:500px;"></video>

2.audio（音频）元素

和视频完全一致。

<audio src="./music0.mp3" controls></audio>

3.兼容性

（1）旧版本浏览器不支持这两个元素。

（2）不同的浏览器支持的音视频格式可能不一致。

mp4、webm