HTML和Android简单对比

前言

HI，欢迎来到裴智飞的《每周一博》。今天是十一月第四周，我给大家简单对比一下HTML和Android的区别。

• h5的dom树类似android的xml，用来布局界面，h5的样式基本都在css里面，android的一般都写在layout.xml里面，复用的写在style.xml里面；

• js通过选择器或者id获取到元素后来操作dom，android在java类里面通过xml中的id找到控件来赋值，js也会直接通过代码输出标签，android也会在一些情况下使用代码编写布局并添加到界面上；

• jquery和css的选择器用来选择dom元素，可以是单个或者数组，android中不存在选择器，每个元素都是通过id来引用，没有id的控件代码中基本不会用到；

• js可以给dom元素添加多个事件，android多个会覆盖，最后一个有效，他们一般都会把事件写到代码里面而不是dom里，这样易于修改，js的事件冒泡类似于android的事件分发，子元素优先获取事件，自己消费完之后如果拦截则停止，屏蔽掉父元素的点击事件，不拦截则向上传递给父元素，return true相当于e.stopPropagation（）；

• h5的列表一般是通过代码输出，有多少个输出多少个，所以删除修改编辑等方式操作的都是那个对象，android是使用adapter给列表赋值，经过优化重用了布局，会导致错位，数组越界等问题，需要配合实体类和标志来解决；

• h5的ajax类似android的第三方网络请求库，通过ajax实现的标签切换就类似activity切换fragment；

• h5的一个html文件类似于android的一个activity，当然有的一个html文件是多页面的如jquerymobile，界面之间传参h5通过get请求附加到url上，android通过intent可以传递基本数据类型和序列化的对象；

• h5的标签类似android的控件，如img标签对应ImageView，h1~h6和p对应TextView，a和button对应Button等，许多h5的控件android需要第三方库来支持，android的ImageView不能加载网络图片，但是有个缩放属性scaleType，可以设置很多个值，居中裁剪，拉伸，居中适应等，这个属性h5中没有；

• h5内容溢出有个overflow属性，android默认是根据高度截断的，如果想滚动，需要嵌套一个ScrollView，并且他只能有一个子View，和列表嵌套的时候还会出问题；

• h5的宽高可以根据百分来写，android需要一个百分比库来支持；

• h5的透明色要写成argb()，比较繁琐，android可以使用8位数字来表示，前2位指定透明度;

• h5的localStorage类似android的sharepreference，sessionStorage有点像静态变量，webworker类似android的handler；

• css3的动画类似android的属性动画，而非补间动画；

• css3的transition自动添加动画这一属性android可以部分实现，在容器中添加animateLayoutChanges="true"；

• css的padding默认是会增加元素的宽高，android的padding如果宽高是具体的数字，那么将不会增加元素宽高，而会向内挤压元素，可能导致遮挡部分内容，应该像是css3中设置了box-sizing:border-box，如果宽或高是wrap_content那么就会增加宽或高；

• css的margin和android类似，但是android的margin合并是叠加的，css是上下取最大，都可以用负间距；

• css的absolute定位类似于android的FrameLayout帧布局，就像是ps的图层叠加，css中可以通过z-index来控制摆放顺序，android则通过书写顺序从下往上，css的top|left|bottom|right="5px"相当于在FrameLayout中子元素设置layout_gravity="top|left|bottom|right"，并加上
  layout_margin(top|left|bottom|right)="5px"；

• css设置字体可以通过font-family直接引用浏览器中的字体，服务器的字体可以通过@font-face来引用，android定义字体可以使用TextView的setTypeface，并把字体拷贝到assert目录下，一般都是设置非系统的字体，所以都用代码设置；

• css设置全局字体可以通过继承，android设置全局字体（仅系统自带的）可以通过设置theme，其他字体需要自定义控件或者使用库；

• css中设置宽度并添加margin:0 auto可以把自己水平居中显示，这里我理解的是块级元素可以这么做，且主要用于容器，而子元素要水平居中需要添加text-align:center，android让自己水平居中不需要设置宽度具体数值，显示取决于父容器是什么，如果是RelativeLayout要指定layout_centerHorizontal="true"，如果是LinearLayout和FrameLayout要指定layout_gravity="center"；

• css的文字居中可以设置text-align:center,android的文字居中可以设置gravity="center_horizontal"；

• css的text-align:center是容器给元素设置的，相当于android的LinearLayout，FrameLayout和RelativeLayout设置gravity="center"，android的layout_gravity是设置子元素在父元素中的定位（RelativeLayout中无效），gravity是设置子元素的定位；

• css的文字垂直居中需要设置行高line-height，然后就自动垂直居中了，android的文字垂直居中需要设置gravity="center_vertical"，android文字水平垂直居中只需设置gravity="center"；

• css的border和background可以巧妙的结合做出各种各样的形状和效果，android通过书写drawable.xml来编写shape，比较繁琐，比如圆角，边框，图层叠加等等；

• css按钮按下的状态通过伪类选择器来编写，android的view状态通过selector来编写，每个item指定一种状态或者多种状态的结合，顺序还有要求；

• css的阴影效果通过box-shadow可以实现，android需要写drawable.xml；

• h5引用的控件框架一般是通过添加class来实现，如bootstrap，android引用第三方控件库一般是通过使用自定义的View，在xml中放置，在代码里面使用api；

• h5写对话框比较繁琐，android的对话框是创建对象的，比较方便；h5调试网络接口很方便；

html	android
h1~h6,p	TextView
a,button,input[type=button]	Button
img	ImageView
video	VideView（基本上很少用，采用第三方控件）
div,header,section…	LinearLayout，FrameLayout，RelativeLayout中的一个
ul	RecyclerView，ListView
input[type=checkbox]	CheckBox，Switch
input[type=radio]	RadioButton
input[type=range]	SeekBar
input[type=select]	Spinner（基本上用第三方）
input autocomplete="on"	AutoCompleteTextView
textarea	EditText
iframe	WebView

css	android
color	textColor
font-weight	textstyle="bold" 不能直接设置多粗
font-size	textSize
text-align:center	gravity="center_horizontal" center是水平垂直都居中
margin:0 auto	layout_gravity="center_horizontal"（FrameLayout和LinearLayout中）；layout_centerHorizontal="true" （RelativeLayout中）
transition	animateLayoutChanges="true" 部分有效果
position:absolute; left: 5px;	<b>FrameLayout和LinearLayout中：</b> layout_gravity="left"; margin_left="5px"; <b>RelativeLayout中：</b> align_parentLeft="true"; margin_left="5px";
background-image	background="@drawable/xxx"
text-overflow:ellipsis	android:maxEms="12"; android:singleLine="true"; android:ellipsize="end";
vertical-align: middle	gravity="center_vertical"

结尾：

本周给大家简单介绍了HTML和Android的区别。感谢大家的阅读，我们下周再见。