1.1 标题标签
场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
代码:h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>5级标题</h6>
语义:1~6级标题,重要程度依次递减
特点:
文字都有加粗
文字都有变大。从<h1> → <h6>文字逐渐减小
独占一行
1.2 段落标签
场景:在新闻和文章的页面中,用于分段显示
代码:<p>我是一段文字</p>
语义:段落
特点:
段落之间存在间隙
独占一行
1.3 换行标签
场景:让文字强制换行显示
代码:<br>
语义:换行
特点:
单标签
让文字强行换行
1.4 换行标签
场景:分割不同主题内容的水平线
代码:<hr>
语义:主题的分割转换
特点:
单标签
在页面中显示一条水平线
2.1 文本格式化标签的介绍
场景:需要让文字加粗、下划线、倾斜、删除线等效果
代码:
标签 | 说明 |
---|
strong | 加粗 |
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
语义:突出重要性的强调语境
3.1 图片标签的介绍
场景:在网页中显示图片
代码:<img src="./xx.png" alt="" title="" width="" hight="">
alt属性:当图片加载失败时,才显示alt的文本,当图片加载成功时,不会显示alt的文本
title属性:当鼠标悬停时,才显示的文本
width和height属性:宽度和高度(数字);如果只设置width或height中的一个,
另一个没设置的会自动等比例缩放(此时图片不会变形)
特点:
单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置!
3.2 路径的介绍
场景:页面需要加载图片,需要先找到对应的图片
路径可分为:
• 绝对路径(了解)
• 相对路径(常用)
3.2.1 绝对路径(了解)
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
例如:
盘符开头:D:\day01\images\1.jpg
完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
## 3.2.2 相对路径(掌握)
概念普及:
当前文件:当前的html网页
目标文件:要找到的图片
相对路径:从当前文件开始出发找目标文件的过程
相对路径分类:
同级目录:
代码步骤:直接写目标文件的名字即可
• 方法一:<img src="目标图片.gif">
• 方法二:<img src="./目标图片.gif">
下级目录:
1.先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
4. <img src="./文件夹名称/目标图片.gif">
上级目录:
代码步骤:
1. 先出当前文件夹,到上一级目录 → ../
2. 此时看到目标文件直接喊她 → 直接写目标文件
3. <img src="../目标图片.gif">
4.1音频标签介绍
场景:在页面中插入音频
代码:<audio src=" ./music.mp3" controls> </audio>
常见属性:src属性:音频的路径
controls属性:显示播放的控件
autoplay属性:自动播放(有些浏览器不支持)
loop属性:循环播放
音频标签目前支持三种格式:MP3、Wav、Ogg
4.2视频标签的介绍
场景:在页面中插入视频
代码:<video src=" ./video.mp4" contrls> </video>
常见属性:src属性:音频的路径
controls属性:显示播放的控件
autoplay属性:自动播放(有些浏览器不支持)
loop属性:循环播放
视频标签目前支持三种格式:MP4 、WebM 、Ogg
5.1链接标签的介绍
场景:点击之后,从一个页面跳转到另一个页面
代码:<a href=" ./目标网页.html">超链接</a>
特点:
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
属性名:href
属性值:点击之后跳转去哪一个网页(目标网页的路径)
外部链接:<a href="https://www.baidu.com/"> 百度一下</a>
内部链接:<a href="./1.html"> 百度一下</a>
属性名:target
属性值:目标网页的打开形式
取值1:_self:在当前窗口中跳转
取值2:_blank:在新窗口中跳转
空链接(拓展补充)
代码:<a href="#">空连接</a>
功能:
点击之后回到网页顶部
开发中不确定该链接最终跳转位置,用空链接占个位置
6总结
1. 排版标签:
• 标题h系列、段落p、换行br、水平线hr
2. 文本格式化标签:
• 加粗strong、下划线ins、倾斜em、删除线del
3. 图片标签:
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
4. 路径:
• 相对路径:同级目录 + 下级目录 + 上级目录
5. 音频标签、视频标签:
• audio标签、 video标签 + src属性 + controls属性
6. 链接标签:
• a标签 + href属性 + target属性