web前端-HTML标签学习

1排版标签

1.1标题标签

➢场景:在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

➢代码: h系列标签

<h1>1级标题</h1>

<h2>2级标题</h2>

<h3>3级标题</h3>

<h4>4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

➢语义: 1~6级标题，重要程度依次递减

➢特点:

1. 文字都有加粗

2. 文字都有变大，并且从h1→h6文字逐渐减小

3. 独占一行

1.2段落标签

➢场景:在新闻和文章的页面中， 用于分段显示

➢代码: <p>我是一段文字</p>

➢语义:段落

➢特点:

1. 段落之间存在间隙

2. 独占一行

*当段落文字太多时，打开VS code查看，选择自动换行

1.3换行标签

➢场景: 让文字强制换行显示

➢代码: <br>

➢语义:换行

➢特点:

1. 单标签

2. 让文字强制换行

1.4水平线标签

➢场景: 分割不同主题内容的水平线

➢代码: <hr>

➢语义:主题的分割转换

➢特点:

1. 单标签

2. 在页面中显示一条水平线

2文本格式化标签

➢场景:需要让文字加粗、下划线、倾斜、删除线等效果

3媒体标签

3.1图片标签

➢场景: 在网页中显示图片

➢代码: <img src="" alt="">

➢特点:

1. 单标签

2. img标签需要展示对应的效果，需要借助标签的属性进行设置!

3.1.1图片标签的介绍

➢ 标签的完整结构图：

3.1.2图片标签的src属性

属性名: src

➢属性值:目标图片的路径

➢注意点:

➢当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可( 包括后缀名)

➢路径的情况有很多

3.1.3属性注意点:

1.标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5. 属性之间没有顺序之分

3.1.4图片标签的alt属性

➢属性名: alt

➢属性值:替换文本

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

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

3.1.5图片标签的title属性

➢属性名: title

➢属性值:提示文本

当鼠标悬停时，才显示的文本

➢注意点: title属性不仅仅可以用于图片标签,还可以用于其他标签

3.1.6图片标签的width和height属性

➢属性名: width和height

➢属性值:宽度和高度(数字)

➢注意点:

如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)

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

3.2路径

➢场景:页面需要加载图片, 需要先找到对应的图片

➢类似于:生活中两个人，我要去找你，需要通过一 定的路径才能找到!

➢同理:页面需要找到图片，也是需要通过路径才能找到

3.2.1绝对路径（了解）

➢绝对路径: 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

➢例如:

盘符开头: D:\(day01\images\1.jpg

完整的网络地址: https://www.itcast.cn/2018czgw/images/logo.gif (了解)

3.2.2 相对路径（常用）

➢概念普及:

当前文件:当前的htm|网页

目标文件:要找到的图片

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

➢相对路径分类:

同级目录：当前文件和目标文件在同一目录中

➢类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)

生活中:两个人独处一室,我想找你，直接喊名字即可!

➢代码步骤:直接写目标文件的名字即可

方法一: <img src="目标图片.gif">

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

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

➢类似于:我在大厅，你累了去卧室休息了，我现在要找到你!

1. 先知道你去了哪一个房间→房间名:卧室

2. 进入这个房间→进入

3. 此时又独处一室→直接喊你名字

➢代码步骤:

1. 先知道在哪个文件夹里面→文件夹名字

2. 进入这个文件夹→/

3.此时看到目标文件直接喊她 →直接写目标文件名字

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

➢类似于:乾坤大挪移，我在卧室,你还在大厅，我现在要找到你!

1. 先要出卧室，来到大厅→出去

2.此时又独处一室→直接喊你名字

➢代码步骤:

1. 先出当前文件夹，到上一级目录→../

2.此时看到目标文件直接喊她→ 直接写目标文件

3.3音频标签

➢场景:在页面中插入音频

➢代码: <audio src=" ./music .mp3" controls></audio>

➢常见属性:

➢注意点:

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

3.4视频标签

➢场景: 在页面中插入视频

➢代码: <video src="./video .mp4" controls></video>

➢常见属性:

3.5链接标签

3.5.1 介绍

➢场景:点击之后，从一个页面跳转到另一个页面

➢称呼: a标签、超链接、锚链接

➢代码: <a href="./目标网页.html">超链接</a>

➢特点:

双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

➢注意：当开发网站初期，我们还不知道跳转地址的时候，href的值书写#(空链接)

3.5.2 链接标签的target属性

➢属性名: target

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