首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小白前端入门笔记(八),怎么在网页中插入图片?

小白前端入门笔记(八),怎么在网页中插入图片?

作者头像
TechFlow-承志
发布于 2021-01-25 06:56:34
发布于 2021-01-25 06:56:34
2.2K00
代码可运行
举报
文章被收录于专栏:TechFlowTechFlow
运行总次数:0
代码可运行

大家好,欢迎来到freecodecamp HTML专题第8篇。

今天的挑战关于img标签。

背景知识

你可以通过使用img标签在你的网站当中插入图片,并且可以用src属性指定图片的地址。

这是一个例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img src="https://www.freecatphotoapp.com/your-image.jpg">

注意,img元素是self-closing的标签,也就是说它不需要再单独写一个closing tag。

所有的img元素都必须要一个alt属性,alt属性当中的文本是用来给屏幕阅读器的(视力残障人士),并且可以在图片无法显示的时候用来填充。

注意:

如果图片仅仅用来装饰的,可以使用空字符串来填充alt属性。

理想情况下alt属性当中不应该包含特殊字符,让我们再来看一个包含了alt属性的例子吧:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">

题意

让我们试着在网站当中加入一张图片吧。

在现有的main元素当中,p标签之前,插入一个img元素。并且将src属性设置为:https://bit.ly/fcc-relaxing-cat。

最后,不要忘记了给img元素加上alt属性。

要求

  1. 你的页面应该有一张图片
  2. 你的图片标签需要有一个src属性指向kitten图片
  3. 你的图片标签当中应该有alt属性,并且不为空

编辑器

解答

很简单,我们只需要按照img的格式要求来添加一个img标签即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<h2>CatPhotoApp</h2>
<main>

  <img src="https://bit.ly/fcc-relaxing-cat", alt="hello">
  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~

