注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

表格的意义,行块的区别,嵌套规则  

2014-05-15 10:09:11|  分类: HTML+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

表格的语义是:表格状的数据

表格的元素 table thead tbody tfoot tr td col列 colgroup列分组 caption标题

表格嵌套必须按照正常的使用 table不能直接包含tr td 可以直接包含 thead tbody tfoot caption 内容一定要写在td里 否者表格会将内容排除到表格外

 

HTML代码 

表格的意义,行块的区别,嵌套规则 - 毛线球 - HTML5了了的博客
 
表格的意义,行块的区别,嵌套规则 - 毛线球 - HTML5了了的博客

  

结果

 

 

表格属性 

rowspan 与 colspan 合并行 合并列 即设置占几行 占几列 

· 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间

· 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

表格的意义,行块的区别,嵌套规则 - 毛线球 - HTML5了了的博客 

表格布局

忧点:容易实现 兼容问题较少 结构清晰

缺点:层级太深不利于SEO 表格的意义是‘表格状的数据’ 浏览器需要全部加载完成才能显示,加长了用户等待时间,用户体验不好。

 

实现效果

表格的意义,行块的区别,嵌套规则 - 毛线球 - HTML5了了的博客 

实现代码:
表格的意义,行块的区别,嵌套规则 - 毛线球 - HTML5了了的博客

表格的意义,行块的区别,嵌套规则 - 毛线球 - HTML5了了的博客 

 

标签的合理嵌套

· body可以直接包含块状元素、insdelscript。不可以直接包含行内元素

· insdel(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都不允许包含块状元素

· ph1-h6可以直接包含行内元素和文本信息,但是不允许包含块状元素

· dl元素只允许包含dtdd,同时dt不能包含块状元素,只允许包含行内元素,对于dd可以包含任何元素

· form元素不能够直接包含input元素。原因在于input元素属于行内元素,form元素仅仅能够包含块状元素

· table元素只能够包含captioncolgroupcoltheadtbodytfoot,不能够直接包含tr或者其他任何元素

行元素和块元素的区别

· 块级元素独占一行,在默认情况下,宽度自动填满父元素宽度

· 行内元素不会独占一行,宽度随着元素的内容而变化

· 行内元素的widthheight的设置无效

· 行内元素的marginpadding的垂直方向上不产生边距效果

· 可以使用display:block;display:inline;实现块级元素和行内元素的相互转换

 

Div+CSS的优缺点

优点: 实现结构样式相分离

dv+css更加灵活 

结构清晰 利于seo优化

浏览器加载时加载好的div直接显示 不用像表格布局需要整个网页加载好才显示 提升了用户体验

缺点:  类名添加 增加代码冗余

在较老版本浏览器有较多兼容问题。

  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017