跟读练习: HTML Links and Navigation Explained | HTML for Beginners #5 - 通过视频学习英语口语

选择练习模式

每种模式都会打开全屏练习室。

86 句

如果句子过短或过长，请点击 Edit 进行调整。

Welcome back to TechAura!

Imagine visiting a website and finding absolutely no clickable links.

You couldn't visit another page, open an article, or navigate to another website.

That would make browsing the internet pretty difficult, right?

Luckily, HTML gives us something called hyperlinks.

They're what make it possible to connect web pages together.

Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.

Let's get started.

Let's start with the basics.

A HTML link, also called a hyperlink, connects one web page to another resource.

That resource could be another web page, a website, a document, or even a specific section of the current page.

When you click a link, your browser follows its destination.

This is one of the most important features of the World Wide Web.

But how do we create one?

Let's find out!

To create a link in HTML, we use the A element.

A stands for anchor.

Here's a simple example.

We start with the opening A tag.

Inside it, we have something called an attribute.

It's called href.

href specifies where the link should take the user.

In this example, the destination is Google's website.

Then, between the opening and closing tags, we write the text that users can click.

Here, it's visit Google.

Finally, we close the A element.

Now, let's see the result.

And that's it, you've just created your first HTML hyperlink.

Let's take a closer look at href.

href is short for hypertext reference.

It tells the browser the destination of the link.

There are different ways to use it.

First, we have external links links.

These take users to another website.

For example, when someone clicks this link, the browser navigates to YouTube.

Next, we have internal links.

These take users to another page within your own website.

For example, this link points to a page called About HTML.

Notice that we don't need to write the complete website address when linking to a page in the same website.

The browser uses the relative path to find the destination.

Now, what if you want a link to open in a new browser tab instead of replacing the current page?

HTML provides an attribute called target.

When we use target with the value blank, the browser opens the destination in a new tab or window.

Here's an example.

We add target equals blank inside our anchor tag.

And that's all.

But there's one more detail worth knowing.

For external links that open in a new tab, adding rel equals no opener is a good security practice.

It prevents the newly opened page from accessing the original page through the browser's opener property.

So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.

Now, let's use everything we've learned to create something practical.

A navigation menu.

Most websites have a navigation menu at the top.

It helps visitors move between different sections or pages.

To create one, we use the nav element.

Nav represents a section of a web page containing navigation links.

Inside it, we add our anchor elements.

Let's create four links.

The home link, the about link, the services link, and the contact link.

Each link has its own destination.

And just like that, we've created a simple HTML navigation menu.

Now, you might be wondering why the menu doesn't look very beautiful.

That's because we're only using HTML.

We'll learn how to style navigation menus using CSS in a future lesson.

Here's another useful trick.

You can create a link that takes visitors directly to a specific section of the same web page.

We call this an anchor link.

First, we give an element a unique ID.

In this example, our heading has an ID called contact.

Then, we create a link using href with a hashtag followed by that ID.

When someone clicks the link, the browser navigates to the element with the matching ID.

This is especially useful for long articles, frequently asked questions, and table of contents sections.

Now it's your turn, let's test what you learned.

Your challenge is to create a simple navigation menu for your own website.

It must contain a home link, an about link, a contact link, one external link to Google,

and one link that takes visitors to a specific section of your web page.

Pause the video and try writing the code yourself.

Excellent!

You've just created your first navigation menu and learned how to connect different pages and sections.

You're making great progress!

And that's everything for Episode 5!

Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.

In our next episode, we'll discover how to add images to web pages using HTML.

Don't forget to subscribe to TechHora.

Keep learning, keep building, and stay curious.

See you in episode 6!

下载应用

流利口语所需的一切

AI 发音评分逐句打分

音标练习掌握每个音

词汇学习建立你的词库

词汇游戏边玩边学

扫码

Download on theApp Store Get it onGoogle Play

FOR YOU

本课的词汇与口语要点

这节口语课以视频“HTML Links and Navigation Explained”为素材。视频中反复出现的词有：link, page, create, website, Html。这段视频共有 86 个句子、824 个单词可供跟读。讲话部分时长为 5:20。说话人语速自然，每分钟约 154 个词，接近日常对话。只有 79% 的单词属于英语最常用的 3,000 词，词汇难度较高。

视频中的重点词汇

视频中 15 个值得学习的单词，附发音和释义：

