WEB前端开发经验总结1.doc

文档介绍：WEB前端开发经验总结1
结构,结构,刚才我提到了标签有块级元素和行内元素之分的,要是不理解好这两个概念,我们也不会很好的了解怎么合理的结构化页面,现在就来介绍它们:
块级元素
块级元素生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能有其他元素。换句话说,他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.
行内元素
行内元素在一个文本行内生成元素框,而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”,所以可以出现在另一个元素的内容中,而不会破坏其显示。
注意,尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点,但也存在一个重要的差别。在HTML和XHTML中,块级元素不能继承自行内元素(即不能嵌套在行内元素中)。但是CSS中,对于显示角色如何嵌套不存在任何限制。
恩,还是不能把CSS跟XHTML完全的分开谈,没办法。现在大家了解了什么是块级元素和什么是行内元素了吧。还是回过头来接着说我们的结构化吧,以上讲了这么多,我都是在讲XHTML标签要结构化,所以基本跟CSS关系不大,那么我们下面看看我写的这个页面的代码在没有CSS的情况想,是否结构清晰吧:
看看,页面是不是依旧很清晰,很容易看出,哪里是标题,哪里是导航,哪里是搜索表单?呵呵,其实我这么给大家看的页面,跟我们的搜索引擎查看页面的结构很接近了,到这里大家可能体会到一些搜索引擎友好的意思了吧?
其实让我们看看这个页面的DOM数状图,可能我们对一个简洁合理的结构化布局的页面有更直观的了解。
看看,是不是做到了我说的:XHTML标签充分的语意化、尽量少的嵌套、页面里基本只显示用户需要看的数据、对搜索引擎友好(没有CSS支持时,浏览页面时同样清晰,层次分明,十分容易查看的数据。),已做了基本的SEO优化
呵呵,说到这里我才回答了“怎样的一个页面才算是合理的布局的呢?”,做到上面4点