入门Android布局之html

新建一个能顺利运行的Android工程后，会发现程序入口AndroidManifest.xml和布局文件activity_layout.xml都是xml文件。xml是Extensible Markup Language的简称，即可扩展标记语言。使用xml能方便的实现数据的跨平台传输和使用。随着万维网（www）的兴起，在其基础上衍生了更适合页面展示的html。使用html能够轻易做出非常酷炫的效果，比如我们在朋友圈经常看到的微招聘模板，还有进来发展如火如荼的小程序等，都是基于html开发。所以，从学习html入门Android布局，不仅能掌握Android布局知识，与此同时还为以后拓展html的开发打下基础，真可谓是一箭多雕的好事。

下面通过一个简单的页面来介绍html的知识。请看下面的页面：

html.png

具体实现代码：

    
    
    



    
    
       
        
          
        姓名: 
        

        性别: 男 女
        

        电话: 
        

        邮箱: 
        

        
        
    

从代码中可以看出该html文档有3个特点：
1 全部代码包围在中，它们分别叫做头标签和尾标签。
2 html首位标签中包含两部分：head和body。其中head中的title指明了本页面标签栏名字；body中是具体各种标签。
3 所有的标签都有头有尾。

以上三个特点，是所有html文档的结构。因此个人书写html代码时，可以先把结构搭建好。推荐一下我个人使用的编辑器「Sublime Text」。新建文件，以.html格式保存，然后输入就会自动补全html的模板，简直不能太方便。

其中任何标签都包含style属性，在style属性中能够设置标签具体的宽度、长度、颜色、边距、排列方式等。简单的属性可以在标签中直接设置，如果页面过于复杂，在一个页面中同时显示属性就会让文档十分庞杂，这时候可以将不同的属性定义为不同的样式。定义样式的方式有以下3种：

div {
    color: green;
    background-color: yellow;
}
.a{
    color: white;
    background-color: red;
}
#b{
    color: red;
    background-color: purple;
}

它们的使用方式为：

标签一


标签二
标签三

div中设置的是所有使用div标签的默认样式，class和id引用不同样式的定义方式。通过上面的例子，我们可以定义自己的全局样式，方便多处复用。学习html就是熟悉掌握各种标签和属性的过程。

html有强大的展示页面功能，但是处理逻辑往往通过js（javaScript）来实现。作为编程语言的js，自然包括各种变量，比如number，string，array等基本类型，也包括if, while, for等多种语句。比如在上述个人资料网页提交后，跳转下一个页面后，弹出一个提醒的js如下：

更详细的语法介绍，请参考我的另一篇文章：入门 Android 之 js。

展示页面的html和处理逻辑的js结合，就是我们看到的各种3w网页。如果作为入门Android，掌握html架构，熟悉html属性和js语法，个人觉得入门Android布局已经绰绰有余，更深入的学习交给更专业的前端工程师来出来吧。

详细的标签和属性文档，以及代码文件在AndroidHTML。

关注和喜欢都是对我的鼓励和支持~