文章就到这里,给个三连再走吧~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Coder梁 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小白前端入门笔记(9),在网页中插入超链接
a元素需要一个网站地址作为目的地,这个网址叫做href属性。我们同样也需要一段文本,来作为超链接的提示语,我们来看一个例子:
TechFlow-承志
2021/02/08
9460
小白前端入门笔记(13),怎么将图片设置成超链接?
大家好,欢迎来到freecodecamp HTML专题,今天是本专题第13篇文章。
TechFlow-承志
2021/02/08
1.5K0
小白前端入门笔记(12),设置哑链接
看起来好像有些不可思议,但是其实在学习了JavaScript之后,你会发现这其实是常态。因为JavaScript可以动态地修改HTML以及CSS的内容,所以我们可以在我们还不知道具体链接之前就设置好a标签。
TechFlow-承志
2021/02/08
3800
小白前端入门笔记(10),怎么设置网站内部的超链接?
a元素除了可以指向外部的一个网站之外,同样也可以用来跳转到网站内部的某一个区域。这一点大家都应该体会过,当我们看一篇长文博客,我们经常通过点击小标题的方式超链接到文章当中具体的位置。
TechFlow-承志
2021/02/08
1.4K0
小白前端入门笔记(14),ul标签创建无序list
HTML当中有一个特殊的元素,它可以用来创建一个无序数组(unordered lists),或者叫做弹孔风格的序列。
TechFlow-承志
2021/02/08
8030
小白前端入门笔记(11),如何嵌套使用a标签?
让我们来拆解一下上面的代码,我们首先可以看到一个p标签,当中的内容是:<p> Here's a ... for you to follow. </p>。接着我们发现一个a标签嵌入在了p标签当中,a标签有的target属性等于"_blank",这意味着当我们点击这个标签的时候,它会打开一个新的网页tab。href属性和之前一样,指向的是这个标签跳转的链接。
TechFlow-承志
2021/02/08
1.2K0
小白前端入门笔记(五),使用注释
一方面注释可以把一些暂时用不到,但是以后随时可能用到的代码保留起来,是它不会影响运行结果。另外一方面注释也可以给开发人员一些提示,更好地理解代码的逻辑。这段话用中文说起来还是挺别扭的,因为里面的修饰和转折比较多,英文就更加好懂一些。英文是这样说的:Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.
TechFlow-承志
2021/01/25
3500
小白前端入门笔记(五),使用注释
小白前端入门笔记(七),HTML5中的main标签
首先声明,我们的文章跳过了一篇,也就是freecodecamp这个网站上第7个挑战:Basic HTML and HTML5: Delete HTML Elements,即删除指定的HTML元素。由于这个挑战实在是太简单了,就不单独写一篇文章占据篇幅了。这一篇文章写的是它下一个挑战:Basic HTML and HTML5: Introduction to HTML5 Elements,HTML和HTML5的基础介绍。
TechFlow-承志
2021/01/25
1.1K0
小白前端入门笔记(七),HTML5中的main标签
小白前端入门笔记(六),活用注释
当我们在html标签当中使用注释的时候,需要牢记它一共有两个标签构成。<!--开启一段注释,-->结束一段注释,缺一不可。
TechFlow-承志
2021/01/25
2950
小白前端入门笔记(六),活用注释
小白前端入门笔记(15),设置有序序列
有序序列通过<ol>标签作为opening tag,然后和<ul>标签一样,通过<li>标签来设置序列当中的元素。最后,通过</ol>closing tag来表示结束。
TechFlow-承志
2021/02/08
3960
小白前端入门笔记(18),form表单的简单用法
几乎所有用户数据的提交和上传都是通过表单来进行的,比如用户注册的时候,我们填写的账号、密码、邮箱等信息,最后点击提交的时候提交的内容其实就是一个表单。
TechFlow-承志
2021/03/09
7030
小白前端入门笔记(四),填充测试文本
web开发人员传统上会使用lorem ipsum文本来作为测试排版时的填充文字,这个lorem ipsum大家看起来很陌生,这个是非常正常的。我查了一下,它是从一篇著名的文章"Cicero of Ancient Rome"上随机抓取的。至于文章具体内容是什么,这并不重要,大家可以忽略,只需要知道它通常被用来排版即可。
TechFlow-承志
2021/01/25
1.2K0
小白前端入门笔记(四),填充测试文本
小白前端入门笔记(19),form表单里的加入提交按钮
在上一次挑战当中我们尝试了给一个input元素添加form表单,但是我们只是添加了表单是不够的,用户填好了信息但是少了一个触发上传的按钮。所以今天我们就来说说怎么给form表单添加一个提交按钮。
TechFlow-承志
2021/03/11
1.6K0
小白前端入门笔记(17),在input标签内设置默认文本
默认文本的英文叫做placeholder text,placeholder是预留位置的意思。这个词在编程当中经常出现,有一些变量或者是工具库支持我们在正式赋值之前设置一个默认值,或者是一个占位符。比如TensorFlow框架当中就经常用到,它们虽然用途不完全相同,但是核心”占位“的意思是一样的。
TechFlow-承志
2021/03/09
1.7K0
小白前端入门笔记(17),在input标签内设置默认文本
小白前端入门笔记(16),form表单创建文本输入框
我们在网站上注册过账号,当我们注册账号的时候我们需要填写很多内容。比如我们的账号名称,我们的密码等等。
TechFlow-承志
2021/03/09
9230
小白前端入门笔记(16),form表单创建文本输入框
小白前端入门笔记(21),表单里如何添加单选按钮?
大家好,欢迎来到freecodecamp HTML专题第21篇,我们今天来聊聊单选按钮的使用。
TechFlow-承志
2021/04/16
2K0
小白前端入门笔记(21),表单里如何添加单选按钮?
勇闯28个关卡学会HTML与HTML5基础
我自学前端已经有6年多了,自问当时学前端是没有系统化学习的。一开始边看文档,连滚带爬学HTML和CSS排版,然后深入研究JavaScript,因为当时最火的就是JQuery,所以用了很长一段时间的JQ。
三钻
2020/10/29
1.5K0
勇闯28个关卡学会HTML与HTML5基础
小白前端入门笔记(三),最常用的p标签
对于网站和网页来说,p元素标签应该是使用范围最广的标签了。p是paragraph也就是段落的缩写。
TechFlow-承志
2021/01/22
8060
HTML入门案例Demo【猫咪相册】
案例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CatPhotoApp</title> </head> <body> <main> <h1>CatPhotoApp</h1> <section> <h2>Cat Photos</h2> <!-- TODO: Add link to cat photos -->
百思不得小赵
2023/01/03
6620
HTML入门案例Demo【猫咪相册】
前端开发规范
省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址
PM吃瓜
2019/08/12
1.1K0
前端开发规范
推荐阅读
相关推荐
小白前端入门笔记(9),在网页中插入超链接
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档