html导航栏左右部分
Marking the end-of-semester final sites from my classes, I’m discovering the same basic misunderstandings and bad habits repeated in pages made by many students. Most of the pages are valid, which is a great start, but they’re also incomplete.
在我的课程结束时标记了学期末的最后一个站点，我发现许多学生在做的页面中重复着同样的基本误解和坏习惯。 大部分页面都是有效的，这是一个很好的开始，但是它们也不完整。
While I emphasize best practices in my classes (and elsewhere on this blog), it occurred to me that perhaps they needed to be in one place, or presented in a series of articles. Thus, this entry.
当我在课堂上(以及本博客的其他地方)强调最佳实践时，我发现也许它们需要放在一个地方，或者在一系列文章中介绍。 因此，此条目。
Let’s take the start of a valid, accessible HTML5 page, shown at the top of this article. This is not yet set up for mobile, nor has it had metadata added to it, but the page is otherwise complete. Here’s the code:
让我们开始一个有效的，可访问的HTML5页面，该页面显示在本文的顶部。 尚未针对移动设备设置此功能 ，也没有为其添加元数据 ，但是该页面已经完成。 这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ozymandius Corp – About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrapper">
<header role="banner">
<h1>
<a href="index.php">
<img src="assets/images/ozymandius-corp.jpg" alt="Ozymandius Corp">
</a>
</h1>
<nav role="navigation">
<a href="index.php">Home</a>
<a href="about.php" class="current-page">About Us</a>
<a href="products.php">Products</a>
</nav>
</header>What makes this a well-made page?
是什么让它做得很好？
- The least amount of HTML5 necessary written, while keeping the code readable. 在保持代码可读性的同时，编写最少数量HTML5。
titleincludes both the name of the company / site and the purpose of the page.title包括公司/站点的名称和页面的用途。All the CSS rules are placed in a single linked style sheet.
divelements kept to a minimum.div元素保持最小。ARIA roles used to make the content accessible.
用于使内容可访问的ARIA角色 。
Whether the logo is an image or text, it is inside a
<h1>tag and linked to the index page.徽标是图像还是文本，都在
<h1>标记内并链接到索引页。A logical folder structure, with all filenames in lowercase. Local paths used, not absolute.
The logo image has the same text in the banner as the filename and
altvalue.徽标图像在标题中与文件名和
alt值具有相同的文本。Avoidance of unnecessary
ididentifiers: we can specify the appearance of this content in CSS by using descendant selectors instead.classused only where necessary (to highlight the current, active page, not repeatedly applied to sibling elements.class仅在必要时使用(以突出显示当前的活动页面，而不是反复应用于同级元素。
If you believe I've missed anything, or see room for improvement, please let me know!
如果您认为我错过了任何事情，或者看到了改进的空间，请告诉我！
翻译自: https://thenewcode.com/522/Best-Practices-For-HTML-section-and-primary-navigation
html导航栏左右部分
1615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
