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

一:图像

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>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值