【前端】HTML-2022/7/15

语义化标签（2）

上次已经介绍了<div>标签和<span>标签，它们都是用来布局的，并且用得频率也最多，几乎每一个网站都会有<div>的出现，但有一些使用频率没那么广的标签需要了解。

• header表示网页的头部
• main表示网页的主体部分（一个页面中基本上只会有一个main)
• footer表示网页的底部
• nav表示网页中的导航
• aside和注体相关的其他内容（侧边栏）
• article表示一个独立的文章
• section表示一个独立的区块，上边的标签都不能表示时使用section

在纯HTML中，它们和<div>、<span>一样，没有任何效果只是用来分组用的，是为了方便后期的CSS美化工作。

这就是语义化标签，在使用这些标签的时候，重点不是看它们的效果如何，而是注重它们的语义，在纯HTML中，使用这些标签和没使用并没有什么区别，只有在编写CSS的时候，它们才会体现出应有的效果。

然而使用最多的还是<div>，<div>可以代替以上所有的标签，但分类分得细一点还是有好处的。

• <div>是一个块级元素，就用来表示一个区块
• <span>是一个行内元素，没有任何的语义，就用来选中文字（<span>标签也经常出现在<div>标签中）

图片格式

每一个有意义的文件，都是有扩展名的，一个合法的文件名，都是由“文件名.扩展名”组成的，但同一类文件不可能只有一个扩展名，图片也是这样，常见的图片有以下几种：

• jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图。
• png：支持的颜色丰富，支持复杂的透明效果，支持动图（但动图一般不用png）
• gif：支持的颜色不丰富，支持简单的透明效果，支持动图（它也往往是动图的首选格式）
• webp：谷歌推出的专门用来作为网页图片的一种格式，它拥有以上三种格式几乎所有的优点，体积小（加载速度快），是一个堪称完美的图片格式，但兼容性是它的硬伤，在所有现代的常用浏览器中基本都支持（在线点名批评IE），但不建议用webp格式作为本地图片的存储（毕竟它的主要目的是网页图片）。

在编写HTML文档的时候，要如何选择图片？

效果一样，用体积最小的；效果不一样，用效果最好的。

大家都知道，<img>的src标签可以是外部的也可以是本地的，那要如何选择呢？

首先，我们在浏览器打开一个网页，网页的内容不是一下子全部加载出来的，最先加载出来的应该是网页的总体框架，然后才是其他资源。当我们打开一个网页时，浏览器会向服务器发送一个请求，获取这个网页的源代码，然后再向浏览器发送多个请求，去获取这个网页源代码引用的所有资源（包括图片），这个时候，如果你的图片是存在服务器本地的，那无非就是往同一个服务器获取资源而已，速度几乎没有任何差异，但如果你是外部的资源，浏览器就要向另一个服务器获取资源，这样速度会很慢（如果你引用的资源的服务器很慢，那就会大大影响你网站的速度，就算速度很快，读取也需要时间，时间差异是非常明显的）

但在实际开发中，直接把所有资源都放到同一个服务器里会对服务器造成很大的压力，所以我们一般会把资源都托管到其它服务中，再引外部资源链接过来，这样也是一个很好的解决方案，只要对用户友好，对服务器友好，就是一个好的方案

既然如此，那是不是就意味着只要插入了图片，图片就不能与网页同时加载出来？

大多数情况下是这样的，只不过有一种特殊的解决办法，让图片和网页同时加载出来。

那就是：Base64

这不是一种图片格式，但它可以将图片转换为文本形式（毫无规则，看似是乱码的一长串字符，特别长），而这串字符，可以直接填在src属性内，当加载网页时，它会与网页一起加载出来。

替换元素

替换元素是一种很特殊但也很常见的元素，它既有块级元素的特点，也有行内元素的特点

比如说<img>标签，它就是一种替换元素，那这个替换元素的替换是什么意思？

以<p>标签为例：<p>这是一个p标签的示例</p>

