前言
本文适合有一定android基础想初步了解学习web前端开发的朋友。以下均为个人理解，很多可能不是百分百就是完全能类比过去，只是比较相似，希望能帮助大家比较好地理解。如有不准确的地方，欢迎大家留言纠正，共同学习！
效果图演示
html：
android:
我们尽量将两个布局弄得比较接近，方便我们后面进行比较。html的结构主要由3个文件组成：index.css、index.html和index.js。而android的我们就相对比较熟悉了，这里就不做解释了。
HTML篇
html-->layout.xml布局。
我们先来说说html，其实html比较像是固定网页的整体框架和一些静态固定的布局。其他一些动态的布局就需要结果js和css来实现。特别像android中的布局文件。下面我们结合例子中的代码来看看。
index.html：
android的布局文件：
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:text="登录"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名:"/>
android:id="@+id/nameInput"
android:layout_width="200dp"
android:layout_height="50dp" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
style="@style/pwSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密码:"/>
android:layout_width="200dp"
android:layout_height="50dp" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onSubmit"
android:text="确定"/>从上面的代码我们看到，无论是从布局结构、控件的名称、还是其里面控件使用的属性，都有很多很相像的地方。就拿例子中的确定按钮控件来看，html:
android中按钮的布局：
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onSubmit"
android:text="确定"/>可以看到，其实它们两个的写法是非常类似的，包括标签名，点击事件的声明。
除此之外，也有不少其实功能相似，但只是名字是不一样的：
div-->Linearlayout。
从上面代码可以看到，div的使用很像LinearLayut。div应该是html里面使用率算是最高的，随便打开一个网站，看他的源代码，基本上铺天盖地的都是div。其实div是一个容器，就相当于android里面的layout，可以方便我们组成各式各样的布局。
input-->EditText。
input标签就类似于android的输入框EditText。但是input还相对EditText要更强大点。就像它的名字一样，其实它是输入控件的集合。什么意思呢？它可以根据type属性，更改它的输入类型。也就是说如果把type赋值成“button”，它就可以变成一个按钮；赋值成“checkbox”，就可以变成一个单选框等等...这里就不一一列出来了，想进一步了解的可以查看下相应文档。
ul-->ListView。
说一个例子里没有的标签----ul和ol，它们同样是使用率很高的标签。ul和ol都是列表标签，区别就是ul是无序的，ol是有序的。ul就比较像android中的ListView。但是个人感觉ul就更加灵活点，比如说它能轻松地实现横向纵向布局(其实是设置li的样式)，但是，要把android中的ListView横过来，那基本是不可能的，但是可以用别的代替。如果你不依赖任何工具框架，用原生态的css开发，那么你就会发现ul的用途还是挺广的，包括能实现导航栏，tabbar，下拉框等等...
CSS篇
css-->styles.xml和anim中的.xml文件集合。
css整体来说，主要负责html中的样式和动画，这个就比较像是android中的styles.xml + anim中的.xml文件。css中很多样式属性，你都可以根据android的猜到个7、8成，比如width,margin-top,color,font-size等等...下面，我们也结合例子中的代码看看。
index.css:
android的styles.xml:
30sp
20dp在css中前缀带“.”的，就是寻找其对应名称的class。“#”是对应id。而没有带任何前缀的，就是所有这类型标签默认会添加这个css样式。
classclass在css中是非常重要的。class应该算是一个别名的作用。个人觉得其实就像android里面style定义的id差不多。不过，android中一般来说一个控件只能定义一个style。像例子中，如果我们要把设置文字大小和设置左边距像css中定义成两个的话，就只能通过parent="pwMarginLeft"来实现继承，从而能使用到两个style。而在html里面，你可以通过空格隔开来定义多个class。如果不使用css各种工具框架，你会发现增加和删除class结合css可以实现各种页面变化的效果，包括显示隐藏，颜色、大小修改等等。
如果你使用类似bootstrap这样的css工具框架，你不难发现，他就是基本依靠class来完成各种样式功能的调用。
Javascript篇
js-->逻辑处理的.java。
js整体来说，主要负责html中的逻辑处理部分，相当于controller的角色。老规矩，我们还是结合例子中的代码来看。
index.js:
android对应的代码应该是：
public void onSubmit(View v){
EditText editText = (EditText)findViewById(R.id.nameInput);
Log.d("demoMainActivity",editText.getText().toString());
}这两段代码实现的功能是一样的。先获取输入框：html的document.getElementById()就是android的findViewById()。接着是通过控件获取其值。最后就是打印值，console.log()就是android的Log。
functionfunction是js里面的函数。不过，它也可以充当类的角色。其实在js里面，function和var都可以实现类的效果的。可能刚刚开始从android到接触js，最看不习惯的就是function里面的参数(因为没有数据类型)，和返回值不需要在function前面定义返回的数据类型，直接return返回就可以。这个可能也是跟html的发展历史有相当的关系。不过function的使用还是挺方便的，它可以在function里多重嵌套function,但是这样的话，相对代码的整洁度就不会很高。
var-->Object。对于js中的var，我个人觉得就比较像是android中的Object。无论是各种数据类型int、string、boolean...，还是结构体,甚至是函数体都可以赋值给它。这就跟android中的Object一样，所有东西都是继承于Object,所以也都可以赋值给它。
下面我们另外举一个例子来了解下var:
再看看android中的Object:
Object num = 1;
Object str = "haha";
Object bl = false;上图可以看到，数据类型、结构体和函数，其实都是可以赋值给var的，所以大家在命名的时候，需要注意命名规则。本人就试过，一个变量和一个函数命名是一样的，导致调用函数的时候，一直报错，说没有找到(先定义变量再定义的函数)。
"==="。
说到var了，可以顺便说说"==="。这个对于一个android开发者来说，"=="肯定用得非常多，但是"==="可能没有见过。我们先来看一段代码：
输出：
从输出可以很清楚地看到，"=="和"==="的区别："=="不区分类型，而"==="会区分数据类型。当然还有"!==",也是同理。
