构建基础标记和精简，安全式样

构建基础标记和精简，安全式样

        当大致浏览以下页面的层级结构,每一个组件使用目的是计划好的，非常容易高效地编写基础和增强体验的语义HTML代码。我们将把这样的HTML作为”基 础”标记，因为它直接奠定了我们将要构建的CSS和JavaScript增强并完成设计到现实生活的基础。

        当我们编写基础标记代码时，在我们继续挖掘详细的组件之前, 首先应对主要的布局部分，包括所有主要的容器元素像页头，页脚，和列配置栏来巩固基本的页面 结构。然后我们集中注意力使用语义HTML为页面上所有独立的元素填写内容和功能来构建一个易于使用的基本体验。（在第三章,我们介绍如何编写语义标记, 同时支持基本的和增强式的体验。）

        有一些情况需要HTML元素满足基本体验功能但是没有必要满足曾强式体验，或者说，在增强式体验中标记仅仅是相关并可用的。例如，在基本体验中, 一个 select在结果页面中作为一个过滤器需要一个按钮提交表单;那样的按钮不需要增强的代码，JavaScript可以在"blur"(当用户完成他们的 选择后，将焦点放在页面中另外任何地方)时自动提交。相反，一个打印按钮需要JavaScript函数，它应该不包含在基础标记中因此不会在基本体验中迷 惑用户，和添加JavaScript页面时增强。

　   提示：

　　当编写基础标签时注释哪些地方应该被增强,通过HTML直接给标签注释来持续跟踪，例如：

　　<!--这个radio按钮设置将要在slider中增强-->

　　或者

　　<!--打印按钮在这里-->

　　在开发中，这样的注释清楚地保存了重要的增强相关信息,同时也为回到设计时提供了有用的标识来更新这个地方，或者为了大型的协作设计团队提供沟通的桥梁。

 

    　当编写基础标记时，我们定期预览页面在一个宽广的浏览器和屏幕阅读器来检查内容层次是否完整以及页面易于阅读，意义在于这个就是它自己的功能。好的结构化标记是使用适当的语义与本质上可访问的链接和表单控件都是键盘可访问的；给图片添加alt文本对于屏幕阅读者和搜索引擎是有意义的；组织好的资源顺序使页面更容易阅读。

　　这也是一个好的时机去验证标记,它在发掘标记的错误以及避免bug在开发过程中持续存在是非常有用的。

　　提示：

　　 验证工具我们经常使用是W3C提供的:http://validator.w3.org。

 

　　一旦基础标记处在一个良好的状况下,有少量的“安全”样式规则应用于改善视觉外观和可用性的基本体验。安全式样是很简单的CSS规则,这些规则在宽广的浏览器中可靠地渲染，以及如果浏览器不支持将平滑地降低标准。

 　　安全的样式可以通过一个包含字体以及最小化的背景颜色，边框，内边距和外边距的外部样式表应用于基础标记。就足以在内容对象间传达基本的品味和创造舒适的空间, 强调层次结构,以及页面更容易阅读或浏览。

　 　一些CSS属性可以以意想不到的方式呈现在老的浏览器和移动设备,因此为了基本体验在安全式样表中避免使用它们是至关重要的。这些属性包括浮动；在黑色 背景色或者图片中反转文字；和设置固定宽度或者高度尺寸，溢出属性，或者负边距，或者位置值（我们将会在第4章详细地讨论如何编写安全式样）

　　当基本标记和安全式样完成，页面将会充分发挥作用并对每一个人可用。接下来，我们将计划增强的体验。