Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

辅助功能 语义元素


语义元素 = 具有含义的元素。

为用户提供一种良好方式来导航和交互您的网站。使您的 HTML 语义化。语义是指在 HTML 中使用正确的元素。HTML 5 中大约有 110 个元素。

其中两个没有意义 - <div><span>。它们没有告诉我们关于内容的任何信息。它们没有内置的辅助功能,因此我们应该始终检查是否有其他更合适的元素。语义元素的示例:<form><table><article>。它们清楚地定义了内容。

Uber 的简单示例

Screenshot from Uber with a heading, a paragraph, a button, a link and an image.

在此 Uber 示例中,我们有五个元素

  • 一个标题
  • 一段文字
  • 一个按钮
  • 一个链接
  • 一张图片

这些元素可以转换为 HTML

  • <h2>
  • <p>
  • <button>
  • <a>
  • <img>

这是正确的吗?即使“注册成为司机”看起来像一个按钮,Uber 也使用了 <a> 而不是 <button>。这是代码,稍微简化了一下

<h2>坐上驾驶席,获得报酬</h2>
<p>在拥有最大活跃乘客网络的平台上驾驶。</p>
<a href="/signup/drive/>注册成为司机</a>
<a href="/en/drive/">详细了解驾驶和送货</a>
<img src="driver.jpg" alt="">

这是语义正确的。按钮被编码为链接,因为它表现得像链接。它将用户带到另一个视图。链接是否被设置为按钮的样式并不重要,它仍然是一个链接。

<button> 元素应用于在当前页面上执行操作的任何交互。<a> 元素应用于导航到另一个视图的任何交互。

Angular Material,按钮

现在您已经了解了语义的基础知识,让我们检查一下 HTML 工具箱中有哪些语义元素。接下来是地标。



×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.