HTML-常用基础标签2
一、图片标签
1、含义：让页面中显示一张图片
2、基本语法：
<img src=“图片路径”>
图片路径分为两种：相对路径、绝对路径
（1）相对路径：相对于文件和文件夹之间的关系去查找图片
- 同级目录：当前图片和页面文件在同一目录中
- 下级目录：图片所在的文件夹和页面文件在同一目录中
- 上级目录：页面文件所在的文件夹和图片在同一目录中
<!-- 同级目录 -->
<img src="image.jpg" >
<!-- 下级目录 -->
<img src="img/image.jpg" >
<!-- 上级目录 -->
<img src="../image.jpg" >
<img src="../img/image.jpg" >
（2）绝对路径：一个完整的地址，从某一个盘符或者是从互联网地址开始
<!-- 写法一 -->
<img src="http://www.baidu.com/pic.png">
<!-- 写法二 -->
<img src="D://study/img/pic.png">
3、img标签的属性
（1）alt属性：当图片为破损文件/网速加载失败，图片加载失败的时候显示的提示文本
<img src=“图片路径” alt=“图片不显示之后的提示信息">
（2）title属性：只要鼠标放在图片位置区域时提示的文本
<img src=“图片路径” title=“鼠标悬停上去之后的提示信息”>
alt属性和title属性的区别（面试题）：
相同点：都是提示文本
不同点：
（1）alt属性只有浏览器加载不成功的时候才显示，且文本能选中，占有位置
（2）title属性是鼠标放在上面的时候的提示文本，不占位置
二、超链接标签
作用1：页面跳转功能
1、基本语法：
<a href="路径：页面的路径">文本/图片</a>
2、属性：
（1）title属性：鼠标悬停上去之后的提示信息（同img标签的title属性一致，这里不做赘述）
<a href=“路径” title=“鼠标悬停上去之后的提示信息”>内容</a>
（2）target属性：规定在何处打开文档
- 属性值1：target="_self" --->在当前窗口打开，默认值
- 属性值2：target="_blank" --->在新窗口打开
<a href="http://www.baidu.com" target="_self">跳转到百度</a>
<a href="10_标签7.html" target="_blank">图片</a>
<a href="#">返回顶部</a>
作用2：锚点跳转功能
1、含义：使用的a标签的锚点跳转功能，主要实现同一个页面中的不同区域的跳转、置顶
2、基本语法：
<!-- 点击区域 : -->
<a href=”#锚点名字”>文本/图片</a>
<!-- 跳转区域 : -->
<div id=”锚点名字”></div>
3、应用场景：通讯录、小说目录、百度百科、楼梯层等
三、div/span标签
1、div标签
（1）含义：没有具体含义，用来划分页面的区域，类似生活中看到的警戒线
（2）语法格式：
<div>文本</div>
（3）作用：用于区块的划分
注意：div标签默认纵向排列，若要横向排列，则需要使用浮动
2、span标签
（1）含义：没有具体含义,当与 CSS 一同使用时，元素可用于为部分文本设置样式属性
（2）语法格式：
<span>文本</span>
（3）作用：用来进行独立文本的修饰
注意：span标签默认横向排列，但其并不能实现宽度和高度
四、文本修饰标签
1、含义：修饰文本的颜色、大小、字体样式（h5不常用）
2、基本语法：
<font color="颜色" size="尺寸大小1_7" face="字体">文本</font>
3、基本属性：
（1）color：用来对某段文本进行颜色修饰，属性值即为颜色的英文字母
（2）size：用来对某段文本进行大小修饰，属性值为1-7，字体大小逐渐增大，3位默认字体
（3）face：用来对某段文本进行字体样式修饰，属性值为各个字体样式，如：楷体、隶书、宋体、微软雅黑等，其中微软雅黑为默认字体
五、特殊符号
注意：
1、标签符号后面都带有分号
2、空白符存在两种格式：半角空格、全角空格，开发中经常使用全角空格
（1） ===半角空格---一个英文字母的大小
（2）  ===全角空格---一个中文汉字的大小
