起始
沒有UI,我們不如去當(dāng)咸魚.整天整一堆代碼,沒有一個UI效果出來,豈不是太無趣了?相比于OC的UIKit框架,在HTML中的元素則是用標(biāo)簽顯示的.由于才剛剛學(xué)習(xí),所以就先整幾個常見的標(biāo)簽.然后在此期間配合我們的JavaScript使用一下.
HTML標(biāo)題
使用MarkDown的人都會知道,MarkDown語法中是使用"#"來表示各級標(biāo)題,總共有六個等級,HTML標(biāo)題一是有6個等級的,使用<h>標(biāo)簽來表示.
<body>
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
</body>
效果圖如下所示.
HTML文字段落
HTML文字段落的段落主要是使用**< p > 標(biāo)簽來展示的(拓展:在MarkDown中< p > **標(biāo)簽是用來換行的.),示例如下所示.
<body>
<p>秋名山之歌</p>
</body>
效果圖如下所示.
那么對于一個段落,我們想在指定的位置換行怎么辦呢?這時候就需要使用到另外一個標(biāo)簽叫
標(biāo)簽.比如我們把"秋名山之歌"整體寫出來代碼是如下表示的.
<body>
<p>秋名山之歌<br/>秋名山上行人稀<br/>常有車手較高低<br/>如今車道依舊在<br/>不見當(dāng)年老司機(jī)</p>
</body>
效果圖如下所示.
HTML文本輸入框
這個HTML的文本輸入框是< input >標(biāo)簽中眾多類型中的一個.為什么這么說呢,< input >標(biāo)簽中有個屬性叫做type,type值的不同可以有各種輸入類型,例如單選按鈕,復(fù)選按鈕等等.我再下面會一一說到.先看看文本輸入框用代碼是如何實現(xiàn)的.
<input type="text" id="username" />
我們看到當(dāng)前標(biāo)簽的type屬性的值為text, 所以效果圖如下所示.就是一個非常普通的輸入框.
對于輸入框類型相似的還有很多,接下來就我們就用列出一個列表來表示幾個常用的.當(dāng)然了其中包含h5中的類型,老瀏覽器如果不支持的話,那么會被視為輸入類型的值為text.
| type值 | 輸入框類型 |
|---|---|
| password | 密文輸入框 |
| number(h5) | 數(shù)字輸入框 |
| color (h5) | 顏色輸入框 |
| email(h5) | 電子郵件輸入框 |
| url(h5) | URL輸入框 |
| search(h5) | 誘導(dǎo)輸入框,類似于百度搜索輸入框 |
密文輸入框效果圖
<input type="password" name="password" />
數(shù)字輸入框效果圖
<input type="number" name="password" max="10" min="1" value="5"/>
設(shè)置當(dāng)前值為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" />
誘導(dǎo)輸入框效果圖
<input type="search" name="searchInput" id="searchInput" value="你好,search" />
HTML的圖像
HTML的圖像是通過< img >標(biāo)簽來展示的.當(dāng)然了,我們需要給圖片標(biāo)簽一個圖片的URL地址,這個是通過標(biāo)簽的src屬性設(shè)置的.我們從網(wǎng)上隨便找來一個URL圖片地址,然后使用< img >標(biāo)簽來展示這張圖片.
當(dāng)然了,如果網(wǎng)絡(luò)不好,圖片加載失誤,這時候我們就需要一個占位符,這個是需要< img >標(biāo)簽的alt屬性實現(xiàn)的.
HTML的按鈕
在HTML中 按鈕是使用<button>標(biāo)簽表示的.當(dāng)然了在<input>標(biāo)簽中也是有button,兩者的區(qū)別請查看JavaScript:淺談<button>和<input type=button>的區(qū)別,對于按鈕,我們當(dāng)然要有點(diǎn)擊事件啦,我們需要把點(diǎn)擊事件放到<script>標(biāo)簽中,這里我寫好了一個myAction函數(shù).代碼如下.
<script>
function myAction() {
alert("好好干活,不要搞事!");
}
</script>
與OC類似,按鈕是需要點(diǎn)擊類型的,也就說是什么時候觸發(fā)函數(shù).下面我整理了一個鼠標(biāo)的點(diǎn)擊事件屬性的列表(參考于w3school),大家可以參照一下.
| 屬性 | 描述 |
|---|---|
| onclick | 鼠標(biāo)點(diǎn)擊時 |
| ondblclick | 鼠標(biāo)雙擊時 |
| onmousedown | 當(dāng)鼠標(biāo)按下時 |
| onmousemove | 當(dāng)鼠標(biāo)移動到按鈕上時 |
| onmouseout | 當(dāng)鼠標(biāo)從按鈕上移開時 |
| onmouseover | 當(dāng)鼠標(biāo)移動到按鈕上時 |
| onmouseup | 當(dāng)鼠標(biāo)完成點(diǎn)擊時 |
有了上面的函數(shù)和點(diǎn)擊類型的準(zhǔn)備之后,<button>標(biāo)簽可以搞一下了.
<button onclick="myAction()">開始搞事</button>
當(dāng)然了,<button>標(biāo)簽不但可以在按鈕上添加文字而且還可以添加圖片,(不過實際上應(yīng)該很少有人這么玩,他們會直接在圖片上添加一個點(diǎn)擊事件,這樣豈不是更加的完美?)示例如下.
<button onclick="myAction()">
[站外圖片上傳中……(3)]
</button>
效果圖如下.
HTML的文本框
相比于輸入框,文本框則是類似于OC中的UITextView,是一個多行的文本輸入控件.使用**<textarea> 標(biāo)簽來表示.其中<textarea> **標(biāo)簽有兩個常用的屬性,一個是設(shè)置文本框顯示多少行文本的rows屬性;另外一個是設(shè)置文本框的寬度的cols屬性.
<textarea name="textarea" rows="10" cols="40px">文本輸入框</textarea>
效果圖如下所示.
HTML的下拉列表
HTML的下拉列表主要是由<select>標(biāo)簽實現(xiàn)的,具體實現(xiàn)代碼如下.開始標(biāo)簽和結(jié)束標(biāo)簽之前的值是用戶能看見的,開發(fā)者使用的是value屬性.
<select id="seletlist">
<option value="神">神</option>
<option value="經(jīng)">經(jīng)</option>
<option value="騷">騷</option>
<option value="棟">棟</option>
</select>
效果圖如下所示.
那么我們該如何獲取到<select>標(biāo)簽所對應(yīng)的選中值呢?首先我們把需要操作的<select>標(biāo)簽添加一個id屬性,然后在js函數(shù)中調(diào)用使用<select>標(biāo)簽的value屬性獲取到value值.具體代碼如下所示.
<body>
<select id="seletlist">
<option value="神">神</option>
<option value="經(jīng)">經(jīng)</option>
<option value="騷">騷</option>
<option value="棟">棟</option>
</select>
<button onclick="myAction()">完成</button>
</body>
<script>
function myAction() {
alert(document.getElementById("seletlist").value);
}
</script>
這樣,我們就能獲取到<select>標(biāo)簽的值了,具體效果如下所示.
HTML的單選按鈕
HTML的單選按鈕是type值為radio的< input >標(biāo)簽,這里需要注意一個問題就是,我們需要把一個系列的單選按鈕的name屬性的設(shè)置為相同的值.具體示例如下所示.
<input type="radio" name="1" id="1" value="男" checked />男
<br/>
<input type="radio" name="1" id="2" value="女" />女
<br/>
效果圖如下所示.
HTML的復(fù)選按鈕
HTML的單選按鈕是type值為checkbox的< input >標(biāo)簽,示例代碼如下所示.
<input type="checkbox" name="1" id="1" value="男" checked />男
<br/>
<input type="checkbox" name="2" id="2" value="女" />女
<br/>
效果圖如下所示.
HTML的滑塊按鈕
HTML的單選按鈕是type值為range的< input >標(biāo)簽(這是h5中先添加的一個屬性值),我們在其中設(shè)置其最大值max和最小值min兩個屬性.實時獲取滑塊的的值使用的方法是onmouseup,這樣當(dāng)我們每一次移動完滑塊之后就調(diào)取js腳本函數(shù).具體示例如下.
<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>標(biāo)簽實現(xiàn)的.簡單的音頻播放我們只要通過src屬性給標(biāo)簽一個音頻的URL地址和一個控制條(controls屬性)即可,示例如下.
<p id="text" style="color: cornflowerblue;">千年淚</p>
<audio src="千年淚-Tank.mp3" controls="controls"></audio>
效果圖如下所示.
HTML的視頻播放
HTML的音頻播放主要是使用<video>標(biāo)簽實現(xiàn)的.簡單的視頻播放我們只要通過src屬性給標(biāo)簽一個視頻的URL地址和一個控制條(controls屬性)即可,示例如下.
<p id="text" style="color: darkorange;">動物世界</p>
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls"></video>
效果圖如下所示.
結(jié)束
到這里就基本上一些常用的UI標(biāo)簽就結(jié)束了,后面的文章我準(zhǔn)備先寫一下關(guān)于OC中JavaScriptCore框架中相關(guān)的知識,以及學(xué)習(xí)CSS布局相關(guān)的知識.有搞H5的童鞋歡迎來和騷棟共同探討.謝謝大家.
