注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

HTML 标签嵌套规则  

2014-08-24 14:21:10|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

HTML 标签嵌套规则------梦幻雪冰

HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰

 在学HTML5的时候,会接触比较多的HTML标签。有的可能不太注意标签的嵌套规则,其实标签的嵌套规则也会产生兼容问题,比如a标签嵌套a标签在IE系列、谷歌、火狐都会产生解析错误,所以为了让大家重视标签的嵌套规则,来写了一篇小博客。欢迎学习交流----梦幻雪冰
WEB前端开发转载了HTML 4 Strict 和 XHTML 1.0 Strict 下标签嵌套规则(作为了解):
先进行说明这张图片描述了什么?看完下面的描述,大概知道HTML标签的嵌套规则了。
1、小写的单词表明一组或一系列 HTML 标签
2、每一项条目(标签)后都跟随一组标签列表,如果没有这个列表,那么表明该条目(标签)内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容(#PCDATA,见下文)。如果注明 (empty),这意味着该条目内部不允许包含任何形式的内容。
3、#PCDATA 的意思是“parsed character data”,即纯文本内容(不包括任何 HTML 标签,但是转义内容可以存在,比如 ? 和 ?)
4、CDATA 的意思是“character data”,这意味着不包括转义内容的纯文本内容,详细内容可以参考CDATA Confusion
5、excluding … 意即不得直接或者间接的包含所列的元素
HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰
接下来来看看,不遵守嵌套规则产生的解析错误,会让你觉得很恶心的。
【第一个】<p><div>div标签</div></p>
测试结果如下:
HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰
【结      果】以上显示都是解析错误
【解决办法】p标签不能包含块元素,只能包含行元素。欢迎学习交流----梦幻雪冰

【第二个】列表项元素<li>兄弟元素为<div>
测试结果如下:
HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰
【结      果】以上显示IE6、IE7解析错误
【解决办法】ul、ol标签只能直接包含li列表项元素。
 
【第三个】dl元素直接包含其它元素(dt元素与dd元素之外的元素)
测试结果如下:
HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰
【结      果】以上显示IE6、IE7解析错误
【解决办法】dl标签只能直接包含dt标签和dd标签

【第四个】a标签嵌套a标签
测试结果如下:
HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰
【结      果】以上显示都是解析错误
【解决办法】a标签不能嵌套a标签,另外提一点的是a标签不能包含input元素
 
【第五个】caption元素不是被table元素直接包含
测试代码如下(错误的嵌套规则):

<table>
<thead>
<caption>梦幻雪冰</caption>
</thead>

<tbody>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
</tbody>
</table>

测试结果如下:
HTML 标签嵌套规则 - 梦幻雪冰 - 梦幻雪冰
【结      果】以上显示全部解析错误
【解决办法】table元素只能直接包含caption、col、colgroup、thead、tbody、tfoot元素

总结HTML 嵌套规则如下:
  1. <ins><del>(行内元素)可以包含块元素
  2. dl元素只允许包含dt和dd,同时dt不能包含块元素,对于dd元素可以包含任何元素
  3. <p><h1><dt>是块元素 但是不能包含块元素
  4. <table>子代只能是caption、col、colgroup、thead、tbody、tfoot元素
欢迎学习交流----梦幻雪冰
  评论这张
 
阅读(137)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017