zoukankan      html  css  js  c++  java
  • 转WEB前端开发经验总结(3)

    什么叫结构化

    由于个人认为这个知识点是十分重要的,所以请允许我在这里多罗嗦几句,我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用 table布局的时候,我们的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而大家再看看我上面给大家展示的代码,很明显, 结构十分清晰。

    呵呵,说了半天,还是没有说什么是结构化,什么才是结构清晰啊?不要急。还记得我刚才提到的那几个标签吗?

    h1~h6--如果你要显示的数据是作为标题显示的时候,就用这些标签,因为这个标签的意思就是说,这个是一个标题,不仅我们的用户很容易理解h- head的英文字母缩写,我们的另外一个用户搜索引擎也可以很容易理解它。呵呵,看到了吧,一个充分结构化的页面,对用户是十分友好的。
    p--Paragraph(段落)
    ul--unorglized list(无序的列表)
    ol--orglized list(有序的列表)
    li--list item(列表项)
    form--表单
    div--division(区域)

    我这么一写,大家估计开始明白了,原来XHTML标签是有着自己的意义的(至于其他的标签的语意义,大家可以自己到W3C看看它的解释,也可以查看 语义化你的HTML标签和属性),所以我们讲要语意化的意思,就是用合理的标签来显示数据,比如前面提到的,是标题,就应该用h1~h6标签,如果是一个 段落的介绍文字,那么就应该使用p标签,如果是显示的一个没有顺序的列表,就应该用ul标签,如此...

    所以看这个例子里

    <h2>Ajax标签导航实例详解</h2>

    这么写就是很合理的,h2标签就说明这里是个标题。而这么写:
    复制内容到剪贴板代码:
    .title{
       font-size:18px;
       ...
    }
    <div class="title"><strong>Ajax标签导航实例详解</strong></div>

    虽然你用了strong来强调说明这部分文字,但是还是没有h2标签来的直接明了。

    还有这么写

    <div class="ariticle-title"><h2>Ajax标签导航实例详解</h2></div>

    也不是我们推荐的,可以不用嵌套层的地方,我们尽量不要去过多的嵌套层,减少嵌套会让我们的浏览器解析起来会更容易,速度更快。

    所我们使用WEB标准开发页面,绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面,也不意味着我们就不使用table。只要把握我刚才说的原则,使用合理的标签显示相应特征的数据。

    其实我们的table标签是一个很好的用来显示二维数据的标签,而table标签也确实是设计出来用来显示数据的,而不是用来布局的,只是我们当时 的设计师们都用table标签来布局了。关于table标签的使用,大家也可以去看看上面提供那篇参考文章《语义化你的HTML标签和属性》。

  • 相关阅读:
    [LeetCode] Search in Rotated Sorted Array II
    [LeetCode] Search in Rotated Sorted Array
    [LeetCode] Rotate List
    [LeetCode] Rotate Array
    [LeetCode] Product of Array Except Self
    [LeetCode] Recover Binary Search Tree
    [LeetCode] Jump Game II
    [LeetCode] Jump Game
    [LeetCode] Delete Node in a Linked List
    [LeetCode] Climbing Stairs
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1321801.html
Copyright © 2011-2022 走看看