웹 프론트엔드 HTML 튜토리얼 DIV+CSS技术是否适合中国中小网站_html/css_WEB-ITnose

DIV+CSS技术是否适合中国中小网站_html/css_WEB-ITnose

Jun 24, 2016 pm 12:30 PM

现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”,说简单点就是DIV+CSS进行网站制作。用DIV+CSS代替传统的Table制作框架和美化页面。 
在重构之前,肯定要了解为什么重构,为什么要用DIV+CSS技术?了解了这个问题,那么大家才有使用此技术重构网站的动力。各大CSS学习网站和教程无一例外都会列举出以下使用DIV+CSS的好处: 
1、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。 
2、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。 
3、搜索引擎更友好,排名更容易靠前。 
以上三点是N多好处最吸引人,最突出的三点。我就这三点进行一一介绍: 
第一点、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。 
这个是DIV+CSS技术最现著的特点,也是CSS存在的根源。完全的颠覆现在传统(table)网页设计的技术。所有现在用table制作的内容,都可以用CSS来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,只需要用div套div就可以实现以往表格套表格所有的美工,这样的结果就是使用div+CSS技术,让生成的网页文件大小更精简,更小。table时代,一个页面表格达到10个以上是非常普遍的事情,但是现在用 DIV+CSS,一个table都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div+CSS时,不像以往使用table时,必须把全部table读取完了才显示页面内容,现在是可以读一个 div就显示一个效果,大家打开网页不用等。好处真是明显而强大。 
这个优点的确是显著的,凡是使用传统table建的网页,内容多的话,有时候达到30K左右都有可能,文件打了打开时,肯定就有0.0几秒的延迟。使用DIV+CSS,由于没有表格使用,你前台打开看到的全是直接内容,CSS文件都是导入链接的,是另一个文件,根本和HTML文件大小没关系,这种生成的HTML文件,一个也就10K左右大小。文件数量少时看不出来,但是文件万级以上时,还是会节约几十M大小的。 
这些优点其实拿到现在来说,个人感觉用处不大,为什么呢? 
因为table虽然生成的HTML文件要大一些,占空间多点,但是现在的虚拟主机空间几百块钱就可以达到3G以上,一个中小型门户或是网站,完全够用,就算不够用,你数据量达到十万级别以上,生成的HTML文件也用不了2G,这个成本其实对于中小型网站长来说完全可以不计。再说使用table说的是打开速度慢。这个在现在的网络环境下面来说,也可以忽略的,现在大家上网都是用的宽带,至少也是512K以上,一个网页30K,打开也就一秒不到的时候,使用DIV+CSS也就快那么0.0几秒,这基本上是大家感觉不到的。而且既然都是生成HTML,那对服务器来说影响的效果是一样的,只要你的虚拟主机网络稳定,那么在table和div+css上就没差别。 

但是使用table制作网页框架和表格时,全是选择化制作的,也就是说不用大家去写代码,很简单输入边框和行数列数就可以达到制作出来的要求,但是使用div+CSS时,完全是靠手写代码,一个表格写四行代码的话,如果一个页面涉及十多个div表格生成,手写代码将超过50行,而且如果你数学不好,或是逻辑思维能力不强的话,你手写出来的表格将是乱七八糟,出现表格重叠和位置完全不正确。因为用div+css写表格时,表格间的逻辑排列关系完全是靠自己手写代码判断,如果你没有很强的手写代码能力和逻辑性,你所花费的时间,比你用table制作时间至少是4倍左右。基本上一个页面定义的ID和 class类,完整页面是不会少于20个的,一个ID或class手写5句,你制作一个HTML页面将超过100句代码,当然其中很多是可以存成一个 CSS文件来重复调用的。也就是说相同的页面内容的话,排版一样的情况下,可以直接导入链接CSS来实现。 
这个就很像之前生成HTML时,制作一个网页模板。但制作这个模板花的时间是用table制作时的几倍。这里有些人要说,但是我改版的时候,就只需要再写一个css就可以了,不用再生成HTML了。那么我要说,当你再写一个CSS文件改版时,我可能都已经用table制作好一个页面模板,而且还自动生成HTML全站的页面了。这不是不可能的。 
如果作为站长的你,对于手写代码不是特别有信心,逻辑思维能力不是特别强,建议还是使用传统的table制作网页更熟练和快捷。 
第二点,改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。 
DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站HTML页面,只需要重新写CSS,再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。 
方便是方便了,但是一个网站,我想问一下是不是一个月就要改次版?或是半年就要改一次?估计这么频繁的网站少的很哦。现在很多知名网站,行业的,门户的,包括个人网站,最多也是一年改一次版。一年改一次版,你一年才用一次重新写CSS,而且你写的CSS时间所用时间,比我用table制作时慢一二倍 (技术熟练情况下)。那我何必还要用CSS啊?我用table一样可以完成的效果,二分钟就做好了表格,你用css写要用十分钟。 
全国中小型站长的网站数据量一般也就在十万条数据之内,现在用自动批量生成HTML功能,生成完也用不了几个小时时间吧。费这点神一年也就一次,没什么大不了的。 
所以除非你网站一个月改一次版,那么你还是用最熟练和方便的方法来实现网页设计为妙。 
当然如果你CSS已经学的如火纯青了,而且是代码狂人。你当我说的废话。 
第三点,搜索引擎更友好,排名更容易靠前。 
当我看到CSS优点有这个时,我冷笑了二声。翻译和编写者真的是太不了解中国的网络环境了,这条拿到国外来说,如常用google.com的环境下,完全可行。但是拿到中国以百度为垄断的网络环境下,完全可以忽略。 
搜索引擎主要的排名依据不管百度和google,都是title和权重为主。他们不可能拿到这二点不用,而是用你的content内容来为主抓数据吧。而且最重要的一点,中小型网站主80%左右的流量是百度来的,百度现在完全是人工在排序,你以为你用了div+CSS百度就先排你在前面啊??如果你这样认为你就是太不配做中国站长了。 
退一万不说,就算你DIV+CSS有这优点,能让你页面在百度搜索时排前几位,你以为这个位置你能坐的长啊?不出一个月只要你这页面给你带去的流量达到一定数量,百度K你没商量。(我是指K这个关键字) 
综上所述,个人感觉DIV+CSS不能太迷信它的很好很强大,它作为制作网页,美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点,但是完全只用它来做,太费时费力,对于全国中小型网站长来说,真的不太适合。我个人觉得用table+DIV+CSS 是最好的组合,也是最省时省力的办法。 
PS:很多CSS资料宣传的CSS生成网页代码少,指的是生成的HTML文件的代码少,因为这种HTML文件根本没有美化过的,美化过程语句全在CSS文件中,一个CSS文件代码是奇多无比。 
一个HTML要配合一个CSS文件来用,不能单独使用。 

2008年08月27日 发布于Qzone

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles