整体介绍
图片与超链接标签 1)图片标签 2)超级链接 音频和视频 1)音频和视频 大纲与语义化标签 1)大纲标签 2)语义化标签 小慕医生项目开发 1)小慕医生项目开发
图片标签
<img>标签 <img>标签用来在网页中插入图片
一定注意，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中
图片的引用
图片只是被引用到网页中
<img>标签的alt属性
<img src=“images/,gugong.jpg”alt=“故宫角楼”>
- alt属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的
- 如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本
- 供视力不方便的朋友使用的网页朗读器，也会朗读lt中的文本
<img>标签的width、height属性
- width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位
- 如果省略其中一个属性，则表示按原始比例缩放图片
网页上支持的图片格式
相对路径与绝对路径
相对路径
<img src=“images/gugong.jpg”>
相对路径：描述从网页出发，如何找到图片。
- 随着网页和图片的位置关系不同，插入图片的代码随之改变
- 如果需要回退层级，使用“../”这样的写法
绝对路径
<img src=“https://www.imooc.com/static/img/index/logo-recommended.png”>
绝对路径：描述图片精准地址。
- 不管网页在哪里，绝对路径不需要改变。
超级链接
<a>标签
使用<a>标签制作超级链接
href属性
title属性
<a>标签的title属性用于设置鼠标的悬停文本
新窗口打开网页
将<a>标签的target属性设置为blank,即可在新标签页中打开网页
<a href=“2.html” target=“blank”>去第二个网页</a>
HTML4代，blank之前有一个下划线
<a href=“2.html” target=“_blank”>去第二个网页</a>
给图片设置超级链接
图片也可以设置超级链接，只需要用<a>标签包裹img标签 即可
<a href="2.html" target="blank">
<img src="images/goblin.png">
</a>页面内锚点
-
较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点’
<h1 id=“wuxi”>无锡美景</h1>
-
当网址后面添加#时，页面将自动滚动到锚点所在位置
-
其他页面的超级链接，可以链接到指定锚点
<a href=“lyou.html#wuxi”>看无锡美景</a>
-
top是html5自带特色，可以不用设置锚点id
<a href=“#top”>返回顶部</a>
下载、邮件、电话链接
-
指向exe、zip、rar等文件格式的链接，将自动成为下载链接
<a href=“1.zip”>下载</a>
-
有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件
`<a href=“mailto:[email protected]”>给小编发邮件</a>
-
有tel:前缀的链接是电话连接，系统将自动打开拨号盘
<a href=“tel:12306”>打电话买火车票</a>
音频和视频
曾几何时，在网页中插入音频和视频需要借助Flash,今天，Flash技术已经快要被淘汰，HTML5可以轻松在网页中插入音频和视频 在浏览器中插入音频需要使用<audio>标签，兼容到IE9 常用音频格式是MP3和ogg格式
音频标签
<audio controls src="音频地址">
抱歉，您的浏览器不支持audio标签，请升级浏览器
</audio>
autoplay属性
声明autoplay属性，音频会自动播放 常用的浏览器为了不打扰用户，可能会不允许自动播放音乐,必须让用户手动点击之后才能播放
loop属性
声明loop属性，将循环播放音频
视频标签
在浏览器中插入视频需要使用<video>标签，兼容到lE9 常用音频格式是mp4、ogv、webm等格式
<video controls src="视频地址" loop autoplay>
抱歉，您的浏览器不支持video标签，请升级浏览器
</video>
大纲标签
曾几何时div标签是文档区块分隔唯一手段，为了区分每个div的功能，程序员会借助div标签的class属性
<body>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="banner"></div>
<div class="content">
<div class="aside"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</body>
语义化标签
<span>标签是文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式
<p>
<span>北京</span>的区号是<span>01g</span>
</p>
<p>
<span>上海</span>的区号是<span>021</span>
</p><b>、<u>、<i>标签
<strong>、<em>、<mark>标签
strong:加粗文本 em:倾斜文本 mark:高亮文本 注意：html5只是默认，我们可以使用css改变样式，如html中mark高亮颜色为黄色，我们可以通过css改变高亮颜色
<figure>、<figcaption>标签
<figure>元素代表一段独立的内容，与说明<figcaption>配合使用，它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体