在了解图像和链接之前,我们要先了解一下URL
URL-Uniform Resource Locator
- 统一资源定位器,用来标示网络中的任何资源,也被称为网址。
- URL即路径,用于定位万维网(web)上的文档。
- URL在web页面主要有三种形式
-
绝对路径:文件从最高级目录下开始的而完整的路径,即完整的URL。
http://www.baidu.com/img/tu.png
-http://协议名
-www.baidu.com:域名
-img:目录
-tu.png:具体的文件
-
相对路径:指文件的位置是相对与当前文件的位置,可以从当前文件出发找到该文件的路径,如下图所示
相对路径1.png
相对路径2.png - 根相对路径:根相对路径以 “/” 开头,路径是从当前文件的根目录开始计算的,所以如果目录结构过深,用相对路径就会好一些。
HTML 图像
- 图像格式
- JPEG(Joint Photopraphic Experts Group)采用有损压缩算法,压缩比较大。
- GIF(Graphics Interface Format)采用256色的方法来压缩图像,会有较大的失真。主要用于线条为主的图像,GIF支持动画和透明图像。
- PNG(Portable Network Graphic)采用无损压缩,有8位、24位、32位三种形式。支持透明色,但不支持动画。
- 图像标签
<img>
-
<img>
是空标签,它质包含属性 - 必须属性src,src的值是图像的URL地址,图像的定义语法是:
<img src="url"/>
- 常用属性width、height,用来确定图像的宽和高。宽和高只需要确定一个就可以了,否则可能会造成图像的失真。例如
<img width="300px" src="img/tu.jpg">
HTML 连接
- 超链接可以是一个字,一个词,一句话,或者一个图像等,你可以点击这些内容来跳转到新的文档或者文档的其他部分。
- 使用a元素可以创建一个超链接,语法如下:
<a href="url" target="">link text</a> -href:链接URL告知当前标记要跳转的地方 -target:目标,可取值_blank,_self等,可以选择用什么方式打开链接 -name:设置锚点
示例:
<a href="http://www.baidu .com.cn" target="_blank">在新窗口打开百度</a>
- 链接的几个形式
- 目标文档为下载资源
<a href="xx.zip">下载</a>
- 电子邮件链接
<a href="mailto:2298520471@qq.com.cn">发送邮件</a>
- 返回页面顶部
<a href="#">返回顶部</a>
- 链接到JavaScript
<a href="javascript:...">JS 功能</a>
- 锚点
- 锚点是文档中的某行的一个记号,用于连接到文档中的某个位置。
- 示例如下
`<a name="here"></a> <br/><br/> <br/><br/> <br/><br/>`
<a href="#here">回到锚点</a>
网友评论