您的位置：首页 > Web前端 > HTML

HTML基础介绍二（图像和超级链接）

2015-07-08 15:48 567 查看

一：图像

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航