IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-86588008
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      详解HTML5,知道了这些可以成为前端工程师

      • 发布时间:
        2019-06-18
      • 版权所有:
        云和教育
      • 分享:

      HTML5并不仅仅是作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准, 成为第一个将web作为应用程序开发平台的HTML语言。

      配图1 HTML5的优势.jpg

      HTML5定义了一系列的新元素, 如新语义标签, 智能表单, 多媒体标签, 可以帮助开发者创建互联网应用, 同时有令人眼花的css3, 还提供了一些JavaScript的API(应用程序接口), 列如: 地理定位 重力感应, 硬件访问, 可以在浏览器内实现类似于原生应用, 制作webAPP, 甚至结合Canvas可开发一些网页板的小游戏啊。

      配图2 什么是HTML5.jpg

      H5其实只是一个泛称, 是由HTML5+CSS3+JavaScript等技术结合而成的一个应用开发平台。

      1.HTML5的兼容性

      新增的部分有兼容性的问题, 并不是所有的html5都是IE9兼容的, 有一些属性是需要IE10或者更高级的浏览器才能兼容, 所以, html5更多应用在移动端的方面, 因为移动端搭载的浏览器比较高级。

      2.HTML5的骨架

      配图3 云和数据HTML5课程升级.jpg

      代码示例:

      <!DOCTYPE html>  <html>    <head>      <meta charset=”UTF-8″>      <title>Title</title>     <style>     </style>    </head>    <body>    </body>  </html>

      HTML5骨架是没有兼容的问题的。

      反问:如果在xt的文档DTD里面书写h5的内容,会带来兼容问题么?

      答:跟你用什么文档DTD没有关系 主要跟浏览器有关系。

      3.HTML5新增的标签

      新增的6大结构标签:

      (1)header 网站头部 (2)nav 导航栏(3)section 类似于div (4)aside 文件侧栏(5)article 文章/文本内容(6)footer 网站脚部

      作用:跟div一模一样 ,就是增加了语义性更加利于seo优化。

      配图4 云和数据HTML5培训.jpg

      由于html5新增的标签有兼容问题,所以我们需要做兼容!怎么实现?

      (1)利用document.creatElement()去创建html5的新标签,同时设置成块元素

      <!–[if lt IE 9]>

      <script type=”text/javascript”>

      var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);

      var i= e.length;

      while (i–){

      document.createElement(e[i])

      }

      </script>

      <![endif]–>

      (1)借助于第三方的JS框架 =>html5shiv.min.js (推荐)配合IE的hack实现最佳兼容。

      <!–[if lt IE 9]>

      <script src=”js/html5shiv.min.js”></script>

      <![endif]–>

      注明:还有一些新增的用到的不多,所以了解即可,上述六个结构标签是最为常用的。

      配图5 学习HTML5要多长时间.jpg

      4.HTML5新增的智能表彰

      以前学过 type =text ,submit ,reset,radio。。。。

      type=”email” 限制用户输入必须为Email类型

      type=”url” 限制用户输入必须为URL类型

      type=”date” 自动生成一个日期控件

      type=”number” 限制用户输入必须为数字类型

      type=”range” 产生一个进度条的表单

      type=”search” 产生一个搜索意义的表单

      type=”color” 生成一个颜色选择表单

      总结:智能表单的兼容比较大,在移动端用的较多,移动端会自动调取手机本身的控件(不同手机之间会略有不同,但如果需要高度自定义,就需要用JS去写了)。