Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

常见的模块,你语义化没

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

  • Login to see the comments

常见的模块,你语义化没

  1. 1. 常见的模块,你语义化没 Tid Peunzhang 2012/03/13
  2. 2. 常见模块一:标题和内容
  3. 3. 常见模块一:标题和内容
  4. 4. 常见模块一:标题和内容
  5. 5. 三种方案实现下图模块一
  6. 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. 7. 模块一:方案一• 去除样式后的页面我们看到页面的主题和内容并没有被明显的区别,可读性不佳
  8. 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. 9. 模块一:方案二• 去除样式后的页面方案二能清楚看到标题和内容的划分,页面可读性良好,但”更多”其实不属于标题的内容
  10. 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. 11. 模块一:方案三• 去除样式后的页面方案三页面结构有语义,内容也有语义,可读性良好,是最佳的选择
  12. 12. 常见模块二:表单
  13. 13. 常见模块二:表单
  14. 14. 常见模块二:表单
  15. 15. 二种方案实现下图模块二
  16. 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. 17. 模块二:方案一• 语义 <表单 class=“form”> <分隔> <范围>账号:</范围> <表单项 type=“text” id=“name”/> </分隔> <分隔> <范围>密码:</范围> <表单项 type=“text” id=“pw”/> </分隔> <表单项 type=“submit” value=“登陆” class=“login-btn”/> <锚点 class=“forget-pw”>忘记密码</锚点> </表单>我们看到“分隔”、“范围”这样无语义的标签,“账号”、“密码”和他们对应框没有语义上的对照等
  18. 18. 模块二:方案一• 去除样式后的页面方案一页面内容紧紧贴在一起
  19. 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. 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. 21. 模块二:方案二• 去除样式后的页面方案二页面结构清晰,方便阅读
  22. 22. 常见模块三:表格
  23. 23. 常见模块三:表格
  24. 24. 二种方案实现下图模块三
  25. 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. 26. 模块三:方案一• 语义 <分隔 class=“caption”>div、span标签语义化对照表</分隔> <表格 class=“table-content”> <表格行 class=“head”> <单元格>标签名</单元格><单元格>英文全拼</单元格><单元 格>中文翻译</td> </表格行> <表格行> <单元格>div</单元格><单元格>division</单元格><单元格>分隔 </单元格> </表格行> <表格行> <单元格>span</单元格> <单元格>span</单元格><单元格>范围 </单元格> </表格行> <表格行class=“foot”> <单元格 colspan=“3" >查看更多标签语义</单元格> </表格行> </表格>
  27. 27. 模块二:方案一• 去除样式后的页面
  28. 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. 29. 模块三:方案二• 语义 <表格 class=“table-content”> <表格标题>div、span标签语义化对照表</表格标题> <表格头部> <表格行> <表格头>标签名</表格头><表格头>英文全拼</表格 头><表格头>中文翻译</表格头> </表格行> </表格头部> <表格主体> <表格行><单元格>div</单元格><单元格>division</单元格><单 元格>分隔</单元格></表格行> <表格行><单元格>span</单元格> <单元格>span</单元格><单 元格>范围</单元格></表格行> </表格主体> <表格尾部> <单元格 colspan=“3" >查看更多标签语义</单元格> </表格尾部> </table>
  30. 30. 模块二:方案二• 去除样式后的页面方案二页面与方案一区别在于首行字体的加粗,表格的HTML结构虽然语义了,页面是看不出明显的差别,但选择语义化标签不止是让页面结构更好,更多是体现自己专业化的态度
  31. 31. 对模块语义标签的思考• 语义化标签,保证页面去掉样式具有良好 的结构和可读性,又符合web标准• 尽多使用有语义的标签在合适的地方来替 代无语义标签div、span• 考虑使用p代替div在内容有语义的地方,因 为p默认样式具有上下边距• 考虑strong、em代替span在有语义的地方, strong默认样式是加粗,em默认样式是斜体

×