【前端】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>

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论