创新互联HTML5教程:HTML5简介

HTML5 简介

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

十载的安达网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整安达建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“安达网站设计”,“安达网站推广”以来,每个客户项目都认真落实执行。

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 /> <br /><html><br /> <br /><body> </p><p><video width="320" height="240" controls><br /> <br />&nbsp; <source src="movie.mp4" type="video/mp4"><br /> <br />&nbsp; <source src="movie.ogg" type="video/ogg"><br /> <br />&nbsp;你的浏览器不支持 video 标签。<br /> <br /></video> </p><p></body><br /> <br /></html><br /> <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> </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>HTML5 参考手册</h2> <p>在本站中你可以找到关于HTML5 的标签及属性描述,详细请点击 HTML5参考手册。 </p><p> </p> <p> 网站题目:<a href="http://www.kswsj.com/qtweb/news42/116642.html">创新互联HTML5教程:HTML5简介</a> <br> 文章源于:<a href="http://www.kswsj.com/qtweb/news42/116642.html">http://www.kswsj.com/qtweb/news42/116642.html</a> </p> <p> 网站建设、网络推广公司-成都快上网,一家网站设计、网站制作公司;服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: <a href="http://www.kswsj.com/" target="_blank">成都快上网</a> </p> </div> <div class="newsmorelb"> <p>成都快上网科技猜您喜欢</p> <ul> <li> <a href="/qtweb/news41/116641.html">Linux中的文件删除命令大全,让您轻松删除不必要的文件</a> </li><li> <a href="/qtweb/news40/116640.html">win11系统怎么连接服务器?(连接你的服务器)</a> </li><li> <a href="/qtweb/news39/116639.html">如何使用帆软点击按钮获取数据库?(帆软点击按钮获取数据库)</a> </li><li> <a href="/qtweb/news38/116638.html">云计算的三大挑战:安全性、合规性和成本控制</a> </li><li> <a href="/qtweb/news37/116637.html">cdn加速美国服务器租用怎么连接</a> </li><li> <a href="/qtweb/news36/116636.html">VPS重置操作步骤详解,教你如何恢复出厂设置(vps如何恢复出厂设置)</a> </li><li> <a href="/qtweb/news35/116635.html">如何用云服务器?打造高效便捷的企业信息化系统</a> </li><li> <a href="/qtweb/news34/116634.html">学会Linux下如何创建文件链接文件系统(linux创建文件链接文件系统)</a> </li><li> <a href="/qtweb/news33/116633.html">电脑图标右下角的盾牌如何添加?windows10右下角盾牌</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/wxgzh/">微信公众号知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news23/108523.html">如何设置MySQL数据库防火墙,保障数据安全? (mysql数据库 防火墙)</a> </li><li> <a class="text_overflow" href="/qtweb/news0/442450.html">本地服务器搭建流程?(企业建站服务器)</a> </li><li> <a class="text_overflow" href="/qtweb/news9/408009.html">如何建立本地服务器?(如何拥有自己的服务器资源)</a> </li><li> <a class="text_overflow" href="/qtweb/news11/382111.html">域名不变服务器可以更改吗?(域名ns地址如何修改)</a> </li><li> <a class="text_overflow" href="/qtweb/news48/12198.html">本地生活服务平台有推荐吗?(大型的app都是用什么编程语言编写的?)</a> </li><li> <a class="text_overflow" href="/qtweb/news8/180958.html">医疗实验室备案登录信息忘了怎么办?(怎么找回备案信息吗安全吗)</a> </li><li> <a class="text_overflow" href="/qtweb/news40/446390.html">万网申请的域名怎么用?(万网如何域名绑定域名)</a> </li><li> <a class="text_overflow" href="/qtweb/news42/390942.html">备份港服是什么意思?香港存放视频的服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news1/74651.html">.ui转.py报错</a> </li><li> <a class="text_overflow" href="/qtweb/news15/511415.html">Orgtree调用init方法报错</a> </li><li> <a class="text_overflow" href="/qtweb/news0/80200.html">服务器显卡有用吗?(服务器显卡有什么用)</a> </li><li> <a class="text_overflow" href="/qtweb/news45/44995.html">瑞星布局2011两月内连发5款免费产品</a> </li><li> <a class="text_overflow" href="/qtweb/news15/517065.html">为什么弹出来云收藏</a> </li><li> <a class="text_overflow" href="/qtweb/news45/239545.html">海外浏览器ip地址有哪些?英国ip服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news28/412628.html">美国ip地址vps</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">分类信息网</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiaoguotu/" target="_blank">效果图设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shipindai/" target="_blank">食品包装袋</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/menchuang/" target="_blank">门窗定制</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiaojbc/" target="_blank">小搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/gangting/" target="_blank">岗亭</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/mutuopan/" target="_blank">木托盘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hntjbz/" target="_blank">混凝土搅拌站</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jizhuangxiang/" target="_blank">集装箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/renzaowu/" target="_blank">人造雾</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/mbzx/" target="_blank">木包装箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggzz/" target="_blank">广告制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zkj/" target="_blank">公路钻孔机</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xuanchuanpian/" target="_blank">宣传片制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zaomaoji/" target="_blank">凿毛机</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/weixiufdj/" target="_blank">发电机维修</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/chayisj/" target="_blank">茶艺设计</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.cxjianzhan.com/seo/" target="_blank">成都网站排名</a>    <a href="http://www.cdymzj.com/" target="_blank">云服务器</a>    <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a>    <a href="https://www.cdxwcx.com/city/yaan/" target="_blank">雅安做网站</a>    <a href="http://seo.cdkjz.cn/mobile/" target="_blank">手机网站建设</a>    <a href="https://www.cdcxhl.com/mobile.html" target="_blank">手机网站制作设计</a>    <a href="http://www.hikvision-dg.com/" target="_blank">卡多尼人工智</a>    <a href="http://m.cdcxhl.cn/H5/ " target="_blank">自适应网页设计</a>    <a href="http://www.cxjianzhan.cn/fwxm/yingxiao.html" target="_blank">营销型网站建设</a>    <a href="https://www.cdcxhl.com/" target="_blank">网站建设公司</a>    <a href="http://www.nzanhua.com/" target="_blank">雕琢时光茶叶</a>    <a href="https://www.cdxwcx.com/jifang/meishan.html" target="_blank">眉山联通机房</a>    <a href="https://www.cdxwcx.com/tuiguang/weibo.html" target="_blank">微博营销</a>    <a href="https://www.cdcxhl.com/tuoguan.html" target="_blank">四川主机托管</a>    <a href="http://m.cdxwcx.com/tuoguan.html" target="_blank">电信服务器托管</a>    <a href="http://chengdu.cdcxhl.cn/ " target="_blank">成都网站设计</a>    <a href="https://www.xwcx.net/jigui.html" target="_blank">成都机柜租用</a>    <a href="http://www.teliergzn.com/" target="_blank">特丽尔硅藻泥</a>    <a href="http://www.cdkjz.cn/fangan/energy/" target="_blank">节能环保网站建设方案</a>    <a href="http://www.4006tel.net/yingxiao/" target="_blank">企业营销型网站</a>     </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 品质网站建设 <i class="icon iconfont"></i> 多平台展现 <i class="icon iconfont"></i> 600元建站 <i class="icon iconfont"></i> 高效快速 <i class="icon iconfont"></i> 专业用心服务 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始600元网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 600元企业网站建设</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>:532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>:532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ:1683211881</a> <div class="dz">成都快上网专注: <a href="http://www.kswsj.com/" target="_blank">成都网站制作</a> <a href="http://www.kswsj.com/" target="_blank">网站设计</a> <a href="http://www.kswsj.com/" target="_blank">成都网站建设</a> <address>地址:成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel:028-86922220(7x24h)</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>