HTML元素标签的嵌套用法

2010-07-29
  • 1601
  • 1

随着网络的进步和硬件的发展,网站的框架也发生着翻天覆地的变化,从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>。