For Dear Editors (1) 前言及HTML标签简介

Blog - 代码 Tuesday, 26 October 2010 21:59

我在这里说话比做一份规矩的文档要自在一丁点。整个内容大的原则是尽量有条理、尽量简单易懂、尽量挑实用的东西、尽量少说废话。

正文之前我突然想起一事儿，刚第二段就开始发散了啊这思维，不过还是想说一下。我们貌似约定俗成的使用“切页面”来指代涉及重构方面的工作，其实“切页面”这种说法，或是做法，是差不多10年前的“制作网页”的主流方式，比如使用Photoshop自动切片输出HTML及图片包，或者手动切图之后拉到Dreamweaver里面使用WYSIWYG(所见即所得)的方式拼页面。目前符合Web规范的重构及前端开发相关工作的实现方法，当然也是我们目前所使用的方式，是“写页面”，大家拿到的HTML原型文件以及CSS样式表、JS脚本中的那些五光十色毫不焦虑的代码都是相关人员一行一行、一段一段敲进去的。不使用WYSIWYG这类generator性质的工具的原因没必要具体陈述，不过在后中还是会提及实际编辑工作中对这类操作的原则和最佳实践。

说正经的了开始。HTML页面原型文件主要包括两部分：文案等实际内容以及HTML标签。对重构及前端人员来说文案最让人脑袋疼，对编辑MMs来说大概反之。其实严格的说，我们平时能看到的比如<div>,<p>,<strong>等等属于XHTML标签，而我们的CMS生成的那些看着就特别二的大写字母的属性值缺少引号的标签才是标准化之前的老旧HTML写法，这事儿不展开说。

标签可以理解为内容的容器；在切页面的时代，容器通常是<table><tr><td>这些本应用于组织数据表格、却被错用于布局呈现的标签，在更加重视Web标准的时代中，容器则为更加语义化的标签；我们来简单看几个平时经常见到的：

<div> - division，用来将内容分割为块级的独立的部分，简单的理解，在不做特别样式设置的情况下，每一块被<div>封装的内容都会从新的一行开始。
<p> - 也就是paragraph，最符合语义的用法是封装一段作为文字段落的文字，通常用于大段文字或作为块级内容容器。
<a> - anchor,锚元素；行内元素，即不做特别样式设置的情况下不会换行显示。通过它的href属性，可以为该标签封装的内容创建到当前文档中其他部分或是到当前文档之外某个位置的链接，也就是超级链接。
<strong> - 顾名思义，强化、着重；行内元素。从语义上来说用于封装相对于上下文更加重要的内容，从呈现方式上讲，在不做特别样式设置的情况下会显示为粗体。
<em> - 行内元素，与<strong>类似，强调的重要程度次于前者，在呈现方式上默认以斜体文字显示。
<span> - 行内元素，通常用来封装一些在当前行内的需要特别处理样式的内容，默认情况下不会产生任何呈现方式的变化。
<img> - 图片啦，最重要的两个属性：src和alt，前者用来指明图片文件的绝对或相对路径，后者用来标注说明文字，在图片无法显示的情况下(最常见的例子是EDM)可以传达出该图片的大致内容；即使当前图片没有实际需要标注的内容，也建议保留该属性值为空。
<ul>和<li> - 无序列表及其列表项；举例说，很多专题页面中的主要内容都是通过它们来封装输出的，每一个具有重复属性的内容块(包括图片、文字、链接等)都作为一个列表项放在<li>标签中，由<ul>组织起来。
<table>,<thead>,<tfoot>,<tbody>,<tr>,<td> - 前面简单提到过；这些标签的准确用法是组织输出表格型数据，但长久以来被用于页面布局。现在我们所有的页面都不会通过这些标签来进行布局工作，唯一例外的就是EDM；出于各类邮箱、各类客户端在各种浏览器及操作系统下的不同解析渲染方式，只有使用最“稳固”的表格布局，才能保证EDM中的内容尽量按照设计需求呈现。其中用来直接封装内容的只有<td>元素标签，其余用来表格本身的语义化组织。