前端HTML5 +CSS3 2. HTML标签学习
前端HTML5 +CSS3
老师：黑马程序员
文章目录
- 前端HTML5 +CSS3
- 老师：黑马程序员
- 一. HMTL初识
- 2. HTML标签学习
- 1.1 排版标签
- 1.1.1 标题标签
- 1.2.1 段落标签
- 1.3.1. 换行标签
- 1.4.1 水平线标签
- 2.1 文本格式化标签
- 3.1 媒体标签——图片标签
- 3.1.1 图片标签的介绍
- 3.1.2 图片标签的src属性
- 3.1.3 图片标签的alt属性
- 3.1.4 图片标签的title属性
- 3.1.5 图片标签的width和height属性
- 3.1.6 图片标签小结
- 3.2 路径
- 3.2.2 绝对路径
- 3.2.3 相对路径
- 3.2.4 相对路径——同级目录
- 3.2.5 相对路径——下级目录
- 3.2.6 相对路径——上级目录
- 3.2.7 路径小结
- 3.3 音频标签
- 3.3.1 音频标签的介绍
- 3.3.2 小结
- 3.4 视频标签
- 3.4.1 视频标签的介绍
- 3.4.2 小结
- 4.1 链接标签
- 4.1.1 链接标签的介绍
- 4.1.2 链接标签的href属性
- 4.1.3 链接标签的显示特点
- 4.1.4 链接标签的target属性
- 4.1.5 链接标签小结
- 4.1.6 空标签
一. HMTL初识
2. HTML标签学习
1.1 排版标签
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文字逐渐减小·独占一行
-
1.2.1 段落标签
代码
<p>我是一段文字</p>
- 语义:段落
- 特点：
- 段落之间存在间隙
- 独占一行
1.3.1. 换行标签
代码:
<br>
- 语义:换行
- 特点:
- 单标签
- 让文字强制换行
1.4.1 水平线标签
代码
<hr>
- 语义:主题的分割转换
- 特点:
- 单标签
- 在页面中显示一条水平线
2.1 文本格式化标签
strong、ins、em、del，表示的强调语义更强烈
3.1 媒体标签——图片标签
3.1.1 图片标签的介绍
代码：
<img src="" alt="">
- 特点:
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
标签的完整结构
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
3.1.2 图片标签的src属性
- 属性名:src
- 属性值:目标图片的路径
- 注意点:
当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可(包括后缀名)
3.1.3 图片标签的alt属性
- 属性名:alt
- 属性值:替换文本
- 当图片加载失败时，才显示alt的文本
- 当图片加载成功时，不会显示alt的文本
3.1.4 图片标签的title属性
-
属性名: title
-
属性值:提示文本
- 当鼠标悬停时，才显示的文本
-
注意点: title属性不仅仅可以用于图片标签，还可以用于其他标签
3.1.5 图片标签的width和height属性
- 属性名: width和height
- 属性值:宽度和高度（数字)
- 注意点:
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形).
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
3.1.6 图片标签小结
img标签
3.2 路径
3.2.2 绝对路径
绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如:
- 盘符开头:D:\day01\images\1.jpg
- 完整的网络地址: https://www.itcast.cn/2018czgw/images/logo.gif
3.2.3 相对路径
概念普及:
-
当前文件:当前的html网页
-
目标文件:要找到的图片
相对路径:从当前文件开始出发找目标文件的过程
相对路径分类:
- 同级目录
- 下级目录
- 上级目录
3.2.4 相对路径——同级目录
同级目录:当前文件和目标文件在同一目录中
代码：直接写目标文件的名字
3.2.5 相对路径——下级目录
下级目录:目标文件在下级目录中
代码：
/文件夹名/文件名
3.2.6 相对路径——上级目录
上级目录:目标文件在上级目录中
代码：
…/文件名
3.2.7 路径小结
相对路径有三种情况:
- 同级目录:直接写: 目标文件名字!
- 下级目录:直接写: 文件夹名/目标文件名字
- 上级目录:直接写: …/目标文件名字
3.3 音频标签
3.3.1 音频标签的介绍
在页面中插入音频
代码：
<audio src="./music.mp3" controls></audio>
常见属性
音频标签目前支持三种格式:MP3、Wav、Ogg
3.3.2 小结
- 要在网页中插入音频使用什么标签?
audio标签 - 音频标签有哪些常见属性?
- src:音频路径
- controls:音频控件
- autoplay:自动播放
- loop:循环播放
3.4 视频标签
3.4.1 视频标签的介绍
在页面中插入视频
<video src=" ./video.mp4" controls></video>
常见属性
视频标签目前支持三种格式: MP4 、 WebM 、 0gg
3.4.2 小结
- 要在网页中插入视频使用什么标签?. video标签
- 视频标签有哪些常见属性?
- src:视频路径
- controls:视频控件
- autoplay:自动播放→谷歌浏览器中可以配合muted属性实现自动静音播放.
- loop:循环播放
4.1 链接标签
4.1.1 链接标签的介绍
场景:点击之后，从一个页面跳转到另一个页面
称呼:a标签、超链接、锚链接
<a href="./目标网页.html">超链接</ a>
特点:
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
4.1.2 链接标签的href属性
属性名: href
属性值:点击之后跳转去哪一个网页（目标网页的路径)
- 外部链接: <a href=“https : //www.baidu.com/”>百度一下</a>
- 内部链接:<a href=“./目标网页.html”>目标网页</a>
4.1.3 链接标签的显示特点
显示特点:
- a标签默认文字有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色)
4.1.4 链接标签的target属性
属性名: target
属性值:目标网页的打开形式
4.1.5 链接标签小结
- 如果需要实现点击之后，从一个页面跳转到另一个页面，需要使用什么标签?
链接标签:a标签 - 通过什么属性可以设置a标签的到底跳转去哪里?.href属性
- 通过什么属性可以设置a标签的跳转方式?取值有哪些?
- target属性
- 取值1: self:在当前窗口中跳转·
- 取值2:_blank:在新窗口中跳转
- target属性
4.1.6 空标签
代码:<a href=“#”>空链接</ a>
功能:
- 点击之后回到网页顶部
- 开发中不确定该链接最终跳转位置，用空链接占个位置