入门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

具体实现代码:

<!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

关注和喜欢都是对我的鼓励和支持~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,525评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,203评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,862评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,728评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,743评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,590评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,330评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,244评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,693评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,723评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,343评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2 355

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,146评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 文/莲素 怪奇事件簿目录 上一章【玄幻】怪奇事件簿︳器灵之泣 4 回到店里,良月顺手下了结界,防止有普通群众进入咖...
    莲素阅读 304评论 18 16
  • 可能是名字中有个YUN字的关系,我喜欢云。 工作在基层,每天都是些繁琐的事。农村扶贫工作要比想象的难得难。可是我热...
    芸禾阅读 257评论 6 2
  • 在一天早上我明白了一个道理这个道理是我爸爸让我明白的我的爸爸很慈祥像一位母亲我妈妈不在家的时候我爸爸总是像一位母亲一样的
    叶紫梦水清阅读 231评论 0 0