随着网络的进步和硬件的发展,网站的框架也发生着翻天覆地的变化,从05年前崇尚的table框架,到现如今的div+css框架,每一步都体现出网络的人性化。
先说说table框架吧,早几年的网络还没有像现在这样壮大,而且电脑的配置也远没有达到网络快速发展的要求,网站从下载到显示的过程电脑也会运算很长时间,所以table框架就诞生了。其实table是出于方便数据排列和组合而产生的标签,但因其编写方便、直观、节省大量CPU资源等优点,速度成为网站建站的首选方案。
而div+css框架在table框架盛行时也已存在,而当时由于硬件本身的限制,制约了div+css本身的发展,而随着时间的推移,div+css逐步完美,其编写灵活,代码简洁,符合SEO标准等,渐渐取代了table框架,成为了网站建站的首选方案。
尽管现在建站全都用div+css框架,但由于建站人员的水平参差不齐,HTML标签嵌套混乱的现象也时常出现,这样既会影响日后的修改和维护,也不利于各浏览器的相互兼容,这点是最至命的,由于IE的兼容性超好,导致一些错误可能被网站制作者所忽视,从而可能会造成非IE用户无法访问的尴尬局面。
下面来说一下HTML标签应如何嵌套。(如下表)
[html][/html]
HTML
● HEAD
○ TITLE (required)
○ SCRIPT,STYLE
■ CDATA
○ BASE,MEAT,LINK (empty)
○ OBJECT
● BODY
○ INS,DEL
■ flow
□ block
□ inline
○ SCRIPT
■ CDATA
○ block
■ P,H1,H2,H3,H4,H5,H6
□ inline
◆ #PCDATA
◆ TT,I,B,BIG,SMALL,EM,STRONG,DFN,CODE,SAMP,KBD,VAR,
CTTE,ABBR,ACRONYM,SUB,SUP,Q,SPAN,BDO
◇ inline
◆ A
◇ inline excluding an enclosed A element
◆ OBJECT
◇ PARAM (empty)
◇ flow
◆ IMG,BR (empty)
◆ SCRIPT
◇ CDATA
◆ MAP
◇ AREA (empty)
◇ block
◆ INPUT (empty)
◆ SELECT
◇ OPTGROUP
◎ OPTION
◇ OPTION
◆ TEXTAREA
◆ LABEL
◇ LABEL excluding enclosed label
◆ BUTTON
◇ flow excluding A,INPUT,SELECT,TEXTAREA,LABEL,
BUTTON,FROM,FIELDSE
○ UL,OL
■ LI
□ flow
○ DL
■ DT
□ inline
■ DD
□ flow
○ PRE
■ inline excluding IMG,OBJECT,BUG,SMALL,SUB,SUP
○ DIV
■ flow
○ SPAN
■ flow
○ BLOCKQUOTE
■ block
■ SCRIPT
□ CDATA
○ NOSCRIPT
■ flow
○ FORM
■ block excluding an enclosed FROM
■ SCRIPT
□ CDATA
○ HR (empty)
○ TABLE
■ CAPTION
□ inline
■ COLGROUP
□ COL (empty)
■ COL (empty)
■ THEAD,TBODY,TBODY
□ TR
◆ TH,THD
◇ flow
○ ADDRESS
■ inline
○ FIELDSET
■ #PCDATA
■ inline
■ FLOW
■ LEGEND
□ inline
[html][/html]
注意:在用DIV框架进行制作时尽量不要将DIV放入到其它的标签中,如<span><div>内容</div></span>。