anchor 元素与 href 属性
使用 anchor 标签和 href 属性创建链接。
anchor 元素与 href 属性 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是链接
<a>（锚）元素会创建一个超链接，这是网络的基础构件。
- 用户点击链接在页面之间导航
- 链接连接文档、资源和位置
- 没有链接，网络就会变成一组彼此孤立的页面
href 属性
href（超文本引用）属性指定链接的目标位置：
<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>
<a href="../contact.html">Contact</a>
<!-- href = destination URL or path
Content between tags = clickable text -->
<!-- Without href, a is still valid but not a hyperlink -->链接文本很重要
<a> 标签之间的文本（即链接文本）应描述链接的目标位置：
<!-- Bad: uninformative -->
<a href="/docs/guide">Click here</a>
<a href="/docs/guide">Read more</a>
<!-- Good: descriptive -->
<a href="/docs/guide">Read the Getting Started Guide</a>
<!-- Screen readers list all links — "click here" is meaningless out of context -->href 值的类型
href 可以包含不同类型的值：
<a href="https://example.com">External URL</a>
<a href="/page">Root-relative path</a>
<a href="page.html">Relative path</a>
<a href="#section">Fragment (same page)</a>
<a href="mailto:hi@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="javascript:void(0)">JS (avoid this)</a>链接到电子邮件和电话
特殊的 URI 方案可以创建电子邮件和电话链接：
<a href="mailto:support@example.com">Email Support</a>
<a href="mailto:support@example.com?subject=Hello&body=Hi%20there">
Email with Subject
</a>
<a href="tel:+15555551234">Call Us: (555) 555-1234</a>
<!-- Tapping tel: links on mobile opens the phone dialer -->链接上的 title 属性
使用 title 属性添加工具提示：
<a href="/glossary" title="View the full HTML glossary">Glossary</a>
<!-- title appears as a tooltip on hover
But: not accessible via keyboard or touch — never rely on title alone for critical info -->设置链接样式
浏览器会应用默认的链接样式，为了无障碍性，您应当保留这些样式：
/* Default link states */
a:link { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover { color: red; }
a:focus { outline: 2px solid blue; } /* keyboard focus */
a:active { color: red; }
/* Never remove :focus outline — keyboard users need it */活动链接与当前链接
使用 aria-current 标记当前的导航链接：
<nav>
<a href="/">Home</a>
<a href="/about" aria-current="page">About</a>
<a href="/contact">Contact</a>
</nav>
<!-- aria-current="page" tells screen readers this link is the current page -->
<!-- CSS: [aria-current="page"] { font-weight: bold; } -->没有 href 的锚元素
没有 href 的 <a> 是占位链接，不具有交互性：
<a>Not a link yet</a>
<!-- No href = no hyperlink, no default pointer cursor, not keyboard-focusable -->
<!-- If you need a clickable element without navigation, use button:
<button onclick="doSomething()">Click Me</button> -->包装块级元素
在 HTML5 中，<a> 可以包装块级元素，从而使整个章节都可以点击：
<a href="/products/widget">
<div class="card">
<h2>Widget Pro</h2>
<p>The best widget available.</p>
<img src="widget.jpg" alt="Widget Pro product image">
</div>
</a>
<!-- Valid in HTML5 (not in HTML4) -->
<!-- Ensure the link text is still descriptive for screen readers -->链接焦点与键盘访问
链接必须支持键盘访问：
- 用户可以使用 Tab 键在链接之间切换
- 用户可以按 Enter 激活链接
- 绝不要移除链接的焦点轮廓
- 制表顺序应遵循阅读顺序
快速检查
什么样的链接文本对于屏幕阅读器用户来说是无障碍的？
回顾：锚元素
链接的核心概念：
<a href="url">会创建超链接- 链接文本必须描述目标位置
- 支持外部网址、相对路径、片段、mailto: 和 tel:
- HTML5 允许在
<a>中包装块级元素 - 绝不要移除 :focus 轮廓
- 使用
aria-current="page"标记当前导航项
常见问题解答
「anchor 元素与 href 属性」课时是免费的吗？
是的 — 「anchor 元素与 href 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「anchor 元素与 href 属性」这节课中我会学到什么？
使用 anchor 标签和 href 属性创建链接。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「anchor 元素与 href 属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- anchor 元素与 href 属性
- 绝对 URL 与相对 URL
- 在新标签页中打开链接与 download 属性
- 链接到页面区域：片段标识符