HTML标签学习

一、排版标签

1.1.1标题标签<h?></h?>

特点：

1.独占一行 

2.文字都有加粗

3.文字都有变大，但是h1~h6文字逐渐减小

1.2.1段落标签<p></p>

特点：

1.段落之间存在间隙

2.独占一行

1.3.1换行标签

<br>:

特点：1.单标签 2.文字强制换行

1.4.1水平线标签

<hr>:

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

二、文本格式化标签

只想让文本格式化，不想让其成为标题<strong></strong>；

需要让文字加粗、下划线、倾斜、删除线

b：加粗                        strong：加粗

u：下划线                    ins：下划线

i：倾斜                         em：倾斜

s：删除线                     del：删除线 

视觉效果上一样，只是在语义情况下不同：

（右边：单词的）突出重要性的强调语境，语气更强烈

三、媒体标签

图片：

3.1.1图片标签的介绍

场景：在网页中显示图片

代码：<img src=" " alt=" ">

src="属性值" alt="替换文本"

3.1.2图片标签的alt属性

属性名：alt

属性值：替换文本

              当图片加载失败时，才显示alt文本

              当图片加载成功时，不会显示alt文本

3.1.3图片标签的title属性

属性名：title

属性值：提示文本——>当鼠标悬停时，才显示的文本

注意：title属性不仅仅可以用作图片标签，还可以用于其他标签

3.1.4图片标签的width和height属性

属性名：width、height

属性值：宽度、高度

注意：

1.只设置width或height中的一个，另一个没设置的话，会自动等比例缩放（图片不会变形）；

2.如果同时设置了width和height，设置不当的话图片可能会变形；

路径：

场景：页面需要加载图片，需要先找到对应的图片

1.绝对路径（了解）：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径 【eg.D:\day01\images\（1.jpg）】（）里为自己补充的

2.相对路径（常用）：

        相对路径：从当前文件开始出发去找目标文件的过程

        【当前文件：当前的html网页；目标文件：要找到的图片】

        相对路径分类：（方法都是先找到目标图片）

                1.同级目录：代码步骤：直接写目标文件的名字即可

                                        方法一：<img src=“目标图片.gif”>

                                        方法二：<img src="./目标图片.gif>

                2.下级目录：目标文件在下级目录中

                                      代码步骤：1.先知道在哪个文件夹里面——>文件夹名字

                                                        2.进入这个文件夹——>（文件夹名）/

                                                        3.直接写目标文件名字

                       【eg.目标图片在images文件夹中：img src="images/目标图片.gif>】

                3.上级目录：目标文件在上级目录中

                                     代码步骤：1.先出当前文件夹，到上一级目录—>../（返回上几级就几个../）

                                                       2.直接写目标文件

           

音频标签：

场景：在页面插入音频

代码：<audio src="路径" controls></audio>

常见属性：

src:音频的路径

controls：显示播放的控件

autoplay：自动播放（部分浏览器不支持）

loop：循环播放

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

视频标签：

场景：在页面中插入视频

代码：<video src="路径" controls></video>

常见属性：

src：视频的路径

controls：显示播放的控件

autoplay：自动播放

loop：循环播放

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

四、链接标签

4.1链接标签<a >

场景：（单击）点击之后，从一个页面跳转到另一个页面

称呼：a标签、超链接、锚链接

代码：<a href="路径">超链接</a>

href：

作用：跳转地址

1.跳转到线上其他网站：网址；    2.跳转到自己的html：路径；  3.不知跳转到哪里：#

4.4链接标签的target属性

属性名：target

属性值：目标网页的打开形式

              _self：默认值，在当前窗口中跳转（覆盖原网页）

             _blank：在新窗口中跳转（保留原网页）