互联网进入21世纪，早已进入千家万户，再也不是买个网速以k计算的时代了。
早期的互联网因为网速和配置的问题大都只有文章，没有图片，缺乏美感。2000年以后图片才慢慢的多了，直至近几年，随着4g时代的到来，互联网已经不能没有图片了。
图文并茂的网页让人有阅读的欲望！
HTML图像
明白了图片的重要性，我们来学学如何在网页中插入图片使文章更美观。
HTML网页使用<img>标签来定义图片。img标签有两个常用的属性:src和alt。
图片属性:src和alt
src指的是source，用来定义图片的地址。必须的属性。
alt用来为图片定义可替换文本。什么意思呢，就是说如果浏览器载入图片失败，也就是显示不出来图片，这时候就会显示alt所定义的文本。建议的属性。
好了，说了一筐罗干巴巴的文字，我们来看看究竟如何使用img标签。
[code]
<html>
<head>
<title>html图片</title>
</head>
<body>
<h1>HTML图片</h1>
<p>下面是img图片的使用方法</p>
<img src="wp-content/uploads/2018/03/wp-1521199091410370465614.png" alt="博客log">
<p>明月照沟渠</p>
</body>
</html>
[/code]
我这里的图片使用的是我博客首页log，你也可以用src定义自己的图片。
可能有童鞋会说图片也太小了吧，怎么能把它变得大一点，这就要说另外两个属性:width和height。
图片属性：width和height
width和height用来设置图片的宽度和高度。width表示宽度，height表示高度。
我们把上面的代码原封不动的移到下面，并在img标签中添加两个新的属性width和height。
[code]
<html>
<head>
<title>html图片</title>
</head>
<body>
<h1>HTML图片</h1>
<p>下面是img图片的使用方法</p>
<img src="wp-content/uploads/2018/03/wp-1521199091410370465614.png" alt="博客log">
<p>明月照沟渠</p>
<img src="wp-content/uploads/2018/03/wp-1521199091410370465614.png" alt="博客log" width="300" height="200">
</body>
</html>
[/code]
这里将width设置为300像素，height设置为200像素，你也可以改变数字来观察一下。
建议每次插入图片都指定高度和宽度，以便保证网页的美观性，否则可能出现图片占满整个网页或图片太小看不到的情况。
暂无评论内容