Html5前端基本知识整理与回顾上篇

HTML5是“HyperText Markup Language 5”的缩写，即超文本标记语言第五版，是构建以及呈现互联网内容的一种语言方式，是互联网的下一代标准，也是目前Web开发中最广泛使用的技术之一。HTML5是HTML的第五次重大修改和扩展，它引入了新的元素、属性和行为，为Web开发提供了更丰富的功能和更好的用户体验。

HTML5引入了许多新的语义化标签，这些标签使得网页的结构更加清晰，有利于搜索引擎优化。

了解

注释

注释可供⾃⼰和其他程序员阅读，并为阅读代码提供提示，且注释不会被执行。其基本格式如下：

<!--   
    以下是一个被注释的代码块，它不会被执行或显示。  
    <p>这段文本将不会显示在网页上。</p>  
-->

标签结构

标签结构图：开始标签+包裹内容+结束标签。

说明：成对出现的标签叫双标钱，例如最基础的p标签；其余的叫单标签，例如强制换行标签br标签。<>包裹的叫标签名。

标签有两种关系，分别是⽗⼦关系（嵌套关系）和兄弟关系（并列关系）。关系示例图如下所示：

排版标签

排版标签一共有四种，分别是标题、段落、换⾏、⽔平分割线。

标题标签

标题标签有h1-h6六级标签，重要程度依次递减，它的三个特点如下：

⽂字⾃动加粗
⽂字都会变⼤，且逐级减⼩
独占⼀⾏

六级标签我们使用六句话为大家展示他们的小区别：

<h1>这是一个h1标签，我很大对不对</h1>
<h2>这是一个h2标签，我小一点，但是我也不差</h2>
<h3>这是一个h3标签，中等吧哈哈哈</h3>
<h4>这是一个h4标签，虽然不及以上但是也不能阻挡我要三连的决心</h4>
<h5>这是一个h5标签，嗯</h5>
<h6>这是一个h6标签，麻雀虽小 五脏俱全</h6>

段落标签

段落标签主要是<p></p>，段落间存在空隙，每个段落独占⼀⾏，但是同⼀个段落如果顶满⼀⾏则会⾃动换⾏。正如大家所见，下面这是一段非常长的文字，这个足以向大家展示段落标签的换行特性：

<p>我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢</p>

换⾏标签

换行标签主要是<br>标签，是单标签，其使用方法非常简单，如下展示：

<p>我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大<br>家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢我是来自CSDN的PleaSure乐事，希望大家能够喜欢我，也希望如果文章对大家有用，大家可以给我点赞关注收藏，非常感谢</p>
<br>
<p>这里换行了，没换行打我</p>

⽔平分割线

水平分割线主要包含<hr>标签，在⻚⾯中显示⼀条⽔平线且为单标签。

<p>我是来自CSDN的PleaSure乐事</p>
<hr>
<p>这里换行了，没换行打我</p>

⽂本格式化标签

文本格式化标签主要有三种，分别是加粗、下划线、倾斜、删除线四种，使⽤时不强制换⾏。其代码样式和具体样例展示如下：

<p><b>我是来自</b>的<u>PleaSure乐事</u>，<i>可以喜欢我</i>，<s>谢谢！</s></p>

媒体标签

在使用媒体标签以前，我们需要先了解绝对路径和相对路径的概念。

绝对路径

绝对路径是指⽂件下的绝对位置，可以直接到达⽬标位置，通常从盘符开始（盘符：c盘、d盘等）或者⼀个完整的⽹址（⽹址⼀般不⽤），但是网址一般不用。

相对路径

相对路径是指从当前⽂件开始出发找⽬标⽂件，分别有同级⽬录、下级⽬录、上级⽬录。

同级目录

可以直接写文件名
可以用./文件名的形式寻找

下级目录

直接使用文件名/图片名的形式

上级目录

⽤../返回上级⽬录+图⽚名

音频标签

格式

音频标签的格式如下：<audio src="⾳频地址" controls autoplay loop> </audio>，是一个货真价实的双标签，可以使用controls、autoplay、loop、volume来控制循环播放等，其中src的引号部分可以换成任何你想要的音频的地址，地址的书写方式可以参考上方的绝对路径和相对路径。

controls是显示播放的控件，⼿动播放不是⾃动播放
autoplay是⾃动播放，但是部分浏览器不⽀持⾃动播放，⼀般不使⽤
loop是循环播放的控件
volume是控制⾳量的空间，范围0-1

<audio src="李荣浩-年少有为.mp3" controls autoplay loop> </audio>

注意点

⾳频标签⽬前仅⽀持MP3、Wav、Ogg三种格式。

视频标签

格式

视频标签与音频标签类似，格式为<video src="⾳频地址" controls autoplay loop> </vedio>，同样也包含controls、autoplay、loop、volume这四个功能可以选择。需要注意的是autoplay在⾕歌浏览器中需要配合muted静⾳播放使⽤。

<video src="video.mp4" controls autoplay loop></video>

注意点

⽬前主要适⽤MP4、WebM、Ogg三种格式。
poster是video的独有属性，但视频不可⽤时向⽤户展示的替代图⽚，从⽽防⽌视频不可⽤⻚⾯⼀⽚空⽩的现象
可以⽤width和height来设置视频的宽⾼，否则使⽤默认⼤⼩

媒体标签的注意点

preload表明是否需要预先加载，默认是⾃动加载，若不想预先加载，则复制none。

source让视频、⾳频有planB，有可以备选的视频、⾳频。

连接标签

介绍

连接标签主要指超链接，也叫a标签、锚标签点击后会实现跳转，是双标签。

格式

可以在⽬录当中通过相对路径跳转，也可以⽤⽹址进⾏跳转。如果实在不知道写⼀个#代表空链接，等知道了以后再更换掉。

<a href="https://www.csdn.net">访问CSDN</a>
<a href="index.html">访问个人网页</a>

在target当中，一般可以写的东西如下：

_self：默认值。在当前浏览器窗口或标签页中打开链接。
_blank：在新浏览器窗口或新标签页中打开链接。这是最常用的非默认值，因为它允许用户在当前浏览会话中保持当前页面不变，同时打开一个新的页面。
_parent：在父框架集中打开链接。如果当前页面没有被嵌入框架中，这个值的效果和_self相同。
_top：在顶层框架中打开链接。这意味着如果当前页面在框架中，链接将在整个浏览器窗口中打开，移除所有框架。

注意点

可以在⽬录当中通过相对路径跳转，也可以⽤⽹址进⾏跳转。如果在href当中实在不知道写⼀个#代表空链接，等知道了以后再更换掉。

总结

今天为大家介绍了如上的知识点，下篇我也将在不久的将来完成撰写然后放出，希望对大家有所帮助，也希望大家可以留下点赞、收藏、关注和评论，这对我真的很重要，非常感谢！

标签：大家,标签,前端,基本知识,CSDN,Html5,点赞,PleaSure,乐事
From： https://blog.csdn.net/m0_75262255/article/details/140279596