HTML5
<h1>HTML5 <span class="color_h1">简介</span></h1><p>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。</p>
<p>HTML5的设计目的是为了在移动设备上支持多媒体。</p>
<p>HTML5 简单易学。</p>
<h2>什么是 HTML5?</h2>
<p>HTML5 是下一代 HTML 标准。</p>
<p>HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p>
<p>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
<hr>
<h2>HTML5 是如何起步的？</h2>
<p>HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。</p>
<p>WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</p>
<p>HTML5 中的一些有趣的新特性：</p>
<ul>
<li>用于绘画的 canvas 元素</li>
<li>用于媒介回放的 video 和 audio 元素</li>
<li>对本地离线存储的更好的支持</li>
<li>新的特殊内容元素，比如 article、footer、header、nav、section</li>
<li>新的表单控件，比如 calendar、date、time、email、url、search</li>
</ul>
<h2>HTML5 <!DOCTYPE></h2>
<p><!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h2>最小的HTML5文档</h2>
<p>下面是一个简单的HTML5文档：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>文档标题<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
文档内容......
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p><span style="background-color: rgba(243, 247, 240, 1)"><em><strong>注意：</strong>对于中文网页需要使用 <strong><meta charset="utf-8"></strong> 声明编码，否则会出现乱码。</em></span></p>
<h2>HTML5 的改进</h2>
<ul>
<li>新元素</li>
<li>新属性</li>
<li>完全支持 CSS3</li>
<li>Video 和 Audio</li>
<li>2D/3D 制图</li>
<li>本地存储</li>
<li>本地 SQL 数据</li>
<li>Web 应用</li>
</ul>
<hr>
<h2>HTML5 多媒体</h2>
<p>使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。</p>
<ul>
<li>HTML5 <video></li>
<li>HTML5 <audio></li>
</ul>
<hr>
<h2>HTML5 应用</h2>
<p>使用 HTML5 你可以简单地开发应用</p>
<ul>
<li>本地数据存储</li>
<li>访问本地文件</li>
<li>本地 SQL 数据</li>
<li>缓存引用</li>
<li>Javascript 工作者</li>
<li>XHTMLHttpRequest 2</li>
</ul>
<hr>
<h2>HTML5 图形</h2>
<p>使用 HTML5 你可以简单的绘制图形:</p>
<ul>
<li>使用<canvas> 元素。</li>
<li>使用内联 SVG。</li>
<li>使用 CSS3 2D 转换、CSS3 3D 转换。</li>
</ul>
<hr>
<h2>HTML5 使用 CSS3</h2>
<ul>
<li>新选择器</li>
<li>新属性</li>
<li>动画</li>
<li>2D/3D 转换</li>
<li>圆角</li>
<li>阴影效果</li>
<li>可下载的字体</li>
</ul>
<hr>
<p> </p>
<h2>语义元素</h2>
<p>HTML5 添加了很多语义元素如下所示：</p>
<table class="reference">
<tbody>
<tr><th>标签</th><th>描述</th></tr>
<tr>
<td><article></td>
<td>定义页面独立的内容区域。</td>
</tr>
<tr>
<td><aside></td>
<td>定义页面的侧边栏内容。</td>
</tr>
<tr>
<td><bdi></td>
<td style="text-align: left">允许您设置一段文本，使其脱离其父元素的文本方向设置。</td>
</tr>
<tr>
<td><command></td>
<td>定义命令按钮，比如单选按钮、复选框或按钮</td>
</tr>
<tr>
<td><details></td>
<td>用于描述文档或文档某个部分的细节</td>
</tr>
<tr>
<td><dialog></td>
<td>定义对话框，比如提示框</td>
</tr>
<tr>
<td><summary></td>
<td>标签包含 details 元素的标题</td>
</tr>
<tr>
<td><figure></td>
<td>规定独立的流内容（图像、图表、照片、代码等等）。</td>
</tr>
<tr>
<td><figcaption></td>
<td>定义 <figure> 元素的标题</td>
</tr>
<tr>
<td><footer></td>
<td>定义 section 或 document 的页脚。</td>
</tr>
<tr>
<td><header></td>
<td>定义了文档的头部区域</td>
</tr>
<tr>
<td><mark></td>
<td>定义带有记号的文本。</td>
</tr>
<tr>
<td><meter></td>
<td>定义度量衡。仅用于已知最大和最小值的度量。</td>
</tr>
<tr>
<td><nav></td>
<td>定义导航链接的部分。</td>
</tr>
<tr>
<td><progress></td>
<td>定义任何类型的任务的进度。</td>
</tr>
<tr>
<td><ruby></td>
<td>定义 ruby 注释（中文注音或字符）。</td>
</tr>
<tr>
<td><rt></td>
<td>定义字符（中文注音或字符）的解释或发音。</td>
</tr>
<tr>
<td><rp></td>
<td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td>
</tr>
<tr>
<td><section></td>
<td>定义文档中的节（section、区段）。</td>
</tr>
<tr>
<td><time></td>
<td>定义日期或时间。</td>
</tr>
<tr>
<td><wbr></td>
<td>规定在文本中的何处适合添加换行符。</td>
</tr>
</tbody>
</table>
<h2>HTML5 表单</h2>
<p> 新表单元素, 新属性，新输入类型，自动验证。</p>
<hr>
<h2>已移除元素</h2>
<p>以下的 HTML 4.01 元素在HTML5中已经被删除:</p>
<ul>
<li><acronym></li>
<li><applet></li>
<li><basefont></li>
<li><big></li>
<li><center></li>
<li><dir></li>
<li><font></li>
<li><frame></li>
<li><frameset></li>
<li><noframes></li>
<li><strike></li>
</ul>
<hr>
<h2>每一章中的实例</h2>
<p>通过我们的 HTML 编辑器，您能够编辑 HTML。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE HTML</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>菜鸟教程(runoob.com)<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">video </span><span style="color: rgba(255, 0, 0, 1)">width</span><span style="color: rgba(0, 0, 255, 1)">="320"</span><span style="color: rgba(255, 0, 0, 1)"> height</span><span style="color: rgba(0, 0, 255, 1)">="240"</span><span style="color: rgba(255, 0, 0, 1)"> controls</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">source </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="movie.mp4"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="video/mp4"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">source </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="movie.ogg"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="video/ogg"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
你的浏览器不支持 video 标签。
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">video</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<hr>
<h2>HTML5 浏览器支持</h2>
<p>最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。</p>
<p><img src="https://img2020.cnblogs.com/blog/1696552/202006/1696552-20200609113347766-1989919840.png" alt="" loading="lazy"></p>
<p> </p>
<p> IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)">>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<!</span><span style="color: rgba(0, 128, 0, 1)">--></span></pre>
</div>
<p>载入后，初始化新标签的CSS：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">html5</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(128, 0, 0, 1)">
article,aside,dialog,footer,header,section,nav,figure,menu</span>{<span style="color: rgba(255, 0, 0, 1)">display</span>:<span style="color: rgba(0, 0, 255, 1)">block</span>}</pre>
</div>
<h2>总结</h2>
<p>简单的介绍了认识了一下HTML5：HTML5 浏览器支持、HTML5 <!DOCTYPE> 声明、IE9以下兼容...等</p>
</div>
<div id="MySignature" role="contentinfo">
成功一定有方法,失败一定有原因<br><br>
来源：https://www.cnblogs.com/Afanadmin/p/13071434.html
頁:
[1]