JavaScript:HTML中的UI-＞标签

墨蓝 2023-01-08 08:22 128阅读 0赞

![4f93d1f9c7948683779c997e8ef31884.png][]

#### 起始 ####

--------------------

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

#### HTML标题 ####

--------------------

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

效果图如下所示.

![2f8bb9a73afec45847ea73cce4c1b29b.png][]

\#\#\#\#HTML文字段落

--------------------

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

<body>
    		<p>秋名山之歌</p>
    	</body>

效果图如下所示.

![f7776f8951f0d87f78234c99fa38ed9f.png][]

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

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

效果图如下所示.

![6ceab0389aeb0f9c1f8c2d22623d08a2.png][]

#### HTML文本输入框 ####

--------------------

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

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

![dccdb77deb893a1d80f8bc55c9cde3fa.png][]

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

<table> 
 <thead> 
  <tr> 
   <th align="center">type值</th> 
   <th align="center">输入框类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">password</td> 
   <td align="center">密文输入框</td> 
  </tr> 
  <tr> 
   <td align="center">number(h5)</td> 
   <td align="center">数字输入框</td> 
  </tr> 
  <tr> 
   <td align="center">color (h5)</td> 
   <td align="center">颜色输入框</td> 
  </tr> 
  <tr> 
   <td align="center">email(h5)</td> 
   <td align="center">电子邮件输入框</td> 
  </tr> 
  <tr> 
   <td align="center">url(h5)</td> 
   <td align="center">URL输入框</td> 
  </tr> 
  <tr> 
   <td align="center">search(h5)</td> 
   <td align="center">诱导输入框,类似于百度搜索输入框</td> 
  </tr> 
 </tbody> 
</table>

###### 密文输入框效果图 ######

![a8dd586962b48b3b5e97e33f7b6a361d.png][]

###### 数字输入框效果图 ######

设置当前值为7,最大值为10,最小值为1  
![e60bac736f594aba9732c14f12d982e3.png][]

###### 颜色输入框效果图 ######

![b5da1950424c390ac82cca6b3ca59821.png][]

###### 邮件输入框效果图 ######

![e628d4025d3a231ecb2e47b81a16b8c4.png][]

###### URL输入框效果图 ######

![db55f6be0fbb5c5854d9813058f6167b.png][]

\#\#\#\#\#\#诱导输入框效果图

![90cf6a7720e8a903ffa18c738240fa10.png][]

#### 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)

![291c7924970721972d19d2400adb2d03.png][]

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

