本文接着上一篇,继续介绍body标签中常用的标签
1)图形标签<img>
图形标签用于添加一幅图形到网页中,在使用这个标签时,并不是说像其它标签那样把图形放到开始和闭合标签
之间,而是把图形的地址放到标签的属性当中。并且img标签没有对应的独立的闭合标签,使用时采用 <img />的形式。
img标签有几个属性可用,包括src、alt,width、height等,具体可以参照参考文献1,这里最重要的是src属性,它指明
浏览器该到什么位置来寻找图片。下面是一个简单的示例及效果图:
<!DOCTYPE html>
<html>
<head>
<title>use image example</title>
</head>
<body>
<h3>This is an image example!</h3>
<img src="http://ittopic.gotoip1.com/qee/wordpress/wp-content/uploads/2013/09/sl68-800x450.jpg" />
</body>
</html>
正如powerpoint中可以从一张卡片链接到另外一张卡片,网页中也支持类似的跳转,其中主要的功臣就是<a>标签。
<a>标签有一个href属性,该属性的值就是保存的要跳转的网址,而在<a>和</a>之间的内容就是在网页中显示的文本。
当鼠标移动到文本上时,鼠标变成了手的形状,点击这段文本,浏览器就会跳转到href指定的网址上去。下面是示例代码
及效果图:
<!DOCTYPE html>
<html>
<head><title>jump to a new website</title></head>
<body>
<a href="http://news.163.com">网易新闻</a>
</body>
</html>
跳转到指定的网址。示例代码和效果图如下:
<!DOCTYPE html>
<html>
<head>
<title>use image example</title>
</head>
<body>
<a href ="http://news.163.com">
<img src="http://ittopic.gotoip1.com/qee/wordpress/wp-content/uploads/2013/09/sl68-800x450.jpg" />
</a>
</body>
</html>
当鼠标移动到图片上时,在chrome浏览器的左下角就会显示图片对应的网址。
需要注意的是href的值需要加上http:// 的头,要不不会跳转到正确的网址。
参考文献: