讲给后台程序员看的前端系列教程(01)——HTML5概述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100545141

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

开篇语

大概两年前我写了《讲给Android程序员看的前端和后台教程》;在该专栏中介绍了前端开发基本技能,例如:HTML5、CSS、JavaScript等等。随着技术的更新和迭代,我决定在此基础之上重写此系列教程以供工作和学习之需。本系列教程概述如下:

  • 主要内容为前端基础知识和常用框架
  • 每篇博客均附示例源码及运行效果截图
  • 本系列教程免费,欢迎转载

HTML、CSS、JavaScript的关系

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

  • HTML负责页面的结构和语义。比如,页面的标题,页面的区域划分,语义化标签等等都是由HTML来实现的。

  • CSS负责页面的样式。比如,背景颜色,文本的大小,边框等等与样式相关的部分都由CSS承担。

  • JavaScript负责页面的行为和交互。比如,点击按钮后改变文本颜色,计算两个数据的相加,存储数据等等;这些都是由JavaScript负责。
    在这里插入图片描述
    HTML、CSS、JavaScript、Java四者之间的关系颇似上图漫画所示:HTML、CSS、JavaScript各司其职;而Java正如一只有羽毛却飞不起来的母鸡。当然,母鸡的职责不是飞翔而是下单。

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。在本教程中,我们选用HBuilder作为开发工具,请自行在其官方网站下载即可。因HBuilder操作便捷,界面友好;故,在此不再赘述其使用方式。


HTML5入门示例

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

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

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

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页