七、HTML的标签（三）

1 使用<a>标签，链接到另一个页面

a标签 anchor 锚的意思，超级链接的缩写

href hypertext reference 超文本引用，值为跳转连接的地址

target 表示是否在新标签页打开链接，属性值”_blank”表示在新窗口打开

title 设置鼠标悬停文本

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="https://mango185.github.io/"  title="点击进入Mango的小站">click here!</a>

click here!

上面例子作用是单击click here!文字，网页链接到https://mango185.github.io/这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

注意：只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）。

a 的页面内锚点跳转：id名和name名在网页里必须是唯一的。
添加锚点的方法：

（1）给对应位置的标签加一个id属性，属性值就是id名 <h2 id=”shenghuo”>生活经历</h2>
在需要添加锚点的位置，加入一个a标签，不用书写href属性，添加一个name，命名与id一致。<a href=”#shenghuo”>个人生活</a>
（2）   <a href=”#shenghuo”>个人生活</a>
       <a name=”shenghuo”> </a>
       h2>生活经历</h2>
跳转锚点：将href属性值书写为#id名，#name名
（3）在网页111.html中点击“王宝强主要作品”跳转到网页222.html中标题“王宝强主要作品”的位置”：
     在网页111.html中  <a href=”222.html#zuopin”>王宝强主要作品</a>
     在网页222.html中  <h2 id=”zuopin”>王宝强主要作品</h2>

1.1 a标签的伪类

a标签有4个特殊属性和状态，根据用户的不同行为，显示不同的状态

a:link        a 标签未点击前状态
a:visited     a 标签点击后的状态
a:hover      a 标签悬停状态
a:active      a 标签激活状态

伪类和类.box的区别：

伪类和类一样也有权重，和类权重相同
伪类样式不能直接加载，只有用户触发相应行为，a标签才能渲染对应的效果
.box类样式直接渲染在浏览器不需要用户干预

1.2 4个伪类顺序不能颠倒

a:link  a:visited  a:hover  a:active

4个伪类顺序不能颠倒，颠倒之后不能正常渲染效果

因为4个伪类也有权重，权重相同，后面的会层叠掉之前的

1.3 应用

在使用a标签一般只需要渲染a:hover，其他的样式和a标签相同

a标签设置样式属性都将加载在4个伪类身上

有特殊样式再用伪类层叠（只需要将伪类样式书写在伪类选择器上）

a标签是行内元素，想设置宽高，必须转块。

a标签颜色和下划线必须单独设置，不能从祖先继承

a{
	/* a标签是行内元素，想设置宽高，必须转块 */
   display: block;
   width: 200px;
   height: 80px;
   background-color: lightblue;

   /* 块级元素水平居中 */
   margin: 50px auto;

   /* 文字属性   */
   font-size:30px;
   text-align:center;
   line-height:80px;         
}
a:hover{
	/* 伪类只需要书写特殊样式 */
	background-color: pink;
	color:#fff;
}

2 在新建浏览器窗口中打开链接

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：

<a href="目标网址" target="_blank">click here!</a>

3 认识<img>标签，为网页插入图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

讲解：

1、img标签
image，图片的缩写，表示定义一个图像，相当于一个特殊的文本
  可插入图片的类型：jpg、png、gif。
2、img标签的属性：
	① src：标识图像的位置；
	② alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
	③ title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
	④ width：表示图片的宽度     width=”200”px可以不写，高度也可以不写，会同比例缩放
	⑤ height：表示图片的高度
	⑥ border：边框属性，它的值可以设置边框的厚度

4 路径

路径就是我们查找相关文件的位置的方法：相对路径、绝对路径

（1）相对路径：

查找文件时，从HTML出发，查找文件的位置。

同级查找：直接书写文件名字（包括文件名和扩展名）

子级查找：进入文件查找过程，书写对应的文件夹的名字，后面用/表示文件夹，再书写文件名和扩展名。

上级查找：文件放在html上级的文件夹里，需要先退出当前级别，退回到上一级文件夹，方法就是用../表示退回，退出几级就书写几次。后面直接书写指定的文件名和扩展名

<img src=”images/cat.jpg” alt=””/>     子级查找
<img src=”../cat1.jpg” alt=””/>          上级查找 
<img src=”../../images/cat2.jpg” alt=””/>  子级和上级综合查找
   注意：不能夸盘符进行查找

（2）绝对路径

绝对路径是从盘符出发寻找目标文件

以http：//开头的路径也是绝对路径

实际工作当中不推荐使用从盘符出发的绝对路径，因为它不可移植、不可移动

<img src=”C:/images/cat.jpg” alt=””/>     从盘符查找
<img src=”http://bssl.duitang.com/uploads/blog/201312/04/20131204184148_hhXUT.jpeg” alt=””/>  子级和上级综合查找

常用：相对路径和网址形式的绝对路径