单词	发音	释义
menu 名词	/ˈmɛn.juː/	菜單 /菜单
navigation 名词	/nævɪˈɡeɪʃən/	導航 /导航
destination 名词	/dɛstɪˈneɪʃən/	目的地
element 名词	/ˈɛləmənt/	要素
anchor 名词	/ˈæŋ.kəː/	錨 /锚
connect 动词	/kəˈnɛkt/	連接 /连接
visitor 名词	/ˈvɪzɪtɚ/	訪客 /访客, 客人
attribute 名词	/ˈæt.ɹɪˌbjut/	屬性 /属性
resource 名词	/ɹɪˈzɔːs/	資源 /资源
practical 形容词	/ˈpɹæk.tɪ.kəl/	使用的, 實用 /实用
relative 名词	/ˈɹɛl.ə.tɪv/	親戚 /亲戚
trick 名词	/ˈtɹɪk/	詭計 /诡计, 騙術 /骗术
lesson 名词	/ˈlɛs.ən/	課業 /课业, -課 /-课
curious 形容词	/ˈkjʊɹ.i.əs/	好奇, 有好奇心
tag 名词	/tæɡ/	標簽 /标签

视频中出现的短语动词

单词	释义
find out 动词	找出, 查明

视频中的语法

说话人最常用的结构，并附上视频中的原话：

结构	视频中的用法
现在完成时 have/has + 过去分词 — 过去发生但与现在仍有关联的事	you've just created · we've learned · we've created
“will” 表将来 will + 动词 — 决定、承诺或预测	you'll learn · We'll learn · we'll discover
现在进行时 am/is/are + -ing — 此刻或近期正在发生的事	we're only using · You're making
义务：must / have to / need to 表示某事是必要的	need to write · must contain

需要注意的发音

说话人用了 14 次缩略和弱读形式，例如 don't, we'll, we've。请按听到的简短形式来说。

“sh” 和 “zh” 音: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
长单词——注意重音位置: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/

中文母语者容易读错的音：

/v/ — 不要读成 /w/，上齿轻触下唇: navigation /nævɪˈɡeɪʃən/, navigate /ˈnæv.ɪ.ɡeɪt/, visitor /ˈvɪzɪtɚ/, relative /ˈɹɛl.ə.tɪv/, discover /dɪˈskʌvə/
词尾辅音 — 要读清楚，后面不要加元音: element /ˈɛləmənt/, navigate /ˈnæv.ɪ.ɡeɪt/, connect /kəˈnɛkt/, attribute /ˈæt.ɹɪˌbjut/, resource /ɹɪˈzɔːs/
/r/ 和 /l/ 的区别: practical /ˈpɹæk.tɪ.kəl/, relative /ˈɹɛl.ə.tɪv/, hyperlink /ˈhaɪpə(ɹ)ˌlɪŋk/

如何用这段视频练习

先完整听一遍视频，不要开口，记下不认识的单词。
先用 0.75 倍速逐句跟读，熟练之后再回到正常速度。
录下自己的声音并与原声对比，特别注意 menu, navigation, destination 这类单词。

什么是跟读法？

跟读法 (Shadowing) 是一种有科学依据的语言学习技巧，最初开发用于专业口译员的培训，并由多语言者Alexander Arguelles博士普及。这个方法简单而强大：您在听英语母语原声的同时立即大声重复——就像是一个延迟1-2秒紧跟说话者的影子。与被动听力或语法练习不同，跟读法强迫您的大脑和口腔肌肉同时处理并模仿真实的讲话模式。研究表明它能显着提高发音准确性，语调，节奏，连读，听力理解和口语流利度——使其成为雅思口语备考和真实英语交流最有效的方法之一。

影子跟读法: 阅读完整分步指南 →

跟读练习: HTML Links and Navigation Explained | HTML for Beginners #5 - 通过视频学习英语口语

选择练习模式

下载应用

推荐视频

HTML Tag Text Basics | HTML5 Element Text Tutorial

A1 English Listening Practice - The Internet

you will never ask about pointers again after watching this video

React Native for Beginners tutorial

Understanding the Elements of Design | Graphic Design Basic

Learn 97% of Harvard's CS50 in 25 minutes

Usability Heuristic 3: User Control & Freedom

Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)

LINUX isn't Hard Once You Understand This (File Directories)

DejaVue #E001 - The Need for Server-Side Rendering (SSR)

Links | HTML | Tutorial 8

Anatomy & Physiology: The Ultimate Beginner's Guide | Dr. Bee's Tutorials