讲一些对于页面布局以及html的理解

来源:互联网 发布:2014十大网络用语 编辑:程序博客网 时间:2024/05/22 11:43

 html元素有很多  什么时候 该用什么元素 其实很有讲究 :

     一般页面布局 都 是div css 我们需要 去理解每个元素的语义化 做到就算网络延迟没有加载到css 也能让用户一目了然的明白整个网页的布局

    比如 一个网页中 h1标签 只能出现一次  我的理解 它 其实和head里面的title一样 代表 这个网页的主题  其他如strong  B标签  h(1,2,3...)标签 加重显示效果 一般放在一些显眼一段文字的标题上

   而div呢  放在一个块里面 看到一个网页原型图的时候  就要在脑海中开始布局 怎么分块 怎么布局 对兼容性有很大的帮助 布局布的好做网页的兼容其实不难ie6其实也很容易兼容的。除非是浏览器本身的某些bug 比如ie6不支持position fixed 这个 也是能够 兼容的

p 是一个段落  一小段文字 可以放在p标签内 注意 p是块标签 会占整个块的 所以布局的时候 如果这段文字占了父标签的100% 那么 就用p  不然就用span   span是行内标签  

打个比方 :

     我 觉得 csdn 这里 应该用h3 或者一些显示的标题 让别人知道 这个是标题 

    而文章标题 那一块应该用strong 因为strong本身的语义 就是 强调文本 加粗的 

     而下面那一段话 用一个p标签也行 这里为读这个文章列表用了太多的div了 div 嵌套太多 影响加载速度 影响代码质量

     我觉得 这个本来就是一个文章列表  列表形式的 用一个ul li  再里面套 一个 strong p 下面那一行再用一个p 都 可以完成 

    他这里嵌套了5 ,6层div  哪有这种 写法 太不会布局(个人见解哈  不知道 用什么做例子)

  


再讲一个例子:

   这种 情况  应该用什么布局 会比较好  : 鼻部  鼻炎 鼻出血 鼻甲肥大     这种 布局

 


 他是用的 div  ul li  a    

  这里 他没有凸显出标题  没有突出中心点   我觉得应该用dl dt dd  会好些 

 html 是这么解释的 


定义和用法

<dl> 标签定义了定义列表(definition list)。

<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。


我觉得dl 这个布局 就是有一个中心点<dt>  其他  <dd> 都是围绕着这个中心点的属性  布局 一定要用html 标签本身的语义化 然后 排版 该怎么显示 就用css 来控制  局布好了 css控制 好了 一般兼容性的问题也就不存在了 浏览器本身的bug除外  

其实兼容性 是取决于 html css 布的好不好  有的浏览器有显示有的浏览器有问题 这个很大一部份 都归纠于浏览器的容错能力 如果在别的浏览器有问题 那就是你布局 和css 写的不好  有提升的空间

html5 就更加强调标签的语义化

比如:

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

还有浏览器的头部 底部 都有各自相应的标签  当然还有一些其他新出的标签  

总之   html5 就更加强调标签的语义化

 布局和css用的好 很屏蔽很多兼容性的问题




原创粉丝点击