着互联网的发展和进步，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选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

于html5(H5)的发展，分享下面几个最近看到的惊人的数据和新闻。

1、截至2015，有80%的App将全部或部分基于HTML5。这意味着大部分App的内容都将是以H5页面的形式呈现，典型的例子包括微信、Twitter等。

2、Facebook日前表示即将在所有的浏览器默认使用HTML5技术播放网络视频，不再使用Flash。

3、谷歌浏览器于9月1日起不再自动播放Flash。亚马逊宣布旗下网络(包括Amazon.com门户在内)不再使用Flash。

可以看到，各大主流网站平台都在向H5转型。在可预见的未来，Flash将被HTML5所替代。一方面，企业对H5网站的需求在不断增加;另一方面，市场鱼龙混杂，大量“伪H5”网站充斥着互联网。

如果你的企业目前正打算建设一个H5网站，以下是我们调研了国内几类建站服务商做出的总结建议，希望能给您做个参考。

1.伪H5型

虽然H5网站在国外很火，但是国内真正掌握这门技术建站的有实力的公司并不多，很多建站公司号称建立的是H5网站，实际仅是视觉看起来更炫的普通网站，教大家辨别这类网站一个最简单的方法。

H5网站最大的特性是响应式，响应式的意思是一个网站多终端跨界适配，如果你把一个网站页面最大化和缩小都不影响网站内容的展示—这才是真正的H5网站，而那些缩小后连文字都显示不全的就是伪H5网站。

2.真H5技术型

这样的公司在国内并不多见，业内比较知名的是以明月H5平台为代表的少数几家，其中明月H5平台服务比较多元，不仅提供成熟的H5技术建站服务，还有涵盖网站策划，设计，seo优化等整合型建站推广服务。

下面这张图演示了H5响应式网站在各个终端都自动跨界浏览的效果：

3、自由DIY型

目前，国内没有一家服务商提供可以让用户自己建设H5网站的平台，所谓的DIY建站平台要么生成的是普通网站而非H5网站，要么仅是一个H5移动端页面。

如果你只是需要一个页面做推广，比如邀请函和小游戏，那么这个是你的首先，这类H5页面一个在校大学生半天时间就可以做出来，但是和企业要求的具备多功能的H5网站相去甚远。

目前H5建站技术在国内太新，走在前面的仅有少数几家，整个市场没有定价和服务标准，导致H5网站建设公司鱼龙混杂，大部分是“挂羊头，卖狗肉”。相信这篇文章会让有建设H5网站的企业家们免去被忽悠，被坑的经历。

移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。

CSS如何判断横屏竖屏

竖屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

横屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代码

@media screen and (orientation: portrait) { 
 /*竖屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*横屏 css*/ 
} 

JS判断横屏竖屏方法