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

来源:互联网 发布:单片机程序员招聘 编辑:程序博客网 时间:2024/06/06 01:23

一:图像

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>


 

0 0