2.2 创建标记
对于这个网站，我们会用“移动置后”的方案来编写，但我们会在移动版和桌面版上使用相同的标记。我们将专注于语义标记，因为网站需要在移动设备上工作，所以我们还得考虑DOM和CSS的性能。
注: “移动置后”的缺点之一是移动设备需要下载和解析所有的桌面样式。如果采用“移动优先”，那么移动设备可以安全地忽略那些不需要的样式。另外，这是一个需要逐一分析的问题。
为一个文档创建标记时，我把它分成区域，这样不仅有合理的语义，而且在设计和添加样式时也很方便。对于加州鸟类站点，我把导航链接放置于一个
标签内，再插入一个
标签，来表示桌面版的侧边栏或移动版的顶部导航栏。对于内容，我创建了一个class为main的
标签，其中包含了照片、标题和内容的拷贝。
标记文档如代码清单2.1所示。
代码清单2.1 页面body部分的标记
<body class="bd">
<header class="container header">
<h1>Birds of California!</h1>
</header>
<aside class="sidebar">
<nav class="bird-nav">
<ul class="bird-list">
<!-- Redundant Class for performance -->
<li class="nav-li">
<a class="nav-link"
→ href="/california-condor">California Condor</a>
</li>
<li class="nav-li"><a class="nav-link"
→ href="/california-quail">California Quail</a></li>
<li class="nav-li"><a class="nav-link"
→ href="/california-gull">California Gull</a></li>
</ul>
</nav>
</aside>
<div class="container main">
<h2>California Gull</h2>
<div class="hero-shot">
<a href="http://www.flickr.com/photos/catlantis/5514922015/">
<img class="hero-img" src="http://farm6.staticflickr.com/
→ 5171/5514922015_bfeab78ce0_z.jpg">
</a>
<p class="caption">Photo By <a href="http://www.flickr.com/photos/
→ catlantis/5514922015/">C.L.
Maclay</a></p>
</div>
<section class="content">
<p>Lorem ipsum dolor...</p>
</section>
</div>
<footer class="container ft">
<ul class="foot-links">
<li><a href="/copyright">© 2012 Awesome Bird Foundation,
→ All Rights Reserved</a></li>
<li><a href="/tos">Terms of Service</a></li>
</ul>
</footer>
</body>
你会发现，有不少看似多余的class。例如，导航链接
标签有“nav-li”的class。这有两个原因：
- 当代码量变大时，class会更容易管理。使用nav-li比使用选择器“nav ul li”更简洁、更干脆、更容易进一步开发。
- 由于网站要能在世界上最慢的免费的Android手机上运行，当涉及CSS选择器的性能时，我们需要非常挑剔，也就是说要避免使用后代选择器。
一个直接的反面例子，浏览器解析CSS选择器是从右往左的。这意味着，如果它看到一个如“nav ul li a”的规则时，它首先必须获得所有匹配a的元素列表，然后检查看它是不是li的后代，再按相同规则继续检查。后代选择器虽然看起来方便，但它的性能开销是最大的。
时间： 2024-11-07 04:44:21