常见的HTML标签（三）

东东咚咚东

已于 2022-03-24 11:21:32 修改

阅读量1k

点赞数 3

分类专栏：前端文章标签： html 前端

于 2021-12-27 22:02:03 首次发布

本文链接：https://blog.csdn.net/Cristiano2000/article/details/122174755

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

哈喽啊朋友们，这里是练习时长两年半的前端练习生潇洒弟，前端路漫漫，还要继续学┭┮﹏┭┮

本篇介绍 html 标签中的 vedio、audio、div、span、以及内容分区标签 header、footer、section、article、aside、nav 以及框架标签 iframe。

本篇没有脑图，欢迎去前两篇下载 ('ᴗ' )و

视频标签vedio

视频标签的基本用法是vedio标签中嵌套source标签。

然后在 vedio 标签中设置视频播放相关属性，在 source 标签中设置视频源以及类型属性。

vedio 标签中的属性：

width	设置视频的宽度
height	设置视频的高度
autoplay	进入网页后视频自动播放
controls	显示视频控件，如播放、暂停、视频进度条等
loop	设置视频自动播放
muted	默认视频播放为静音，用户后续可选择打开
poster	不显示视频的第一帧，以一张图片代替，但如果设置了autoplay属性，此属性失效（一闪而过）。
preload	可选值有 auto、metadata、none。用于是否提前加载视频。同样如果设置了 autoplay 属性，此属性失效。

source标签中的属性：

src	URL，视频的来源
type	视频的类型

示例：

<video width="320" height="240" controls muted preload="none">
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

细节：

1.vedio 标签中可以含有多个 source 标签，浏览器会依次匹配，并显示可播放的第一个。如果没有源可播放，将会显示错误提示文字。

2.关于 preload 的三个属性，当我们认为用户极可能播放视频时设置auto、用户不怎么会点开视频时设置metadata、用户多半不会点开视频时设置none。

音频标签audio

audio 标签与 vedio 标签使用方法与属性都相似。

但是图像化属性无效，比如width、height、poster属性。毕竟在网页中只显示个音频播放控制条。

此外，audio 必须有 controls 属性才能出现在网页中，否则不会显示，你也就无从使用。

当然，你也可以不设置controls属性，但是设置 autoplay 与 loop 属性，这样就能当做背景音乐来使用。

块级元素与行内（内联）元素

元素都分为两类，称为块级元素和行内元素。

块级元素

块级元素会独占一行，可以设置 width、height、padding、border、margin 等属性。当然它自己首先会在上下设置 margin 值以跟其他元素间隔开。

常见块级元素包括 ul、ol、li、dl、dt、dd、table、caption、thead、tr、th、tbody、td、tfoot、h1-h6、form、p、address、div

口诀：三大列表和表格、六大标题和表单、段落地址要分块。

———— div 标签介绍 ————

div 标签是块级元素，并无实际意义，但可以作为其他元素的容器，有对页面进行分区的作用。

行内元素

行内元素就顾名思义，可以与其他元素兼容在同一行。

它的width、height、margin、padding、border都不可以设置，最重要的是其宽度会受到内容的挤压，它的宽度就是内容的宽度。

常见行内元素包括 a、strong、em、sub、sup、input、br

———— span 标签介绍 ————

span 与 div 标签一样，没什么实际含义，用来存储文字。

块级元素与行内元素互相转化

块级元素和行内元素可以互相转换，设计 css 的内容了。欢迎关注博主，后续讲解 css 。

<head>
    <style>
        <!-- 块级元素转换成行内元素 -->
        div {
            display:inline;
        }
        <!-- 行内元素转换成块级元素 -->
        span {
            display:block;
        }
    </style>
</head>

内容分区标签

内容分区标签有多种标签，这些标签都与 div、span 标签一样，都是为了将内容分区，比较好与css 配合起来使用。

内容分区标签有：

article	独立的题目标签。
header	整个网页或者网页中某一区域的头部。
nav	导航区域。
section	网页中独立的一个区域。
aside	网页的侧边栏。
footer	网页的尾部，通常会有版权等的信息。

框架标签iframe

框架标签的作用是在当前网页中开辟一个窗口展示另一个网页的内容。

注意：有些网页不允许被嵌套。

width	宽度
height	高度
frameborder	框架的边框，注意填入的值并不是边框的大小，而是是否显示边框，因此只有两个值 0 与 1。

iframe 标签与的妙用：

iframe 标签可以与 a 标签配合，使得点击 a 标签后，iframe 框架中显示 a 标签链接的网页。

只需使得 a 标签中的 target 属性与 iframe 标签中的 name 属性相同即可。

...
<body>
<iframe src="https://www.bilibili.com/" width="800px" height="500px" name="frame1"</iframe>
<a href="https://hotels.ctrip.com/" target="frame1">点击这里框架内容由哔哩哔哩跳转到携程</a>
</body>
...

未完待续 ('ᴗ' )و

2021 年 12 月 27 日，西安疫情，首日封宿舍