谷哥的小弟

大概两年前我写了《讲给Android程序员看的前端和后台教程》；在该专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。随着技术的更新和迭代，我决定在此基础之上重写此系列教程以供工作和学习之需。本系列教程概述如下：主要内容为前端基础知识和常用框架、每篇博客均附示例源码及运行效果截图、本系列教程免费，欢迎转载

HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：

上节教程中我们学习了HTML常用标签，这次我们来学习HTML文本标签。文本标签，顾名思义，它是用来显示文本的。在此，我们来瞅瞅HTML中经常使用的文本标签。

在讲这类标签之前，我们先来聊聊标签的语义化。HTML5标签语义化的目的：让程序员(甚至是非IT人士)能够直观地认识到标签及其属性的用途和作用。比如，当我们看到h1~h6时就知道：这个标签是用来显示标题的。当然，语义化还有其他非常重要的作用。通过语义化标签可以让爬虫，搜索引擎，SEO读懂我们的页面。比如，我们利用HTML5开发一款新闻朗读软件给盲人朋友用，如果我们把重点内容放入strong标签中，那么该内容会被重读从而突出重点。

我们在HTML页面中常用一些标签将页面划分为不同的区域用以展现页面结构。比如，可使用div标签将整个页面分为header，body，footer三部分。现在我们就来学习这些与页面结构有关的标签。

之前，我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签；现在我们来继续学习HTML中常用的列表标签。可能猛地一下看到ul不知道它是干嘛的。可是，如果我告诉你它源自于英语短句unordered list，你是否就反应过来了呢？对的，它用于表示无序列表

之前，我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签、HTML列表标签；现在我们来继续学习HTML表格标签。在HTML中与表格相关的标签简述如下：table标签用于展示表格、caption标签用于显示表格的标题、tr标签用于表示表格的行、th标签用于表示表格的表头单元格、td标签用于表示单元格

HTML表单用于搜集用户输入的不同类型的数据并将其上传至服务端。嗯哼，了解完表单的作用，我们就来一起学习表单中最常用的标签。input标签是表单中功能最丰富的标签，以下几种输入元素均可使用input实现。

之前，我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签、HTML列表标签、HTML表格标签、HTML表单标签；今天我们来瞅瞅HTML5中新增的标签。在HTML5中融入了众多非常实用的功能，比如：控件的拖拽，绘图，多媒体，地理位置，网络状态，数据存储，全屏等等。这部分功能多涉及到JavaScript，但是呢？嘿嘿，我们还没有讲JavaScript呢！在此，我们先体验一把，待我们学完JavaScript再来深入学习这部分知识。

至此，已经介绍完了HTML5中常用的标签。我们可以用这些标签写出自己需要的、美观的页面。当然，我们期望别人通过搜索引擎能够找到我们的网页，从而提高访问量。这个该怎么办？这就是接下来要介绍的meta标签。meta标签位于head标签中，是一种元数据(meta data)。它该标签不会显示在页面上，但是机器却可以识别。它主要用于定义页面的说明，关键字，最后修改日期和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面)、搜索引擎和其它网络服务。

HTML5常用标签及布局综合练习

CSS即层叠样式表(Cascading Style Sheet)它主要用于网页样式设计，比如：文字的大小，颜色，元素的定位等等。CSS的诞生将页面架构和页面显示进行了分离，各司其责。尤其在HTML5中废除了以往的font标签，big标签，strike标签，建议开发人员把外观的控制交给CSS负责。

CSS 选择器用于选择需要设定样式的元素从而实现网页样式的设计，比如：文字的大小，颜色，元素的定位等等。看到这，有人会想什么是选择器呢？举个例子，到了年底公司就要发年终奖了，于是人事部门发了一个通知....

上一篇博客中，我们学习了标签选择器；这篇博客中我们来学习ID选择器。id选择器可依据THML中元素的id属性指定样式，语法格式如下：

上一篇博客中，我们学习了id选择器；在这篇文章中我们来学习类选择器。类选择器可依据THML中元素的class属性的值指定样式，语法格式如下：

之前，我们学习了标签选择器，类选择器，ID选择器；在此介绍通配符选择器。通配符选择器非常的简单，它会将页面中所有的标签都设置成统一的样式，语法如下：

在前端开发中经常需要对文本设定样式。故，在本节中专门讨论与文本相关的属性及其设置方式。

在之前的几篇博客中分别介绍了CSS中常用的选择器：标签选择器，类选择器，ID选择器，通配符选择器。在本篇博客中，我们将学习复合选择器。顾名思义，复合选择器由两个或者多个基础选择器通过不同的方式组合而成从而实现更强大更方便的选择功能。

经过这段时间的学习，我们对CSS有了初步的了解和入门。在此基础之上，我们来了解CSS的特性。所谓层叠性是指CSS样式的叠加。例如，当使用内嵌式CSS样式表定义p标签的字号大小为18px，并使用行内式定义p标签的颜色为绿色；那么，p标签中的文本最终显示为18px绿色。

为提升用户体验，我们经常需要为超链接指定不同的状态，使得超链接在单击前、单击后、鼠标悬停时产生不同样式效果。在CSS中，可通过超链接伪类实现不同的链接状态。所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名、id名加上:构成。超链接标签a的伪类有如下四种：

