创新互联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.mswzjz.cn/qtweb/news42/116642.html">创新互联HTML5教程:HTML5简介</a> <br> 网站网址:<a href="http://www.mswzjz.cn/qtweb/news42/116642.html">http://www.mswzjz.cn/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.mswzjz.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/pinpaizhizuo/">品牌网站制作知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news13/423713.html">Linux 二进制文件:实现跨平台软件交付 (linux binary file)</a> </li><li> <a class="text_overflow" href="/qtweb/news45/369945.html">微信可以设置自动点赞,微信可不可以设置对某个人自动点赞例朋友今天发了一条微信</a> </li><li> <a class="text_overflow" href="/qtweb/news36/481536.html">香港云服务器哪个好?(香港云服务器哪个好用)</a> </li><li> <a class="text_overflow" href="/qtweb/news12/398712.html">犯错就要负责Redis锁未删除(redis锁未删除)</a> </li><li> <a class="text_overflow" href="/qtweb/news23/196623.html">Hooks是什么?为啥Vue和React都选择了它?</a> </li><li> <a class="text_overflow" href="/qtweb/news44/252744.html">优化网站性能:.NET数据库读写分离配置详解(.net数据库读写分离)</a> </li><li> <a class="text_overflow" href="/qtweb/news36/474036.html">服务器被攻击怎么处理?(国外服务器被攻击怎么解决?)</a> </li><li> <a class="text_overflow" href="/qtweb/news32/262332.html">Nginx新手教程:设置charset_types指令</a> </li><li> <a class="text_overflow" href="/qtweb/news13/32713.html">我的JavaScript工具链,6个改变了我的JavaScript的工具</a> </li><li> <a class="text_overflow" href="/qtweb/news20/498970.html">如何注销微信公众账号</a> </li><li> <a class="text_overflow" href="/qtweb/news40/364240.html">探究J2ME中cookie库的管理</a> </li><li> <a class="text_overflow" href="/qtweb/news10/245510.html">linux基本操作命令?(linux抓鸡教程)</a> </li><li> <a class="text_overflow" href="/qtweb/news49/377649.html">正确认识对象数据库与关系数据库之间的区别</a> </li><li> <a class="text_overflow" href="/qtweb/news34/103034.html">详解CentOS7引导过程与服务管理</a> </li><li> <a class="text_overflow" href="/qtweb/news5/120605.html">电脑怎么远程连接到服务器?如何连远程服务器</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/gaokongche/" 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/zsljbc/" 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/jiaquan/" 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/xiangsu/" 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/zhendongpan/" 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/bengche/" 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/yangtaihulan/" 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/hangkongxiang/" 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/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/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/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/fwqzy/" 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/shiliangting/" 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/hldzj/" 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> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.sczizhong.com/" target="_blank">资中网站建设</a>    <a href="http://www.cdkjz.cn/fangan/waimao/" target="_blank">外贸网站建设方案</a>    <a href="http://chengdu.cdcxhl.cn/" target="_blank">成都网站设计</a>    <a href="http://www.cdxwcx.cn/tuoguan/leshan.html" target="_blank">乐山托管服务器</a>    <a href="http://www.cqcxhl.com/" target="_blank">做网站</a>    <a href="http://www.gzzbrs.cn/" target="_blank">天泽尚品</a>    <a href="http://chengdu.cdcxhl.com/weixin/" target="_blank">微信公众号开发</a>    <a href="http://www.lzhejiang.com/" target="_blank">合江网站建设</a>    <a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳机房托管</a>    <a href="http://m.cdcxhl.cn/shop/ " target="_blank">成都商城网站建设</a>    <a href="http://m.cdxwcx.com/guanghua.html" target="_blank">成都电信服务器托管</a>    <a href="http://www.kjdeyu.com/" target="_blank">营山月子会所</a>    <a href="http://www.lsjierui.cn/" target="_blank">专业LED亮化工程</a>    <a href="http://www.yunjinzhai.com/" target="_blank">仿古建筑设计</a>    <a href="http://www.cxjianzhan.com/" target="_blank">网站制作</a>    <a href="https://www.cdcxhl.com/seo/chengdu.html" target="_blank">四川成都seo网站优化</a>    <a href="https://www.cdxwcx.com/tuiguang/" target="_blank">成都网站推广</a>    <a href="http://m.xwcx.net/" target="_blank">H5网站制作</a>    <a href="http://www.gyjierui.cn/" target="_blank">雷运建站</a>    <a href="http://www.sqsheji.cn" 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'"> 立即开始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.mswzjz.cn/" target="_blank">攀枝花网站设计</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站制作</a> <a href="http://www.mswzjz.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>