语义化，模块化，HTML嵌套规则

1. 常见的模块，你语义化没
Tid Peunzhang 2012/03/13

2. 常见模块一：标题和内容

3. 常见模块一：标题和内容

4. 常见模块一：标题和内容

5. 三种方案实现下图模块一

6. 模块一：方案一
• 结构
<div class=“h2”>标题<a class=“more”>更多</a></div>
<div class=“content1”>什么是标签语义化……</div>
<div class=“content2”>良好的结构……</div>
• 语义
<分隔 class=“h2”>标题<锚点 class=“more”>更多</锚点></分隔>
<分隔 class=“content1”>什么是标签语义化……</分隔>
<分隔 class=“content2”>良好的结构……</分隔>
我们看到“分隔”这样无语义的标签，从标签上看不出逻辑

7. 模块一：方案一
• 去除样式后的页面
我们看到页面的主题和内容并没有被明显的区别，可读性不佳

8. 模块一：方案二
• 结构
<h2 class=“title”>标题<a class=“more”>更多</a></h2>
<p class=“content”>什么是标签语义化……</p>
<p class=“content”>良好的结构……</p>
• 语义
<二级标题 class=“title”>标题<锚点 class=“more”>更多</锚点>
</二级标题>
<段落 class=“content”>什么是标签语义化……</段落>
<段落 class=“content”>良好的结构……</段落>
模块二中标签和class命名具有语义化

9. 模块一：方案二
• 去除样式后的页面
方案二能清楚看到标题和内容的划分，页面可读性良好，但”更多”
其实不属于标题的内容

10. 模块一：方案三
• 结构
<h2 class=“title”>标题</h2>
<p class=“content”>什么是标签语义化……</p>
<p class=“content”>良好的结构……</p>
<a class=“more”>更多</a>
• 语义
<二级标题>标题</二级标题>
<段落 class=“content”>段落>
<段落 class=“content”>良好的结构……</段落>
<锚点 class=“more”>更多</锚点>
模块三从模块二的基础上改进了2点，一是h2结构的语义化，二是
整个模块内容的语义化

11. 模块一：方案三
• 去除样式后的页面
方案三页面结构有语义，内容也有语义，可读性良好，是最佳的
选择

12. 常见模块二：表单

13. 常见模块二：表单

14. 常见模块二：表单

15. 二种方案实现下图模块二

16. 模块二：方案一
• 结构
<form class=“form”>
<div>
<span>账号：</span><input type=“text” id=“name”/>
</div>
<div>
<span>密码：</span><input type=“password” i d=“pw” />
</div>
<input type=“submit” value=“登陆” class=“login-btn”/>
<a class=“forget-pw”>忘记密码</a>
</form>

17. 模块二：方案一
• 语义
<表单 class=“form”>
<分隔>
<范围>账号：</范围> <表单项 type=“text” id=“name”/>
</分隔>
<分隔>
<范围>密码：</范围> <表单项 type=“text” id=“pw”/>
</分隔>
<表单项 type=“submit” value=“登陆” class=“login-btn”/>
<锚点 class=“forget-pw”>忘记密码</锚点>
</表单>
我们看到“分隔”、“范围”这样无语义的标签，“账号”、“密码”和他们对
应框没有语义上的对照等

18. 模块二：方案一
• 去除样式后的页面
方案一页面内容紧紧贴在一起

19. 模块二：方案二
• 结构
<form class=“form”>
<fieldset>
<legend>登陆</legend>
<p>
<label for=“name”>账号：</label><input type=“text” id=“name”/>
</p>
<p>
<label for=“pw”>密码：</label><input type=“password” id=“pw” >
</p>
<p>
<input type=“submit” value=“登陆” class=“login-btn”/>
</p>
<p>
<a class=“forget-pw”>忘记密码</a>
</p>
</fieldset>
</form>

