IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 国家级
    全民数字素养与技能培训基地
  • 河南省
    第一批产教融合型企业建设培育单位
  • 郑州市
    数字技能人才(码农)培养评价联盟

详解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去写了)。