免费资源
享你所想

从零开始自学HTML(4):HTML图片

互联网进入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像素,你也可以改变数字来观察一下。

建议每次插入图片都指定高度和宽度,以便保证网页的美观性,否则可能出现图片占满整个网页或图片太小看不到的情况。

赞(0) 打赏
未经允许不得转载:无梦博客 » 从零开始自学HTML(4):HTML图片
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