Html语法（推荐14篇）
访问过的可连接文字的颜色
语法格式：
.leftmargin 页面左侧的留白距离.topmargin 页面顶部的留白距离
语法格式：
注：value为长度值为数字align 属性
语法：
其属性有三种：left靠左,center居中,right靠右
〈p〉
为段落标记，可利用以上属性对整个段落进行设置〈br>为换行标记
例：
江南逢李龟年
一、根据授课对象确定学习目标
对象不同, 基础不同, 对于同一课题的学习要求也应有所不同。就我而言, 我所教学的对象都是中职学生, 他们对HTML的概念和语法并不是很理解, 加上之前的大部分时间主要是注重对Front Page 2003软件的学习与运用, 整个学习阶段都没有接触过语言代码方面的知识, 所以在学习HTML语言方面存在一定的困难。因此, 我所确立的学习目标是掌握HTML基本标记的用法以及HTML四个标记的位置关系。对于非计算机专业的中职学生来说, 进行网页制作主要是依靠一些“所见即所得”的网页制作软件, 因此对于HTML语法的学习只要掌握基础就行。之所以把四个标记的用法定为学习目标是因为HTML四个基本标记是建立网页的基础, 如果不会正确使用, 后续的学习将无法继续。
二、根据学习目标确立教学方法
一方面因为学生没有任何的语言代码方面的基础, 另一方面HTML语法这部分内容是在学完Front Page 2003的基本操作之后设置的, 所以学生在接触这部分知识时会出现厌烦、懈怠的情绪, 认为只要会使用Front Page 2003制作网页就行了。曾有学生这样说:“使用HTML语句编写网页既麻烦又费时又不能时时看到网页效果, 而且面对的是一个个代码很枯燥的”。因此为了能够充分调动学生的学习兴趣, 遵循以教师为主导、学生为主体的教学原则, 根据本课内容的特点我采取了任务驱动法、讲授法、演示法、探究法、类比记忆法等一系列教学方法。其中, 运用类比记忆法主要是考虑到中职学生的英语能力普遍不强, 对于标记的使用位置很难记忆, 运用类比记忆法之后学生可以轻轻松松迅速记忆标记的使用位置。同时, 网页制作又是一门操作性比较强的学科, 为了使每个学生都能掌握课堂所学, 在课堂教学中我还积极注重和鼓励学生的自主探索、协作完成的学习方式, 这样可以大大提高学生的学习能力。
三、根据学生特点设计教学过程
1. 情境导入
要想让学生更好地了解和理解HTML的语法, 单纯靠教师一味地简单枯燥的讲述, 学生必然是不能深刻体会的, 因此在经过多次尝试之后我设计了“以旧引新”这样的导入环节, 也就是由学生熟悉的Front Page 2003引出HTML语法。我一般会请一名学生上机演示运用Front Page2003如何建立一个简单的网页文件。之后我再提问:刚才我们是运用Front Page2003建立的一个简单的网页文件, 那么这个网页文件是如何在浏览器中显示的呢?学生会根据你抛出的问题展开讨论, 这时我们自然而然就可以引出课题——运用HTML语言来实现。之所以要这样设计成情境导入的方式, 主要是想将网页以HTML代码的方式展现在学生面前, 学生通过对比可以对学习对象有恍然大悟的感觉——原来网页是这样生成的, 从而激发学生渴望自己亲自动手编写代码生成网页的欲望, 同时也点明了本课学习的主要内容, 课堂教学在求知的气氛中展开。
2. 自主探究
在教学过程中, 利用讲授法首先介绍HTML语言的概念、HTML文件的构成以及四个基本标记的书写格式, 让学生对HTML语言有个初步的认识。然后围绕学习目标, 带领学生进行自主学习、探究学习新的知识。在自主探究中让学生思考分析所讲的四个基本标记
有没有共同点, 学生通过观察很快发现, 四个标记在书写时都是成对出现的, 这时引出新的知识点——容器型标记和非容器型标记, 成对出现的是容器型标记, 反之即为非容器型标记, 因为是通过自己的观察思考所得, 所以学生会迅速记住。接着就可以提问:这四个标记都介绍过了, 那么这四个标记在HTML文件中的位置关系如何呢?由此可以顺利引出这节课的重点——四个标记的位置关系。在讲解这部分知识的时候我采用了类比记忆法, 因为考虑到学生的英语水平不高, 所以在记忆时容易产生困难, 那么运用学生简单记得的英语单词HEAD和BODY两个单词与人体作类比, 将HTML文件比作一个人, 将HEAD标记比作一个人的头部, 将BODY标记比做人的身体, 将TITLE标记比作人的额头, 这样在讲到标记位置关系时, 学生根据人体部位的位置关系自然就会联想到, 头标记
在上面, 身体标记
在下面, 非常容易记忆。这样HTML文件的基本结构学生就都能掌握了。在学生掌握基本结构的基础上, 我再通过多媒体演示如何运用HTML标记建立一个简单网页的过程, 然后由学生自己来完成并体验这样一个过程。在学生练习的过程中, 我再对学生进行个别辅导。之后我依据任务驱动法, 通过传奇教学系统给学生布置上机任务, 让学生自己独立地完成通过HTML标记创建一个简单网页的过程, 借此加以巩固和强化。
3. 拓展训练
在实现简单网页编写的基础之上, 通过多媒体教学向学生展示一个新的包含有段落的网页文件, 问学生能否实现?学生通过尝试之后发现, 不能实现文本的分段。这时可自然引出新知识点——如何通过代码编写实现文本的分段效果。此时教师可乘机向学生介绍段落标记, 但是仍由学生自己想办法实现含有段落的网页。通过这种方法可以调动学生参与的积极性, 有能力的学生会很快做出效果。学生从被动学习变为主动探索, 增加了学生的自信心。之后可找一名做的正确的学生进行现场演示, 演示完毕, 教师再把时间交给学生, 等制作完成后, 教师加以点评和总结。学生通过自己的探索学会了分段效果的实现, 既提高了课堂效率又调动了学生的积极性。
4. 回顾总结
课的最后可对本节课的教学内容及学生学习情况进行归纳总结, 再次强调这节课的教学重点是掌握HTML四个基本标记的用法。鼓励同学记住HTML标记的用法, 这样其它各种类型的网页就都可以进行代码的编辑, 增加学生的自信心。
总之, HTML语法的教学过程中教师要采用灵活的教学策略, 以学生为中心, 创设活泼有序的课堂氛围, 培养学生独立分析、解决问题的能力, 这样学生才能积极地参加课堂学习活动, 使语法教学生动有活力, 为网页制作综合能力的提高打下坚实的基础。
摘要：《电子商务网页制作》是面向中等职业学校电子商务专业学生开设的一门专业课, 旨在使学生学完本课程之后能设计制作简单的网站。HTML语法是第八章的教学内容, 在这之前学生主要学习并使用FrontPage 2003制作网页。本文主要是结合教学实践从学习目标的确立、教学方法的确定以及教学的实施过程进行探讨。
HTML 网站开发的主要原则是：
– 用标签元素HTML描述网页的内容结构； – 用CSS描述网页的排版布局；
– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序 HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言。Html是通过标签来定义的语言，代码都是由标签所组成。Html代码不用区分大小写。Html代码由开始结束。里面由头部分
和体部分现在就开始说说自己开发历程吧，先从html说起。
html是一种标记语言，是用在web网络上的标记语言，从开始html1.0到现在很流行的html5.0，我开始学的时候是从4.0开始学的，其实看起来4.0和5.0没有多大的区别，但是html5.0比4.0的兼容性更好，代码更简洁，运行速度更快。
下面就从html的完整 式来说明。
一般的html 式,这样的 式没有那么严谨，适合刚开始学的同学。
如果严谨的话，那我们就从表头开始说起:在表头上还有一行代码，它是用于声明一个页面的文档类型定义(Document Type Declaration, 即DTD).此元素声明位于文档中的最前面的位置，处于 标签之前。
通过确认页面的DTD,可以同时确定页面使用哪种W3C规范(比如HTML 或 XHTML 规范)。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。
请与层叠样式表(CSS)配合使用:
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。
如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型:
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。
除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD:
XHTML 1.0 也规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
XHTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。
请与层叠样式表(CSS)配合使用:
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。
如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型:
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML Frameset DTD
当您希望使用框架时，请使用此 DTD!
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
总上面来看，其实两者的表示形式没有太大的差别，但是HTML和XHTML的表示形式就有点不一样，在这里就不详细说了，等下一遍再跟大家详细比较这两者的详细区别。
HTML5是HTML的最新版本(处于完善阶段),其前身是Web Applications 1.0,2004年由网页超文本技术工作小组(WHATWG)提出,2007年被万维网联盟(W3C)所接纳,于2008年发布了第一份正式草案。HTML5的目的是为了取代1999年指定的HTML4.01。它强化了Web网页的表现性能,并追加了本地数据库等Web应用功能,已经成为各大公司无法忽视的下一代互联网的网页标准。业内很多大型公司如Google,Apple等,已经将HTML5应用在其产品中:Google的移动语音信箱,Apple的i Ad(苹果公司的广告管理系统)都是用HTML5写成。
随着智能手机市场的不断发展,HTML5为更多的移动平台提供解决方案。HTML5已经为开发人员提供一系列的标签与API,允许开发人员更简单地使用CSS3、Javascript构建富媒体(rich media)网络应用。这就是大家重视HTML5的原因。
2 HTML5中插入视频与音频
在HTML5的帮助下,开发人员可以将视频或音频组件轻松地嵌入到他们的网络应用中。允许将控制按钮(播放键,暂停键,停止键等)从视频或音频组件区域中分离出来,整个应用的界面会更灵活;同样也能使用一组控制按钮控制多个视频或音频组件。HTML5的视频API允许开发人员自定义许多有趣的操作,比如:调节亮度,加入3D效果等等。
在这些不同操作中,开发人员能够设计真正创新的手机应用,使操作和手机视频数据更加人性化。例如,他们可以将地理位置与手机拍摄的图片结合在一起,从而提供个性化,人性化的服务。
当前,对于手机应用平台而言,HTML5的视频和音频功能仍然有限。因此,苹果的i Phone手机支持
3
HTML5专有的标签
专注于HTML5
除ipad以外,
在ipad上,视频是直接在移动网页上加载的,但不能总是同时观看或者管理多个网页,也无法得到视频数据,例如,为了实现各种创意效果,将它复制到
表1列出一些移动终端对HTML5的部分功能的支持情况。
苹果不实现autoplay功能是为了防止未经许可的下载。
4
考虑到手机移动多媒体的所有优势,新的HTML5标签
有了HTML5,将
5 HTML5的API与移动平台之间的联系
当以上所有的HTLM5功能将与API相连接,在手机平台上将采取完全措施,目前,地理定位的API已经被植入在很多移动终端,包括i Phone中,开发者可以直接通过GPS获取地理坐标。HTML5是想为每个手机终端的可用组件创建API。可以想象例如一个可以直接从移动终端的各种不同元件获取音频、视频、照片等数据的“抓取”API(capture);一个可以在浏览器中打开各种不同应用(从VOIP到视频会议,甚至实时的“增强现实”)的API,在现实中,谷歌已经通过植入在智能手机中的GPS及谷歌地图应用和街景视图实现了一部分以上提到的功能;一个可以提供统一格式的“联系人”的API。
6 HTML5的本地存储功能
当创建一个网络应用时,一个十分重要的问题经常会摆在我们面前:数据的本地存储与读取。如果不使用本地存储功能,可以使用co支持ie来保存一些登录信息,并且将所有其他信息转存到一个SQL数据库如My SQL中。但并不能保证用户一直都有一个很好的网络环境,如果网速过慢,数据的存储与读取就会有失败的可能。另外,在网络环境欠佳时,数据的本地存储与读取在保存临时文件(cache)方面是十分方便的。
借助两个HTML5在专用的API——Web Storage与Web SQL Database,可以在本地使用SQL语言获取所有以“键-值”(
以上两个API的用途并不止数据的本地存储与读取,还包括简化个性化应用的过程等等。Google停止对gears的开发,全面转向HTML5的发展,这个是一个非常明显的信号:HTML5将足以满足各类开发人员的需求。
7 HTML5的拖放功能
在HTML5之前,Web页面上的拖放功能是很难实现的。在HTML5中,所有页面中的元素都是可以拖放的。为了实现这个功能,开发人员可以在元素属性中加入draggable="true"。另外,例如dragstart这样的事件与data Transfer这样的Javascript的API,允许开发人员实现(编写)在拖拽一个元素时所要执行的动作代码。在移动互联网领域,用户直观的拖放动作与触摸屏之间的互动在人机工程学中是非常重要的。
参考文献
HTML5在网页开发上，赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更 有价值的数据驱动的Web。北京恒泰博远软件开发公司对HTML5的解释是，为开发者提供了一个跨平台的移动apps开发方案，并且该方案具有很好的扩展 性和灵活性。
由目前it行业使用html5 开发app来看，如今国内使用html5开发app应用技术尚有欠缺，因为在手机开发app上，html5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。
JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。
纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。
即使这样，我们还是很看好html5 app开发，原因有一下几点。
一、是基于html5强大的兼容性，因为HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联，就因为这种强大的兼容性，使得在当下开发界是如此的火，同样也是因为这强大的兼容性，使得手机 应用软件，app更适合，也更方便。所以更适合手机app软件开发，正好补充了手机小巧的不足。
二、html5 app开发支持的手机系统有android、ios。
三、html5其突出的特点就是强化了web页的表现性,追加了本地数据库，可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。
四、html5 app开发，能提供更快、更简便的服务，代码可高度重用，服务发布方便。
语言是什么 、Web前端开发语言、HTML超文本标记语言 、网页主体结构 、常用标签、超链接(a标签)、Img图片标签。
2、盒子模型
初探Div盒子模型 、css样式、简单css样式、盒子模型Border边框讲解、盒子模型外边距盒子模型内边距、盒子模型占位计算、ul无序列表、ol有序列表、dl定义列表、补充知识(css)。
3、样式初始化及display+外边距合并
样式初始化、元素类型转换、内联元素对于以下属性特殊化、块级元素和内联元素的具体应用控制元素水平方向居中、盒子模型外边距合并原则
4、元素选择符+背景
HTML命名规范 、行业命名规范、选择器初级 、background背景样式
5、css样式(Font+Text)+特殊符号
font字体样式、text文本样式、特殊符号、css样式查询表
6、选择器高级及a伪类
css选择器、a伪类
7、选择器高级应用&样式优先级 常用css3
选择器优先级、样式的多种形式 、样式优先级排序、常用css3
8、浮动
浮动概况、浮动的一般情况 、浮动的特殊情况 、浮动对文字的影响float浮动后的特征 和 inlink-block 特征对比、清除浮动、清除浮动的多种办法、min-width的运用
9、定位
position定位概况、static 、相对定位 relative、绝对定位 absolute、固定定位、z-index 层的位置关系
10、vertical-align img特征 cursor opacity
img特征、vertical-align 垂直对齐方式、cursor指针样式、opacity透明度
11、表单
form表单 、form中的控件
12、表格
table表格结构 、table样式重置、table的默认特征、table单元格合并、display:table的特征
13、frameset框架
HTML5是Web技术的一项巨大飞跃,它吸收了网页的各种技术需求,将很多API列入规范之中,将图形图像、视频音频等媒体进行标准化。其中,表单技术有了明显的提升,无论是表单的类型,还是表单的属性都使得表单的功能更加丰富,操作更加简洁,减少了代码编写,提高工作效率。
1HTML4的表单技术
HTML4中的表单技术相当简单,可以进行数据收集的表单域的数量不超过十个,这是使得利用网页制作数据录入界面非常困难,具体存在的问题有以下几个方面:
1)表单种类和属性单一,无法满足用户需求;
2)表单自身没有验证功能,需要用户通过编写脚本语言实现验证,增加了表单验证的难度,降低了页面的执行效率;
3)表单实现效果很差,虽然可以通过CSS进行样式修改, 但这还不足以满足用户需求,例如:下拉菜单在IE浏览器中无法通过CSS进行样式的修改,很多用户为了追求效果,需要自己开发下拉菜单。
基于以上的原因,用户制作基于网页GUI时,通常要使用Javascript语言和CSS技术整合控件满足用户需求,这大大增加了开发的难度,提高了开发成本,降低了开发效率。
2HTML5表单技术
HTML5除了扩充了表单类型,还给表单增加了很多新的属性,使表单功能和数据验证的实现尽量从程序代码分离出来。
2.1HTML5新增表单
HTML5在HTML4的基础之上扩充了表单的类型,这些表单更加符合当前网页界面制作的需要,它不仅保持了简洁易用的特性,还内置了验证功能,HTML5增加的表单如表1所示。 其中“email”、“url”、“search”、“tel”表单在“text”表单基础上内置了验证功能,如果录入数据错误,会提示错误,并且无法完成数据提交;“date”、“number”、“range”和“color”表单封装了特有的功能,用户可以更加方便的进行日期选择、颜色选择等操作。
2.2HTML5表单属性
HTML5除了扩充了表单类型,还给表单增加了很多新的属性,这些属性可以被分为以下几类:
1)表单域所属
新增的“form”属性可以将当前表单域指定给一个或多个表单,这使得表单域的归属和页面位置更加灵活,无需像HT-ML4一样必须将表单域放置在表单内部。另外,HTML5提供了 “form Action”、“form Method”等属性,这些属性设定后可以覆盖表单的action、method等属性,使表单域的使用更加灵活。
2)验证属性
HTML5除了内置验证功能外,还提供了专门的验证属性: “required”属性具备非空验证功能,表单必须输入数据才可以通过验证;“pattern”属性的值是正则表达式,表单内容如果不符合正则表达式规则将无法通过验证,通过“required”和“pattern”属性使表单的验证功能非常完善,用户几乎无需编写任何验证代码就可以实现复杂的表单验证功能。
3)功能属性
网页技术不断成熟,很多网页中表单功能已经成为一种使用习惯,HTML5将常用的表单功能进行了规范:在页面加载时,“autofocus”属性可以让输入性表单自动的获取焦点,它取代了Javascript语言的focus方法;“Placeholder”属性提供输入性表单提示功能,在表单为空时提示信息会显示,如果表单获得焦点,提示内容自动消失;“auotcomplete”属性可以设定输入性表单自动完成功能。
4)数据列表功能
HTML4中有下拉菜单和列表,但是文本和列表进行组合的表单一直实现困难,“list”属性允许将已经定义好的数据列表指定给某一个文本,从而解决组合框的问题。
2.3表单的优势分析
HTML5对表单输入的类型和属性都进行扩充,它存在的优势主要有以下几方面:
1)表单继承了原来表单简洁的特点。
2)输入表单功能扩充,以及验证功能的完善,用户无需将精力集中到功能性表单的实现和验证的实现,更加注重页面的设计,提高开发效率。
3)输入表单和验证功能无需再使用程序实现,这大量减少前端Javascript代码量,提高了网页运行效率。
4)丰富的表单属性保持了表单的一致性,增加了表单的灵活性。
3结束语
1、手机页游的3D化是大势所趋
随着硬件能力的提升、WebGL标准化的普以及手机页游的逐渐成熟，大量开发者需要创作更加精彩的3D内容。
2、HTML5移动营销初心更多新玩法
游戏化、场景化、跨屏互动，HTML5技术满足了广告主对移动营销的大部分需求，从形式到功能、到传播。
3、动漫、二次元
HTML5技术的成熟，将带来动漫产业的升级。动漫元素本身可通过HTML5来强化创意，动漫形式将具有富媒体的高度交互、MV影音功能，为读者提供更加场景化的阅读体验。
4、轻应用、WebApp、微站
轻应用、WebApp、微站HTML5开发移动应用更灵活。采用HTML5技术的轻应用、WebApp以其开发成本低、周期短、易推广等优势，将迅速普及。
5、移动视频、在线直播引领视频升级
目前移动视频播放技术的短板在于：一、它需要沉重的挂件和烦琐的操作;二、它很难提供高清的视频传输与播放。当各种体育、个人秀直播越来越流行时，这两个短板便愈发的明显了。HTML5技术将会革新视频数据的传输方式，让视频直播更加高清流畅。而且，视频还将与网页真正的融为一体，让用户看视频如浏览动图一般简单轻松。此外，HTML5可以为视频实现任意平台播放，甚至是人画交互。移动视频或成为HTML5领域的爆发点之一。
6、资源复用，HTML5重新洗牌IP市场
IP概念时下已经火的不能再火，围绕IP的争夺战也异常激烈，动辄千万费用。
HTML5为IP的发光创造了一条新的途径：创作成本极低的HTML5游戏和动漫，可以让更多的文娱创作接受市场检验，自造IP变得更加便捷。
许多成熟的IP资源，可以用HTML5再复用一遍，比如《金庸奇侠传》，做了单机游戏、网游、手游，依然可以再做一个HTML5版，事实上大家都在这么操作了。
H5前端开发其实一点都不简单了，要成为一个优秀的前端工程师并不那么容易.学的知识点非常的多,那么HTML5有哪些优势呢?
7、影视互动、HTML5推动泛娱乐产业发展
泛娱乐，是一种打通游戏、文学、动漫、影视和戏剧等多种文创业务领域的互动娱乐新生态。
在泛娱乐交互中，HTML5以其天然的营销属性，整合到游戏、影视、动漫、文化产品等方方面面，制作场景化营销与体验的窗口型小游戏或场景。
以《花千骨》为例，影视顶级IP授权打造HTML5游戏，在用户观看视频的同时，引导进入游戏，无需下载，将实现最佳影游联动，这将带给行业全新的发行思路。
8、WebVR让VR从贵族走向大众化
Web VR就是通过HTML5将虚拟现实场景嵌入到网页，目前已受到谷歌、Facebook等巨头的拥护。
Web扩展了VR的使用范围，很多生活化的内容纳入了VR的创作之中，如实景旅游，新闻报道、虚拟购物等，其内容展示、交互都可以由HTML5引擎轻松创建出来。
去年12月白鹭与暴风魔镜，合作成立国内首个Web VR实验室，也是希望用HTML5来打造低成本、快捷、低门槛的VR游戏、影音体验。
9、微信或推出HTML5应用市场
现在公司个个都要做网站或 App，都需一堆H5前端。前端人才的价格围绕价值上下波动，波动范围取决于供需失衡情况。
1、创业团队太多，且有钱
~，创业团队对市场的影响是有限的。原因：1、穷;2、团队少。现在的情况是：
A、薪水合理
当年创新工场招人多是降薪，Android开发，一般给8K、10K，能给20K的是大拿。
而现在，很多创业团队都可以按照市场价格招人，比如说BAT过来的，一般可以涨个10~30%，然后+期权。
对于候选人呢?没有太多风险。某创业团队CTO这样讲，“他们为什么不来我这?薪水涨了，还有股票。公司烧两年没问题，就算公司最后失败了，他们跳槽找下一家好了。他在我这技术又不会落后”。
B、团队太多、招聘总量太大
每个月20家拿了1kw美元以上的投资，如果整个市场维持这个速度(风投13年在美国软件业投了110亿刀，Q2投了61亿刀)一年就是240家团队。
每家一年只新增2、30个开发，就是5、6k人/年，且大半的创业团队都在北京。实际很多创业团队，招聘计划都超过了2、30人/年。
还有个问题：大部分团队的钱，烧一两年没问题，这意味着，两年内，创业团队都不会大量释放出库存员工，只会屯人。
2、重复建设
这两年新兴的重复建设带来了很多需求：
BAT移动端的血拼
百度现在上线的有60款移动端产品?or 50款?这背后从市场卷走了多少个Android、IOS 开发?市场一共才多少优质Android、IOS供给。。。。
阿里的all in到移动端是大家都知道的。
腾讯北京的移动团队在不断地整合，我们就不说了。感谢腾讯依靠自己的培养梯队，把很多java、C培养成了众多Android、IOS人才，而不是光靠挖。
BAT这4年的移动端血拼，奠定了现在移动端的薪水基线。
移动开发及H5前端开发人才的市场整体新增供给还是太少
以全国移动互联网人才最集中的北京市场为例：H5前端库存严重不足，也没有这么多新增供给。
1、北京现存市场
北京现存市场的人员波动，不足以应对一年几千人的新增需求。
百度是北京最大的砖厂，也是最大的供应方、需求方。百度有多少纯开发(不算测试运维等)?也就4、5千人，百度有多少M1M2?也就2、300人。在没有大调整的情况下，也就20%左右的离职率，每年也就能供给市场1k人，其中前端恐怕占了不到20%。这已经是整个北京市场最大的研发供给池。
很多公司的研发团队，也就数百人，一年对市场的贡献也就几十人，其中H5前端大约10人左右。
2、北京的新增供给
北京的互联网市场新增供给以应届生为主，其他行业转移量少，其他国家转移过来的少。
北京各个高校加起来，能有5K码农就不错了，很多计算机、通信毕业生，毕业流向了运营商、银行、通信、航天等单位。
而这其中，能担当H5前端开发的顶多几百人，恐怕还是小几百。
中国的传统IT业、通信业，还在持续增长中，没有办法向互联网行业大批量地转移码农。放眼全球看，全世界缺乏像中国这样，人均工资较低，数量巨大的码农供应国家，也就是说，未来只有美国从中国掠夺优质码农的份，而中国却无法找到新的供给国家，最多只能向中西部转移。
H5前端开发其实一点都不简单了，要成为一个优秀的前端工程师并不那么容易
可能大多人都还认为H5前端开发是一个「相对于其他模块来说更简单的领域」，在他们心中的H5前端工程师是这样工作的：
把 Photoshop 文件、图片或者线框放进一个网页;
偶尔设计 Photoshop 文件、图片或者线框;
用 Javascript 编程，为网页制作动画、过渡效果;
用 HTML 和 CSS 编程，确定网页的内容和布局。
事实上，前端工程师在做的是：
在设计师和工程师之间实现可视化的语言;
用可视化的设计，定义一组代表内容、品牌和功能的组件;
为 Web 应用程序的会话、框架、需求、可视化的语言和规格设定底线;
定义 Web 应用程序的设备、浏览器、屏幕、动画的范围;
开发一个质量保证指南来确保品牌忠诚度、代码质量、产品标准;
为 Web 应用程序设定适当的行距、字体、标题、图标、填充等等;
为 Web 应用程序设定多种分辨率的图像，设备为主的实体模型，同时维护设计指南;
标记 Web 应用程序，使之语义化，SEO 友好;
用一种友好的，耗电少的，设备和客户端感知的方式连接 API，获取信息;
开发客户端代码来显示流畅的动画、过渡、延迟加载、交互、应用工作流程，大多数时间用来考虑渐进增强和向后兼容的标准;
保证后台连接安全，采取跨域资源共享 (CORS) 的程序考虑，防止跨站点脚本 (XSS) 和跨站请求伪造 (CSRF) ;
最重要的是，尽管有严格的期限、利益相关者的要求，以及设备的限制，无论现在还是将来永远是「客户第一」。
前端又可以分为PC端、移动端、混合应用、js后端，pc端就要自己考虑浏览器的兼容性问题，移动端也要自己考虑屏幕适配等。
光有理论知识还不行，还要实践动手能力，学会使用工具,首先是IDE或者编辑器,然后是各种浏览器或者移动设备，最后还有版本管理、代码压缩等自动化工具。
总体上来说，H5前端要掌握的技能、知识点很多，而且还很零散。越学习越发现，要成长为一个优秀的前端开发人员确实比较难。
如果你想开发一个程序，让它读取文字或文件、输入输出一些有用的东西，那么，命令行脚本语言将是个不错的选择。 然而它并不像web应用程序和桌面应用程序那样有吸引力和好看的外观，但是作为快速开发的脚本语言，你却不能忽视它们。
很多的在linux平台上运行的web脚本同样能以命令行模式运行，例如Perl，Python和PHP，所以如果你学会了使用它们，你将能在两种环境中使用它们。 我的学习道路一直没离开Perl太远，我自学Python使用的是这本优秀的在线免费书Dive into Python。
关键词：HTML5,互联网,W3C
0 引言
在2012年, HTML5赢得全世界软件开发者以及整个移动市场的瞩目。9月, TELERIK公司利用三周的时间, 针对有关HTML5及其在移动端的发展对4000多名软件开发人员做了调研。主要目的是确定将宣传、炒作从实际生活中抽离后, 在现实世界中HTML5真实的应用模式。此次调研还包括探寻当Facebook放弃使用HTML5这一决定以及W3C和WHATWG兄弟割席为整个HTML5市场所带来的冲击。而调查报告揭示了以下几个关键线索:
(1) HTML5功能性远远不止宣传中所介绍的。换句话说, HTML5技术的潜在开发性远远超过人们的预期。而大多数被调研的软件开发人员 (82%) 相信在将来的一年内HTML5将在他们的工作中承担重要角色;
(2) Facebook将其在手机等移动平台应用从HTML5转换至原代码这一决定在开发者对HTML5普及推广的态度上并没有很大的影响;
(3) 相较于WHATWG快速的“living”标准, 多数软件开发者更倾向于W3C传统的数字编号系统定义静态的“snapshot”标准, 前后两者的支持率接近1:4;
(4) 在被调查者中, 已经有63%的人已经在积极使用HTML5, 并且称这是因为编码语言的相似性以及其跨平台的兼容性和出色的功能性, 而更有6%的人目前并没有使用HTML5但同样认为它在未来两年中将变得十分重要。
1 HTML5的兴起
还是在2012年就有专家预测——HTML5广泛普及还要等5至10年, 但也有不同的判断表示支持HTML5——在2013年, HTML5将利用其强大的兼容性为自己争取到全球范围内10亿移动用户, 而届时i OS系统和安卓系统下的手机也仅有8亿台。TELERIK公司所做的调研报告已经揭示多数软件开发人员认为HTML5的普及是无法避免且可预见的。对此, Forrester Research发表了自己的也是被公认的调研结果:至2012年底, HTML5已经不仅仅是初露头角的移动端软件工具, 而逐步变成了各个领域中网页创新体验的实际意义上的标准。
2 发掘HTML5的优势
在开发者眼中HTML5相较于其他编程方式, 有着出色的表现, 根据反馈得出优势的受欢迎程度见表1。
总的来说, HTML5的优点可归为以下几种:
语义特性:HTML5新的语义标记有利于搜索引擎或辅助技术对页面的理解, 加强页面访问性, 同时源代码的开放性使得开发者更加方便地共享资源。
跨平台/兼容特性:HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以与浏览器内部的数据直接相连;而摆脱了类似Flash等插件更使得移动端应用无需再为微软、苹果、安卓等不同系统进行多次开发, 一次开发、跨平台使用成为可能。
高效特性:更有效的连接工作效率, 使得基于页面的实时聊天, 实现了更快速的网页游戏体验, 更优化的在线交流;HTML5拥有更有效的服务器推送技术, 能实现服务器将数据“推送”到web app的功能。
功能特性:HTML5可以将应用相关资源文件缓存至本地, 同时保证在离线状态下Web应用正常使用;local Storage用于应用高速数据存取, 在HTML5内自由读取文件, 加快运行速度;窗口级的任务管理使得多任务运行得以自行优化。
3 有关HTML5的争论
为了进一步判断HTML5的发展空间, 有关的负面影响也需纳入考量, 而负面新闻中由具有影响力的应属Facebook及其创始人Mark Zuckerberg在2012年9月出席《Tech Crunch》大会时宣称将放弃构建HTML5以打破i OS系统垄断性的初衷, 转而投向本地应用。宣布这一决定等同于宣告Facebook两年来的努力功亏一篑, 有人认为是当年W3C和WHATWG的分裂使得HTML5标准不一所导致, 有人则归咎于对HTML5过于理想化的预期判断。但令人感到惊奇的是在这个爆炸性事件发生之后, 软件开发者似乎并没有受其影响:在调查报告中显示无论是否接触过HTML5, 多于七成的被调查人员表示此次事件没有影响自己对其的态度。甚至有一半还多的人并不知道Facebook之前在移动端的应用是利用了HTML5构建出来的, 可见HTML5能够达到与本地应用媲美的程度, 就连专业人士都不易察觉到两者的不同。
如果说W3C和WHATWG的分裂是坚持自身优势不肯退让的结果, 那么Facebook放弃HTML5却是对先前的决定不够坚信, 而惨遭滑铁卢之败。就在Facebook对于移动端的表现一筹莫展时, 两位Sencha工程师Jamie Avins和Jacky Nguyen就开发出了Fastbook这个性能上不逊于原生Facebook程序的纯HTML5应用。个人认为Fastbook并不是Facebook移动应用的替代品, 充其量算是一个技术demo, 但它证明了HTML5的能力及价值, 只要以正确的方法使用正确的框架, HTML5也能完成非常复杂的应用和特性!
4 察觉HTML5的风险
对于HTML5而言, 当前令人最担心的是碎片化。碎片化指的是由于浏览器行业缺乏统一的标准, 而导致某些网页应用功能在不同的浏览器中表现不一, 甚至无法得某些浏览器的支持。这就使得HTML5跨平台使用这最大优势无法真正实现, 对于其将来的发展无疑将是致命的。而同样WHATWG和W3C分裂后所创建出的两个标准各有优势, WHATWG将集中于推进“living”标准, 快速更新保证用户的最新体验, 而W3C“snapshot”传统标准的优势体现在专利授权、合同条款等方面。
碎片化已经给安卓系统带来了无穷尽的麻烦, 巨大的市场占有率并没有为Google公司带来相应的利益。以开发者的从业经验及固有思维, 碎片化会是所有网页应用的难以攻克的问题, 对于HTML5也不例外, 71%的被调查人员中表示担心, 更有14%的人表示极度担心。
总的来说, 当HTML5处于风口浪尖上, 饱受争议、褒贬不一时, 多数的开发者并没有静观其变;当HTML5在移动端及台式应用的占有率和使用率提高时, 也有少数人怀疑其的实际发展。可见, 有关HTML5技术的相关决定并不会受到外界过多的影响, HTML5的发展空间和前景就目前而言都是较为乐观的, 其易操作性、灵活性及经济性将会在一个标准统一的平台上大展宏图。此后当HTML5以统一标准运行之时, 它在大平台中与诸多软件全方面的竞争更是让人期待。
参考文献
[1]Forrester Research, “The Coming Of HTML5, ”August 3, 2012, Peter Sheldon, Michael Facemire, Zia Daniell Wigder, Lily Varon.
[2]黄永慧, 陈程凯.“HTML5在移动应用开发上的应用前景”[J].计算机技术与发展, 2013 (07) .
[3]王澎涛.“基于HTML5的跨移动终端平台的设计与实现”[J].北京邮电大学, 2014.
[4]张成岩, 吴静, 仇剑书, 严斌峰.“基于HTML5的移动Web应用浅析”[J].信息通信技术, 2013 (04) .
HTML?指的是超文本标记语言?(Hyper?Text?Markup?Language)，标记语言是一套标记标签?(markup?tag)，HTML?使用标记标签来描述网页。HTML5区别于HTML的标准，基于全新的规则手册，提供了一些新的元素和属性，在web技术发展的过程中成为新的里程碑。HTML5被推广用于Web平台游戏开发，及手机移动领域，从市场来看，无论是桌面应用还是移动应用，HTML5都是当下Web技术中最炙手可热的新宠，是创新的主旋律，在不久的时间里一定会大有作为。
二、课程能让你学到什么
从前端开发的基础出发，学习使用HTML，CSS，JavaScript等一系列前端技术，实现动画特效。以开发实例展示为主导，循序渐进让学员掌握HTML5技术的应用。强化学员基础，尤其是要针对JavaScpript基础的强化从而掌握HTML5新功能API。
姓 名： YJBYS
国 籍： 中国
民 族： 汉族
年 龄： 24
婚姻状况： 未婚
户口所在： 湖北
身 高： 170 cm
体 重： 55 kg
联系电话： ×××××××××××
电子邮箱： ×××@yjbys.com
求职意向
人才类型： 普通求职
应聘职位： 互联网软件开发工程师
求职类型： 全职
可到职日期： 随时
月薪要求： 3000～3500元
希望工作地区： 广东省
教育经历
毕业院校： 湖北职业技术学院
最高学历： 大专
毕业日期： -07
所学专业： 电子工程
起始年月 终止年月 学校(机构) 所学专业 获得证书
-06 2014-11 广州××××软件开发培训机构学院 PHP程序员(就业班)
语言能力
外语： 英语 一般
粤语水平： 较差
国语水平： 良好
工作能力及其他专长
熟练linux命令架设DHCP与NIS,FTP,Samba,DNS服务,Apache,Sendmail,iptables防火墙配置,SSH系统安全管理;
熟练php与面向对象构造思维;
熟练html/div/css/jquery/xml/mysql前端与后端模板开发设计;
了解ThinkPHP、yii框架MVC开发;
自我评价
随着智能机的出现, 我国网民接入互联网的方式发生了翻天覆地的变化。7月17日, 中国互联网络信息中心 (CNNIC) 发布了第32次《中国互联网络发展状况统计报告》[1]。报告显示, 截至2013年6月底, 我国网民数量达到5.91亿, 互联网普及率为44.1%, 较2012年底提升2%。与此同时, 我国手机网民数量达4.64亿, 较2012年底增加4379万人, 网民中使用手机上网的人群占比提升至78.5%。3G的普及、无线网络的发展和手机应用的创新促成了我国手机网民数量的快速提升, 手机成为我国最大的移动终端。由于手机移动终端屏幕较小、运行能力有限, 传统的网页并不适合设备直接访问。随着HTML5的提出, 其跨平台的特性为移动Web开发提供了广阔的前景。
1 HTML5介绍
HTML5超文本描述语言是下一代HTML的标准。HTML5有两大特点:首先强化了Web网页的表现能力, 其次追加了本地数据库等相关功能。所谓的HTML5实际上是指包括HTML、CSS和JavaScript在内的一套技术组合, 目前支持HTML5的主流浏览器有Google Chrome、Firefox、Internet Explorer 9和10等。
2 HTML5新特性
2.1 视频、音频
当我们浏览网页时或多或少都遇到过这样的问题, 比如打开不同的播放器需要安装不同的插件, 甚至更换浏览器后同样也需要安装插件。现在Web处于严重依赖插件的时代, 听歌、看视频、购物等都要依赖插件, 在不便的同时还存在着许多安全隐患。HTML5新增的视频
目前对于移动终端而言, HTML5的音频、视频功能应用是有限的。苹果的iPhone手机支持
2.2 表单
现在流行的移动设备大多采用触摸方式进行输入, 并且有一个虚拟的触摸键盘。由于移动设备本身屏幕较小, 按键大小和布局对用户的影响非常大, 过大或过小都会降低用户体验感。如果能做到输入不同的内容显示不同的键盘, 那么在提高用户体验的同时就提高了输入效率[3], HTML5的表单元素很好地解决了这一问题。不同元素与键盘的对应关系如表1所示。
表单元素中除了上面几个新增元素外, 还有Date pickers week、time、color等元素。HTML5中的表单组件是对HTML4表单的扩展, 增加了内置表单验证、输入框占位符、外部表单关联等[4], 避免了采用HTML4中的冗余代码验证和样式控制, 为网页开发带来了便捷。例如:就定义了一个遵循邮件地址格式的输入框, 在输入地址时系统会自动辨别格式是否正确, 若不正确不允许提交。以前这些相关验证都需要很复杂的代码才能实现, 现在只需几个简单的语句就能轻松完成。
2.3 画布
目前要在网页上绘图几乎不可能, 就连最基本的图形都很难实现。HTML5引入的Canvas绘画功能, 为开发人员提供了动态产出和图形渲染功能。开发人员不再依赖Flash来进行动画绘制, 利用Canvas就可以直接在网页上高效快速地绘制图形图表, 从而减少网络传输, 提高了效率。Canvas画布是一个矩形区域, 可以在其中随意画图, 也可以加载照片。Canvas元素本身没有绘画能力, 绘画工作必须在JavaScript内部才能完成。
2.4 离线应用
互联网拉近了彼此的距离, 让世界变成了地球村, 网络带给我们的方便不言而喻。众所周知, Web的应用非常强大, 但是它存在一个致命的缺陷就是严重依赖网络, 没有网络的Web就如离开水的鱼儿活不下去。虽然现在网络无处不在, 但是网络信号的好坏却各不相同。我们常常遇到掉线的情况, 很多时候掉线会带来严重的后果, 那么有什么办法能解决这个难题呢?HTML5给我们带来了希望。HTML5强大的功能就是离线应用, 将应用数据缓存到本地浏览器中, 掉线时一样可以浏览网页。
其实, 离线Web应用就是一个URL列[5], 列表中的URL可以指向HTML、CSS、JavaScript文件、图片或者其它资源, 该列表被称为Manifest File。通过创建Cache Manifest文件, 可以轻松创建Web应用的离线版本。当使用离线Web时, 会引入这一清单, 浏览器会从清单文件中读取相应的URL信息, 并下载相应的资源将其缓存到本地。因此, 在离线状态下访问Web应用时浏览器就会自动切换到从本地直接读取这些资源, 从而能够脱离网络使用。
2.5 标签和样式
移动终端因为受到屏幕尺寸和分辨率的限制, 无法将普通页面全屏显示在一个页面上, 就算通过屏幕缩放技术[6]来访问传统的网页也很难得到最佳体验。不过HTML5已经考虑到这点, 在网页头部加上就可以了。它根据终端屏幕尺寸来自动调整网页大小, 从而可以适应不同屏幕大小的移动终端设备。
3 移动Web设计原则
无论是手机还是平板电脑都不同于PC机, 这些设备屏幕较小、运行能力低, 若直接移植大屏幕界面的设计方案, 会给用户带来不便。为了提高界面设计效果和用户体验, 在设计界面时可以遵循以下原则。
3.1 简洁明了
我们浏览网页时往往一下子就被那些漂亮的图片所吸引, 这是因为图片对眼睛的吸引远远大于文字对眼睛的吸引。然而对于小屏幕而言, 图片并不是越多越好, 适当的图片会给人一种欣喜若狂的感觉, 起到画龙点睛的作用, 过多的图片会让人觉得眼花缭乱, 产生视觉疲劳, 过多的图片还会让人觉得信息杂乱无章, 没有重点。针对终端界面, 应该把一些图片、图形的数量减少, 隐藏不必要的信息。用户在浏览网页时不是“闲逛”, 而是寻找一些有用的信息, 因此, 要把关键信息布局在中间从而突出主题, 让用户能快速找到想要的信息。
一般情况下, 字号使用9~12号字体为宜。字体尽量选用罗马字体或者宋体这些好识别的字体[7]。由于字体过小, 我们可以利用颜色来突出重点或标题, 但是不宜过多, 同一页面的色彩不要超出3种[8]。
3.2 可订制性
手持移动终端本身是一个嵌入式系统, 根据市场的定位和用途的不同就会有不同的方案。有的对图形功能要求严格, 有的对定位功能要求精确。因此GUI必须要模块化设计, 可订制是它的基本要求。
3.3 以用户为中心
随着互联网的发展, 以用户为中心以人为本的方式越来越受到关注。用户体验对于一个网站而言比任何商品都重要, 具有良好用户体验的网页才能和客户建立良好关系。如果用户浏览一个网页时停留不到5s, 这个网站基本上属于吸引不了用户的网站。作为开发者首先要了解用户的需要, 换位思考一下用户需要什么, 在设计页面时要多站在用户的角度思考问题, 以人为本, 以用户为中心, 这样设计出来的页面才会让用户流连忘返。
4 结语
HTML5被越来越多的厂商接受, 它是未来网页制作的主要技术之一。它的出现, 减少了网页开发代码, 提高了工作效率, 但是, 其还存在着一些缺陷, 需要不断改善。相信HTML5未来会给我们带来更多的惊喜。
参考文献
[1]中国互联网发展状况统计报告[EB/OL].[2013-07-26].http://news.3snews.net/2013/lbs_0726/25820.html.
[2]崔玉梅.HTML5与移动平台[J].电脑编程技巧与维护, 2012 (18) :66-67.
[3]邢晓鹏.HTML5核心技术研究与价值分析[J].价值工程, 2011, 30 (22) :157-158.
[4]宋昭寿, 胡忠旭, 漆丽娟.HTML5网页设计探析[J].红河学院学报, 2012 (2) .
[5]严琦, 朱治国.HTML5对移动应用的影响[J].信息通信技术, 2012 (6) :64-68.
[6]钱海军.基于HTML5移动Web页面开发技术研究[J].电脑与信息技术, 2013 (1) .
[7]高亮, 隆梦琪.手持移动终端的小屏幕界面设计探究[J].硅谷, 2013 (1) .
