学习html5之Content models

发表于:
来源:阿酷技术学习
作者:阿酷

在html5规范中每个元素都定义有一个内容模型(Content models),也就是关于这个元素的内容的描述。一个元素必须有内容与这个元素在内容模型中描述的规则需求相一致,在DOM中也就是这个元素的子元素。

在源代码中,每个元素之间有ASCII whitespace,在DOM中,两个元素之间字符被称为Text Nodes,空的Text Nodes和ASCII whitespace字符组成的Text node,被统称为inter-element whitespace

ASCII whitespace表示为U+0009 TAB(制表符tab键), U+000A LF(换行), U+000C FF(换页), U+000D CR(回车), or U+0020 SPACE(空格)

当我们看一个元素的内容是否遵循此元素的内容模型定义时,inter-element whitespace,注释语句,其它处理指令必须被忽视。并且在遵循定义和元素语义定义而写算法时,必须忽略掉这些。

the 'nothing' content model

在描述的时候,有时候是nothing,指此元素无Text node(除了 inter-element whitespace) 并且也无元素node(element nodes)

其实有好大一部分元素都是这样nothing content model,例好一些我们知道的void elements(在html语法中,没有结尾标签'/'的元素)

void elements:area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr

content model的种类:

每个html5 元素都属于0或多个种类,在html5规范中有下面几个种类:

  • Metadata content 元数据型
  • Flow content 控制型
  • Sectioning content 区块型
  • Heading content 头部型
  • Phrasing content 文本型
  • Embedded content 嵌入型
  • Interactive content 交互型

它们之间的关系不是互独立的,有交集,也有并集。

content model

Metadata content

metadata content主要是设置页面内容的特性或都与其它页面或文档之间的关系,或者是其它的信息,我们一个html页面的head部分的标签元素。

主要有以下几种:

base link meta noscript script style template title

还有一些其它的元素来自其它的命名空间,其语义表示为RDF(资源描述符框架)的元素也是元数据内容。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang="en">
 <head>
  <title>Hedral's Home Page</title>
  <r:RDF>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="https://hedral.example.com/#">
    <fullName>arkuu</fullName>
    <mailbox r:resource="mailto:arkuu@arkuu.com"/>
    <personalTitle>pe</personalTitle>
   </Person>
  </r:RDF>
 </head>
 <body>
  <h1>阿酷技术学习</h1>
  <p>是一个学习的好地方</p>
 </body>
</html>

 

flow content 

在页面body绝大部分的元素,主要在页面中起到表现和控制页面的作用

a,abbr,address,area(if it is a descendant of a map element),article,aside,audio,b,bdi,bdo,blockquote,br,button,canvas,cite,code,data,
datalist,del,details,dfn,dialog,div,dl,em,embed,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,i,iframe,img,input,ins,
kbd,label,link(if it is allowed in the body),main(if it is a hierarchically correct main element),map,mark,MathML math,
menu,meta(if the itemprop attribute is present),meter,nav,noscript,object,ol,output,p,picture,pre,progress,q,ruby,s,samp,
script,section,select,slot,small,span,strong,sub,sup,,SVG svg,table,template,textarea,time,u,ul,var,video,wbr,autonomous custom elements,text

Sectioning content

一个section content 特征是它的内容里有一个潜在的heading和footer表示

article aside nav section

heading content 

Heading content主要是定义section ceontent的heading 

h1 h2 h3 h4 h5 h6 hgroup

Phrasing content

phrasing content 表示一个document中的文本,也包括段落中的表示文本的元素。

a,abbr,area(if it is a descendant of a map element),audio,b,bdi,bdo,br,button,canvas,cite,code,data,
datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,label,link(if it is allowed in the body),map,mark,MathML math,
meta(if the itemprop attribute is present),meter,noscript,object,output,picture,progress,q,ruby,s,samp,script,select,slot,
small,span,strong,sub,sup,SVG svg,template,textarea,time,u,var,video,wbr,,autonomous custom elements,text

Embedded content

Embedded content 表示从另一个资源文档中导入资源

audio,canvas,embed,iframe,img,MathML math,object,picture,SVG svg,video

 Interactive content

Interactive content 是专门为用户交互设计的内容。

a (if the href attribute is present),audio (if the controls attribute is present),button,details,embed,iframe,
img (if the usemap attribute is present),input (if the type attribute is not in the Hidden state),label,
object (if the usemap attribute is present),select,text,area,video (if the controls attribute is present)

参考:https://html.spec.whatwg.org/multipage/dom.html#content-models