1排版标签
1.1标题标签
➢场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
➢代码: h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
➢语义: 1~6级标题,重要程度依次递减
➢特点:
文字都有加粗
文字都有变大,并且从h1→h6文字逐渐减小
独占一行
![](https://i-blog.csdnimg.cn/blog_migrate/6cc2442b12687f3699ced271fa6603ce.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9b17cc6b4f248f2c7f8374ac1db555f1.png)
1.2段落标签
➢场景:在新闻和文章的页面中, 用于分段显示
➢代码: <p>我是一段文字</p>
➢语义:段落
➢特点:
段落之间存在间隙
独占一行
*当段落文字太多时,打开VS code查看,选择自动换行
![](https://i-blog.csdnimg.cn/blog_migrate/c3e0ae4cf3f728b0ee93ef25c5720f9e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e357ad66264ae106a33edbeff3e40b3d.png)
1.3换行标签
➢场景: 让文字强制换行显示
➢代码: <br>
➢语义:换行
➢特点:
单标签
让文字强制换行
![](https://i-blog.csdnimg.cn/blog_migrate/c2b400ca2456995da8888e4d44f52786.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d75be45564867736630daa0a12bf1019.png)
1.4水平线标签
➢场景: 分割不同主题内容的水平线
➢代码: <hr>
➢语义:主题的分割转换
➢特点:
单标签
在页面中显示一条水平线
![](https://i-blog.csdnimg.cn/blog_migrate/181f534368e31fa82226163d4cc5da3a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3e4b2880bf9c4fd1bfe00abccc72906f.png)
2文本格式化标签
➢场景:需要让文字加粗、下划线、倾斜、删除线等效果
![](https://i-blog.csdnimg.cn/blog_migrate/d5294e2991369ac6ac914c86e3018ae3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2d87a03aac3f0b1abc840307831a8db7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9de52274c831bcf10bf2c3492f7d6212.png)
3媒体标签
3.1图片标签
➢场景: 在网页中显示图片
➢代码: <img src="" alt="">
➢特点:
单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置!
3.1.1图片标签的介绍
➢ 标签的完整结构图:
![](https://i-blog.csdnimg.cn/blog_migrate/93db8ac3876b21c6ab64f94d37ee5d42.png)
3.1.2图片标签的src属性
属性名: src
➢属性值:目标图片的路径
➢注意点:
➢当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可( 包括后缀名)
➢路径的情况有很多
3.1.3属性注意点:
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分
3.1.4图片标签的alt属性
➢属性名: alt
➢属性值:替换文本
当图片加载失败时,才显示alt的文本
当图片加载成功时,不会显示alt的文本
![](https://i-blog.csdnimg.cn/blog_migrate/af7d0d4cc20d7a0a54910117ba3c01bf.png)
3.1.5图片标签的title属性
➢属性名: title
➢属性值:提示文本
当鼠标悬停时,才显示的文本
➢注意点: title属性不仅仅可以用于图片标签,还可以用于其他标签
![](https://i-blog.csdnimg.cn/blog_migrate/b3076fbe67225407febff388d890b0ba.png)
3.1.6图片标签的width和height属性
➢属性名: width和height
➢属性值:宽度和高度(数字)
➢注意点:
如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
如果同时设置了width和height两个,若设置不当此时图片可能会变形
![](https://i-blog.csdnimg.cn/blog_migrate/cf3a54ca569fa6f32c5ea34896c61b62.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d62b8cc1d50b20786bb20b3ab8f7df2e.png)
3.2路径
➢场景:页面需要加载图片, 需要先找到对应的图片
➢类似于:生活中两个人,我要去找你,需要通过一 定的路径才能找到!
➢同理:页面需要找到图片,也是需要通过路径才能找到
3.2.1绝对路径(了解)
➢绝对路径: 指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
➢例如:
盘符开头: D:\(day01\images\1.jpg
完整的网络地址: https://www.itcast.cn/2018czgw/images/logo.gif (了解)
3.2.2 相对路径(常用)
➢概念普及:
当前文件:当前的htm|网页
目标文件:要找到的图片
➢相对路径: 从当前文件开始出发找目标文件的过程
➢相对路径分类:
同级目录:当前文件和目标文件在同一目录中
![](https://i-blog.csdnimg.cn/blog_migrate/d9f85b2f4b812712aa6aeb78619dbe2f.png)
➢类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)
生活中:两个人独处一室,我想找你,直接喊名字即可!
➢代码步骤:直接写目标文件的名字即可
方法一: <img src="目标图片.gif">
方法二: <img src="./目标图片gif">
下级目录:目标文件在下级目录中
![](https://i-blog.csdnimg.cn/blog_migrate/a09f33049b2b33037b201096457022df.png)
➢类似于:我在大厅,你累了去卧室休息了,我现在要找到你!
1. 先知道你去了哪一个房间→房间名:卧室
2. 进入这个房间→进入
3. 此时又独处一室→直接喊你名字
➢代码步骤:
1. 先知道在哪个文件夹里面→文件夹名字
2. 进入这个文件夹→/
3.此时看到目标文件直接喊她 →直接写目标文件名字
上级目录:目标文件在上级目录中
![](https://i-blog.csdnimg.cn/blog_migrate/5a0ac0f5f5300f38c2181f6b9cdd2122.png)
➢类似于:乾坤大挪移,我在卧室,你还在大厅,我现在要找到你!
1. 先要出卧室,来到大厅→出去
2.此时又独处一室→直接喊你名字
➢代码步骤:
1. 先出当前文件夹,到上一级目录→../
2.此时看到目标文件直接喊她→ 直接写目标文件
3.3音频标签
➢场景:在页面中插入音频
➢代码: <audio src=" ./music .mp3" controls></audio>
➢常见属性:
![](https://i-blog.csdnimg.cn/blog_migrate/665ce4e25c8f3900495a46fac839e616.png)
➢注意点:
音频标签目前支持三种格式: MP3、Wav、Ogg
3.4视频标签
➢场景: 在页面中插入视频
➢代码: <video src="./video .mp4" controls></video>
➢常见属性:
![](https://i-blog.csdnimg.cn/blog_migrate/7694c2f8b737031cea8ac1412625d8a4.png)
3.5链接标签
3.5.1 介绍
➢场景:点击之后,从一个页面跳转到另一个页面
➢称呼: a标签、超链接、锚链接
➢代码: <a href="./目标网页.html">超链接</a>
➢特点:
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
➢注意:当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接)
3.5.2 链接标签的target属性
➢属性名: target
➢属性值: 目标网页的打开形式
![](https://i-blog.csdnimg.cn/blog_migrate/8e25f312c1e86bfaf7ce266a1e5762a3.png)