多媒体与语义化标签
HTML5区块标签
| 区块标签 | 说明 |
|---|---|
| <section> | 文档的内容,语义比div强大 |
| <article> | 文档的核心文章内容,会被搜索引擎主要抓取 |
| <aside> | 文档的非必要内容,如广告 |
| <nav> | 导航条 |
| <header> | 页头 |
| <main> | 网页核心内容 |
| <footer> | 页脚 |
图片标签
<img>标签用来在网页中插入图片.
一定注意，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中,后缀名一定要写.
图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传.
<img>标签的alt属性
alt 属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的
如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本
供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本
<img src="images/gugong.jpg" alt=" ">
<img>标签的width、height属性
width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位
如果省略其中一个属性，则表示按原始比例缩放图片
<img src="images/gugong.jpg" alt=" " width="300">
网页上支持的图片格式
| 格式 | 说明 |
|---|---|
| .bmp | windows画图软件默认保存的格式，位图 |
| .gif | 支持动画（比如表情包） |
| .jpeg(.jpg) | 有损压缩图片，用于照片 |
| .png | 便携式网络图像，用于logo、背景图形等，支持透明和半透明 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法非常优秀的图片格式 |
相对路径
相对路径：描述从网页出发，如何找到图片。比如“前面路口左转，直走100米后右转就到了
随着网页和图片的位置关系不同，插入图片的代码随之改变
如果需要回退层级，使用“../”这样的写法
<img src="images/gugong.jpg">
绝对路径
绝对路径：描述图片精准地址。比如“北京市海淀区西三环北路甲2号院中关村国防科技园2号楼”
不管网页在哪里，绝对路径不需要改变
<img src="https://www.imooc.com/static/img/ index/logo-recommended.png>
超级链接
<a>标签
使用<a>标签制作超级链接
href属性支持相对路径和绝对路径
<a href="web/2.html">去第二个网页</a> <a href="../web/2.html">去第二个网页</a> <a href="http://www.immoc.com">去慕课</a>
<a>标签的title属性用于设置鼠标的悬停文本
<a href="2.html" title="很好看哦~">去第二个网页</a>
将<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="lvyou.html#wuxi">看无锡美景</a>
下载链接
指向exe、zip、rar等文件格式的链接，将自动成为下载链接
<a href="1.zip">下载</a>
邮件链接、电话链接
有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件
<a href="mailto:me@test.com">给小编发邮件</a>
有tel:前缀的链接是电话连接，系统将自动打开拨号盘
<a href="tel:12306">打电话买火车票</a>
音频和视频
音频
在浏览器中插入音频需要使用<audio>标签，兼容到IE9
常用音频格式是mp3和ogg格式
autoplay属性
当定义了该属性时，音频会立即播放。 常用的浏览器为了不打扰用户，可能会不允许自动播放音乐，必须让用户手动点击之后才能播放
controls属性
该属性用于定义是否向用户展示播放按钮，如果未定义这个属性，则浏览器默认不显示任何播放器的控件（播放、音量、进度等）。控件可以通过 audio 提供的事件，通过 div+css+JavaScript 自定义实现。
loop属性
该属性定义时，表示音频是否会重复循环播放。
muted属性
当该属性被定义是，音频默认播放时是以静音方式播放。
preload属性
该属性定义音频加载的方式，有3个可选值（auto 自动加载 meta 只加载元数据 none 手动加载）。当设置了 autoplay 时，该属性不生效。
src属性
定义音频的 URL
视频
在浏览器中插入视频需要使用<video>标签，兼容到IE9
常用音频格式是mp4、ogv、webm等格式
语义化标签
<span>标签
<span>标签是文本中的"区块"标签,本身没有任何特殊的显示效果,可以结合css来丰富样式
<p> <span>北京</span>的区号是<span>010</span </p> <p> <span>上海</span>的区号是<span>021</span> </p>
<b><u><i>标签
<b><u><i>标签充满浓浓的样式意味,已经被css替代,但是在网页中也可以表示需要强调的文本
| 标签 | 说明 |
|---|---|
| <b> | 加粗 |
| <u> | 下划线 |
| <i> | 倾斜 |
<strong><em><mark>标签
| 标签 | 说明 |
|---|---|
| <strong > | 代表特别重要的文字 |
| <em> | 代表强调文字 |
| <mark> | 代表一段需要被高亮的文字 |
<figure>、 <figcaptIon> 标签
令<figure>元素代表一段独立的内容，与说明＜figcaption> 配合使用，它是一个独立的引用单元，比如建议读者拓展视 野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体
<figure> <img src="images/1.png" alt=""> <figcaption>图片1</figcaption> </figure>
课程总结
如何正确地在网页中插入图片，它有哪些常见属性？
如何使用a标签插入超级链接，它有哪些常见属性？
如何在网页上插入音频和视频？
常见大纲标签和语义化标签有哪些？
难点内容
相对路径和绝对路径是什么意思？
正确拼写、背诵每种标签和它们的属性，不要张冠李戴
正确理解每个标签的语义，要在合适的地方使用它们