入门Android布局之html
新建一个能顺利运行的Android工程后,会发现程序入口AndroidManifest.xml和布局文件activity_layout.xml都是xml文件。xml是Extensible Markup Language的简称,即可扩展标记语言。使用xml能方便的实现数据的跨平台传输和使用。随着万维网(www)的兴起,在其基础上衍生了更适合页面展示的html。使用html能够轻易做出非常酷炫的效果,比如我们在朋友圈经常看到的微招聘模板,还有进来发展如火如荼的小程序等,都是基于html开发。所以,从学习html入门Android布局,不仅能掌握Android布局知识,与此同时还为以后拓展html的开发打下基础,真可谓是一箭多雕的好事。
下面通过一个简单的页面来介绍html的知识。请看下面的页面:
![](https://img.haomeiwen.com/i1753235/eebe34189fd1196e.png)
具体实现代码:
<!DOCTYPE html>
<!-- 文档标识 -->
<html>
<!-- 头部区域 -->
<head>
<!-- 标题 -->
<title>
请填写个人资料
</title>
<meta charset="utf-8">
</head>
<!-- UI区域 -->
<body>
<!-- 具体UI -->
<div style="margin:0 auto; width:300px;">
<form action="Submit.html" method="POST" style="background-color: white;">
姓名: <input type="Text" name="name" style="margin-left: 0px;">
<br>
性别: <input type="Radio" name="sex">男 <input type="Radio" name="sex">女
<br>
电话: <input type="Text" name="phone" maxlength="11">
<br>
邮箱: <input type="Text" name="email">
<br>
<input style="width: 175px; height: 50px" type="Submit">
</form>
</div>
</body>
</html>
从代码中可以看出该html文档有3个特点:
1 全部代码包围在<html></html>中,它们分别叫做头标签和尾标签。
2 html首位标签中包含两部分:head和body。其中head中的title指明了本页面标签栏名字;body中是具体各种标签。
3 所有的标签都有头有尾。
以上三个特点,是所有html文档的结构。因此个人书写html代码时,可以先把结构搭建好。推荐一下我个人使用的编辑器「Sublime Text」。新建文件,以.html格式保存,然后输入<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>
<br>
<div class="a">标签二</
<br>
<span id="b">标签三</span>
<br>
div中设置的是所有使用div标签的默认样式,class和id引用不同样式的定义方式。通过上面的例子,我们可以定义自己的全局样式,方便多处复用。学习html就是熟悉掌握各种标签和属性的过程。
html有强大的展示页面功能,但是处理逻辑往往通过js(javaScript)来实现。作为编程语言的js,自然包括各种变量,比如number,string,array等基本类型,也包括if, while, for等多种语句。比如在上述个人资料网页提交后,跳转下一个页面后,弹出一个提醒的js如下:
<head>
<script type="text/javascript">
alert("您的资料已经提交,请耐心等候;");
</script>
</head>
更详细的语法介绍,请参考我的另一篇文章:入门 Android 之 js。
展示页面的html和处理逻辑的js结合,就是我们看到的各种3w网页。如果作为入门Android,掌握html架构,熟悉html属性和js语法,个人觉得入门Android布局已经绰绰有余,更深入的学习交给更专业的前端工程师来出来吧。
详细的标签和属性文档,以及代码文件在AndroidHTML。