图片与超链接标签

1）图片标签

img标签用来在网页中插入图片
img是image（图片）的缩写，src是source（来源）的缩写
引号中是图片的存储目录和完整的文件名
图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中
图片路径必须写正确
images/--表示images文件夹，.jpg后缀名要写！
图片本质上没有被插入到网页中，总是被引用到了网页中，
所以将来要将图片也一起上传到服务器上，将图片复制到项目文件夹中，即可整体上传
<img src="images/gugong.jpg">

img标签的alt属性：

    alt属性是alternate“替代品”的缩写，它是对图像文本的描述，不是强制性的
    如果由于某种原因无法加载图像，浏览器会在页面上显示案alt属性中的备用文本
    供视力不方便的朋友使用网页朗读器，也会朗读alt中的文本

img标签中的width，height属性：

    width，height属性分别设置宽度和高度，单位默认是像素，可以不写单位

网页上支持的图片格式：

    .bmp--Windows画图软件默认保存的格式，位图
    .gif--支持动画（比如表情包）
    .jpeg(.jpg)--有损压缩图片，用于照片
    .png--便携式网络图像。用于logo，背景图形等支持透明和半透明
    .svg--矢量图片
    .webp--最新的压缩算法非常优秀的图片格式

路径：

相对路径：描述从网页出发，如何让找到图片。随着网页·和图片的位置关系不同，插入图片的代码随之改变。如果需要回退层级，使用“../”这样的写法
绝对路径：描述图片精准地址。比官网也在哪里，绝对路径不需要改变。

2）超级链接

超级链接是将网页和网页连接到一起的方法，是互联网成”网“的原因。
使用a标签制作超级链接 <a href="2.html">去第二个网页</a>

a是anchor（锚）的首字母。 href：hypertext reference超文本引用 href属性支持相对路径和绝对路径

a标签的title属性：

title属性用来设置鼠标的悬停文本

在新窗口中打开网页：

将a标签的target属性设置为blank，即可在新标签页中打开网页
给图片设置超级链接：
图片也可以设置超级链接，只需要用a标签包裹img标签即可。

页面内锚点：其他页面的超级链接，也可以连接到指定锚点
下载链接：指向exe，zip，rar等文件格式的链接，将自动成为下载链接
**邮件链接、电话链接： **
有mailto：前缀的链接是邮件链接，系统将自动打开Email相关软件
<a href="mailto:me@test.com">给小编发邮件</a>
有tel：前缀的链接是电话链接，系统将自动打开拨号盘
<a href="tel：12306">打电话买火车票</a>

音频和视频

曾几何时，在网页中插入音频和视频需要借助Flash，flash技术已经快要被淘汰 HTML5可以轻松的在网页中插入音频和视频。

1）音频和视频

音频：

在浏览器中插入音频需要使用<audio></audio>标签，兼容到IE9
<audio controls src="音频地址"> 抱歉，您的浏览器不支持audio标签，请升级浏览器 </audio> controls：显示播放控件，标签对中是对不兼容audio标签的浏览器的显示文字
**常用音频格式：**MP3和ogg格式
autoplay属性：声明autoplay属性，音频会自动播放
loop属性：声明loops属性，将会循环播放音频
<audio controls src="音频地址" autoplay loop></audio>

视频：

在浏览器中插入视频需要使用<video></video>标签，兼容到IE9中
<video controls src="音频地址" loop autoplay> 抱歉，您的浏览器不支持video标签，请升级浏览器 </video>
常用视频格式：MP4，ogv，webm等格式

大纲与语义化标签

1）大纲标签

区块标签：div标签实现文档区块分隔曾几何时吗，div标签是文档区分隔唯一手段，为了区分每个div的功能，程序员会借助div标签的class属性

HTML5区块标签：

<section></section>--文档的区域，语义比div大
<article></article>--文档的核心文章内容，会被搜索引擎主要抓取
<aside></aside>--文档的非必要内相关容，比如广告等
<nav></nav>--导航条
<header></header>--页头
<main></main>--网页核心部分
<footer></footer>--页脚

(%X~NYYU)_B[T5AF(PQLP.png

2）语义化标签

<span></span>标签是文本中的”区块”标签，本身没有任何特殊的显示效果，可以结合css来丰富样式
<b></b>、<u></u>、<i></i>标签充满浓浓的“样式”意味，在网页中可以表示需要强调的文本
b：加粗、u：加下划线、i:倾斜

3-多媒体与语义化标签