起始
没有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 >标签来展示这张图片.
![](http://upload-images.jianshu.io/upload_images/1396375-fc9a924815efcfec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
当然了,如果网络不好,图片加载失误,这时候我们就需要一个占位符,这个是需要< img >标签的alt属性实现的.
![图片加载失败](http://upload-images.jianshu.io/upload_images/1396375-fc9a924815efcfec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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的童鞋欢迎来和骚栋共同探讨.谢谢大家.