前端HTML5 +CSS3 2. HTML标签学习

前端HTML5 +CSS3

老师：黑马程序员

一. 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
2
3
4
5
6

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

• 特点:

  • 文字都有加粗

  • 文字都有变大，并且从h1 →h6文字逐渐减小·独占一行

1.2.1 段落标签

代码

<p>我是一段文字p>
1

• 语义:段落
• 特点：
  • 段落之间存在间隙
  • 独占一行

1.3.1. 换行标签

代码:

<br>
1

• 语义:换行
• 特点:
  • 单标签
  • 让文字强制换行

1.4.1 水平线标签

代码

<hr>
1

• 语义:主题的分割转换
• 特点:
  • 单标签
  • 在页面中显示一条水平线

2.1 文本格式化标签

strong、ins、em、del，表示的强调语义更强烈

3.1 媒体标签——图片标签

3.1.1 图片标签的介绍

代码：

<img src="" alt="">
1

• 特点:
  • 单标签
  • 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>
1

常见属性

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

3.3.2 小结

• 要在网页中插入音频使用什么标签?
  audio标签
• 音频标签有哪些常见属性?
  • src:音频路径
  • controls:音频控件
  • autoplay:自动播放
  • loop:循环播放

3.4 视频标签

3.4.1 视频标签的介绍

在页面中插入视频

<video src=" ./video.mp4" controls>video>
1

常见属性

视频标签目前支持三种格式: MP4 、 WebM 、 0gg

3.4.2 小结

• 要在网页中插入视频使用什么标签?. video标签
• 视频标签有哪些常见属性?
  • src:视频路径
  • controls:视频控件
  • autoplay:自动播放→谷歌浏览器中可以配合muted属性实现自动静音播放.
  • loop:循环播放

4.1 链接标签

4.1.1 链接标签的介绍

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

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

<a href="./目标网页.html">超链接
1

特点:

• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

4.1.2 链接标签的href属性

属性名: href

属性值:点击之后跳转去哪一个网页（目标网页的路径)

• 外部链接: www.baidu.com/”>百度一下
• 内部链接:目标网页

4.1.3 链接标签的显示特点

显示特点:

• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色)

4.1.4 链接标签的target属性

属性名: target

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

4.1.5 链接标签小结

• 如果需要实现点击之后，从一个页面跳转到另一个页面，需要使用什么标签?
  链接标签:a标签
• 通过什么属性可以设置a标签的到底跳转去哪里?.href属性
• 通过什么属性可以设置a标签的跳转方式?取值有哪些?
  • target属性
    • 取值1: self:在当前窗口中跳转·
    • 取值2:_blank:在新窗口中跳转

4.1.6 空标签

代码:空链接

功能:

• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置