Images
Web Basics — HTML & CSS Lesson 6 2:16 English narration · English + 中文 subtitles burned in
Chapters
Transcript
To put a picture on a page you use the img tag, and everything it needs lives in its attributes — you met your first one last lesson.
要在页面上放一张图片，你用 img 标签， 而它需要的一切都写在属性里——你上一课刚见过第一个属性。
Src says which file to show, exactly like href said where a link goes.
src 说明要显示哪个文件， 就像 href 说明链接跳到哪里一样。
Alt is a short description of what it shows.
alt 是对图片内容的一句简短描述。
Two attributes, and you should write both, every time.
两个属性，而且每一次你都应该两个都写。
Notice there is no closing img tag, and there is a reason for that.
注意这里没有 img 的结束标签，而且这是有原因的。
Every pair you have written so far wrapped something: words for a paragraph, words for a heading.
你到目前为止写过的每一对标签，都包裹着某个东西： 段落包着文字，标题包着文字。
The br tag wrapped nothing and so it stood alone.
br 什么都不包，所以它独自出现。
An image is the same — the picture is the content, and it arrives through the src attribute, so there is no text to sit between two tags.
图片也一样——图片本身就是内容， 而它是通过 src 属性带进来的， 所以没有文字需要待在两个标签中间。
Alt is invisible when everything works, which is exactly why people skip it.
一切正常时，alt 是看不见的，这正是人们容易跳过它的原因。
But there are two moments when it is all there is.
但有两个时刻，它是仅有的东西。
When the picture cannot load — a broken link, a slow connection — the browser shows your alt text in its place.
当图片加载不出来时——链接坏了，网络太慢—— 浏览器就把你的 alt 文字显示在它的位置上。
And when someone uses a screen reader, it will read it aloud, because that is the only way they will ever know what is there.
而当有人使用屏幕阅读器时，它会把 alt 念出来， 因为那是他们唯一能知道那里有什么的方式。
So write it as if you were describing the image to someone on the phone.
所以写 alt 的时候，就当你在电话里向别人描述这张图。
A good alt says what is in the picture.
一个好的 alt 说的是图片里有什么。
Two common ones say nothing at all.
有两种常见写法其实什么都没说。
The word image on its own tells a listener what they already worked out.
只写 "image" 这个词，等于把听者已经知道的事再说一遍。
And the file name is worse — it makes a screen reader read out cat dot s v g, which is not a description of anything.
文件名更糟——它会让屏幕阅读器念出 "cat 点 s v g"， 那不是对任何东西的描述。
Now the two tasks: show the cat with a src, then give an image an alt that actually describes it.
现在做那两道题： 用 src 把那只猫显示出来， 然后给一张图片写一个真正描述它内容的 alt。
Four things to take with you.
带走四点。
One: img shows a picture and needs no closing tag.
第一：img 显示图片，而且不需要结束标签。
Two: src says which file to show.
第二：src 指明要显示哪个文件。
Three: alt describes it for anyone who cannot see it.
第三：alt 为看不到图片的人描述它。
Four: a good alt says what is in the picture, not the word image and not a file name.
第四：好的 alt 说的是图片里有什么， 不是 "image" 这个词，也不是文件名。
Now do both tasks.
现在把两道题都做一下。