目录 [1]元数据型 [2]区块型 [3]标题型 [4]文档流型 [5]语句型 [6]内嵌型 [7]交互型
前面的话 HTML核心的部分莫过于标签(tag)了。标签是用来描述文档中的各自内容基本单元，不同标签表示着不同的含义，标签之间的嵌套表示了内容之间的结构。
HTML标签在HTML5中内容模型拓展到了7类，包括元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。但即使是这7个类别也没有完全覆盖所有元素的所有情况，元素可以不属于任何一个类别，被称为穿透的；很多元素可能属于不止一个类别，称为混合的。
HTML标签详细信息见此w3c链接
分类 【1】元数据型(metadata) 设置展示、行为、关联文档或其他内容的元数据的元素
元素包含文档的元素数据，包括
、
、、<script>、<style>和<title>共8个 <p> 详细信息移步到此 <p> <h3>【2】区块型(sectioning) <p> 定义区块内容范围的元素，包括<article>、<aside>、<nav>、<section>四个元素 <p> 详细信息移步到此 <p> <h3>【3】标题型(heading) <p> 定义区块内容标题的元素，包括<h1>到<h6>以及<hgroup> <p> <h1>到<h6>：区块中的标题 (<h> -> headline) <p> <h1> -> <h2> -> <h3> -> <h4> -> <h5> -> <h6> 重要性减弱、字体大小减小 <p> [注意]微软公司的bing搜索引擎指出页面不应该含有多于一个的h1元素 <p> 【默认样式】 <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;font-weight: bold;</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p> [注意]一个区块中，<h1>只能出现一个</p> <p> <hgroup>：标题组，用于组合标题，只在区块需要有多个级别的标题时使用 </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><hgroup> <h1>水果</h1> <h2>苹果</h2></hgroup></pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p> </p> <h3>【4】文档流型(flow)</h3> <p> 大部分文档<body>内的元素，只有部分元数据式元素不属于流式，它们是<base>和<title></p> <p> <p>：表示主题相近的若干句子组成的文本块(<p> -> paragraph)</p> <p> 【默认样式】</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">margin: 16px 0;</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p> <hr>：定义为不同主题内容间的分隔符</p> <p> 【默认样式】</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">margin: 8px 0;border-style: inset;border-width: 1px;</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p> [注意]区块之间不需要使用<hr>进行分割</p> <p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">：预格式化的文本，通常表示已排版的内容，如代码块和字符画等</p> <p> 【默认样式】</p> <p class="sycode"> <pre class="precsshui">margin: 1em 0;white-space: pre;</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p> <blockquote>：表示引用来自其他来源的内容，cite属性表示来源url</p> <p> 【默认样式】</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">margin: 1em 40px;</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p> [注意]引用的署名必须在引用外部定义</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><blockquote cite="http://baike.baidu.com/view/921793.htm"> <p>横眉冷对千夫指,俯首甘为孺子牛</p></blockquote> <p>鲁迅</p></pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> <ol><ul><dl> <p> 关于列表类元素的详细信息移步到此 <p> <table> <p> 适合于数据表展现的数据，需要用表格来标记。关于表格类元素的详细信息移步到此 <p> <form> <p> 表单元素包括文本框、下拉菜单、复选框以及其他用于收集用户在表单里输入的元素。详细信息移步到此<br /><br /> <h3>【5】语句型(phrasing) <p> 文档里的文字、在段落中标记文字的元素等 <p> <a> 超链接锚点 <p> 关于锚点的详细信息移步至此 <p> 除<a>之外，该类型元素的详细信息移步至此 <p> <h3>【6】内嵌型(embedded) <p> 由于HTML本身提供的元素的表达能力有限，允许嵌入内容成为浏览器开发者不得不做的事情，在文档引入另一个资源的元素或者插入文档的另一种语言。嵌入式内容包括<audio>、<canvas>、<embed>、<iframe>、<img alt="详细了解HTML标签内容模型_html/css_WEB-ITnose" >、<math>、<object>、<svg>和<video>九类 <p> [注意]该类元素中，<embed>、<iframe>、<object>这三个元素不设置宽高时，默认宽高为300px*150px <p> <img alt="详细了解HTML标签内容模型_html/css_WEB-ITnose" > (<img alt="详细了解HTML标签内容模型_html/css_WEB-ITnose" > -> image 图像) <p> 关于图像标签的详细信息移步至此 <p> <iframe> <p> 关于框架标签的详细信息移步至此 <p> <canvas> <p> 关于<canvas>的详细信息移步至此 <p> 音频和视频 <p> 关于音频和视频类标签的详细信息移步至此 <p> <h3>【7】交互型(interactive) <p> 专门用于用户交互的元素，包括<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img alt="详细了解HTML标签内容模型_html/css_WEB-ITnose" >、<input>、<keygen>、<label>、<menu>、<object>、<select>、<textarea>、<video> <p> 其中，<details>、<summary>、<command>、<menu>这四个交互元素浏览器的支持性还不太好 <p> 关于<details>和<summary>的详细信息移步至此 <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> </script>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
