详细了解HTML标签内容模型

  HTML核心的部分莫过于标签(tag)了。标签是用来描述文档中的各自内容基本单元,不同标签表示着不同的含义,标签之间的嵌套表示了内容之间的结构。

  HTML标签在HTML5中内容模型拓展到了7类,包括元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。但即使是这7个类别也没有完全覆盖所有元素的所有情况,元素可以不属于任何一个类别,被称为穿透的;很多元素可能属于不止一个类别,称为混合的

  HTML标签详细信息见此w3c链接

分类

元数据型(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>

  关于<canvas>的详细信息移步至此

  音频和视频

  关于音频和视频类标签的详细信息移步至此

交互型(interactive)

  专门用于用户交互的元素,包括<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img>、<input>、<keygen>、<label>、<menu>、<object>、<select>、<textarea>、<video>

  其中,<details>、<summary>、<command>、<menu>这四个交互元素浏览器的支持性还不太好

时间: 2024-08-10 19:18:37

详细了解HTML标签内容模型的相关文章

从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

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

内容模型定义的自定义字段在{dede:arclist}中调用不了

arclist标签调用附加表字段不再以频道模型指定的字段为依据,调用时需注意下面两个问题: 1.必须指定 channelid (内容频道id): [这句的意思是你是在那个模型上创建的字段,比如你在[普通文章]或[商品]模型上增加了1个字段flvurl,在[内容模型管理]中,[普通文章]模型或[商品]模型的ID是[1]或[6]] 2.直接在标记指定要调用的字段(可以在内容提模型管理中看这些字段名): 示例: {dede:arclist addfields='language,softtype' r

dede在内容模型中新增字段的调用方法

今天需要在文章的内容模型中增加一些新的字段,增加了两个图片类型的字段,可(字段无法显示)前台调用不出来. 我们以在首页调用为例: Dedecms模板中默认调用文章标题的标签如下: {dede:arclist row=6 titlelen=32} [field:dbtp] {/dede:arclist} 那么我们调用自定义字段就是在这个基础上加以修改来实现的,我们以增加两个图片为例,具体标签表现为: {dede:arclist row=8 titlelen=32 addfields='dbtp'

用来实现对紧邻的相同的标签元素的内容和两对标签之间的非标签内容进行合并

源文件: <?xml version="1.0" encoding="UTF-8"?> <Body> <Title>4月7日凌晨5时,近300名穿着"警察"制服</Title> <ReportTime type="absTime">2014年4月11日07:00</ReportTime> <Content> <Paragraph>

据我知道有2个方法来定义标签文本模型领域;传统的方法和“编

背景据我知道有2个方法来定义标签文本模型领域;传统的方法和"编译时显示名称属性"的方法.在传统的方法中,文本被分配作为标签为每个模型字段中的HTML页面.虽然这是使用最简单的方法,它是最难的,当一个单一的模式字段中显示多个页面维护;你应该知道哪些页面领域已经出现进入并改变其标签中所有的人. 在"编译时显示名称属性"的方法,我们分配一个DisplayName特性对我们的模型的每个字段,然后使用Html.LabelFor在我们的HTML页面来显示它.当我们使用代码优先的

WPF TextElement内容模型简介(转)

本内容模型概述描述了 TextElement 支持的内容. Paragraph 类是 TextElement 的类型. 内容模型描述哪些对象/元素可以包含在其他对象/元素中. 本概述汇总了派生自 TextElement 的对象所使用的内容模型. 有关更多信息,请参见流文档概述. 内容模型关系图 下面的关系图对派生自 TextElement 的类所使用的内容模型,以及其他非 TextElement 类如何适应该模型进行了汇总. 如上面的关系图所示,元素可以具有的子元素不一定通过某个类派生自 Blo

css中a标签内容超出最大字数隐藏处理

问题:a标签内容超出最大字数显示问题 1.超出是最后显示为“...” 2.鼠标放在上面显示完整内容 3.点击新窗口打开链接内容 解决方法: css部分: .list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellips

从零宽断言说起到用python匹配html标签内容

版权声明:本文为博主原创文章,转载请附带原文网址http://www.cnblogs.com/wbchanblog/p/7411750.html ,谢谢! 提示:本文主要是讲解零宽断言,所以阅读本文需要有一定的正则表达式基础. 概念 我们知道元字符"\b"."^"."$"匹配的是一个位置,而且这个位置需要满足一定的条件(比如"\b"表示单词的边界),我们把这个条件称为断言或零宽度断言.这里有很重要的两个信息:一是断言实际上是某

织梦怎么创建新的内容模型?

这两天给朋友仿站的时候遇到站内的产品页面.如下图所示. 这个时候很容易想到用织梦本身的shop内容模型,但是不匹配.所以,万般无奈下,创建了一个products内容模型.步骤如下: 1,核心--->频道模型--->内容模型管理--->增加新模型 我已经创建的如下图所示: 另外,唯一需要注意的是下图:(该框框内需要填写你之后添加的字段名称,不然,你不能使用[field:cpname/]等这种方式调用填充的内容) <div class="pro_name">名