使用TableDIVXHTML三者制作网页的区别

林小小欣MM

林小小欣MM

2016-02-20 00:22

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是使用TableDIVXHTML三者制作网页的区别,一起来学习了解下吧!

最近有客户问到table建站、DIV建站以及XHTML建站的区别,其实这也是国内网站建设逐步走向成熟的标志。网站建设,简单的来说,就是这个人长的怎么样和这个人内心怎么样。一部分是外观所展示出来的视觉效果、另一部分是藏在里面的代码元素。

我们先来举一个简单的例子,用这3种不同的代码风格,实现同一个页面效果:

1.首先是用table来写,需要8行代码:

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

网站标题

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

2.然后进步到用DIV,2行就可以了,但是因为存在两个DIV,为了区别,需要给不同的ID:

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)网站标题

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)网站内容

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

3.用XHTML来写:

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)网站标题

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)网站内容

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

优缺点:

用更为简洁的XHTML代码风格,不仅仅是为了提升页面开启速度。毕竟现在网络带宽越来越大,打开10K的网页代码和打开5K的网页代码区别并不明显。而采取XHTML建站的缺点也很明显,如果是一个同样规模的网站,用TABLE做,1小时就可以了,用DIV要2小时,用符合语义的XHTML则需要3小时,当然这只是一个预估,根据页面的不同和技术人员的熟练度,时间上面会有一定的出入。

那我们何必多花时间来做网站?

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

跟选老婆一样,我们不应该只看重这个人外观是否美貌,而更重要的是关心她内部配置如何,不然娶回家,三天两头跑医院,没事就跟你吵一架,心情肯定不会太愉悦。

一样的,做网站,不能只看设计风格如何如何。更最要的是核心代码如何、质量如何。我们做出来的网站不是摆在家里自己欣赏的,更重要的是去推广这个网站,给自己的企业带来网络影响力。让用户搜索某个关键词能找到你的网站,而不是找到别人的网站。

那怎样让搜索引擎找到自己的网站?

最简单的方法是写搜索引擎可以看懂的代码,也就是机器语言。

搜索引擎并不知道页面展现出来的效果是什么样子的,它毕竟是机器,至少现在不会和人一样,坐在显示器前边,很清楚的看到外观,很清楚的知道主次之分。它只能通过机器语言也就是你写下的代码来了解你的网站、收录你的网站。

当你用符合语义的XHTML,告诉它哪个是更重要的标题(H1/H2/H3/H4/H5/H6),哪个是列表(UL/OL/DL),哪个是段落(P)它就会认为你是一个好人,写下了它能看懂的语言,它就会把你的排名往前边提。

而整个网站都是table布局,谈不上主次之分,搜索引擎理解也会很吃力。DIV布局就更可笑了,整个网站写下的都是id=title,更有甚者写的都是拼音id=biaoti,更更有甚者用id=tit01″,千奇百怪的代码风格,难道开发人员在指望现在的电脑就能读懂人类语言?甚至还中文英文自创文都懂?

三者的关系

其实开篇就应该提一下三者的关系,怕概念性的玩意太多,吓跑了一般读者,最后简要的介绍一下。其实table、div都是xhtml的一个元素,table有它自己的作用,它就是用来做表格的,当网站内需要表格元素的时候,它是不可或缺的组成部分。div更是常用的元素之一。我们应该按照它们在机器语言中的语义,来给予他们不同的使命,而不是简单的拿过来随便放在一个地方就开始用,其实哪一个元素都可以做一个网站,甚至可以只用p标签来做网站、只用ul标签来做网站,但那样做出来的东西,看起来效果一样,实际上会造成机器人的阅读障碍。解析速度慢是小事,万一被搜索引擎认为是不友好因素,给屏蔽了,就麻烦了。毕竟,网站一个人玩没啥意思。

展开更多 50%)
分享

猜你喜欢

使用TableDIVXHTML三者制作网页的区别

Web开发
使用TableDIVXHTML三者制作网页的区别

innerHTMLouterHTML,innerTEXT三者之间的区别

Web开发
innerHTMLouterHTML,innerTEXT三者之间的区别

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

java中重载、覆盖和隐藏三者的区别分析

编程语言 网络编程
java中重载、覆盖和隐藏三者的区别分析

纹眉 绣眉和飘眉三者的区别

纹眉 绣眉 整形
纹眉 绣眉和飘眉三者的区别

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

特殊的第三者因特网

电脑网络
特殊的第三者因特网

孩子是不是“第三者”

电脑网络
孩子是不是“第三者”

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS网页制作技巧:节约网页代码编写时间

CSS网页制作技巧:节约网页代码编写时间

女生伤感签名繁体字

女生伤感签名繁体字
下拉加载更多内容 ↓