HTML基础（二）：标签学习

排版标签

标题标签

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

• 代码：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

• 语义：1～6级标题，重要程度依次递减
• 特点：
  • 文字都有加醋
  • 文字都有变大，从h1->h6文字逐渐减小
  • 独占一行

段落标签

• 场景：在新闻和文章的页面中，用于分段显示
• 代码：<p>我是一段文字</p>
• 语义：段落
• 特点：
  • 段落之间存在间隙
  • 独占一行

换行标签

• 场景：让文字强行换行显示
• 代码：<br>
• 语义：换行
• 特点：
  • 单标签
  • 让文字强行换行

水平线标签

• 场景：分割不同主题内容的水平线
• 代码：<hr>
• 语义：主题的分割转换
• 特点：
  • 单标签
  • 在页面中展示一条水平线

文本格式化标签

• 场景：需要让文字加醋、下划线、倾斜、删除线等效果
• 代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

表示的强调语气更强烈

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

• 语义：突出重要性的强调语境

媒体标签

图片标签

• 场景：在网页中显示图片

• 代码：<img src=“” alt=“”>

• 特点：

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

• 图片标签介绍
  

• 属性注意点

  • 标签的属性写在开始标签内部
  • 标签上可以同时存在多个属性
  • 属性之间以空格隔开
  • 标签名与属性之间必须以空格隔开
  • 属性之间没有顺序之分

图片标签的alt属性

• 属性名：alt
• 属性值：替换文本
  • 当图片加载失败时，才显示alt文本
  • 当图片加载失败时，不会显示alt文本

图片标签的title属性

• 属性名：title
• 属性值：提示文本
  • 当鼠标悬停时，才显示文本
• 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
• 代码：<img src="pulpit.jpg" title="title文本" >

图片标签的width和height属性

• 属性名：width和height
• 属性值：宽度和高度（数字）
• 注意点
  • 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
  • 如果同时设置了width和height，若设置不当此时图片可能变形
• 代码： <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

路径

绝对路径

• 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
• 例如：
  • 盘符开头：D:\image\cat.jpg
  • 完整的网络地址：https://m.runoob.com/html/html-images.html

相对路径

相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：

• 同级目录：当前文件和目标文件在同一目录中。
  • 代码：直接写出目标文件的名字
  • <img src="目标图片.jpg" >
  • <img src="./目标图片.jpg" >
• 下级目录：目标文件在下级目录中
  • 代码：文件夹的名字/目标文件名字
  • <img src="image/目标图片.jpg" >
• 上级目录：目标文件在上级目录中
  • 代码：到上级目录/目标文件。如果是上两级，则需要使用 “../ ../”
  • <img src="../image/目标图片.jpg" >

音频标签

• 场景：在页面中插入音频
• 代码：<audio src="./music.mp3" controls ></audio>
• 常见属性:

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

• 注意点：音频格式目前支持3种格式：MP3、Wav、Ogg

视频标签

• 场景：在页面中插入视频
• 代码：<video src="./video.mp4" controls ></video>
• 常见属性:

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

• 注意点：MP4、WebM、Ogg

链接标签

• 场景：点击以后从一个页面跳转到另一个页面
• 称呼：a标签、超链接、锚链接
• 代码： <a href="url">链接文本</a>
• 特点：
  • 双标签，内部可以包裹内容
  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

开发初期不知道链接写什么的可以用#代替
<a href="#">链接文本</a>

链接标签的target属性

• 属性名：target
• 属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

• 代码： <a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>