【持续更新】HTML第四天（图片与链接）

图片标签 

在 HTML 标签中， 标签用于定义 HTML 页面中的图像； 

具体实现：
      <img src="图像URL" /> 

解释： src 是标签的必须属性，它用于指定图像文件的路径和文件名；

所谓属性：简单理解就是属于这个图像标签的特性； 

• src 图片路径 必须属性 

• alt 文本 替换文本，图片不能显示时的文字 

• title 文本 提示文本，鼠标放到图像上显示的文字 

• width 像素 设置图片宽度 

• height 像素 设置图片高度 

• border 像素 设置图片边框粗细 

 图像标签注意点： 

1. 图像标签可以拥有多个属性，必须写在标签名的后面。 
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 
3. 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。 

路径 

路径分为绝对路径和相对路径 

相对路径就是一引用文件为参考基础而建立的目录路径，对于图片来说，就是相对于html页面的位置； 

• 同一级路径 图像文件位于HTML文件同一级<img src="baidu.gif> 
• 下一级路径 图像文件位于HTML文件下一级<img src="images/baidu.gif> 
• 上一级路径 图像文件位于HTML文件上一级<img src="../baidu.gif> 

特点：相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置； 

绝对路径 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 

 例如，“D:\web\img\logo.gif”或完整的网络地址“www.itcast.cn/images/logo… 

链接标签 

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

 属性： 

1. href：用于指定链接目标的url地址 

2. target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开 

3. #：空链接

链接分类： 

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。 

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

3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。 

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

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

6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.  

   - 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如 <a href = "#two">第2集<a>  
   - 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3> 
   

注释 

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签；

HTML中的注释以“<!--”开头，以“ -->”结束；快捷键: ctrl +  / ；

特殊字符： 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代： 

     空字符（空格）	 
<    小于号	        &lt;
>    大于号            &gt;
&    和号		&amp; 

常用的就是空格 、大于号、 小于号 这三个， 其余的使用很少，如需其他符号，自行查阅就行了；