20. 模块二：方案二
• 语义
<表单 class=“form”>
<域集><!– 表单域要用fieldset标签包起来 -->
<图标>登陆</图标><!– legend说明表单的用途，一般是隐藏的 -->
<段落>
<表单项说明 for=“name”>账号：</表单项说明><表单项 type=“text”
id=“name”/><!– label for 让说明文本和相应的input关联起来 -->
</段落>
<段落>
<表单项说明 for=“pw”>密码：</表单项说明><表单项 type=“password”
id=“pw” >
</段落>
<段落>
<表单项 type=“submit” value=“登陆” class=“login-btn”/>
</段落>
<段落>
<锚点 class=“forget-pw”>忘记密码</锚点>
</段落>
</域集>
</表单>

21. 模块二：方案二
• 去除样式后的页面
方案二页面结构清晰，方便阅读

22. 常见模块三：表格

23. 常见模块三：表格

24. 二种方案实现下图模块三

25. 模块三：方案一
• 结构
<div class=“caption”>div、span标签语义化对照表</div>
<table class=“table-content”>
<tr class=“head”>
<td>标签名</td><td>英文全拼</td><td>中文翻译</td>
</tr>
<tr>
<td>div</td><td>division</td><td>分隔</td>
</tr>
<tr>
<td>span</td> <td>span</td><td>范围</td>
</tr>
<tr class=“foot”>
<td colspan=“3" >查看更多标签语义</td>
</tr>
</table>

26. 模块三：方案一
• 语义
<分隔 class=“caption”>div、span标签语义化对照表</分隔>
<表格 class=“table-content”>
<表格行 class=“head”>
<单元格>标签名</单元格><单元格>英文全拼</单元格><单元
格>中文翻译</td>
</表格行>
<表格行>
<单元格>div</单元格><单元格>division</单元格><单元格>分隔
</单元格>
</表格行>
<表格行>
<单元格>span</单元格> <单元格>span</单元格><单元格>范围
</单元格>
</表格行>
<表格行class=“foot”>
<单元格 colspan=“3" >查看更多标签语义</单元格>
</表格行>
</表格>

27. 模块二：方案一
• 去除样式后的页面

28. 模块三：方案二
• 结构
<table class=“table-content”>
<caption>div、span标签语义化对照表</caption>
<thead>
<tr><th>标签名</th><th>英文全拼</th><th>中文翻译</th>
</tr>
<thead>
<tbody>
<tr><td>div</td><td>division</td><td>分隔</td></tr>
<tr><td>span</td> <td>span</td><td>范围</td></tr>
</tbody>
<tfoot>
<tr><td colspan=“3" >查看更多标签语义</td></tr>
</tfoot>
</table>

29. 模块三：方案二
• 语义
<表格 class=“table-content”>
<表格标题>div、span标签语义化对照表</表格标题>
<表格头部>
<表格行> <表格头>标签名</表格头><表格头>英文全拼</表格
头><表格头>中文翻译</表格头> </表格行>
</表格头部>
<表格主体>
<表格行><单元格>div</单元格><单元格>division</单元格><单
元格>分隔</单元格></表格行>
<表格行><单元格>span</单元格> <单元格>span</单元格><单
元格>范围</单元格></表格行>
</表格主体>
<表格尾部>
<单元格 colspan=“3" >查看更多标签语义</单元格>
</表格尾部>
</table>

30. 模块二：方案二
• 去除样式后的页面
方案二页面与方案一区别在于首行字体的加粗，表格的HTML结构
虽然语义了，页面是看不出明显的差别，但选择语义化标签不止
是让页面结构更好，更多是体现自己专业化的态度

31. 对模块语义标签的思考
• 语义化标签，保证页面去掉样式具有良好
的结构和可读性，又符合web标准
• 尽多使用有语义的标签在合适的地方来替
代无语义标签div、span
• 考虑使用p代替div在内容有语义的地方，因
为p默认样式具有上下边距
• 考虑strong、em代替span在有语义的地方，
strong默认样式是加粗，em默认样式是斜体