开始学习HTML5
创始人
2025-05-31 17:45:16
0次
HTML5 简介
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5简单易学。
什么是 HTML5?
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。
HTML5 是如何起步的？
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 中的一些有趣的新特性：
-
用于绘画的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
对本地离线存储的更好的支持
-
新的特殊内容元素，比如 article、footer、header、nav、section
-
新的表单控件，比如 calendar、date、time、email、url、search
HTML5
声明必须位于 HTML5 文档中的第一行,使用非常简单:
最小的HTML5文档
下面是一个简单的HTML5文档：
文档标题
文档内容......
HTML5的改进
-
新元素
-
新属性
-
完全支持 CSS3
-
Video 和 Audio
-
2D/3D 制图
-
本地存储
-
本地 SQL 数据
-
Web 应用
HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
-
HTML5
-
HTML5
HTML5 应用
使用 HTML5 你可以简单地开发应用
-
本地数据存储
-
访问本地文件
-
本地 SQL 数据
-
缓存引用
-
Javascript 工作者
-
XHTMLHttpRequest 2
HTML5 图形
使用 HTML5 你可以简单的绘制图形:
-
使用
-
使用内联 SVG
-
使用 CSS3 2D/CSS 3D
HTML5 使用 CSS3
-
新选择器
-
新属性
-
动画
-
2D/3D 转换
-
圆角
-
阴影效果
-
可下载的字体
了解更多CSS3知识请查看本站的 CSS3 教程。
语义要素
HTML5 添加了很多语义元素如下所示：
| 标签 | 描述 |
|---|---|
| 定义页面独立的内容区域。 | |
| 定义页面的侧边栏内容。 | |
| 允许您设置一段文本，使其脱离其父元素的文本方向设置。 | |
| 定义命令按钮，比如单选按钮、复选框或按钮 | |
| 用于描述文档或文档某个部分的细节 | |
| 定义对话框，比如提示框 | |
| 标签包含 details 元素的标题 | |
| 规定独立的流内容（图像、图表、照片、代码等等）。 | |
| 定义 | |
| 定义 section 或 document 的页脚。 | |
| 定义了文档的头部区域 | |
| 定义带有记号的文本。 | |
| 定义度量衡。仅用于已知最大和最小值的度量。 | |
| 定义导航链接的部分。 | |
| 定义任何类型的任务的进度。 | |
| 定义 ruby 注释（中文注音或字符）。 | |
| 定义字符（中文注音或字符）的解释或发音。 | |
| 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 | |
| 定义文档中的节（section、区段）。 | |
| 定义日期或时间。 | |
| 规定在文本中的何处适合添加换行符。 |
HTML5 表单
新表单元素, 新属性，新输入类型，自动验证。
已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
</li><li><strike></li></ul> <hr /> <h2>每一章中的实例</h2> <p>通过我们的 HTML 编辑器，您能够编辑 HTML，然后点击按钮来查看结果。</p> <h2>实例</h2> <p><!DOCTYPE HTML><br /> <html><br /> <body><br /><br /> <video width="320" height="240" controls><br /> <source src="movie.mp4" type="video/mp4"><br /> <source src="movie.ogg" type="video/ogg"><br /> 你的浏览器不支持 video 标签。<br /> </video><br /><br /> </body><br /> </html></p> <p><br />尝试一下 »</p> <p><strong>点击 "尝试一下" 按钮查看在线运行结果。</strong></p> <hr /> <h2>HTML5 - 新特性</h2> <p>HTML5 中的一些有趣的新特性：</p> <ul><li> <p>用于绘画的 canvas 元素</p> </li><li> <p>用于媒介回放的 video 和 audio 元素</p> </li><li> <p>对本地离线存储的更好的支持</p> </li><li> <p>新的特殊内容元素，比如 article、footer、header、nav、section</p> </li><li> <p>新的表单控件，比如 calendar、date、time、email、url、search</p> </li></ul> <hr /> <h2>HTML5 浏览器支持</h2> <p>最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。</p> <p class="img-center"><img alt="" src="" /></p> <p>IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：</p> <pre><!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" rel="external nofollow" ></script> <![endif]--></pre> <p>载入后，初始化新标签的CSS：</p> <pre>/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}</pre> <hr /> <h2></h2> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> <a href="/index.php?s=news&c=search&keyword=%E8%AF%8D%E5%BA%93%E5%8A%A0%E8%BD%BD%E9%94%99%E8%AF%AF%3A%E6%9C%AA%E8%83%BD%E6%89%BE%E5%88%B0%E6%96%87%E4%BB%B6%E2%80%9CE%3A%5Chighferrum_mysql%5CConfiguration%5CDict_Stopwords.txt%E2%80%9D%E3%80%82" class="badge badge-light-primary fw-bold my-2" target="_blank">词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。</a> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/keji/41046.html">buildroot编译一个基于riscv架构的linux系统</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/keji/41054.html">ARM 在Unity3D 中的美术优化解决方案 2, 几何体</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202406/78b0249c98149a3.jpeg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/33665.html" class="text-dark fw-bold text-hover-primary fs-6">监控摄像头接入GB28181平...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">流程简介将监控摄像头的视频在网站和APP中直播，要解决的几个问题是：1&...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202402/b7fd57091ce17d7.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/952.html" class="text-dark fw-bold text-hover-primary fs-6">Windows10添加群晖磁盘...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在使用群晖NAS时，我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202406/793e3f6ce04ed0b.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/33802.html" class="text-dark fw-bold text-hover-primary fs-6">protocol buffer...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">目录 目录 什么是protocol buffer 1.protobuf 1.1安装 1.2使用...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202405/9a5663f39d0d86.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/26657.html" class="text-dark fw-bold text-hover-primary fs-6">educoder数据结构与算法...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"> ...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202403/50b5d39a4edb96e.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/14338.html" class="text-dark fw-bold text-hover-primary fs-6">MySQL下载和安装（Wind...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">前言：刚换了一台电脑，里面所有东西都需要重新配置，习惯了所...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202403/9079391fc319.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/9298.html" class="text-dark fw-bold text-hover-primary fs-6">MFC文件操作</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"> MFC提供了一个文件操作的基类CFile，这个类提供了一个没有缓存的二进制格式的磁盘...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202403/98c3f25f21a67b3.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/7709.html" class="text-dark fw-bold text-hover-primary fs-6">在Word、WPS中插入AxM...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">引言 我最近需要写一些文章，在排版时发现AxMath插入的公式竟然会导致行间距异常&#...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/33745.html" class="text-dark fw-bold text-hover-primary fs-6">有效的括号</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">一、题目 给定一个只包括 '('，')'，'{'，'}'...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202406/635b8ed7ba7c4e2.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/33708.html" class="text-dark fw-bold text-hover-primary fs-6">Fluent中创建监测点</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">1 概述某些仿真问题，需要创建监测点，用于获取空间定点的数据࿰...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img.pic99.top/hhfamen/202404/0a28a5fa0a16d86.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/keji/25416.html" class="text-dark fw-bold text-hover-primary fs-6">【Ctfer训练计划】——(三...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">作者名：Demo不是emo 主页面链接：主页传送门 创作初心ÿ...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> <a href="/" target="_blank" class="text-gray-800 text-hover-primary">发门网</a> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-800 text-hover-primary"></a> <a href="http://www.bitekongjian.com">比特空间</a><a href="http://www.zzszq.net">深知网</a><a href="http://www.hysmm.com/">行业商贸网</a><a href="http://www.981608.com/">一路旅游网</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">资讯</a> </li> <li class="menu-item"> <a href="/shenghuo/" target="_blank" class="menu-link px-2">生活</a> </li> <li class="menu-item"> <a href="/keji/" target="_blank" class="menu-link px-2">科技</a> </li> <li class="menu-item"> <a href="/sitemap.xml" target="_blank" class="menu-link px-2">sitemap</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>