关于前端的一些学习记录（2）

正式学习第一步，HTML中的注释：

<!--这里是被注释掉的内容 -->

在VScode中，注释的快捷键为Ctrl+S。选中行后使用快捷键便可加上注释，同时，如果想取消注释，在注释行再使用一遍相同的快捷键即可取消掉原来的注释。

HTML的标签 ：标签由<、>、/、英文单词或字母组成。标签中的英文单词或字母叫做标签名;常见标签由两部分组成，称作双标签，前部分是开始标签，后部分是结束标签；少数标签是由一部分组成，称作单标签，它无法像双标签那样包裹内容。

例如：
<strong> 内容 </strong>（这就是双标签）
<br>    <hr> (这是两个单标签)

标签的关系：1.嵌套关系（包含）；2.并列关系（在逻辑上是同级的）。

标签的种类：1.标题标签：（双标签）

<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
.
.
.
其中标题的重要程度依次递减(对应显示的字体也会逐渐缩小，加粗效果逐渐不明显)
各级标题独占一行

2.段落标签：（双标签）

<p></p>
<p></p>
.
.
.
由于每一段都是并列关系，所以不存在嵌套或不同级的

其次，段落标签是在每一段之间是存在间隙的，两段不是紧紧地贴贴

3.换行标签：（单标签）

<br>
加入以后强制换行

4.水平分割线标签：（单标签）

<hr>
在一行中加一条水平分割线

5.文本格式化标签：（双标签）

<b>   加粗     <strong>    
<u>   下划线   <ins>
<i>   倾斜     <em>
<s>   删除线   <del>
左右两栏作用相同，但是为突出重要性的强调语境（语义），可选用右边一栏的标签

6.媒体标签

        【图片标签】(单标签)

<img src=" " alt=" ">
其中，src，alt是属性名;
" "内的是属性值.
例：<img src="./1.gif">
(./是表示相对位置(当前目录)，即现在这个HTML文件所在位置下的某图片，可以没有)

再有，alt是替换文本，图片加载失败时会显示alt文本.
例：<img src="./1.gif" alt="这是一只猫的图片">

第三，在该标签下可以加入title，当鼠标悬停时显示。
例：<img src="1.gif" alt="这是一只猫的图片" title="这是title文字，悬停时显示">

第四，可以设置图片标签的宽高属性。
用width和height可以调整，若只设置一者，则按比例调整图片.（图片不会变形）
例：<img src="1.gif" alt="..." title="..." width"200">

        【媒体标签路径问题】

路径是寻找图片等媒体所在位置的关键。路径有绝对路径和相对路径：

绝对路径：从盘符开始，到最终位置 / 线上的网址从http开始到最终；

相对路径：从当前文件开始出发去找目标文件，找同级目录:

<img src="./1.gif" alt="这是其中的一种写法">
或
<img src="1.gif" alt="这两种写法是等价的">

下级目录

找当前images文件夹下的：
<img src="images/1.gif" alt="这是下级目录的写法">

和 上级目录

找当前文件夹上一级文件夹下的：
<img src="../1.gif" alt="...">
找当前文件夹上两节文件夹下的:
<img src="../../1.gif" alt="...">

         【音频标签】（双标签）

<audio src="./music.mp3" contorls></audio>

但是，对于部分浏览器，有限制播放的情景出现，这时，就需要加一些常见如下的属性：

属性名	功能
controls	显示播放的控制元件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

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

<!--再复习一下注释的写法哈哈哈哈-->
<!--具体实例，拥有上述三种介绍的实例-->
<audio src="./music.mp3" controls autoplay loop></audio>

          【视频标签】

<!--完整实例-->
<video src="./video.mp4" controls autoplay muted loop>

解释其中的muted：谷歌浏览器中在autoplay后要加上muted实现静音（自动）播放。

其余属性和上面所介绍的音频一样。

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

7.链接标签（双标签）

对"百度"这两个字加上了超链接
<a href="http://www.baidu.com/">百度</a>

注：若无特殊说明，一般两个链接会放在同一行上，若想将两个链接分行放置，

         则加上''<br>''换行标签即可。

再注：当开发网站的前期，不知道跳转界面的时候，"href"赋值为"#"就可，''#''叫做空链接。

仔细观察可以发现，以上写法的链接标签是直接跳转，当前界面会被覆盖，下面介绍一种属性，可以实现“在新窗口打开链接”。

属性：target.

赋值	显示效果
_self	默认值，即当前窗口跳转，会覆盖
_blank	新的窗口打开链接

 在新建窗口打开标签如下：

<a href="http:www.baidu.com/" target="_blank">百度</a>

至此，超链接是唯一一个带颜色的标签，至于不想要紫色这个奇奇怪怪（误）的颜色，在之后的CSS学习中会学到修改颜色的功能。

标签部分的学习到此结束，如果您喜欢，希望能得到您的点赞；如果您想同我一起学习，欢迎关注我，咱们一起加油！