JavaScript:HTML中的UI->标签
起始
没有UI,我们不如去当咸鱼.整天整一堆代码,没有一个UI效果出来,岂不是太无趣了?相比于OC的UIKit框架,在HTML中的元素则是用标签显示的.由于才刚刚学习,所以就先整几个常见的标签.然后在此期间配合我们的JavaScript使用一下.
HTML标题
使用MarkDown的人都会知道,MarkDown语法中是使用"#"来表示各级标题,总共有六个等级,HTML标题一是有6个等级的,使用<h>标签来表示.
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
效果图如下所示.
HTML文字段落
HTML文字段落的段落主要是使用**< p > 标签来展示的(拓展:在MarkDown中< p > **标签是用来换行的.),示例如下所示.
<body>
<p>秋名山之歌</p>
</body>
效果图如下所示.
那么对于一个段落,我们想在指定的位置换行怎么办呢?这时候就需要使用到另外一个标签叫
标签.比如我们把"秋名山之歌"整体写出来代码是如下表示的.
<body>
<p>秋名山之歌<br/>秋名山上行人稀<br/>常有车手较高低<br/>如今车道依旧在<br/>不见当年老司机</p>
</body>
效果图如下所示.
HTML文本输入框
这个HTML的文本输入框是< input >标签中众多类型中的一个.为什么这么说呢,< input >标签中有个属性叫做type,type值的不同可以有各种输入类型,例如单选按钮,复选按钮等等.我再下面会一一说到.先看看文本输入框用代码是如何实现的.
<input type="text" id="username" />
我们看到当前标签的type属性的值为text, 所以效果图如下所示.就是一个非常普通的输入框.
对于输入框类型相似的还有很多,接下来就我们就用列出一个列表来表示几个常用的.当然了其中包含h5中的类型,老浏览器如果不支持的话,那么会被视为输入类型的值为text.
| type值 | 输入框类型 |
|---|---|
| password | 密文输入框 |
| number(h5) | 数字输入框 |
| color (h5) | 颜色输入框 |
| email(h5) | 电子邮件输入框 |
| url(h5) | URL输入框 |
| search(h5) | 诱导输入框,类似于百度搜索输入框 |
密文输入框效果图
<input type="password" name="password" />
数字输入框效果图
<input type="number" name="password" max="10" min="1" value="5"/>
设置当前值为7,最大值为10,最小值为1
颜色输入框效果图
<input type="color" name="colorInput" id="colorInput" value="#FF0000" />
邮件输入框效果图
<input type="email" name="email" id="email" value="676758285@qq.com" />
URL输入框效果图
<input type="url" name="urlInput" id="urlInput" value="http://www.coder-dong.com" />
诱导输入框效果图
<input type="search" name="searchInput" id="searchInput" value="你好,search" />
HTML的图像
HTML的图像是通过< img >标签来展示的.当然了,我们需要给图片标签一个图片的URL地址,这个是通过标签的src属性设置的.我们从网上随便找来一个URL图片地址,然后使用< img >标签来展示这张图片.
当然了,如果网络不好,图片加载失误,这时候我们就需要一个占位符,这个是需要< img >标签的alt属性实现的.
HTML的按钮
在HTML中 按钮是使用<button>标签表示的.当然了在<input>标签中也是有button,两者的区别请查看JavaScript:浅谈<button>和<input type=button>的区别,对于按钮,我们当然要有点击事件啦,我们需要把点击事件放到<script>标签中,这里我写好了一个myAction函数.代码如下.
<script>
function myAction() {
alert("好好干活,不要搞事!");
}
</script>
与OC类似,按钮是需要点击类型的,也就说是什么时候触发函数.下面我整理了一个鼠标的点击事件属性的列表(参考于w3school),大家可以参照一下.
| 属性 | 描述 |
|---|---|
| onclick | 鼠标点击时 |
| ondblclick | 鼠标双击时 |
| onmousedown | 当鼠标按下时 |
| onmousemove | 当鼠标移动到按钮上时 |
| onmouseout | 当鼠标从按钮上移开时 |
| onmouseover | 当鼠标移动到按钮上时 |
| onmouseup | 当鼠标完成点击时 |
有了上面的函数和点击类型的准备之后,<button>标签可以搞一下了.
<button onclick="myAction()">开始搞事</button>
当然了,<button>标签不但可以在按钮上添加文字而且还可以添加图片,(不过实际上应该很少有人这么玩,他们会直接在图片上添加一个点击事件,这样岂不是更加的完美?)示例如下.
<button onclick="myAction()">
[站外图片上传中……(3)]
</button>
效果图如下.
HTML的文本框
相比于输入框,文本框则是类似于OC中的UITextView,是一个多行的文本输入控件.使用**<textarea> 标签来表示.其中<textarea> **标签有两个常用的属性,一个是设置文本框显示多少行文本的rows属性;另外一个是设置文本框的宽度的cols属性.
<textarea name="textarea" rows="10" cols="40px">文本输入框</textarea>
效果图如下所示.
HTML的下拉列表
HTML的下拉列表主要是由<select>标签实现的,具体实现代码如下.开始标签和结束标签之前的值是用户能看见的,开发者使用的是value属性.
<select id="seletlist">
<option value="神">神</option>
<option value="经">经</option>
<option value="骚">骚</option>
<option value="栋">栋</option>
</select>
效果图如下所示.
那么我们该如何获取到<select>标签所对应的选中值呢?首先我们把需要操作的<select>标签添加一个id属性,然后在js函数中调用使用<select>标签的value属性获取到value值.具体代码如下所示.
<body>
<select id="seletlist">
<option value="神">神</option>
<option value="经">经</option>
<option value="骚">骚</option>
<option value="栋">栋</option>
</select>
<button onclick="myAction()">完成</button>
</body>
<script>
function myAction() {
alert(document.getElementById("seletlist").value);
}
</script>
这样,我们就能获取到<select>标签的值了,具体效果如下所示.
HTML的单选按钮
HTML的单选按钮是type值为radio的< input >标签,这里需要注意一个问题就是,我们需要把一个系列的单选按钮的name属性的设置为相同的值.具体示例如下所示.
<input type="radio" name="1" id="1" value="男" checked />男
<br/>
<input type="radio" name="1" id="2" value="女" />女
<br/>
效果图如下所示.
HTML的复选按钮
HTML的单选按钮是type值为checkbox的< input >标签,示例代码如下所示.
<input type="checkbox" name="1" id="1" value="男" checked />男
<br/>
<input type="checkbox" name="2" id="2" value="女" />女
<br/>
效果图如下所示.
HTML的滑块按钮
HTML的单选按钮是type值为range的< input >标签(这是h5中先添加的一个属性值),我们在其中设置其最大值max和最小值min两个属性.实时获取滑块的的值使用的方法是onmouseup,这样当我们每一次移动完滑块之后就调取js脚本函数.具体示例如下.
<body>
<input type="range" name="slider" id="slider" max="10" min="0" value="0" onmouseup="myAction(this.value)" />
<p id="text"> 0</p>
</body>
<script>
function myAction(obj) {
document.getElementById("text").innerHTML = obj;
}
</script>
效果图如下所示.
HTML的音频播放
HTML的音频播放主要是使用<audio>标签实现的.简单的音频播放我们只要通过src属性给标签一个音频的URL地址和一个控制条(controls属性)即可,示例如下.
<p id="text" style="color: cornflowerblue;">千年泪</p>
<audio src="千年泪-Tank.mp3" controls="controls"></audio>
效果图如下所示.
HTML的视频播放
HTML的音频播放主要是使用<video>标签实现的.简单的视频播放我们只要通过src属性给标签一个视频的URL地址和一个控制条(controls属性)即可,示例如下.
<p id="text" style="color: darkorange;">动物世界</p>
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls"></video>
效果图如下所示.
结束
到这里就基本上一些常用的UI标签就结束了,后面的文章我准备先写一下关于OC中JavaScriptCore框架中相关的知识,以及学习CSS布局相关的知识.有搞H5的童鞋欢迎来和骚栋共同探讨.谢谢大家.
