Day01Html标签学习

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 文本格式化标签的介绍

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

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

标签	说明
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属性