WEB前端开发经验总结1
WEB前端开发经验总结1
结构，结构，刚才我提到了标签有块级元素和行内元素之分的，要是不理解好这两个概念，我们也不会很好的了解怎么合理的结构化页面，现在就来介绍它们:
块级元素
块级元素生成一个元素框，(默认地)它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div. 行内元素
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素(即不能嵌套在行内元素中)。但是CSS中，对于显示角色如何嵌套不存在任何限制。 恩，还是不能把CSS跟XHTML完全的分开谈，没办法。现在大家了解了什么是块级元素和什么是行内元素了吧。还是回过头来接着说我们的结构化吧，以上讲了这么多，我都是在讲XHTML标签要结构化，所以基本跟CSS关系不大，那么我们下面看看我写的这个页面的代码在没有CSS的情况想，是否结构清晰吧:
看看，页面是不是依旧很清晰，很容易看出，哪里是标
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
，哪里是导航，哪里是搜索表单,呵呵，其实我这么给大家看的页面，跟我们的搜索引擎查看页面的结构很接近了，到这里大家可能体会到一些搜索引擎友好的意思了吧,
其实让我们看看这个页面的DOM数状图，可能我们对一个简洁合理的结构化布局的页面有更直观的了解。
看看，是不是做到了我说的:XHTML标签充分的语意化、尽量少的嵌套、页面里基本只显示用户需要看的数据、对搜索引擎友好(没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看的数据。)，已做了基本的SEO优化
呵呵，说到这里我才回答了“怎样的一个页面才算是合理的布局的呢,”，做到上面4点，我个人觉得这个页面就已经做到了合理布局。而至于说要通过W3C的XHTML语法验证，只是很基础的开始。一个通过验证的页面和一个合理布局的页面是两码事的。
这里我再罗嗦一下，我一直都在说的是个人认为如何才算是一个合理布局的页面,要达到什么要求才能算合理布局,因为只有理解了这个，之后的CSS的技巧(浏览器的兼容处理等)都是围绕着让XHTML页面布局更合理来进行的。而不是单纯做到各个浏览器下都显示正常(一致)。所以请记住在开发时做到:
1. XHTML标签充分的语意化
2. 尽量少的嵌套
3. 页面里基本只显示用户需要看的数据(我们用CSS直接控制用户需要看的数据的显示的样式)
4. 页面对搜索引擎友好(没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。)，
已做了基本的SEO优化
今天就谈到这里吧，下面我们会接着讨论CSS的处理技巧。
浙公网安备 33021202002483