从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了。所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含。
元素分类
HTML5中,元素主要分为7类:
Metadata
Flow
Sectioning
Heading
Phrasing
Embedded
Interactive
这些分类集合互相之间也存在一定的交集(一个元素可以同时属于多个分类),其交集关系呈现为:

需要注意的是,HTML5中的这种元素分类与inline、block没有任何关系,任何元素都可以在CSS中被定义为display:inline或者display:block。另外,除了这7大分类,还存在一些较小的分类,如Script-Supporting元素等。
Metadata(元数据元素)
顾名思义,Metadata元素意指那些定义文档元数据信息的元素 — 其作用包括:影响文档中其它节点的展现与行为、定义文档与其它外部资源之间的关系等。以下元素属于Metadata:
base, link, meta, noscript, script, style, template, title
Flow(流式元素)
所有可以放在body标签内,构成文档内容的元素均属于Flow元素。因此,除了base, link, meta, style, title等只能放在head标签内的元素外,剩下的所有元素均属于Flow元素。
a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl,em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter,nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style(如果该元素设置了scoped属性), sub, sup, svg, table,textarea, time, u, ul, var, video, wbr, text
Sectioning(章节元素)
Sectioning意指定义页面结构的元素,具体包含以下四个:
article, aside, nav, section
Heading(标题元素)
所有标题元素属于Heading,也即以下6个元素:
h1, h2, h3, h4, h5, h6
Phrasing(段落元素)
所有可以放在p标签内,构成段落内容的元素均属于Phrasing元素。因此,所有Phrasing元素均属于Flow元素。
对于这一定义,个人认为不应当使用“text”这一容易引起误解的词,事实上,一个元素即使不是文本,只要能包含在p标签中成为段落内容的一部分,就可以称之为Phrasing元素。
a(如果其只包含段落式元素), abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del(如果其只包含段落式元素), dfn, em, embed, i,iframe, img, input, ins(如果其只包含段落式元素), kbd, keygen, label, map(如果其只包含段落式元素), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script,select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text
一个不太精确的类比是:HTML5中的Phrasing元素大致就是HTML4中所定义的inline元素。
Phrasing元素内部一般只能包含别的Phrasing元素。
Embedded(嵌入元素)
所有用于在网页中嵌入外部资源的元素均属于Embedded元素,具体包含以下9个:
audio, video, img, canvas, svg, iframe, embed, object, math
Interactive(交互元素)
所有与用户交互有关的元素均属于Interactive元素。
a, audio(如果设置了controls属性), button, details, embed, iframe, img(如果设置了usemap属性), input(如果type属性不为hidden状态), keygen, label, menu(如果type属性为toolbar状态),object(如果设置了usemap属性), select, textarea, video(如果设置了controls属性)
Palpable
所有应当拥有子元素的元素称之为Palpable元素。比如,br元素因不需要子元素,因此也就不属于Palpable。
Script-supporting
自身不做任何页面展现,但与页面脚本相关的元素,具体包括2个:
script, template
内容模型(Content Model)
根据以上元素分类,HTML5标准文档定义了任何元素的内容模型 — 对于该元素而言,何种子元素才是合法的。
比如,对于p元素而言,其内容模型为Phrasing, 这意味着p元素只接受Phrasing元素为子元素,而对于像div这样的非Phrasing元素则并不接受。类似的,li元素的内容模型为Flow,因此任何可以放置在body中的元素都可以作为li元素的子元素。
值得注意的是,HTML5标准文档在定义元素的内容模型时,会使用一类特殊的分类:透明内容模型(transparent) — 对于内容模型为透明(transparent)的元素而言,其子元素的合法性由其父元素所决定;如果其父元素的内容模型仍为透明,则查看其祖父元素的情况,并依此类推;如果向上推演至body标签仍未找到任何内容模型非透明的父级元素,则该透明元素内部可包含任何Flow元素。
正确嵌套标签
元素的嵌套规则和页面头部申明的DTD有着千丝万缕的关系,通过了解HTML5的元素分类与内容模型,我们能更清楚的指导我们元素的嵌套关系。虽然大部分浏览器都有容错机制,写出来的代码在浏览器下表现没有什么异样,但作为一个专业开发人员,我们必须对待自己的代码应该一丝不苟,即使HTML5的胸襟很宽广,但我们更应该去遵从W3C,因为只有标准健壮的代码,才会有更好的扩展与兼容。
总结
因此a标签内是否合可以包含div标签要看其父元素的 content model 和其内容的 categories。比如我们要看 p > ins > a > div 是否合法,过程是这样的:p 元素的 content model 是 phrasing content,ins 本身属于 phrasing content 故可以嵌套;ins 元素的 content model 是 transparent,故在此时里面是否能有 a 需检查 p > a 的合法性;a 元素也属于 phrasing content,故 p > ins > a 合法;a 元素的 content model 也是 transparent,故此时里面包含 div 的合法性向上传递,检查 ins > div 又向上传递,变成检查 p > div;div 不属于 phrasing content,所以这个嵌套是不合法的。
从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型的更多相关文章
- HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?
先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...
- HTML中为何P标签内不可包含DIV标签?
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- HTML中为何P标签内不可包含DIV标签? (转)
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- html5.js让IE(包含IE6)支持HTML5元素方法
原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...
- p标签里面不要放div标签(块元素)
最好不要在p标签里面嵌套块级元素(如div Ul): <p>我来测试下<div>块元素</div>放在p标签的情况</p> <p>我来测试下 ...
- <p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签?
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
- 【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签?
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
- div标签嵌套原则详解(转载)
这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span ...
- HTML中的div标签
在网页制作过程过中,能够把一些独立的逻辑部分划分出来.放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 为了使逻辑更加清晰,我们能够为这一个独立的逻辑部分设 ...
随机推荐
- 基于apache-commons-email1.4 邮件发送
MailUtil.java package com.lucky.base.common.util; import com.zuche.framework.utils.PropertiesReader; ...
- 自定义字段的设计与实现(Java实用版)
前言 自定义字段又叫做"开放模型",用户可以根据自已的需求,添加需要的字段,实现个性化定制. 使用自定义字段的目的,使用自定义字段解决哪些问题 如现有一套CRM系统,客户模块中客户 ...
- eclipse 保存web.xml 和 loading description from 问题的解决
Eclipse 版本为 2019-06 (4.12.0) 发现开启的时候一直有loading description from *** ,这个loading description 是web项目加载 ...
- python读写txt文件
整理平常经常用到的文件对象方法: f.readline() 逐行读取数据方法一: >>> f = open('/tmp/test.txt') >>> f.rea ...
- Linux scp命令详解(服务器之间复制文件或目录)
scp:服务器之间复制文件或目录 一.命令格式: scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] ...
- JS常见面试题总结-真实被问到的!
1.判断数据类型有几种方法 console.log(typeof 'abc') // string console.log(Object.prototype.toString.call('abc')) ...
- mybatis在spring(Controller) 中的事务配置问题
这两天一直在折腾一个小工具,非常简单的移动端webapp. 用的是jquery mobile + ssm. 写的差不多的时候,想到解决事务问题,本来以为非常简单,只要在配置文件中加上相应的mybati ...
- 网上搜到的特别厉害的visio2019激活方法
原文链接:https://blog.csdn.net/godot06/article/details/94141854 步骤如下: 1.电脑新建一个记事本文件.txt(任何地方都可以) 2.复制下面代 ...
- hdu1864最大报销额 01
先把小数乘100变成整数然后处理每个发票里面可以报销的 最后自底向上DP #include <stdio.h> #include <algorithm> #include &l ...
- 10.Go-goroutine,waitgroup,互斥锁,channel和select
10.1.goroutine goroutine的使用 //Learn_Go/main.go package main import ( "fmt" "time" ...