怎么看html元素触发

tech2022-12-29  55

怎么看html元素触发

It’s safe to assume that this element will appear in virtually every project. nav represents exactly what it implies: a group of navigation links. Although the most common use for nav will be for wrapping an unordered list of links, there are other options. You could also wrap the nav element around a paragraph of text that contained the major navigation links for a page or section of a page.

可以肯定地说,这个元素实际上会出现在每个项目中。 nav精确地表示了它的含义:一组导航链接。 尽管nav最常见的用途是包装无序链接列表,但还有其他选择。 您也可以将nav元素包裹在一段文本中,该文本段落包含页面或页面部分的主要导航链接。

In either case, the nav element should be reserved for navigation that is of primary importance. So, it’s recommended that you avoid using nav for a brief list of links in a footer, for example.

无论哪种情况,都应保留nav元素用于最重要的导航。 因此,建议您避免在页脚中使用简短的链接列表来使用nav 。

导航和辅助功能 (nav and Accessibility)

A design pattern you may have seen implemented on many sites is the “skip navigation” link. The idea is to allow users of screen readers to quickly skip past your site’s main navigation if they’ve already heard it—after all, there’s no point listening to a large site’s entire navigation menu every time you click through to a new page!

您可能已经在许多站点上看到的一种设计模式是“跳过导航”链接。 这样做的目的是让屏幕阅读器的用户已经听说过站点的主要导航功能时,可以快速跳过它们。毕竟,每次单击新页面时,都没有必要聆听大型站点的整个导航菜单!

The nav element has the potential to eliminate this need; if a screen reader sees a nav element, it could allow its users to skip over the navigation without requiring an additional link. The specification states: User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

nav元素有可能消除这种需求; 如果屏幕阅读器看到nav元素,则可以允许其用户跳过导航而无需其他链接。 规范指出:针对可以从初始渲染中省略的导航信息中受益或可以从导航信息立即可用中受益的用户的用户代理(例如屏幕阅读器)可以使用此元素来确定页面上哪些内容最初会跳过和/或根据要求提供。

Current screen readers fail to recognize nav, but this doesn’t mean you shouldn’t use it. Assistive technology will continue to evolve, and it’s likely your page will be on the Web well into the future. By building to the standards now, you ensure that as screen readers improve, your page will become more accessible over time.

当前的屏幕阅读器无法识别nav ,但这并不意味着您不应该使用它。 辅助技术将继续发展,并且很可能您的页面将在未来的Web上广泛使用。 通过立即构建标准,可以确保随着屏幕阅读器的改进,随着时间的推移,您的页面将变得更加可访问。

什么是用户代理? (What’s a user agent?)

You’ll encounter the term user agent a lot when browsing through specifications. Really, it’s just a fancy term for a browser—a software “agent” that a user employs to access the content of a page. The reason the specs don’t simply say “browser” is that user agents can include screen readers, or any other technological means to read a web page.

浏览规范时,会经常遇到“用户代理”一词。 实际上,这只是浏览器的一个奇特术语,即用户用来访问页面内容的软件“代理”。 规范没有简单地说“浏览器”的原因是用户代理可以包括屏幕阅读器或任何其他技术手段来读取网页。

You can use nav more than once on a given page. If you have a primary navigation bar for the site, this would call for a nav element.

您可以在给定页面上多次使用nav 。 如果您有该站点的主导航栏,则需要一个nav元素。

Additionally, if you had a secondary set of links pointing to different parts of the current page (using in-page anchors), this too could be wrapped in a nav element.

另外,如果您有一组指向当前页面不同部分的辅助链接(使用页面内定位符),则也可以将其包装在nav元素中。

As with section, there’s been some debate over what constitutes acceptable use of nav and why it isn’t recommended in some circumstances (such as inside a footer). Some developers believe this element is appropriate for pagination or breadcrumb links, or for a search form that constitutes a primary means of navigating a site (as is the case on Google).

与本section ,对于什么才是可接受的nav用法以及为什么在某些情况下(例如在footer )不推荐使用nav,存在一些争论。 一些开发人员认为,此元素适用于分页或面包屑链接,或构成构成网站导航的主要方式的搜索表单(例如Google)。

This decision will ultimately be up to you, the developer. Ian Hickson, the primary editor of WHATWG’s HTML5 specification, responded to the question directly: “use [it] whenever you would have used class=nav”.[See Comment]

这个决定最终将取决于您,开发人员。 伊恩·希克森,WHATWGHTML5规范的主编辑器,回应了直接的问题:“使用[它]只要你将不得不使用的一类=导航” [ 查看评论 ]

This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.

这是Alexis Goldstein,Louis Lazaris和Estelle Weyl撰写的HTML5&CSS3 for Real World的摘录。

寻找更多教程? (Looking for more tutorials?)

If you would like to know more about the HTML5 NAV element, Sitepoint has a great range of online tutorials on HTML5 nav menus.

如果您想了解更多有关HTML5导航元素的信息,Sitepoint提供了有关HTML5导航菜单的大量在线教程。

Building an Interactive Navigation Bar by Laura Athanasiou “A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.”

通过Laura Athanasiou构建交互式导航栏 “简单的导航结构可以提高站点的可用性,并使信息易于查找。 通过使用基本HTML和CSS,您可以构建水平导航栏,当用户将鼠标悬停在导航链接上时提供交互。”

Creating an Animated Drop-down Navigation Menu in HTML5/CSS3 and Webkit by Jean-Pierre Gassin “This is a tutorial for beginner and intermediate HTML5 and CSS3 developers who want to create a drop-down menu. The menu we’re creating is animated using only CSS … there’s no JavaScript in sight!”

Jean-Pierre Gassin在HTML5 / CSS3和Webkit中创建动画下拉导航菜单 “这是为想要创建下拉菜单的初学者和中级HTML5和CSS3开发人员的教程。 我们正在创建的菜单仅使用CSS进行动画处理……看不到JavaScript!”

Build a Responsive, Mobile-Friendly Website From Scratch: Semantic HTML by Annarita Tranfici “First and foremost, let’s create a classic menu. In this case, the element most suitable for our purpose is the nav element, which is a semantic element used for declaring a navigational section of a website.”

从头开始构建一个响应式,移动友好的网站:Annarita Tranfici编写的语义HTML “首先,让我们创建一个经典菜单。 在这种情况下,最适合我们目的的元素是nav元素,它是用于声明网站导航部分的语义元素。”

Should Navigation Be Defined in Lists? by Craig Buckler “The question: are list elements necessary?”

是否应在列表中定义导航? Craig Buckler撰写的 “问题:列表元素是否必要?”

How to Build a CSS3 Sliding Menu by Craig Buckler “In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.”

如何构建Craig BucklerCSS3滑动菜单 “在本文中,我们将仅使用CSS来构建滑动菜单。 如果您使用的是现代浏览器,它还将显示出精美的3D页面效果。”

翻译自: https://www.sitepoint.com/look-html5-nav-element/

怎么看html元素触发

最新回复(0)