创新互联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.hantingmc.com/qtweb/news42/116642.html">创新互联HTML5教程:HTML5简介</a> <br> 分享URL:<a href="http://www.hantingmc.com/qtweb/news42/116642.html">http://www.hantingmc.com/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="https://www.cdcxhl.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/quanwang/">全网营销推广知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news2/499602.html">速度怎么计算?(进给速度怎么计算)</a> </li><li> <a class="text_overflow" href="/qtweb/news15/440215.html">我想帮客户的免费邮局弄成这个样子</a> </li><li> <a class="text_overflow" href="/qtweb/news7/68707.html">如何上传文件到Windows云服务器?</a> </li><li> <a class="text_overflow" href="/qtweb/news7/454407.html">视频怎么调亮度?(手机视频怎么调亮度)</a> </li><li> <a class="text_overflow" href="/qtweb/news47/399597.html">Lisp介绍之七个原始操作符</a> </li><li> <a class="text_overflow" href="/qtweb/news3/310053.html">端口转发工具?windows端口转发工具</a> </li><li> <a class="text_overflow" href="/qtweb/news36/533086.html">如何通过Linux命令行工具实现实时日志监控与分析?</a> </li><li> <a class="text_overflow" href="/qtweb/news36/519436.html">租服务器和买服务器哪个划算?租的服务器和自己搭建的服务器有什么区别</a> </li><li> <a class="text_overflow" href="/qtweb/news27/162427.html">使用Redis连接正确设置密码保护(redis连接指定密码)</a> </li><li> <a class="text_overflow" href="/qtweb/news13/435613.html">半价的螃蟹蒸多久一次?(半价的螃蟹蒸多久一次啊)</a> </li><li> <a class="text_overflow" href="/qtweb/news8/265558.html">联邦调查局警告称国家黑客正利用MFA漏洞进行横向移动</a> </li><li> <a class="text_overflow" href="/qtweb/news12/437962.html">Win7iso镜像系统怎么下载?windows10的ios下载百度云</a> </li><li> <a class="text_overflow" href="/qtweb/news1/111151.html">珠海网站公司哪家好</a> </li><li> <a class="text_overflow" href="/qtweb/news2/177852.html">所有人的群叫什么名</a> </li><li> <a class="text_overflow" href="/qtweb/news9/137259.html">研究发现,支付赎金只占勒索攻击事件总损失的15%</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/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/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/sdgz/" 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/zhanting/" 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/lajitong/" 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/yangguangfang/" 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/hgdsj/" 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/chunshuiji/" 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/hntjbc/" 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/qchs/" 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/muzhiliangting/" 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/yupeng/" 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/huaxiang/" 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/yhjdsj/" target="_blank">宴会酒店设计</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="https://www.cdcxhl.com/yunying.html" target="_blank">网站托管运营</a>    <a href="https://www.cdcxhl.com/tuoguan/yidong/" target="_blank">成都移动服务器托管</a>    <a href="http://www.cdfuwuqi.com/jigui/" target="_blank">服务器机柜</a>    <a href="http://www.huixingan.com/" target="_blank">广安园林景观设计</a>    <a href="http://www.jinhuajc.com/" target="_blank">橡塑保温管</a>    <a href="http://www.njwuji.cn/" target="_blank">亮美家</a>    <a href="http://www.bzwzjz.com/serve/" target="_blank">高端网站设计</a>    <a href="http://www.cqganxi.cn/" target="_blank">友益建筑机械凿</a>    <a href="https://www.cdxwcx.com/jifang/guanghua.html" target="_blank">光华机房服务器托管</a>    <a href="https://www.cdxwcx.com/city/jiangyou/" target="_blank">江油做网站</a>    <a href="http://www.cdkjz.cn/fangan/waimao/" target="_blank">外贸网站建设方案</a>    <a href="https://www.cdxwcx.com/400/" target="_blank">成都400电话办理</a>    <a href="http://m.xwcx.net/dianshang/" target="_blank">成都电商解决方案</a>    <a href="http://www.cdhuace.com/" target="_blank">户外广告设计</a>    <a href="http://www.cdhuace.com/fuwu.html" target="_blank">成都名片印刷</a>    <a href="http://www.cqcxhl.com/miniprogram/" target="_blank">重庆小程序开发公司</a>    <a href="http://www.myzitong.com/" target="_blank">绵阳梓潼做网站</a>    <a href="http://www.cxjianzhan.com/" target="_blank">成都做网站</a>    <a href="http://www.sichuanairmedia.com/" target="_blank">航空文化传媒</a>    <a href="http://www.bzwzjz.com/" 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="https://www.cdcxhl.com/" target="_blank">网站设计</a> <a href="https://www.cdcxhl.com/" target="_blank">网站制作</a> <a href="https://www.cdcxhl.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:400-028-6601(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>