Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

常见的模块,你语义化没

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

  • Identifiez-vous pour voir les commentaires

常见的模块,你语义化没

  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默认样式是斜体

×