Web前端系列技术之HTML基础（从入门开始）③【终章】

本文链接：https://blog.csdn.net/IAMLSD550/article/details/125890411

Web前端系列技术之HTML基础（从入门开始）③【终章】

历时四天，HTML语言学习终于迎来了终章，现在面对基础HTML语言的用法和相关作用都算是很熟悉了，这也开始让我迫不及待的打算更新CSS的学习内容了😊😊，在整个HTML语言的学习过程中，我个人认为，最应该注意的点分为三类：
①HTML的基本语法结构（毕竟这才是关键）；
②需要注意HTML5新添加的五种布局标签（通常用于手机端网页的开发）；
③表单各类元素的使用；
不过今天所要介绍的内容，是整个HTML最后一点关键知识：音频标签 ，视频标签 ， 框架标签，以及基本的内容补充。

十一、多媒体标签

在一个完整的网页中，多媒体是必然不可缺少的，所以需要嵌入音频标签或者视频媒体标签。其中主要分为：音频标签 和 视频标签，它们具有相同的属性元素。

1.音频标签

audio标签：<audio></audio>
音频标签常见属性：
• src：音频路径
• controls：音频控件
• autoplay：自动播放
• loop：循环播放

<!-- 音频标签 -->
<audio src="音频文件的相对地址" width="播放界面的宽度" height="播放界面的高度" controls autoplay loop/>
<!-- 注意：audio其属于双标签，chrome不支持自动播放 -->

注意：
音频标签目前支持三种格式：MP3、Wav、Ogg

2.视频标签

video标签：<video></video>
视频标签常见属性：
• src：视频路径
• controls：视频播放控件
• autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放）
• loop：循环播放

<!-- 视频标签 -->
<video src="视频文件的相对地址" controls autoplay muted loop></video>
<!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->

视频标签目前支持三种格式：MP4、WebM、Ogg

十二、框架标签

利用iframe标签实现内嵌框架
其属性：scrolling；
scrolling属性取值为：
auto（默认值，整个表格在浏览器页面中左对齐）、yes（总是显示滚动条）、no（不显示滚动条）

<!-- 框架标签 -->
<iframe src="https://blog.csdn.net/IAMLSD550?spm=1000.2115.3001.5343" width="350" height="200" scrolling="yes" >
</iframe>

注意：添加了src的inframe相当于把当前页面打一个洞去呈现其他页面

十三、内容补充

结合前面两篇文章的叙述，有部分知识点有所补充，这里大家可以看一下，毕竟也是挺重要的。

1.label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法①：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

使用方法②：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可

性别: 
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <!-- 此处id值和for的值是一样的 -->
<label><input type="radio" name="sex"> 女</label>
    <!-- label标签是为了把内容与表单标签进行绑定 -->

2.没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签；
div标签：一行只显示一个（独占一行）；
span标签：一行可以显示多个；

3.有语义的布局标签（了解）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用，常用于手机端页面的开发。
常见有语义的布局标签：
• header：网页头部
• nav：网页导航
• footer：网页底部
• aside：网页侧边栏
• section：网页区块
• article：网页文章
具体布局如图所示：
在这里插入图片描述

注意：以上标签显示特点和div一致，但是比div多了不同的语义

十四、总结

主要标签在实际web开发项目中的应用场景：

1. 标题标签（h1~h6）：
在新闻和文章的页面中，都离不开标题，用来突出显示文章主题；
2.段落标签（p）：
在新闻和文章的页面中，用于分段显示；
3.换行标签（br）：
让文字强制换行显示；
4.格式化标签①（strong、ins、em、del）：
常用于特殊文字格式，强调语义更强烈；
5.格式化标签②（b、u、i、s）：
常用于特殊文字格式，没有过于强调语义；
6.上标/下标标签（sup、sub）：
常用于处理特殊字符；
7. 图片标签（img）：
在网页中显示图片；
8.音频标签（audio）：
在页面中插入音频；
9.视频标签（video）：
在页面中插入视频；
10.链接标签（a）：
点击之后，从一个页面跳转到另一个页面；
11.无序列表（ul+li）：
在网页中表示一组无顺序之分的列表，如：新闻列表；
12.有序列表（ol+li）：
在网页中表示一组有顺序之分的列表，如：排行榜；
13.自定义列表（dl+dt+dd）：
在网页的底部导航中通常会使用自定义列表实现；
14.表格（table）：
在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表；
15.表单（form）：
在网页中显示收集用户信息的表单效果，如：登录页、注册页、搜索；
在这里插入图片描述