Images · 图片
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 此页面需较新浏览器（支持 SharedArrayBuffer）。请升级 Chrome、Edge、Firefox 或 Safari 至最新版本。
English
Images
- Show a picture with the
<img>tag. <img>is a single tag — no closing tag, like<br>.- It needs two attributes:
src(where the picture is) andalt(a description).
中文
图片
- 用
<img>标签显示一张图片。 <img>是一个单标签 —— 没有结束标签,和<br>一样。- 它需要两个属性:
src(图片在哪里)和alt(描述文字)。
<img src="/static/code/web-basics/cat.svg" alt="A cartoon cat">
English
Why alt text matters
altis text that describes the picture.- It shows if the image cannot load, and screen readers read it aloud.
- Always add a short, clear
alt— it makes your page kinder to everyone.
中文
为什么 alt 文字很重要
alt是描述这张图片的文字。- 图片加载不出来时它会显示出来,读屏软件也会把它读出来。
- 永远写上简短、清楚的
alt—— 这让你的页面对每个人都更友好。
English
Common mistakes
- An image needs
src(the file) andalt(a description). <img>has no separate closing tag.
中文
常见错误
- 图片需要
src(文件)和alt(描述)。 <img>没有单独的闭合标签。
English
Now you try
- The picture lives at
/static/code/web-basics/cat.svg. - Show it, then add
alttext to an image.
中文
现在你来试试
- 图片就在
/static/code/web-basics/cat.svg。 - 把它显示出来,再给一张图片加上
alt文字。
Show the cat picture. Add an <img> with src="/static/code/web-basics/cat.svg". · 把这只猫显示出来。加一个 <img>,src="/static/code/web-basics/cat.svg"。
This image has no description. Add an alt attribute that describes it, like alt="A cartoon cat". · 这张图片没有描述。加一个描述它的 alt 属性,比如 alt="A cartoon cat"。