Flex Home » HTML http://flex.desizen.com 又一个 flex 博客 Thu, 01 Dec 2011 03:33:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 一张html标签嵌套规范的图表 http://flex.desizen.com/html-tags-strict/ http://flex.desizen.com/html-tags-strict/#comments Tue, 13 Oct 2009 01:09:18 +0000 joel http://flex.joelove.cn/?p=308 下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。

说明：

为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>）
小写的单词表明一组或一系列 HTML 标签
每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。
#PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 &auml;和 &#228;）
CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
excluding … 意即不得直接或者间接的包含所列的元素

html标签嵌套规范

html标签嵌套规范

注. 对于 XHTML 1.0，基本上一致，不同点如下：

在 XHTML 中，<table> 标签后可以紧跟一个 <tr>，而在 HTML 4.01 里，不允许这样，不过 <tbody> 标签又是可以省略的。意思就是说，如果代码中的 <table> 后紧跟 <tr>，对于 HTML 4.01，会隐性的生成一个 <tbody> 标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。

via:this

]]> http://flex.desizen.com/html-tags-strict/feed/ 0 HTML语义化 http://flex.desizen.com/html-semantic/ http://flex.desizen.com/html-semantic/#comments Thu, 18 Jun 2009 07:10:36 +0000 joel http://flex.joelove.cn/?p=83 HTML语义化这篇文章是我一直想写而又不敢写的,因为我对它的学习也处在一知半解的状态下.但是为了更好的学习,我决定整理一篇,所以此文得以诞生.

如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了div+css,这是进步的标志.然而,我们似乎看到了一个不太好的现象:整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一种html标签存在.这种现象(使用习惯)非常的不好,滥用现象使得网页制作似乎就只剩下了div.刚才说了,时代是在进化着的,所以,诞生了HTML语义化这个概念.

什么是 HTML语义化

HTML是一种对文本内容进行结构和意义（或者说”语义”）进行补充的方法.页面中每一部分内容都包含一种含义.HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子.而HTML语义化则是使用html所提供的现有标签(因为html各种标签已经具备相应含义与使用位置),利用其相应含义的标签去格式化页面中的内容.因为浏览器还是搜索引擎只是能读懂它们(ie6除外).

为什么要 HTML语义化

良好的语义(X)HTML标记有助于提升你的网站对访客的易用性.

并不是所有光临你网站的访客都能够“看到”你的CSS和JavaScript,但他们都会得到你的(X)HTML.因此,你的标记如果能在语义方面对理解你的内容提供必要的帮助将会非常重要.

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式,一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是
,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.(引用文字来自互联网)

另外补充一点:未来的搜索引擎必然会进行变动,变的更加的人性化,即变成语义化搜索,目前已经有针对这一领域的语义化搜索引擎出现:wolframalpha,不过还很年幼.

如何将 HTML语义化

想要语义化你的html,没有别的办法,只有多用html标签,掌握不同的标签含义,格式化你的内容.
推荐阅读:

]]> http://flex.desizen.com/html-semantic/feed/ 2