• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 页面设计中table和div的合理应用简要说明

页面设计中table和div的合理应用简要说明

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含table,div,页面设计等相关知识,佚名 希望在学习及工作中可以帮助到您
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

doctype 声明不属于 HTML 标签;tag; 它是一条指令,告诉浏览器编写页面所用的标记的版本。

在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。

HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。

在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:

<!DOCTYPE HTML>

因为HTML5 这个声明文档类型的标签是向下兼容的,所以即使你的html基本不使用HTML5的标签 ,你也可以使用这个声明方式,但是页面中会有某些不兼容的地方,这个就需要你根据实际情况来修正了。<!doctype html>可以让浏览器在严格模式(标准模式)下渲染页面,而不需要指定某个类型dtd。

再进入今天的主体:table和div 的合理应用

Table在早期的页面设计中应用广泛,但是随着互联网的发展table渐渐被抛弃,现在互联网上只有一小部分老站(有名气,不必要改的那种有很多),还是沿用着table来布局页面,现在的新站基本上都是使用了div+css来布局页面,但是很多web前端初入门的朋友就会产生一种错觉,认为table会是页面对搜索引擎不友好的元凶,所以在设计列表的时候总是会去使用dt ,ul 之类的标签。这样有的使用会让你多花很多设计页面样式的时间,而真正对搜索引擎优化的效果很微弱。

大量使用table的一个非常大的弊端除了对搜索引擎不友好,还有就是对程序员也非常的不友好,table的大量嵌套,会让人看的很晕。但是如果配合着div使用的话就会提供效果,达到的效果或许比dt,ul来的更加好。

还有一个问题就是大量的table tr td 会让你页面的语义非常的差,这里先不讨论标签语义化,大家自己去百度搜一下,语义良好的页面,搜索引擎是非常的喜好的,这里我先介绍一个语义化很好的网站 http://www.jb51.net/w3school/ 大家也可以自己动手操作,用谷歌浏览器去掉它的css链接,然后再看它的页面布局,你会发现,它的所有的标题,列表,都井然有序,就像是写论文的时候非常正规的排版一样,即使不要样式表,相信大家也不会产生非常大的厌恶感,但是有些网站就不一样了,去掉css样式文件之后,页面直接就瘫了,这里再发个站www.webgamei.com 去掉它的css样式文件 (2个) 再看页面,因为它的样式很多都是直接写进table中的style中,所以你看起来没有很大的变化,但是你看导航部分,会发现,页面毫无语义感,若是页面的样式分离开了,那去掉css文件,估计没法看了。

所以这里建议,在你的页面设计出来之后,你可以先不去加css样式,直接先把默认样式的版面写出来,在根据页面去加css自定义样式,这样会不会更高效点呢 ,呵呵 ,我没试过,只是这么想而以。

关于语义的内容很多,这里我也不说太多了,介绍大家一本书 《编写高质量代码--Web前端开发修炼之道》很不错的一本书,里面对语义化介绍的很清楚。页面布局是一个经验积累的过程,看到好的网站,它的页面布局,你都可以借鉴一下,看到不好的,你也可以想一下该怎么去优化它,这样才能在web前端之路上成长更快。

写的不详尽之处还请web前辈指正,谢谢

您可能想查找下面的文章:

  • Table布局的优缺点介绍及为什么不建议使用
  • Div与table的区别在速度和加载与网页应用等等中的差别介绍
  • 什么情况下使用table 什么情况下使用css(经验分享)
  • html中Div与table的区别(各方面细节探讨)
  • 页面设计中table和div的合理应用简要说明
  • DIV建站、Table建站以及XHTML建站的区别分析说明
  • ie8,chrome中table的宽度固定方法
  • 浅谈 div 与 table 如何取舍结合利用

相关文章

  • 2017-08-06图片动态加载技术应用及jquery.lazyload插件使用实例
  • 2017-08-06网页文字设计应该像聪明女孩穿衣服
  • 2018-08-23人工智能字体来了?!阿里×汉仪的全球首个人工智能中文字库面世!
  • 2018-08-23扁平风格的问题在哪?来看这个分析!
  • 2018-08-23想成为高级交互设计师?这是我的5个经验总结
  • 2018-08-23超全面!色彩无障碍设计之「对比度」的探索
  • 2017-08-06新鲜出炉的有用图标集25组 国外下载
  • 2018-08-23从新人到大牛!可能是最全面的交互设计知识体系
  • 2017-08-06入门知识 网站地址前的http是什么意思?
  • 2018-08-23同一个设计需求,新手和高手都是怎么分析的?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 从技法到心理,深度分析优秀设计师该有的气质
    • 合理使用h1,h2,h3标签
    • 实例演示!“设计规范”没有你想象的那么重要(附常用设计规范)
    • 新鲜出炉!2018年的用户体验设计趋势(下)
    • 2018年高手总结了21条最值得掌握的移动App 设计基本原则
    • 超全面!值得新手学习收藏的平面设计版式法则大全
    • 战狼2海报烂?那是你没看到精髓!
    • 腾讯99%的付费界面和流程,都是这个团队设计的!
    • 这8个字体设计和排版技巧,是2018年的设计趋势
    • 小屏幕移动设备网页设计需要注意的事项

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有