![图片加载失败](http://upload-images.jianshu.io/upload_images/1396375-fc9a924815efcfec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### HTML的按钮 ####

--------------------

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

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

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">onclick</td> 
   <td align="center">鼠标点击时</td> 
  </tr> 
  <tr> 
   <td align="center">ondblclick</td> 
   <td align="center">鼠标双击时</td> 
  </tr> 
  <tr> 
   <td align="center">onmousedown</td> 
   <td align="center">当鼠标按下时</td> 
  </tr> 
  <tr> 
   <td align="center">onmousemove</td> 
   <td align="center">当鼠标移动到按钮上时</td> 
  </tr> 
  <tr> 
   <td align="center">onmouseout</td> 
   <td align="center">当鼠标从按钮上移开时</td> 
  </tr> 
  <tr> 
   <td align="center">onmouseover</td> 
   <td align="center">当鼠标移动到按钮上时</td> 
  </tr> 
  <tr> 
   <td align="center">onmouseup</td> 
   <td align="center">当鼠标完成点击时</td> 
  </tr> 
 </tbody> 
</table>

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

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

<button onclick="myAction()">
    			[站外图片上传中……(3)]
    		</button>

效果图如下.

![9d9496b5dd45565d14d1a8dcee8c8429.png][]

#### HTML的文本框 ####

--------------------

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

<textarea name="textarea" rows="10" cols="40px">文本输入框</textarea>

效果图如下所示.

![52ff94c00e6727de5e90445a48c8c9bf.png][]

#### HTML的下拉列表 ####

--------------------

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

效果图如下所示.

![6eea788490c97735e4acf635604c85c2.png][]

那么我们该如何获取到\*\***标签所对应的选中值呢?首先我们把需要操作的****标签添加一个id属性,然后在js函数中调用使用**\*\*标签的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>

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

![1e2df7197209bc72007219a3340dda8c.gif][]

#### HTML的单选按钮 ####

--------------------

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

效果图如下所示.

![786efffb1b51b6f401d3320a340e87bd.gif][]

#### HTML的复选按钮 ####

--------------------

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

效果图如下所示.

![df283564468a0bcb41846287468a39bc.gif][]

#### 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>

效果图如下所示.  
![8ae9fbb70e66fd7925faebf1e0b59727.gif][]

#### HTML的音频播放 ####

--------------------

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

效果图如下所示.

![1b61dc4925193f5498582e96a4d5f332.png][]

#### HTML的视频播放 ####

--------------------

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

效果图如下所示.

![f60cc7dd9d4f8c321e2f5114d31b7d5e.png][]

#### 结束 ####

--------------------

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

--------------------

![00c1a138cfbc4bf72ade366a2bcf3c67.gif][]

[4f93d1f9c7948683779c997e8ef31884.png]: /images/20221119/fd67373731244e89b4346861c6a8258e.png
[ff1e5148fb47c56f0b85f6dc31b1e869.png]: /images/20221119/57b2421cf06243a5828111f5a2faf37f.png
[2f8bb9a73afec45847ea73cce4c1b29b.png]: /images/20221119/9e41a88dd2344e709aaeb2439dbefbe5.png
[f7776f8951f0d87f78234c99fa38ed9f.png]: /images/20221119/44249717898b4c7c86e6885a8c3072d0.png
[6ceab0389aeb0f9c1f8c2d22623d08a2.png]: /images/20221119/0315ded7482249cd982dba1d0d181af2.png
[dccdb77deb893a1d80f8bc55c9cde3fa.png]: /images/20221119/7416dab412f148a4b0f3d0b557612bce.png
[a8dd586962b48b3b5e97e33f7b6a361d.png]: /images/20221119/9250a18769e54f4c9be64bbd6d2c7047.png
[e60bac736f594aba9732c14f12d982e3.png]: /images/20221119/9611b1d6789d4fbda071f7a2e5716ad6.png
[b5da1950424c390ac82cca6b3ca59821.png]: /images/20221119/52df7cce52854d84b45e73d84474a5d6.png
[e628d4025d3a231ecb2e47b81a16b8c4.png]: /images/20221119/0e7eb7d787474123a9bb740145526770.png
[db55f6be0fbb5c5854d9813058f6167b.png]: /images/20221119/0ccb36a974254208a822d4ae2a71fedb.png
[90cf6a7720e8a903ffa18c738240fa10.png]: /images/20221119/adcfb1c25cf24f4d96ef8ff4e70f4a81.png
[291c7924970721972d19d2400adb2d03.png]: /images/20221119/481eb846403349b2b9b74e851a0e400d.png
[JavaScript]: http://www.jianshu.com/p/110e8bd90c46
[cae33a55cf299aaada592dbf1abc3c56.png]: /images/20221119/ada6176ef86845a9bd081d37a22e986b.png
[9d9496b5dd45565d14d1a8dcee8c8429.png]: /images/20221119/637fe88928de46638ca4fbc529195a56.png
[52ff94c00e6727de5e90445a48c8c9bf.png]: /images/20221119/29a1298751df4ee8ae9d51cfd3d1bce9.png
[6eea788490c97735e4acf635604c85c2.png]: /images/20221119/dfd1875e2d9c4500b522c1be9bac668d.png
[1e2df7197209bc72007219a3340dda8c.gif]: /images/20221119/1639807c61fe47b1b24d318549ea5490.png
[786efffb1b51b6f401d3320a340e87bd.gif]: /images/20221119/dea201f7b5c344cd82396fa339aeaad8.png
[df283564468a0bcb41846287468a39bc.gif]: /images/20221119/153a0f3ad4b2428c8d3f1ad5151c6b50.png
[8ae9fbb70e66fd7925faebf1e0b59727.gif]: /images/20221119/aad93cbc528d4a63890ff5ecfe14464a.png
[1b61dc4925193f5498582e96a4d5f332.png]: /images/20221119/9c6f13aeae2e411a86f1cab80eeca394.png
[f60cc7dd9d4f8c321e2f5114d31b7d5e.png]: /images/20221119/8e54db78cad24b44b0610d41b37278d9.png
[00c1a138cfbc4bf72ade366a2bcf3c67.gif]: https://img-blog.csdnimg.cn/img_convert/00c1a138cfbc4bf72ade366a2bcf3c67.gif