PHP基础PHP教程php框架JavaScript

asp.netAJAX正则表达式ASP

输入banner图图片脚本导航/分类

详细了解HTML标签内容模型_html/css_WEB-ITnose

目录 [1]元数据型 [2]区块型 [3]标题型 [4]文档流型 [5]语句型 [6]内嵌型 [7]交互型

前面的话

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

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

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

分类

【1】元数据型(metadata)

　　设置展示、行为、关联文档或其他内容的元数据的元素

　　元素包含文档的元素数据，包括、、、、

　　　　[注意]一个区块中，

只能出现一个

　　

：标题组，用于组合标题，只在区块需要有多个级别的标题时使用　

    
水果
    
苹果

【4】文档流型(flow)

　　大部分文档内的元素，只有部分元数据式元素不属于流式，它们是和</p> <p>　　<p>：表示主题相近的若干句子组成的文本块(<p> -> paragraph)</p> <p>　　【默认样式】</p> <p class="sycode"> <pre class="precsshui">margin: 16px 0;</script></pre> </p> <p>　　<hr>：定义为不同主题内容间的分隔符</p> <p>　　【默认样式】</p> <p class="sycode"> <pre class="precsshui">margin: 8px 0;border-style: inset;border-width: 1px;</script></pre> </p> <p>　　　　[注意]区块之间不需要使用<hr>进行分割</p> <p>　　<pre class="brush:php;toolbar:false">：预格式化的文本，通常表示已排版的内容，如代码块和字符画等</p> <p>　　【默认样式】</p> <p class="sycode"> <pre class="precsshui">margin: 1em 0;white-space: pre;</script></pre> </p> <p>　　<blockquote>：表示引用来自其他来源的内容，cite属性表示来源url</p> <p>　　【默认样式】</p> <p class="sycode"> <pre class="precsshui">margin: 1em 40px;</script></pre> </p> <p>　　　　[注意]引用的署名必须在引用外部定义</p> <p class="sycode"> <pre class="precsshui"><blockquote cite="http://baike.baidu.com/view/921793.htm">　　<p>横眉冷对千夫指,俯首甘为孺子牛</p></blockquote> <p>鲁迅</p></script></pre> </p> <p>　　<ol><ul><dl></p> <p>　　关于列表类元素的详细信息移步到此</p> <p> 　　<table></p> <p>　　适合于数据表展现的数据，需要用表格来标记。关于表格类元素的详细信息移步到此</p> <p>　　<form>　</p> <p>　　表单元素包括文本框、下拉菜单、复选框以及其他用于收集用户在表单里输入的元素。详细信息移步到此<br /><br /></p> <h3>【5】语句型(phrasing)</h3> <p> 　　文档里的文字、在段落中标记文字的元素等</p> <p>　　 　　超链接锚点</p> <p>　　　　关于锚点的详细信息移步至此</p> <p>　　除之外，该类型元素的详细信息移步至此</p> <p> </p> <h3>【6】内嵌型(embedded)</h3> <p> 　　由于HTML本身提供的元素的表达能力有限，允许嵌入内容成为浏览器开发者不得不做的事情，在文档引入另一个资源的元素或者插入文档的另一种语言。嵌入式内容包括、<canvas>、<embed>、<iframe>、<img>、<math>、<object>、<svg>和<video>九类</p> <p>　　[注意]该类元素中，<embed>、<iframe>、<object>这三个元素不设置宽高时，默认宽高为300px*150px</p> <p>　　<img>　　(<img> -> image 图像)</p> <p>　　关于图像标签的详细信息移步至此</p> <p>　　<iframe></p> <p>　　关于框架标签的详细信息移步至此</p> <p>　　<canvas></p> <p> 　　关于<canvas>的详细信息移步至此</p> <p>　　音频和视频</p> <p> 　　关于音频和视频类标签的详细信息移步至此</p> <p> </p> <h3>【7】交互型(interactive)</h3> <p>　　专门用于用户交互的元素，包括、、<button>、<details>、<embed>、<iframe>、<img>、<input>、<keygen>、<label>、<menu>、<object>、<select>、<textarea>、<video></p> <p>　　其中，<details>、<summary>、<command>、<menu>这四个交互元素浏览器的支持性还不太好</p> <p>　　关于<details>和<summary>的详细信息移步至此 </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'详细了解HTML标签内容模型_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></p> </footer> </body> </html>