整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

每天一道前端面试题系列(2):HTML5有哪些新特性

TML5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

HTML5的新特性:

  • 绘画的 canvas 元素
  • 音频标签:video 和 audio 元素
  • 新增的结构元素:section、article、aside、nav、time、pubdate、header、footer、hgroup、address
  • 新增的状态元素:meter、progress
  • 新增的列表元素:datalist、details、summary
  • 新增的表单元素:calendar、date、time、email、url、search

表单验证

placeholder自动聚焦

  • 对本地离线存储的更好的支持


移除的元素:

  • 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  • 对可用性产生负面影响的元素:frame,frameset,noframes;


不能识别HTML5新标签而不能使用,解决办法有两种:

  • 方法1:实现标签被识别

通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。

  • 方法2:JavaScript解决方案
    • a)使用html5shim:

在<head>中调用以下代码:

<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在head标签中调用。

    • b)使用kill IE6

在</body>之前调用以下代码:

<!--if lte IE 6]>
	<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
<![endif]-->


区分HTML和HTML5:

  • DOCTYPE声明
  • 新增的元素

许多人来说,学习HTML是学习Web设计和开发的第一步--甚至是更高级的编程语言。大多数人认为HTML清晰易学。因为它是一种标记语言,它不同于编程语言。标记语言旨在描述文档中内容片段的用途。

关于HTML的一个常见误解是它被用来设计网页或网站。虽然HTML语言提供了结构,但该结构与实际外观脱节。HTML结构可以应用于大屏幕显示器,移动设备,甚至打印版本的文档。所以当你在HTML5培训机构学有所成之后,你的就业选择也是很多的,不仅仅只是做网站。

今天使用的HTML版本很多,最常用的是HTML5。使用HTML5,我们可以直接在Web浏览器中播放音频和视频。HTML5带来了大量的新标签,使我们能够构造文档。这些新标签包括页眉、页脚、文章、部分、旁边和导航(用于导航元素)。

要想学好HTML5,首先要理解HTML5代码背后的词汇表是很重要的,如果你理解并能够识别HTML5代码中的标记、内容、属性和值,那么你就可以更好地理解代码。我们在HTML5培训中学习时,要非常重视这一点,不懂的要及时问老师,加深对代码的理解,这对你学习其他语言也有好处。

标记和元素

标记是HTML的基本构建块。标记是构成HTML标记语言的单个内容单元。HTML标记被配对成一个开始标记和一个结束标记。开始标记、结束标记和中间出现的任何内容一起称为元素。

内容

内容通常是用户实际要阅读、聆听或查看的内容。在浏览器中查看的所有文本都是存在于HTML代码的某些元素中的内容。

属性和值

通常,需要以某种方式修改标记,或者需要关于标记应该如何执行的附加信息。通常,标记需要链接到CSS或Javascript代码,以便使它们具有动态。在这两种情况中,都使用属性和值。

每个行业都有要使用的“工具”。在HTML的情况下,您会用一些程序来编写和显示代码。有几十种好工具。你可以通过反复尝试找出你最喜欢的工具。HTML5培训中也会介绍很多种工具供你学习,你熟悉的越多,对你在工作上的帮助也就越大。

文本编辑器

文本编辑器是编写HTML5代码的程序。文本编辑器类似于精简的字处理器。最重要的是,与文字处理器相比,它们保持文本“纯净”,并且不会注入格式代码来混淆试图解释HTML的浏览器。

一个好的免费文本编辑器是Adobe的括号。括号适用于pc和mac。网上也有免费的供你下载

浏览器

浏览器的面貌总是在变化。大多数开发人员在他们的机器上安装了几个浏览器。目标通常是确保HTML和CSS代码在这一系列浏览器上执行相同的操作。GoogleChrome仍然是许多开发人员的最爱,因为它拥有广泛的开发工具。Chrome中的开发人员工具提供了一种测试HTML和Javascript代码以及跟踪问题的方法。

除了Chrome之外,大多数Web开发人员都有Firefox、Safari甚至Opera来测试他们的HTML代码。由于许多Windows用户目前升级到Windows10,用户也应该考虑在WindowsEdge浏览器中进行测试。

熟悉关于HTML5培训的入门基础知识,是为了让你在HTML编码方面有一个快速的开始。在掌握HTML编码之前,还有更多的知识需要学习和了解。在HTML5培训机构里,有专业的导师团队,引领行业的先进课程,让每位学员可以更快的掌握想学的知识,学习更有成效。

了解更多

着互联网的发展和进步,HTML5前端开发工程师岗位的热度也一直居高不下,近几年还有明显的继续升高的趋势。那么对于许多零基础的人来,应该判断自己的HTML5掌握的是否入门了呢?

青岛HTML5

在这里我们要先明确一个概念,现在的HTML5技术指的是HTML5、CSS3以及JavaScript。那么判断自己HTML5技术是否入门的时候,也需要看这三种技术掌握的如何。

1、HTML5

HTML是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。

当开发人员想添加图片到一个页面,HTML会显得尤为重要。掌握HTML5是成为HTML5开发人员的必要条件之一。

2、CSS3

CSS就是层叠样式表,是能够真正做到网页表现与内容分离的一种样式设计语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。而且CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS3原理同CSS,是在网页中自定义样式表的选择符,然后在网页中大量引用这些选择符。

3、JavaScript

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是用来给HTML网页增加动态功能。

JavaScript在网页设计中是至关重要的,因为它有助于为网站提供功能。可以帮助开发人员做一些互动元素并添加到你的网站地图的实时更新,在线游戏,互动电影等。使用JavaScript,可以确保网站的交互性,可以接受任何类型的用户。

4、jQuery

jQuery是一个快速、简洁的JavaScript框架,能够让开发人员用更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。