起始

没有UI,我们不如去当咸鱼.整天整一堆代码,没有一个UI效果出来,岂不是太无趣了?相比于OC的UIKit框架,在HTML中的元素则是用标签显示的.由于才刚刚学习,所以就先整几个常见的标签.然后在此期间配合我们的JavaScript使用一下.

HTML标题

使用MarkDown的人都会知道,MarkDown语法中是使用"#"来表示各级标题,总共有六个等级,HTML标题一是有6个等级的,使用标签来表示.

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

效果图如下所示.

HTML文字段落

HTML文字段落的段落主要是使用**< p > 标签来展示的(拓展:在MarkDown中< p > **标签是用来换行的.),示例如下所示.

秋名山之歌

效果图如下所示.

那么对于一个段落,我们想在指定的位置换行怎么办呢?这时候就需要使用到另外一个标签叫标签.比如我们把"秋名山之歌"整体写出来代码是如下表示的.

秋名山之歌
秋名山上行人稀
常有车手较高低
如今车道依旧在
不见当年老司机

效果图如下所示.

HTML文本输入框

这个HTML的文本输入框是< input >标签中众多类型中的一个.为什么这么说呢,< input >标签中有个属性叫做type,type值的不同可以有各种输入类型,例如单选按钮,复选按钮等等.我再下面会一一说到.先看看文本输入框用代码是如何实现的.

我们看到当前标签的type属性的值为text, 所以效果图如下所示.就是一个非常普通的输入框.

对于输入框类型相似的还有很多,接下来就我们就用列出一个列表来表示几个常用的.当然了其中包含h5中的类型,老浏览器如果不支持的话,那么会被视为输入类型的值为text.

type值

输入框类型

password

密文输入框

number(h5)

数字输入框

color (h5)

颜色输入框

email(h5)

电子邮件输入框

url(h5)

URL输入框

search(h5)

诱导输入框,类似于百度搜索输入框

密文输入框效果图

数字输入框效果图

设置当前值为7,最大值为10,最小值为1

颜色输入框效果图

邮件输入框效果图

URL输入框效果图

诱导输入框效果图

HTML的图像

HTML的图像是通过< img >标签来展示的.当然了,我们需要给图片标签一个图片的URL地址,这个是通过标签的src属性设置的.我们从网上随便找来一个URL图片地址,然后使用< img >标签来展示这张图片.


当然了,如果网络不好,图片加载失误,这时候我们就需要一个占位符,这个是需要< img >标签的alt属性实现的.


HTML的按钮

在HTML中 按钮是使用标签表示的.当然了在标签中也是有button,两者的区别请查看JavaScript:浅谈和的区别,对于按钮,我们当然要有点击事件啦,我们需要把点击事件放到

function myAction() {

alert("好好干活,不要搞事!");

}

与OC类似,按钮是需要点击类型的,也就说是什么时候触发函数.下面我整理了一个鼠标的点击事件属性的列表(参考于w3school),大家可以参照一下.

属性

描述

onclick

鼠标点击时

ondblclick

鼠标双击时

onmousedown

当鼠标按下时

onmousemove

当鼠标移动到按钮上时

onmouseout

当鼠标从按钮上移开时

onmouseover

当鼠标移动到按钮上时

onmouseup

当鼠标完成点击时

有了上面的函数和点击类型的准备之后,标签可以搞一下了.

开始搞事

当然了,标签不但可以在按钮上添加文字而且还可以添加图片,(不过实际上应该很少有人这么玩,他们会直接在图片上添加一个点击事件,这样岂不是更加的完美?)示例如下.

[站外图片上传中……(3)]

效果图如下.

HTML的文本框

相比于输入框,文本框则是类似于OC中的UITextView,是一个多行的文本输入控件.使用** 标签来表示.其中 **标签有两个常用的属性,一个是设置文本框显示多少行文本的rows属性;另外一个是设置文本框的宽度的cols属性.

文本输入框

效果图如下所示.

HTML的下拉列表

HTML的下拉列表主要是由标签实现的,具体实现代码如下.开始标签和结束标签之前的值是用户能看见的,开发者使用的是value属性.

神

经

骚

栋

效果图如下所示.

那么我们该如何获取到标签所对应的选中值呢?首先我们把需要操作的标签添加一个id属性,然后在js函数中调用使用标签的value属性获取到value值.具体代码如下所示.

神

经

骚

栋

完成

function myAction() {

alert(document.getElementById("seletlist").value);

}

这样,我们就能获取到标签的值了,具体效果如下所示.

HTML的单选按钮

HTML的单选按钮是type值为radio的< input >标签,这里需要注意一个问题就是,我们需要把一个系列的单选按钮的name属性的设置为相同的值.具体示例如下所示.

男

女

效果图如下所示.

HTML的复选按钮

HTML的单选按钮是type值为checkbox的< input >标签,示例代码如下所示.

男

女

效果图如下所示.

HTML的滑块按钮

HTML的单选按钮是type值为range的< input >标签(这是h5中先添加的一个属性值),我们在其中设置其最大值max和最小值min两个属性.实时获取滑块的的值使用的方法是onmouseup,这样当我们每一次移动完滑块之后就调取js脚本函数.具体示例如下.

0

function myAction(obj) {

document.getElementById("text").innerHTML = obj;

}

效果图如下所示.

HTML的音频播放

HTML的音频播放主要是使用标签实现的.简单的音频播放我们只要通过src属性给标签一个音频的URL地址和一个控制条(controls属性)即可,示例如下.

千年泪

效果图如下所示.

HTML的视频播放

HTML的音频播放主要是使用标签实现的.简单的视频播放我们只要通过src属性给标签一个视频的URL地址和一个控制条(controls属性)即可,示例如下.

动物世界

效果图如下所示.

结束

到这里就基本上一些常用的UI标签就结束了,后面的文章我准备先写一下关于OC中JavaScriptCore框架中相关的知识,以及学习CSS布局相关的知识.有搞H5的童鞋欢迎来和骚栋共同探讨.谢谢大家.