HTML基础介绍二(图像和超级链接)

原创 2015年07月08日 15:48:45

一:图像

1.      添加图片

<img src="图片名称">

Src属性指定图像的具体位置。

<img src="img/2.jpg"/>

2.      宽度属性

<imgsrc="img/3.jpg" width="100" /><br> 大小是固定的

  <img src="img/3.jpg"width="80%"/> 图像宽度占浏览器宽度的80%,大小是不固定的。

设置网页时,为了有意的增大或减小图像的宽度和高度,才指定具体的值。

3.      高度属性

align 的值共分为五种,分别是top顶,right右,bottom底,left左,middle中间。

<imgsrc="img/4.gif" width="100" height="100"  align="top"/> 图像与文本top对齐<br/>

<imgsrc="img/4.gif" width="100" height="100"algin="middle"/>图像与文本middle对齐<br/>

4.      边框

<img src ="img/3.gif"border="0px"/>

5.      提示文字

制作网页时,为了避免图像不能正常显示的情况,都要设置alt参数。

  <img src="img/3.gif"alt="HTML教程"/>

6.      水平边距hspace和垂直边距vspace

<imgsrc="img/3.gif" width="50px" height ="50px"hspace="10px" vspace="10px"align="left"/>

二:超级链接

1.<a></a>标签是双标签,文字内容放置在<a></a>之间,有一个href属性,它的值表示链接的地址,可以使网页地址,图像地址,影视文件。

<ahref="">文字链接</a>

 <ahref="http://www.xinhua.org">新华网</a>

 <a href="2-1.html">HTML教程</a>

 <a href="3.rar">下载文件</a>

2.图像链接

<ahref="http://www.xinhua.org"><imgsrc="img/3.gif"/></a>

3.锚点链接

锚点由name属性来创建一个命名锚记,实现同一个网页内快速跳转。创建锚点

<aname="one">第一段</a>

然后在链接中指向这个锚,但要在其名前加上”#”。

<ahref="#one">第一段</a>

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

4.超级链接的路径

绝对路径:带域名的文件的完整路径,通常使用http://

<ahref=”http://www.xinhua.org”>新华网</a>

相对路径:<a href=”2_img.html”返回上一页</a>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <img src="图片名称">
  <img src="img/2.jpg"/>
  <img src="img/3.jpg" width="100" /><br>
  <img src="img/3.jpg" width="80%"/>
  <img src="img/4.gif" width="100" height="100" 
  align="top"/> 图像与文本top对齐<br/>
  <img src="img/4.gif" width="100" height="100" algin="middle"/>
  图像与文本middle对齐<br/>
  <img src ="img/3.gif" border="0px"/>
  <img src="img/3.gif" alt="HTML教程"/>
  <img src="img/3.gif" width="50px" height ="50px" hspace="10px" vspace="10px"align="left"/>
  <a href="">文字链接</a>
  <a href="http://www.xinhua.org">新华网</a>
  <a href="2-1.html">HTML教程</a>
  <a href="3.rar">下载文件</a>
  <a href="http://www.xinhua.org"><img src="img/3.gif"/></a>
  <a name="one">第一段</a>
  <a href="#one">第一段</a>
  <a name="one">第一段内容</a>
 </body>
</html>


 

相关文章推荐

Linux基础(一)安装与建议

一、安装远程登录管理工具 (一)配置网卡 1、桥接:利用真实网卡 1)虚拟机就类似于一台真实的计算机 2)占用,容易产生网段冲突。 2、NAT:vmnet8 1...

WebService系列博客{一}[发布、调用一个简单的服务]

1、简单阐述原理 WebService是对于Socket程序的封装。简单的实现客户端服务器的访问。也就是将下图的Socket程序封装了起来更加简单的实现。请看原理图: 2、准备条件: ...

HTML语言基本结构主体标记格式超级链接和列表

HTML语言 一、基本结构 1、网页文档标记                    格式:内容 2、网页的题头部分                 格式:头部的内容 3、 网页...
  • leo__ho
  • leo__ho
  • 2011年09月26日 21:01
  • 4072

【转】HTML代码实例:详细讲解超级链接

[转]http://www.jb51.net/web/12412.html       超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的...

HTML_页面中的超级链接

HTML_页面中的超级链接

HTML 超级链接详细讲解

超级链接 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。...

html5中如何添加超级链接

HTML 5 标签 定义和用法 标签定义超链接,它用于从一个页面连接到另一个页面。 HTML 4.01 与 HTML 5 之间的差异 在 HTML 4.01 中, 标签既可以是超链接,也可以...

HTML 超级链接 应用

  • 2011年06月30日 15:46
  • 696KB
  • 下载

02-HTML 基本骨架 、基本语法特性、 h 和 p 标签、图片、超级链接

一、HTML 的基本骨架 1.1 HTML 骨架 二、基本语法特性 三、h 和 p 标签 四、图片 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML基础介绍二(图像和超级链接)
举报原因:
原因补充:

(最多只允许输入30个字)