html
HTML5
- HTML5
- 元素分类
- 页面结构
- 页面头部
- </li>
<li><style></li>
<li><link></li>
</ul> </li>
<li>标签的语义化</li>
<li>页面标题</li>
<li> 页眉页脚
<ul>
<li><header></li>
<li><footer></li>
</ul> </li>
<li> 页面导航
<ul>
<li><nav></li>
</ul> </li>
<li> 主要区域
<ul>
<li><main></li>
</ul> </li>
<li> 内容区域
<ul>
<li><article></li>
</ul> </li>
<li> 附加区域
<ul>
<li><aside></li>
</ul> </li>
<li> 区块定义
<ul>
<li><section></li>
</ul> </li>
<li> 容器DIV
<ul>
<li><div></li>
</ul> </li>
</ul> </li>
<li> 文本相关
<ul>
<li> 基本标签
<ul>
<li><p></li>
<li><span></li>
<li><br></li>
</ul> </li>
<li> 描述文本
<ul>
<li><time></li>
<li><big></li>
<li><small></li>
<li><sup></li>
<li><sub></li>
<li><del></li>
<li><ins></li>
<li><code></li>
<li><progress></li>
</ul> </li>
<li> 强调文本
<ul>
<li><strong></li>
<li><b></li>
<li><em></li>
<li><i></li>
<li><mark></li>
</ul> </li>
<li> 引用标签
<ul>
<li><cite></li>
<li><blockquote></li>
<li><q></li>
</ul> </li>
<li> 联系信息
<ul>
<li><address></li>
</ul> </li>
</ul> </li>
<li> 链接与图片
<ul>
<li> 链接
<ul>
<li>页面超链接</li>
<li>锚点链接</li>
<li>邮箱链接</li>
<li>电话链接</li>
</ul> </li>
<li> 图像
<ul>
<li><img> 标签</li>
</ul> </li>
</ul> </li>
<li> 列表与多媒体
<ul>
<li> 列表
<ul>
<li>有序列表</li>
<li>无序列表</li>
<li>定义列表</li>
</ul> </li>
<li> 多媒体
<ul>
<li>声音</li>
<li>视频</li>
</ul> </li>
</ul> </li>
<li> 表格与表单
<ul>
<li>表格</li>
<li>表单</li>
</ul> </li>
<li> 其他
<ul>
<li>HTML实体符号</li>
<li>HTML 颜色</li>
</ul> </li>
</ul> </li>
</ul>
<h2>元素分类</h2>
<h3>内容类型</h3>
<p>HTML5 中引入了很多的标记元素，根据<strong>内容类型</strong>的不同，这些元素被分成了7大类：</p>
<ol>
<li><p><strong>流内容</strong>（Flow）：<br> 包含在文档正常流中的大多数HTML5元素。</p></li>
<li><p><strong>元数据</strong>（Metadata）：<br> 通常出现在页面的head中，设置页面其他部分的表现和行为 。<br> 元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。</p></li>
<li><p><strong>内联</strong>（Embedded）：<br> 在文档中添加其他类型的内容。<br> 元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。</p></li>
<li><p><strong>交互</strong>（Interactive）：<br> 与用户交互的内容。<br> 元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。</p></li>
<li><p><strong>标题</strong>（Heading）：<br> 定义段落标题。<br> 元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。</p></li>
<li><p><strong>短语</strong>（Phrasing）：<br> 文本和文本标记元素。<br> 元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等。</p></li>
<li><p><strong>区段内容</strong>（Sectioning) ：<br> 定义标题，内容，导航和页脚的范围。<br> 元素：<article>，<aside>，<nav>，<section></p></li>
</ol>
<div class="image-package">
<div class="image-container" style="max-width: 546px; max-height: 312px;">
<div class="image-view">
</div>
</div>
<div class="image-caption"></div>
</div>
<blockquote>
<p>相同的元素可以属于多个内容模型。<br> 各种内容类型在某些区域重叠，具体取决于它们的使用方式。</p>
</blockquote>
<h3>元素等级</h3>
<p>HTML5 的元素按优先等级定义为<strong>结构性元素</strong>、<strong>级块性元素</strong>、<strong>行内语义性元素</strong>和<strong>交互性元素</strong>四大类。</p>
<p><strong>结构性元素</strong><br> 结构性元素主要负责 Web 的上下文结构的定义，确保 HTML 文档的完整性，这类元素包括以下几个：</p>
<ul>
<li>section</li>
<li>header</li>
<li>footer</li>
<li>nav</li>
<li>article<br> 等等</li>
</ul>
<p><strong>级块性元素</strong><br> 级块性元素主要完成 Web 页面区域的划分，确保内容的有效分隔，这类元素包括以下几个：</p>
<p><strong>行内语义性元素</strong><br> 行内语义性元素主要完成 Web 页面具体内容的引用和表述，是丰富内容展示的基础，这类元素包括以下几个：</p>
<p><strong>交互性元素</strong><br> 交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括以下几个：</p>
<h2>页面结构</h2>
<p>常用H5页面结构布局</p>
<pre><code class="html"><!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<title>
