创新互联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.csdahua.cn/qtweb/news42/116642.html">创新互联HTML5教程:HTML5简介</a> <br> 转载源于:<a href="http://www.csdahua.cn/qtweb/news42/116642.html">http://www.csdahua.cn/qtweb/news42/116642.html</a> </p> <p> 网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等 </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.csdahua.cn/" 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/weihu/">网站维护知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news4/300704.html">stc接收缓冲区接收不到?(stc 启动文件,为什么stc找不到文件)</a> </li><li> <a class="text_overflow" href="/qtweb/news2/53852.html">沙特云主机好在哪,沙特云主机优势特点详解</a> </li><li> <a class="text_overflow" href="/qtweb/news7/315957.html">一键清空Redis库使用flushall指令(redis清空数据命令)</a> </li><li> <a class="text_overflow" href="/qtweb/news41/109691.html">移动注销卡怎么注销?(中国移动注销卡怎么注销)</a> </li><li> <a class="text_overflow" href="/qtweb/news3/179453.html">u界面设计是什么</a> </li><li> <a class="text_overflow" href="/qtweb/news41/176991.html">几种安全问题的解决方案为你排忧解难</a> </li><li> <a class="text_overflow" href="/qtweb/news39/54789.html">nginx启动命令</a> </li><li> <a class="text_overflow" href="/qtweb/news42/523642.html">如何打开ceb文件的常用软件</a> </li><li> <a class="text_overflow" href="/qtweb/news0/33450.html">红色数据挖掘从Redis读取数据(redis读取数据的过程)</a> </li><li> <a class="text_overflow" href="/qtweb/news2/446852.html">什么事是服务器托管?广州电信服务器托管</a> </li><li> <a class="text_overflow" href="/qtweb/news21/243171.html">centos镜像大小</a> </li><li> <a class="text_overflow" href="/qtweb/news29/312629.html">Redis解锁,实现有效的实时操作(redis活锁)</a> </li><li> <a class="text_overflow" href="/qtweb/news23/310373.html">wampserver远程调用接口报错</a> </li><li> <a class="text_overflow" href="/qtweb/news40/553740.html">自助建站系统怎么用,自助建站系统的优点和特点</a> </li><li> <a class="text_overflow" href="/qtweb/news42/324442.html">敏捷以人为本之Scrum每日立会</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/geshan/" 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/kafeitingsj/" 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/sdjbc/" 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/jiudiansj/" 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/shayanfudiao/" 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/hdbf/" 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/putaojia/" 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/fwqtg/" 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><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/gsdb/" 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/rxfhw/" 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/qzgqb/" 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/bolimo/" 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/pe/" target="_blank">PE包装袋</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.gdjierui.cn/" target="_blank">轻质隔墙板</a>    <a href="https://www.cdcxhl.com/" target="_blank">网站建设</a>    <a href="http://chengdu.cdcxhl.com/" target="_blank">成都营销网站制作</a>    <a href="https://www.cdxwcx.com/wangzhan/mbyidong.html" target="_blank">做移动网站</a>    <a href="http://www.cdkjz.cn/fangan/secu/" target="_blank">安防网站建设方案</a>    <a href="https://www.xwcx.net/jigui.html" target="_blank">成都机房机柜租用</a>    <a href="http://www.cxjianzhan.com/" target="_blank">网站建设公司</a>    <a href="https://www.cdxwcx.com/wangzhan/mbshangcheng.html" target="_blank">模板商城网站</a>    <a href="http://m.cdcxhl.cn/qiye/" target="_blank">成都企业网站建设公司</a>    <a href="https://www.cdxwcx.com/city/suining/" target="_blank">遂宁网站建设</a>    <a href="http://www.cdxwcx.cn/tuoguan/zigong.html" target="_blank">自贡托管服务器</a>    <a href="http://www.cqcxhl.com/" target="_blank">网站制作</a>    <a href="http://www.csyarui.cn/" target="_blank">成都雪糕加盟</a>    <a href="http://www.lzluxian.com/" target="_blank">正泰动物</a>    <a href="http://www.cdfuwuqi.com/tuoguan/" target="_blank">服务器托管</a>    <a href="http://seo.cdkjz.cn/wangzhan/" target="_blank">网站推广公司</a>    <a href="http://www.chdeyu.com/" target="_blank">营山产后修复</a>    <a href="https://www.cdcxhl.com/xiyun.html" target="_blank">西云主机托管</a>    <a href="https://www.cdcxhl.com/xiaochengx.html" target="_blank">成都微信小程序</a>    <a href="http://www.cdxwcx.cn/tuoguan/xiyun.html" 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> 节约开发成本 <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'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</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.csdahua.cn/" target="_blank">网站优化</a> <a href="http://www.csdahua.cn/" target="_blank">网络推广</a> <a href="http://www.csdahua.cn/" 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>