在CSS中，伪元素用于将特殊的效果添加到某些选择器。在此介绍几个CSS中常用的伪元素。:first-letter用于向文本中的第一个字设置特殊样式，请看如下示例：

在网页设计中CSS的盒子模型是一个非常重要的概念。HTML中的每个元素占据一个矩形区域，这块区域就是该元素所占据的盒子。所谓盒子模型就是把HTML页面中的元素视为一个矩形的盒子、一个盛装内容的容器。每个盒子都由以下四部分组成：内容、内边距(padding)、边框(border)、外边距(margin)；详情请参见下图：

按照标签显示方式的不同将HTML标签分为：块级标签(block)，行内标签(inline)，行内块标签(inline-block)。display属性用以设定元素以何种形式显示，其常用属性如下......

从前面的学习中，我们得知：块级元素(比如：div标签)按照从上至下的顺序独占一行显示；行内元素(比如：span标签)按照从左到右的顺序在同一行显示。这些显示方式方式被称作标准流(normal flow)或者文档流。在标准流中：块级元素纵向有序排列，行内块元素和行内元素横向有序排列。今天我们要学习和讨论的是有别于标准流的浮动(float)，嗯哼，开始吧！

在HTML中，利用定位(position)可较为精确地定义元素显示的位置，这个位置可以是相对于其本身出现的位置，也可以是相对于其上级元素的位置，还可以是相对于其他元素的位置，亦可为相对于浏览器视窗左上角的位置。

在本节中，我们对CSS知识进行综合练习

绝大部分人头一回看到JavaScript的时候都会觉得JavaScript是Java的一个分支。然而，非也；两者之间并没有多大的关系。JavaScript与Java的关系就像“大熊猫”与“小熊猫"，它们本质上是两种不同的编程语言。其实，在这门语言设计之初Netscape将其命名为LiveScript，之后才改成了现在的名字JavaScript。嗯哼，化解这个小误解之后我们来瞅瞅JavaScript的真正面目。

本节介绍JavaScript的变量与常量

JavaScript是弱类型程序设计语言，当进行变量声明的时候无须指定变量的数据类型。数据只需在使用或赋值时根据设置的具体内容再确定其对应的类型。但是，每一种编程语言都有自己所支持的数据类型，JavaScript也不例外。JavaScript的数据类型分为两大类，分别为基本数据类型和复合数据类型，详情如下：

JavaScript提供了丰富的运算符，比如：算数运算符，赋值运算符，比较运算符，逻辑运算符等等。在此，介绍JavaScript中常用的运算符和表达式。

JavaScript提供了丰富的流程控制语句用于控制程序流程，比如：if、if else、while、for等等。在此介绍JavaScript中常用的流程控制语句。

数组是存储一系列值的变量集合，它是由一个或多个数组元素组成的，各元素之间使用逗号分隔。每个数组元素由“下标”和“值”构成。其中，“下标”也称为"索引"， 默认情况下索引从0开始依次递增；“值”为元素的内容，它可以是任意类型的数据，如数值型、字符型、数组、对象等。

在JavaScript程序设计中为了使代码更为简洁且能重复使用，通常会把某段实现特定功能的代码封装称为一个函数。在本节教程中，我们来一起学习JavaScript的函数。

在看到"对象"这两个字的时候，很多人会立马会联想到Java中的类、对象、继承、封装、多态…打住，打住，不要继续往下想了。在这或许要抛弃一下我们的惯性思维了。JavaScript并不是完全纯粹的面向对象，或者说它和大家熟知的Java中的面向对象不完全一样。在JavaScript中所有东西，比如：字符串、数字、数组、日期，甚至函数都是对象。

JavaScript虽然是面向对象的，但是它并没有严格的"父类"和"子类"的概念；也没有"类"和"实例"的区分；当然也没有Java中通过extends来实现继承的机制。所以，JavaScript只能通过别的方式来扩展和继承原有的JavaScript对象。

在实际开发中，JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象；各内置对象之间按照层次组织起来的模型统称为浏览器对象模型Browser Object Model简称BOM，其架构如下图所示：

文档对象模型(Document Object Model，简称DOM)是W3C (World Wide Web Consortium)组织推荐的处理可扩展标志语言的标准编程接口。目前，DOM编程广泛应用于xml、html开发中。对于JavaScript来说，DOM是操作HTML文档的重要手段，开发人员可利用DOM实现对HTML文档内所有元素的获取、访问和设置等操作。在本节教程中，我们将详细介绍DOM编程在html开发中的常见应用。在本节教程中，我们将详细介绍DOM编程在html开发中的常见应用。

事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript 代码执行相关的操作。例如，用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击鼠标、双击鼠标等等。其实，在软件开发领域，几乎所有的GUI编程都会涉及到事件机制。比如，我们在Android中非常熟悉的单击，触摸，滑动，双击，长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。

正则表达式(Regular Expression,简称RegExp)是一种描述字符串结构的语法规则，是一个特定的文本模式，用于验证各种字符串是否匹配这个特征，进而实现文本查找、替换、截取内容等操作。正则表达式的应用范围非常之广泛，最初是由Unix普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby以及Python等等。

在HTML5新增了canvas标签用于绘制图形，比如：文本、几何图形、路径、图片等等。该标签和其他HTML标签比起来没有多大的不同，除了指定常见的id、class、style等通用属性外，还可以通过height属性和width属性指定canvas的高和宽。嗯哼，我们先来看一个canvas的入门示例：