讲给Android程序员看的前端教程(01)——HTML5入门

来源：互联网发布：移动数据功能是什么编辑：程序博客网时间：2024/05/16 22:25

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

HTML、CSS、JavaScript的关系

通常我们说的页面或者前端，一般都包括了：HTML、CSS、JavaScript。那么这三者在页面中分别承担什么角色呢？简单地来讲：

HTML负责页面的结构和语义。比如，页面的标题，页面的区域划分，语义化标签等等都是由HTML来实现的。
CSS负责页面的样式。比如，背景颜色，文本的大小，边框等等与样式相关的部分都由CSS承担。
JavaScript负责页面的行为和交互。比如，点击按钮后改变文本颜色，计算两个数据的相加，存储数据等等；这些都是由JavaScript负责。

HTML5的特点及其优势

至于HTML的发展历史，我们不再赘述；我们要了解的是HTML5有哪些特点和优势。HTML5是新一代开发Web富客户端应用程序整体解决方案，从广义上来讲：HTML5=HTML5+CSS3+JavaScript，也就是说HTML5是在原来的HTML，CSS，JavaScript基础上的整合和增强。

HTML5解决跨浏览器问题。目前，各大浏览器厂商对HTML5表现出极大的热情，全力支持HTML5的广泛应用。假以时日，HTML5将改变HTML+CSS+JavaScript在跨浏览器时带来的各种诟病。
HTML5定义了一系列新元素，比如：智能表单、新的语义标签、多媒体标签等，这些新元素有助于开发者创建富互联网应用
HTML5提供一系列JavaScript API；比如：重力感应、文件访问、地理定位、硬件访问等等，这些API可以在浏览器内实现类原生应用
HTML5提供Canvas元素用于游戏开发。
HTML5提供操作多媒体的相关元素。以往，在HTML中实现音频、视频的播放往往需要借助第三方插件；现在，利用HTML5自身的元素就能实现视频，音频的基本操作。

抛开具体的技术不谈，HTML5的出现也给开发人员带来了极大的便利。在此，主要谈三点。

迭代速度快
相比IOS和Android的迭代速度，HTML5快了不是一点半点，简直都快飞起来了。变更后上线的时间极大缩短，用户也可毫无感知的情况下获取到最新的变化。
HTML5兼容性强
HTML5的兼容性主要体现在屏幕的大小和小部分极其殊的机型，发现Bug之后改起来也容易得多。这比起让人痛苦不堪的Android碎片化而言确实轻松了不少。
开发成本较低
比如要做一个移动端应用程序，为了兼顾到大部分用户，那么一般都会分为Android和IOS两个APP。对于公司而言，势必增加开发成本。如果采用THML5开发呢？嗯哼，大部分工作都可以用HTML5完成，从而缩短开发周期，降低开发成本。

HTML5开发工具

目前，THML5的主流开发工具有：Adobe Dreamweaver、sublime text 3、 WebStorm。在本教程中，我们选用sublime text 3作为开发工具。

第一步：下载和安装sublime text 3
该过程非常简单，按照官方文档进行即可，在此不再赘述。
第二步：为sublime text 3安装插件
sublime text 3支持众多插件，可极大提高我们的开发效率；作为前端的学习者或者初级开发人员建议安装：Emmet、HTML-CSS-JS Prettify、SublimeCodeIntel
第三步：熟悉常用快捷键
每个开发工具都有众多的快捷键，不必全部熟记；掌握常用的几个快捷键即可。

HTML5入门示例

在介绍完HTML5及其开发工具后，按照国际惯例，我们就要来写一个Hello World了。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>title</title></head><body>    <p>Hello World</p></body></html>

嗯哼，我们花了少许时间就写好了HTML5的入门示例，运行在浏览器中即可看到文字Hello World

阅读全文

3 0