首页 › HTML论坛 › HTML5

开启一件防护都是罕见 發表於 2020-3-5 06:58:00

HTML5

<h1>HTML5&nbsp;简介</h1>
<p><img src="http://www.runoob.com/wp-content/uploads/2013/07/pic_html5.gif"></p>
<p>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。</p>
<p>HTML5的设计目的是为了在移动设备上支持多媒体。</p>
<p>HTML5 简单易学。</p>
<hr>
<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>
<hr>
<h2>HTML5 &lt;!DOCTYPE&gt;</h2>
<p>&lt;!doctype&gt; 声明必须位于 HTML5 文档中的第一行,使用非常简单:</p>
<p>&lt;!DOCTYPE html&gt;</p>
<hr>
<h2>最小的HTML5文档</h2>
<p>下面是一个简单的HTML5文档：</p>
<p>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;文档标题&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 文档内容...... &lt;/body&gt; &lt;/html&gt;</p>
<blockquote>
<p>注意：对于中文网页需要使用&nbsp;&lt;meta charset="utf-8"&gt;&nbsp;声明编码，否则会出现乱码。</p>
</blockquote>
<hr>
<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&nbsp;&lt;video&gt;</li>
<li>HTML5&nbsp;&lt;audio&gt;</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>使用&nbsp;&lt;canvas&gt;&nbsp;元素。</li>
<li>使用内联&nbsp;SVG。</li>
<li>使用&nbsp;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>
<p>了解更多CSS3知识请查看本站的&nbsp;CSS3 教程。</p>
<hr>
<h2>语义元素</h2>
<p>HTML5 添加了很多语义元素如下所示：</p>
<table>
<tbody>
<tr><th>标签</th><th>描述</th></tr>
<tr>
<td>&lt;article&gt;</td>
<td>定义页面独立的内容区域。</td>
</tr>
<tr>
<td>&lt;aside&gt;</td>
<td>定义页面的侧边栏内容。</td>
</tr>
<tr>
<td>&lt;bdi&gt;</td>
<td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td>
</tr>
<tr>
<td>&lt;command&gt;</td>
<td>定义命令按钮，比如单选按钮、复选框或按钮</td>
</tr>
<tr>
<td>&lt;details&gt;</td>
<td>用于描述文档或文档某个部分的细节</td>
</tr>
<tr>
<td>&lt;dialog&gt;</td>
<td>定义对话框，比如提示框</td>
</tr>
<tr>
<td>&lt;summary&gt;</td>
<td>标签包含 details 元素的标题</td>
</tr>
<tr>
<td>&lt;figure&gt;</td>
<td>规定独立的流内容（图像、图表、照片、代码等等）。</td>
</tr>
<tr>
<td>&lt;figcaption&gt;</td>
<td>定义 &lt;figure&gt; 元素的标题</td>
</tr>
<tr>
<td>&lt;footer&gt;</td>
<td>定义 section 或 document 的页脚。</td>
</tr>
<tr>
<td>&lt;header&gt;</td>
<td>定义了文档的头部区域</td>
</tr>
<tr>
<td>&lt;mark&gt;</td>
<td>定义带有记号的文本。</td>
</tr>
<tr>
<td>&lt;meter&gt;</td>
<td>定义度量衡。仅用于已知最大和最小值的度量。</td>
</tr>
<tr>
<td>&lt;nav&gt;</td>
<td>定义导航链接的部分。</td>
</tr>
<tr>
<td>&lt;progress&gt;</td>
<td>定义任何类型的任务的进度。</td>
</tr>
<tr>
<td>&lt;ruby&gt;</td>
<td>定义 ruby 注释（中文注音或字符）。</td>
</tr>
<tr>
<td>&lt;rt&gt;</td>
<td>定义字符（中文注音或字符）的解释或发音。</td>
</tr>
<tr>
<td>&lt;rp&gt;</td>
<td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td>
</tr>
<tr>
<td>&lt;section&gt;</td>
<td>定义文档中的节（section、区段）。</td>
</tr>
<tr>
<td>&lt;time&gt;</td>
<td>定义日期或时间。</td>
</tr>
<tr>
<td>&lt;wbr&gt;</td>
<td>规定在文本中的何处适合添加换行符。</td>
</tr>
</tbody>
</table>
<h2>HTML5 表单</h2>
<p>新表单元素, 新属性，新输入类型，自动验证。</p>
<hr>
<h2>已移除元素</h2>
<p>以下的 HTML 4.01 元素在HTML5中已经被删除:</p>
<ul>
<li>&lt;acronym&gt;</li>
<li>&lt;applet&gt;</li>
<li>&lt;basefont&gt;</li>
<li>&lt;big&gt;</li>
<li>&lt;center&gt;</li>
<li>&lt;dir&gt;</li>
<li>&lt;font&gt;</li>
<li>&lt;frame&gt;</li>
<li>&lt;frameset&gt;</li>
<li>&lt;noframes&gt;</li>
<li>&lt;strike&gt;</li>
</ul>
<hr>
<h2>每一章中的实例</h2>
<p>通过我们的 HTML 编辑器，您能够编辑 HTML，然后点击按钮来查看结果。</p>
<h2>实例</h2>
<p>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset="utf-8"&gt;&nbsp; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt;&nbsp; &lt;/head&gt; &lt;body&gt; &lt;video width="320" height="240" controls&gt; &lt;source src="movie.mp4" type="video/mp4"&gt; &lt;source src="movie.ogg" type="video/ogg"&gt; 你的浏览器不支持 video 标签。 &lt;/video&gt; &lt;/body&gt; &lt;/html&gt;</p>
<p><br>尝试一下 »</p>
<p>点击 "尝试一下" 按钮查看在线运行结果。</p>
<hr>
<h2>HTML5 浏览器支持</h2>
<p>最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。</p>
<p><img src="http://www.runoob.com/wp-content/uploads/2013/07/browsers_say.png"></p>
<p>IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：</p>
<p>&lt;!--&gt; &lt;script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"&gt;&lt;/script&gt; &lt;!--&gt;</p>
<p>载入后，初始化新标签的CSS：</p>
<p>/*html5*/ article,aside,dialog,footer,header,section,nav,figure,menu{display:block}</p>
<p>&nbsp;</p>
<h2>HTML5 参考手册</h2>
<p>在本站中你可以找到关于HTML5 的标签及属性描述，详细请点击&nbsp;HTML5参考手册。</p>
<p>&nbsp;</p>
<p>摘自：https://www.runoob.com/html/html5-intro.html</p><br><br>
来源：https://www.cnblogs.com/Jackel/p/12486664.html

查看完整版本: HTML5