在浏览器中，它就直接把这个“这是一个p标签的示例”给显示出来了，但<img>标签不是：

<img src=”https://www.rsnocsi.cn/logo.jpg”>

浏览器直接显示的是这个“https://www.rsnocsi.cn/logo.jpg”吗？不是，浏览器显示的结果是一张图片，这张图片“替换”了这个网址。

内联框架

内联框架（<iframe>）也是一种替换元素，它和<img>元素非常像，<img>是向网页中引入图片，而内联框架就是向网页中引入另一个页面

下面是一个iframe的示例代码

<iframe src="https://www.rsnocsi.cn/" width="800" height="600" frameborder="0"></iframe>

• src：要引入外部网页的地址
• width：与图片类似，指定宽度
• height：与图片类似，指定高度
• frameborder：是否要有框架，值只能为0或1，0代表无边框，1代表有边框（如果不填这个属性，默认就是1，有边框）

Tips：不正确的使用iframe可能会给你的用户带来不好的体验，也会增加内存耗用，对SEO也无任何帮助，如非必要，尽量减少使用。

音视频播放

音频播放用<audio>标签，视频播放用<video>标签，它们也都是替换元素。

<audio>src="./audio.mp3" controls autoplay loop</audio>

• src：音频地址
• controls：它不是一个名值对结构的属性，它不需要值，声明该属性后，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
• autoplay：它也不是一个名值对结构的属性，它不需要值，声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成（顾名思义，就是页面一加载完，音频就会自动播放）
• loop：它也不是一个名值对结构的属性，它不需要值，声明该属性，音频会循环播放（播完了还播）

Tips：自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免（现在大多数浏览器为了提升用户体验，默认都不会允许自动播放）

除了上面的这种写法，我们还可以用一种很麻烦的写法：

<audio controls autoplay loop>
    <source src="./audio.mp3">
</audio>

这种写法有个用处（但一般用不到），就是可以写多个source指定不同的音频：

<audio controls autoplay loop>
    抱歉，你的浏览器不支持播放音频
    <source src="./audio.mp3">
    <source src="./audio.wav">
</audio>

这段代码的意思是，尝试播放./audio.mp3文件，如果无法播放，就尝试./audio.flv，如果还是不行，就显示“抱歉，你的浏览器不支持播放音频”，这是一种特别好的，能够照顾不同浏览器对音频播放的差异性，假设有些浏览器不支持播放mp3，但支持播放flv（这不现实，因为现在几乎所有浏览器都能支持mp3了，除非你要播放的音频文件非常特殊，你就可以预留几个不同格式的，兼容性好的音频），如果遇到了连音频播放都不支持的浏览器（比如IE9以前的，在线点名批评IE），就会显示“抱歉，你的浏览器不支持播放音频”，给用户一个提示。

如果为了兼容性，那可以使用<embed>标签（兼容性比较好，E8也支持，并且音视频都能支持播放，但给的属性很少，还默认自动播放，貌似没法改，所以一般不怎么用）

<embed src="./audio.mp3" type="audio/mp3">

这标签使用的时候还最好加上width和height属性，不然在IE里还很难控制。

总之就是麻烦，基本没有必要为了IE去折腾<embed>

So,IE Fuck You!

其实我们还有一种写法，让支持<audio>标签的浏览器直接用<audio>播放，不支持的浏览器再用<embed>

<audio controls autoplay loop>
    <source src="./audio.mp3">
    <source src="./audio.wav">
    <embed src="./audio.mp3" type="audio/mp3">
</audio>

这样基本上就万无一失了，提示错误的文字也不需要写了，因为<embed>没有兼容性的问题。

接下来是视频播放，视频播放使用<video>标签，并且使用方式与audio基本一样，就不详细讲了

<video controls autoplay loop>
    <source src="./video.mp4">
    <source src="./video.webm">
    <embed src="./video.mp4" type="video/mp4">
</video>