YSlove.net » xhtml http://yslove.net Playing Keyboard Fri, 27 Jan 2012 06:20:41 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 符合XHTML Strict 1.0 W3C组织标准的标签与结构 http://yslove.net/2009/08/xhtml-strict-1-0-structural-element/ http://yslove.net/2009/08/xhtml-strict-1-0-structural-element/#comments Mon, 17 Aug 2009 07:53:00 +0000 YSjia http://yslove.net/?p=404 合理标签

结构
htmlheadbodydivspan

元信息
DOCTYPEtitlelinkmetastyle

文本
ph1h2h3h4h5h6strongemabbracronymaddressbdoblockquoteciteqcodeinsdel
dfnkbdpresampvarbr

链接
abase

图像和对象
imgareamapobjectparam

列表
ulollidldtdd

表格
tabletrtdthtbodytheadtfootcolcolgroupcaption

表单
forminputtextareaselectoptionoptgroupbuttonlabelfieldsetlegend

脚本
scriptnoscript

表现
bittsubsupbigsmallhr

合理的结构

HTML

  • HEAD
    • TITLE (required)
    • SCRIPT, STYLE
      • CDATA
    • BASE, META, LINK (empty)
    • OBJECT (see content model below)
  • BODY
    • INS, DEL (special rules apply)
    • SCRIPT
      • CDATA
    • block
      • P, H1, H2, H3, H4, H5, H6
        • inline
          • #PCDATA
          • TT, I, B, BIG, SMALL, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, 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, FORM, FIELDSET
      • UL, OL
        • LI
          • flow
      • DL
        • DT
          • inline
        • DD
          • flow
      • PRE
        • inline excluding IMG, OBJECT, BIG, SMALL, SUB, SUP
      • DIV
        • flow
      • BLOCKQUOTE
        • block
        • SCRIPT
          • CDATA
      • NOSCRIPT
        • flow
      • FORM
        • block excluding an enclosed FORM
        • SCRIPT
          • CDATA
      • HR (empty)
      • TABLE
        • CAPTION
          • inline
        • COLGROUP
          • COL (empty)
        • COL (empty)
        • THEAD, TBODY, TBODY
          • TR
            • TH, TD
              • flow
      • ADDRESS
        • inline
      • FIELDSET
        • #PCDATA
        • inline
        • flow
        • LEGEND
          • inline

结构来总结来自:Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)

结构说明原文（英文翻译不咋的，不想误人子弟，所以不是请大家自己看吧）：

  • An uppercase word stands for the corresponding element. (Note that by XHTML rules, element names must be written in lower case, e.g. <html>, not <HTML>.)
  • A lowercase word is a term which describes a collection of HTML elements.
  • Each entry is followed by a list of elements which may appear within the elements specified by the entry. If there is no such list, no nested elements are allowed. This means that only text (#PCDATA, see next item) is allowed inside the element; but if the note (empty) is given, it means that no content whatsoever is allowed. However, for flow, inline, block, OBJECT, and BODY the allowed contents are described separately under the main entries for them.
  • #PCDATA means "parsed character data", which is plain text (without HTML tags, but "escape sequences" such as &auml; and &#228; are allowed)
  • CDATA means "character data", which is plain text where even "escape sequences" aren’t interpreted; for a much better explanation, see the article CDATA Confusion by Joe English
  • excluding … means that the element must not contain any of the listed elements, directly or indirectly.

    • 也许这些文章您也感兴趣:

    Copyright © 2010 by YSlove.net
    欢迎留言 | 作者: YSjia | 原文链接：http://yslove.net/2009/08/xhtml-strict-1-0-structural-element/
    数字指纹 3abf2858e3aa210a1750056317836753 (38.107.179.209)     ]]>     http://yslove.net/2009/08/xhtml-strict-1-0-structural-element/feed/ 4     CSS清除浮动详解 http://yslove.net/2009/07/css-clear-float/ http://yslove.net/2009/07/css-clear-float/#comments Wed, 15 Jul 2009 07:08:00 +0000 YSjia http://yslove.net/?p=388 什么是浮动(floats)？

    当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。在IE5+中， div 和 span 对象假如没有指定宽度会被分配默认的宽度，而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 styleFloat 。

    浮动(floats)有何用？

    浮动可以说是为排版旦生的。如页面排版和图文排版，后者大家可能更清楚。MS Office最被人认同与最高使用的就是排版，其理论上与此相同，但是实现更为复杂。

    floateg
    （图片来自w3c.org）

    e.g.

    style:

    IMG { float: left }
BODY, P, IMG { margin: 2em }

    HTML:

    <p><img alt="This image will illustrate floats" src="img.gif" />
Some sample text that has no other...</p>

    需要注意的是带有浮动属性的盒子(box)，其外边距是不可叠加的。

    但是在正常的文档流里面出现代有浮动属性的块级(block)时，就会出现重叠的现象。

    float2p

    （图片来自w3c.org）

    这样的事情有时我们不想让他发生，所以就需要清除浮动(clear)。

    注意在Quirks Mode下是不需要清除浮动的。

    清除浮动(clear)

    清除浮动就是让盒子处在一种‘闭合’的状态。

    1.添加‘封底’标签。

    e.g.

    <div class=’container’>
    <div style=’float:left’></div>
    <div style=’float:right;’></div>
    <div style=’clear:both’></div>
</div>

    这样在底部会有一个clear属性的div标签（当然你也可以用其他的任何透明的标签），来保证整个container盒子处在‘闭合’状态。

    这种好处在于没有破坏标签本意，可读性比较强

    坏处在于会多一些代码。

    2.用:after伪类
    e.g.

    <div class=’container’>
    <div style=’float:left’></div>
    <div style=’float:right;’></div>
</div>

    代码如下：

    .clearfix:after{
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

.clearfix{
    display:inline-block;/*fix ie7*/
}

*html .clearfix{
    height:1%;
}

.clearfix{
    display:block;
}

    这样的代码已经可以运行于大部分非IE浏览器，但是为什么这里会用*呢？

    这里的*适用于IE7与IE MAC。

    但是还有个别浏览器不行，如opera9.5。

    因为这里:after后面的是visibility:hidden，这样并不能将content里面的“.”隐藏，所以还需要一些hack!

    在伪类里添加如下代码：

    font-size:0px;
line-height:0px;

    这样就OK~

    3.利用overfloat属性

    利用overfloat属性可以很简单的解决浮动问题，除ie6以外的浏览器几乎都支持。

    使用方法，就是在浮动标签上加上overfloat:auto这个属性即可(在ie6中可以用zoom属性)，如上面的container即为

    .container{overfloat:auto;_zoom:1;}

    这样一段代码就OK~

    但是overfloat属性的本意并不在此，所以在某些情况下会出现层级问题，还是要慎用。

    用zoom方法是不可以通过W3C的，但是也是最有效的方法。

    以上方法没有单一完全适用的通用方法，都是要靠大家在应用中灵活运用，才能达到最理想的效果~^_^

    也许这些文章您也感兴趣:

    Copyright © 2010 by YSlove.net
    欢迎留言 | 作者: YSjia | 原文链接：http://yslove.net/2009/07/css-clear-float/
    数字指纹 3abf2858e3aa210a1750056317836753 (38.107.179.209)     ]]>     http://yslove.net/2009/07/css-clear-float/feed/ 9