跟读练习: Head Tag in HTML | An HTML5 Head Element Tutorial - 通过视频学习英语口语
选择练习模式
每种模式都会打开全屏练习室。
135 句
如果句子过短或过长，请点击 Edit 进行调整。
1
Hello and welcome.
2
Hi, I'm Dave.
3
This tutorial is part of a beginners HTML series.
4
I'll be using the Chrome web browser, the Visual Studio Code editor, and the live server extension for Visual Studio Code to view the web page.
5
There are links to these tools, starter code files, and all resources in the description below.
6
Let's move on to what else might go inside of our head element.
7
And remember, everything inside of the head element is not seen on the web page.
8
And with that said, I've dragged the Visual Studio Code window to a little smaller size on the left
9
and Chrome to a little smaller size on the right.
10
But I'm just going to expand
11
Visual Studio Code for now
12
because anything we change inside of the head element will not be seen on the web page anyway.
13
So I'll click the expand button and we'll just see our code.
14
Now I had mentioned that we could store more metadata inside of the head element
15
And that is definitely some of what we see.
16
So let's add a couple of typical
17
Meta tags that have metadata that you would commonly see
18
The first being for the author of the page
19
So we'll say name the attribute name is equal to author
20
because that's what type of meta tag this will be
21
And then we'll have a content attribute
22
and this is where you can put your name I'll put my name for now since I'm the author of the page.
23
And then let's add another meta tag.
24
And let's give it a name as well.
25
And here we'll put a description.
26
This will describe the web page in a little bit more detail than possibly the title would.
27
So here we can put more of a sentence.
28
And once again, we need the content attribute to do that.
29
Let's say this page contains all the things I am learning how,
30
if I could spell how, to, and it looks like I'm extending the page.
31
So in Visual Studio Code, I'm going to press
32
Alt -Z in Windows to make sure the text continues to wrap
33
and then I'll say all the things I am or I am learning how to create as I learn HTML.
34
There we go.
35
Now after that of course you still need to close the meta tag
36
and control s to save and again I got the words to wrap.
37
Let's go to the view menu.
38
If you scroll all the way down you can see word wrap is alt z.
39
It may be something different if you're on Mac or Linux
40
so you might want to check the view menu under word wrap
41
if you want your words to wrap
42
and not just extend forever to the right here
43
now we've added more description about our page now this information could be picked up in a search engine
44
or some other service that wants to learn more about our web page however let's go ahead
45
and put something in the head where we will notice the change when we go back to the browser.
46
And that is to add what is called a fav icon.
47
And we can do that with a link element.
48
Let me use lowercase once again.
49
And inside of the link element, we'll have several attributes.
50
One is the REL, which stands for relate or relation.
51
How does this relate to the web page?
52
And here we're going to provide an icon.
53
After that, we need an href.
54
This refers back to HTML that stands for hypertext.
55
This is a hypertext reference.
56
So we're referencing a resource.
57
And here we're going to reference a file that I have now put inside of our folder that is called HTML5 .png.
58
And if I click the file explorer over here, you can see I've now added an image file that's a .png file,
59
HTML5 .png and you can download this image from the resources.
60
And you can see it's a small little icon for the HTML5 logo.
61
So I'll close that.
62
I'm going to click the file browser to have that disappear again.
63
So we see this.
64
Now we have one more attribute to add, and that is the type.
65
What type of resource is this?
66
And here we'll say image slash x dash icon.
67
And now we can save this and I'm going to go ahead and minimize the code window.
68
And now if we look at our web page in the browser, notice we have an icon up here.
69
My first web page now has our little fav icon beside the title.
70
And that's what we added here in the head by adding the fav icon with a link element.
71
Now we won't add any more here today, but this is the same area where we would link to CSS files
72
and even JavaScript files and other resources that we pull in from the web.
73
So the head is a very important part of the page, even though we don't see.
74
the content of the head inside the body of the page.
75
And I said we wouldn't link to anything else here today, but since we do have this default CSS to make our page a dark mode,
76
if you added this, and once again, this was optional, if you prefer the white page with dark text, you didn't need to add this,
77
and we had this style element here to hold the CSS in the head, but that's not usually where you would find it for a page.
78
So let's go ahead and do that.
79
I'll expand Visual Studio Code again, click the file explorer
80
and over here inside the file tree I want to create a new file
81
I'm going to call this main .css
82
and I have an empty css file all we need to do now is go back to the index
83
select the css
84
that we put here for the html in the body not the style tags just select the css
85
that's between the style tags I'm going to press ctrl x to cut
86
it out of the page go to the CSS file and control V to paste it into the CSS file.
87
Control S to save that file.
88
Now back in the HTML, I'm going to remove the style element, and I'm going to add another link.
89
And here for the rel, not ref, but rel, we have a style sheet.
90
Because we're adding a CSS style sheet, our href will now point to our CSS,
91
main .css specifically, and our type, which isn't actually required anymore.
92
But since we have it, let's go ahead and add text slash CSS.
93
But our browser should know what it is, even if we didn't add that at this point,
94
because that's really the only type of style sheet there is, is a CSS.
95
Now that we've made these changes, let's save the file.
96
And let's go ahead and click the button again to make our code shrink back down and look at our page.
97
We can reload just to make sure it has reloaded and everything looks the same.
98
That's because we are pulling in our code.
99
I'm going to go ahead and hide the file tree here.
100
We are pulling in our CSS code using our link tag inside of the head element.
101
Now, finally, I'm going to create an error on purpose by deleting the
102
greater than symbol at the end of this link tag and saving the file with control S.
103
Now, why would I create an error on purpose
104
because we want to validate our file again
105
and this will let us know that yes we've got the right file
106
and we expect one error there you don't of course have to create an error on purpose
107
but that's what i'm doing to make sure i'm selecting the correct file out of the correct lesson folder
108
because i'm in lesson two now you might be working on the same file
109
we started with there's the css file
110
and the image file i'll select the index .html and check
111
and i should have at least one if not more errors
112
because of that yes that created several errors on the page just by leaving out
113
that one closing greater than symbol for the link text now if i save again
114
visual studio code formats our code correctly instead of trying to pull the closing
115
head tag up here and i'm going to go ahead
116
and reload or re -upload the file to check it so we choose index .html.
117
Now I'll click check and document checking completed.
118
No errors or warnings to show.
119
So just by missing one little thing in our page, we could have a whole list of errors.
120
So follow the prompts from Visual Studio Code.
121
Notice how if I leave that out here in my theme, this turns red or pink.
122
It doesn't look quite right.
123
Visual Studio Code wants to format it differently if I save the file
124
and it pulls that up here instead of putting the closing tag.
125
There's several cues to show you that you have an error in the file.
126
And so follow those prompts in Visual Studio Code.
127
And then remember to always validate your page.
128
And we always do that at validator .w3 .org.
129
I'll get rid of everything at the end of that.
130
And here you can pull it up.
131
And then we choose file upload.
132
Remember to keep striving for progress over perfection and a little progress every day will go a very long way.
133
Please give this video a like if it's helped you and thank you for watching and subscribing.
134
You're helping my channel grow.
135
Have a great day and let's write more code together very soon.
同频道
FOR YOU
推荐视频
B21
132 句
Video
Daily ConversationUniversity StudentsWorking Adults
B21
460 句
Blender Donut Tutorial Part 1 (2026)
Daily ConversationUniversity Students
B21
285 句
Ancient Greek Lesson 1: The Greek Alphabet
Daily ConversationUniversity StudentsWorking Adults
B21
12 句
How I’d Learn Coding in 2026 (Without Wasting Years)
Daily ConversationUniversity StudentsWorking Adults
B16
57 句
Science in English #3 | The Periodic Table
Daily ConversationHigh School StudentsUniversity Students
B21
103 句
you will never ask about pointers again after watching this video
Daily ConversationUniversity Students
B11
162 句
How to start a new sketchbook | First page and beyond!
TeensDaily ConversationHigh School Students
C12
185 句
Use these CSS features instead of JavaScript
Daily ConversationUniversity StudentsWorking Adults
B21
91 句
TS 97 Quick Start Video
Daily ConversationUniversity Students
C11
78 句
The easy way to keep your repos tidy.
Daily ConversationUniversity StudentsWorking Adults
B21
50 句
Video
Daily ConversationUniversity StudentsWorking Adults
本课的词汇与口语要点
这节口语课以视频“Head Tag in HTML”为素材。 视频中反复出现的词有：file, page, code, css, html。 这段视频共有 135 个句子、1645 个单词可供跟读。 讲话部分时长为 9:26。 说话人语速自然，每分钟约 175 个词，接近日常对话。 84% 的单词属于英语最常用的 3,000 词，其余的词建议在练习前先学一下。
视频中的重点词汇
视频中 15 个值得学习的单词，附发音和释义：
| 单词 | 发音 | 释义 |
|---|---|---|
| element 名词 | /ˈɛləmənt/ | 要素 |
| icon 名词 | /ˈaɪ.kɑn/ | 聖像 /圣像 |
| resource 名词 | /ɹɪˈzɔːs/ | 資源 /资源 |
| wrap 动词 | /ɹæp/ | 包裝 /包装, 包 |
| attribute 名词 | /ˈæt.ɹɪˌbjut/ | 屬性 /属性 |
| select 动词 | /sɪˈlɛkt/ | 選 /选, 挑選 /挑选 |
| tag 名词 | /tæɡ/ | 標簽 /标签 |
| sheet 名词 | /ʃit/ | 篇, 張 /张 |
| expand 动词 | /ɪkˈspænd/ | 擴展 /扩展, 擴張 /扩张 |
| format 名词 | /ˈfɔːɹ.mæt/ | 格式, 開本 /开本 |
| lesson 名词 | /ˈlɛs.ən/ | 課業 /课业, -課 /-课 |
| symbol 名词 | /ˈsɪmbəl/ | 符號 /符号 |
| menu 名词 | /ˈmɛn.juː/ | 菜單 /菜单 |
| upload 动词 | /ˈʌpˌloʊd/ | 上載 /上载, 上傳 /上传 |
| explorer 名词 | /ɛkˈsplɔːɹə(ɹ)/ | 探險者 /探险者 |
视频中出现的短语动词
| 单词 | 发音 | 释义 |
|---|---|---|
| go ahead 动词 | /ˌɡoʊ əˈhɛd/ | 請便 /请便 |
| back down 动词 | 做出讓步 /做出让步 |
值得反复跟读的句子
视频中简短而完整的句子，可以直接用在日常对话里：
- Let's go to the view menu.
- That's because we are pulling in our code.
- You're helping my channel grow.
视频中的语法
说话人最常用的结构，并附上视频中的原话：
| 结构 | 视频中的用法 |
|---|---|
| 现在完成时 have/has + 过去分词 — 过去发生但与现在仍有关联的事 | I've dragged · we've added · have now put |
| 被动语态 be + 过去分词 — 强调发生了什么，而不是谁做的 | is not seen · will not be seen · could be picked |
| 用 “might / may” 表可能 might/may + 动词 — 有可能但不确定的事 | might go · may be · might want |
| 比较级 -er than / more … than — 比较两个事物 | more detail than · greater than |
需要注意的发音
说话人用了 51 次缩略和弱读形式，例如 I'm, I'll, we'll。请按听到的简短形式来说。
- “sh” 和 “zh” 音: sheet /ʃit/, extension /ɪkˈstɛnʃən/, relation /ɹɪˈleɪʃ(ə)n/, dash /ˈdæʃ/, perfection /pɚˈfɛk.ʃən/
- 长单词——注意重音位置: differently /ˈdɪf.ə.ɹənt.li/, metadata /ˈmɛt.əˌdeɪ.tə/
中文母语者容易读错的音：
- /v/ — 不要读成 /w/，上齿轻触下唇: server /ˈsɝvɚ/, strive /ˈstɹaɪv/, validate /ˈvæl.ɪ.deɪt/
- 词尾辅音 — 要读清楚，后面不要加元音: element /ˈɛləmənt/, resource /ɹɪˈzɔːs/, wrap /ɹæp/, attribute /ˈæt.ɹɪˌbjut/, select /sɪˈlɛkt/
- /r/ 和 /l/ 的区别: relate /ɹɪˈleɪt/, explorer /ɛkˈsplɔːɹə(ɹ)/, relation /ɹɪˈleɪʃ(ə)n/, differently /ˈdɪf.ə.ɹənt.li/, correctly /kəˈɹɛk(t).li/
如何用这段视频练习
- 先完整听一遍视频，不要开口，记下不认识的单词。
- 先用 0.75 倍速逐句跟读，熟练之后再回到正常速度。
- 录下自己的声音并与原声对比，特别注意 element, icon, resource 这类单词。
什么是跟读法？
跟读法 (Shadowing) 是一种有科学依据的语言学习技巧，最初开发用于专业口译员的培训，并由多语言者Alexander Arguelles博士普及。这个方法简单而强大：您在听英语母语原声的同时立即大声重复——就像是一个延迟1-2秒紧跟说话者的影子。与被动听力或语法练习不同，跟读法强迫您的大脑和口腔肌肉同时处理并模仿真实的讲话模式。研究表明它能显着提高发音准确性，语调，节奏，连读，听力理解和口语流利度——使其成为雅思口语备考和真实英语交流最有效的方法之一。