【前端学习笔记】(一)（排版标签、文本格式化标签、媒体标签、链接标签）

开始前想废话一下哈哈哈哈哈~最近在跟着黑马的视频学习前端，从入门的开始学，虽然之前我也算是入过门吧，可感觉自己的基础还是不太OK。看着视频里的讲解操作，感觉还蛮简单的，等到自己上手敲的时候，想用前面学到的某个属性实现某种效果，却死活想不起来了。。。我这记忆，我也是服了。所以呢就想写个笔记，记录下我所学到的东西。

HTML标签

1、排版标签

（1）标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：
• 文字都有加粗
• 文字都有变大，并且从h1 → h6文字逐渐减小
• 独占一行
效果如图所示：

（2）段落标签

<p>我是一段文字</p>

特点：
• 段落之间存在间隙
• 独占一行

（3）换行标签

<br>

特点：
• 单标签
• 让文字强制换行

（4）水平线标签

<hr>

特点：
• 单标签
• 在页面中显示一条水平线

2、文本格式化标签

（1）文本格式化标签1

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

（2）文本格式化标签2

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

两种都能实现让文字加粗、下划线、倾斜、删除线等效果。
但是第二种 strong、ins、em、del，表示的强调语义更强烈！

3、 媒体标签

（1）图片标签

<img src="此处写图片的路径" alt="此处是替换文本，当图片加载失败时才会显示出该文本" title="鼠标悬停在图片上时会显示该文本">

图片若加载失败：

图片标签的width(宽)和height(高)属性

<img src="图片路径" alt="替换文本" width="宽" height="高">

注意点：
• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

<img src="图片路径" alt="替换文本" width="200px">

效果图：

• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

<img src="图片路径" alt="替换文本" width="200px" height="200px">

效果图：

（2）音频标签

<audio src="此处是音频的路径" controls></audio>

注意：标签中要加上 controls 属性，网页中才会显示播放控件。
常见的属性如下：

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

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

（3） 视频标签

<video src="此处是视频的路径" controls></video>

注意：标签中要加上 controls 属性，网页中的视频才会显示播放控件，没加该属性的话，效果就如同在网页中放了一张图片。
常见的属性如下：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

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

4、链接标签

（1）称呼： a 标签、超链接、锚链接

<a href="此处是目标网页的路径">目标网页的名字</a>

<!-- 外部链接 -->
<a href="https://www.baidu.com/">百度</a>
<!-- 内部链接 -->
<a href="./目标网页.html">目标网页</a>

（2）特点：
• 双标签，内部可以包裹内容
• 如果需要 a 标签点击之后去指定页面，需要设置 a 标签的 href 属性

（3）显示特点：
• a 标签默认文字有下划线
• a 标签从未点击过，默认文字显示蓝色
• a 标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

（4）链接标签的 target 属性

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

（5）空链接

<a href="#">空链接</a>

功能：
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置时，用空链接占个位置