4. HTML图像与链接

4.1 图像标签

（1）标签

<img src="图像URL"/> 单标签

src是<img>标签的必须属性，他用于指定图像文件的路径和文件名，所属属性：简单理解为就是属于这个图像标签的特性

alt:文本，替换文本。图像不能显示的文字 <img src="11.png" alt="1" />

title:文本，提示文本。鼠标放在图像上，显示的文字 <img src="1.png" alt="1" title="预推免信息" />

width:像素，设置图像的宽度

height:像素，设置图像的高度

border：像素，设置图像的边框粗细

（2）图像标签属性的注意点：

①图像标签可以拥有多个属性，必须写在标签名的后面

②属性前后不分前后顺序，标签名与属性、属性与属性之间均以空格分开

③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”

4.2 路径注意要点：

（1）目录文件夹：就是普通的文件夹，里边存放着我们做页面所需的相关材料，比如图片、CSS、JS、HTML等

（2）根目录：就是打开文件夹的第一层根目录

（3）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，简单来说就是图片相对于Html页面的位置

①同一级路径：图像文件位于HTML文件同一级，如<img src="baidu.gif"/>

②下一级路径：/ 图像位于HTML文件下一级，如<img src="images/baidu.gif"/>

③上一级路径： ../ 图像位于HTML文件上一级，如<img src="../../public/images/baidu.gif"/>

（4）绝对路径：指目录下的绝对地址，直接到达目标位置，通常是从盘符开始的路径。例如："D:\web\img\logo.gif"或者完整的网络地址"http://www.itcast.cn/images/logo.gif"

4.3 超链接标签

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面

①语法格式：<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

②属性：href：用于指定链接目标的url地址，（必须属性）当标签应用herf属性时，它就具有了超链接的功能

target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口的打开方式

③链接分类：外部链接：<a herf="http://www.baidu.com">百度</a>

内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html"></a>

空链接：如果当时没有确定链接目标时，<a href="#">首页</a>

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可添加超链接

4.4 锚点链接

点我们点击链接，可以快速定位到页面中的某个位置

①在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二级</a>

②找到目标位置标签，里边添加一个 id 属性，如 <h3 id="two">第二集</h3>

4.5 注释标签

<!-- 注释内容 --> 快捷键为 ctrl+/

4.6 特殊字符

可以实现添加多个空格