HTML图像和超链接

1、网页中插入图片标签<img/>

格式:<img src="URL" alt="名称" />
示例:<img src="img/1.jpg" alt="荷花" />
属性:

  • src:图片的url路径,也就是来源,包含路径与名称
  • alt:提示文字,用于鼠标悬停或者图片加载不出来的时候显示,常用于SEO
  • width:图片宽度,绝对宽度像素表示,相对宽度百分比表示,为了不失真,通常只设置实际宽度像素
  • height:图片高度,绝对高度像素表示,相对高度百分比表示,为了不失真,通常只设置实际高度像素
  • border:边框
  • align:对齐方式,取值:top(顶)、right(右)、bottom(底)、left(左)、middle(中间)
  • vspace:垂直边距,即定义图片顶部与底部的空白
  • hspace:水平边距,即定义图片左侧与右侧的空白

2、超链接—网页的灵魂

(1)基本格式
<a href="URL" target="窗口名称" title="指向连接显示的文字">超链接名称</a>

(2)属性
href:链接指向的目标地址
target:用于指定打开链接的目标窗口,取值如下:

  • _blank:在新窗口中打开
  • _parent:在上一级窗口,即父窗口中打开,框架中常用
  • _self:当前窗口中打开,一般不设置,默认选项
  • _top:最顶级的浏览器窗口中打开,忽略任何框架

(3)链接路径分析
URL(Uniform Resource Locator)中文名字为“统一资源定位器,即请求资源的地址。
链接路径分类:

  • 绝对路径 如:http://www.yanfadi.com
  • 相对路径 如:new/index.html
  • 根路径 如:file:根文件夹

(4)链接种类

  • 文字链接 例如:<a href="网站">紫沐兜</a>
  • 图像链接 例如:<a href=”网站><img src="img/logo.png" /></a>
  • 锚点链接:链接到当前网页的任意位置,指向锚时需加“#”
<a href="#one">第一段</a>

<a name="#one">第一段内容</a>

//E-mail链接 例如:
<a href="mailto:865207900@qq.com">联系站长</a>

// FTP链接 例如:
<a href="ftp://主机地址">进入</a>