详细了解HTML标签内容模型
前面的话
HTML核心的部分莫过于标签(tag)了。标签是用来描述文档中的各自内容基本单元,不同标签表示着不同的含义,标签之间的嵌套表示了内容之间的结构。
HTML标签在HTML5中内容模型拓展到了7类,包括元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。但即使是这7个类别也没有完全覆盖所有元素的所有情况,元素可以不属于任何一个类别,被称为穿透的;很多元素可能属于不止一个类别,称为混合的

分类
元数据型(metadata)
设置展示、行为、关联文档或其他内容的元数据的元素
<head>元素包含文档的元素数据,包括<base>、<command>、<link>、<meta>、<noscript>、<script>、<style>和<title>共8个
区块型(sectioning)
定义区块内容范围的元素,包括<article>、<aside>、<nav>、<section>四个元素
标题型(heading)
定义区块内容标题的元素,包括<h1>到<h6>以及<hgroup>
文档流型(flow)
大部分文档<body>内的元素,只有部分元数据式元素不属于流式,它们是<base>和<title>
语句型(phrasing)
文档里的文字、在段落中标记文字的元素等
内嵌型(embedded)
由于HTML本身提供的元素的表达能力有限,允许嵌入内容成为浏览器开发者不得不做的事情,在文档引入另一个资源的元素或者插入文档的另一种语言。嵌入式内容包括<audio>、<canvas>、<embed>、<iframe>、<img>、<math>、<object>、<svg>和<video>九类
[注意]该类元素中,<embed>、<iframe>、<object>这三个元素不设置宽高时,默认宽高为300px*150px
<img> (<img> -> image 图像)
<iframe>
<canvas>
音频和视频
交互型(interactive)
专门用于用户交互的元素,包括<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img>、<input>、<keygen>、<label>、<menu>、<object>、<select>、<textarea>、<video>
其中,<details>、<summary>、<command>、<menu>这四个交互元素浏览器的支持性还不太好
关于<details>和<summary>的详细信息移步至此
详细了解HTML标签内容模型的更多相关文章
- cms内容模型标签
内容模块 内容模块PC标签调用说明 模块名:content 模块提供的可用操作 操作名 说明 lists 内容数据列表 relation 内容相关文章 hits 内容数据点击排行榜 category ...
- jeecms栏目模型和内容模型的使用以及对应前台的标签中的属性名
第一步:模型管理-添加模型: 栏目模板前缀设定方案下的channel目录下的ch_menu.html作为浏览栏目的模板页.对应访问网址:项目名/栏目名(一级或者二级栏目如news或者gnxw)/ind ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- phpcms V9 内容模型管理
[1]理解模型 模型,系统知识的抽象表示.既然抽象了,那就得脑补一下.大家都是面向对象设计的专业人员,类就很抽象的,对比类的定义想象一下模型的概念. 举个例子,一般新闻类的信息,都具有标题.内容.作者 ...
- phpcms V9 内容模型管理(转)
转自:http://www.cnblogs.com/Braveliu/p/5102627.html [1]理解模型 模型,系统知识的抽象表示.既然抽象了,那就得脑补一下.大家都是面向对象设计的专业人员 ...
- 配合dedecms内容模型实现后台输入栏目id前端输出文章列表
为了简化开发的工作量,也方便编辑快速操作,决定将后台进行重新设置.配合dedecms内容模型实现后台输入栏目id前端输出文章列表,这样制作科室专题页也变快了很多.比如,我们添加一个“科室专家栏目id” ...
- day13(JSTL和自定义标签&MVC模型&javaweb三层框架)
day13 JSTL标签库(重点) 自定义标签(理解) MVC设计模式(重点中的重点) Java三层框架(重点中的重点) JSTL标签库 1 什么是JSTL JSTL是apache对EL表达式的扩 ...
- WPF TextElement内容模型简介(转)
本内容模型概述描述了 TextElement 支持的内容. Paragraph 类是 TextElement 的类型. 内容模型描述哪些对象/元素可以包含在其他对象/元素中. 本概述汇总了派生自 Te ...
- 从零宽断言说起到用python匹配html标签内容
版权声明:本文为博主原创文章,转载请附带原文网址http://www.cnblogs.com/wbchanblog/p/7411750.html ,谢谢! 提示:本文主要是讲解零宽断言,所以阅读本文需 ...
随机推荐
- 博客迁移至CSDN
本人的技术博客已经迁移至CSDN,地址为http://blog.csdn.net/starrow,现为Lotus Domino开发领域最活跃丰富的博客,内容包括Lotus Domino, JavaSc ...
- C# interface
我们学习了interface,即接口,其与抽象类有点像,但是他们也有一些区别,比如类不能多重继承但是接口却可以多重继承. 接口只包含方法.委托或事件和属性的签名(接口包含的成员).不能包含字段(因为字 ...
- C++内存对齐的理解
程序编译器对结构的存储的特殊处理确实提高CPU存储变量的速度,但是有时候也带来了一些麻烦,我们也屏蔽掉变量默认的对齐方式,自己可以设定变量的对齐方式. 编译器中提供了#pragma pack(n)来设 ...
- myeclipse导入项目出现乱码
(1)修改整个工作空间的编码方式: Window->Preferences->General->Workspace->Text file Encoding 在 Others 里 ...
- iptables Data filtering详解
内容简介防火墙的概述iptables简介iptables基础iptables语法iptables实例案例详解(一)防火墙的简介防火墙是指设置在不同网络或网络安全域之间的一系列部件的组合,它能增强机构内 ...
- 纯练手设置ip地址脚本
#!/bin/bash IFO() { read -p "Configure $line Network card ( 'yes'or'no' )?" CDN </dev/t ...
- .net 第二周学习
这周更进一步的介绍了.net,通过作业的练习,有那么一点点的成就感,相对于前端,成就感还不是很大,但是我还是会继续加油 学习.net,看着他们周末只能呆在寝室写网页,顿时我就高兴了: ...
- [ASE][Daily Scrum]11.28
昨天基本上已经完成了sprint2的task, 现在剩下一些bug还需要来修正, 然后我正式加入码代码的大军啦~ Shilin Liu 显示聊天框 Zhao Li 搭建聊天服务器 Yimin ...
- I/O requests taking longer than 15 seconds to complete on file I/O瓶颈问题
I/O requests taking longer than 15 seconds to complete on file I/O瓶颈问题 http://mssqlwiki.com/2012/08/ ...
- 软件工程day8
设计出一份demo.上报于组,等待修改意见. 色调为黑白灰,图像也很简洁,符合“快捷查询工具”的主题.