整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
例
使用 <summary> 元素：
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
瀏覽器支持
目前，只有 Chrome 和 Safari 6 支持 <summary> 標(biāo)簽。
標(biāo)簽定義及使用說(shuō)明
<summary> 標(biāo)簽為 <details> 元素定義一個(gè)可見(jiàn)的標(biāo)題。 當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)會(huì)顯示出詳細(xì)信息。
HTML 4.01 與 HTML5之間的差異
<summary> 標(biāo)簽是 HTML5 中的新標(biāo)簽。
提示和注釋
注釋：<summary> 元素應(yīng)該是 <details> 元素的第一個(gè)子元素。
全局屬性
<summary> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<summary> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
通常我們?cè)趯慽nput時(shí)，它的背景文字框都是灰色的，樣式很單一，其實(shí)它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來(lái)實(shí)現(xiàn)輸入框的美化。接下來(lái)，就為大家展示下：
HTML：
CSS：
效果：
對(duì)于input輸入框的背景提示信息(placeholder)的美化雖然只是對(duì)網(wǎng)站應(yīng)用的小小點(diǎn)綴，但正是這樣細(xì)節(jié)上的小差別將你的網(wǎng)站和別人的網(wǎng)站區(qū)別開(kāi)來(lái)。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
習(xí)過(guò)js的小伙伴會(huì)發(fā)現(xiàn)，我們?cè)谝恍?shí)例中用到了alert()方法、prompt()方法、prompt()方法，他們都是在屏幕上彈出一個(gè)對(duì)話框，并且在上面顯示括號(hào)內(nèi)的內(nèi)容，使用這種方法使得頁(yè)面的交互性更精彩，實(shí)際上我們經(jīng)常會(huì)在進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)簡(jiǎn)單這種類型的對(duì)話框，在用戶與應(yīng)用程序進(jìn)行雙向交流時(shí)，經(jīng)常要用到對(duì)話框。
javascript的三種對(duì)話框是通過(guò)調(diào)用window對(duì)象的三個(gè)方法alert()，confirm()和prompt()來(lái)獲得，可以利用這些對(duì)話框來(lái)完成js的輸入和輸出，實(shí)現(xiàn)與用戶能進(jìn)行交互的js代碼。
今天就來(lái)簡(jiǎn)單介紹一下js中的三種彈出對(duì)話框
第一種：alert()方法
alert()方法是這三種對(duì)話框中最容易使用的一種，可以用來(lái)簡(jiǎn)單而明了地將alert()括號(hào)內(nèi)的文本信息顯示在對(duì)話框中，我們將它稱為警示對(duì)話框，要顯示的信息放置在括號(hào)內(nèi)，該對(duì)話框上包含一個(gè)“確認(rèn)”按鈕，用戶閱讀完所顯示的信息后，只需單擊該按鈕就可以關(guān)閉對(duì)話框。下面來(lái)看一個(gè)使用alert()方法的例子，代碼如下所示：
<html> <head><title>編寫html頁(yè)面</title> <script language="javascript"> //JavaScript腳本標(biāo)注 alert("上聯(lián)：山石巖下古木枯");//在頁(yè)面上彈出上聯(lián) alert("下聯(lián)：白水泉邊少女妙");//在頁(yè)面上彈出下聯(lián) </script> </head> </html>
執(zhí)行上面的小例子，在頁(yè)面上彈出對(duì)話框并顯示一句話“上聯(lián)：山石巖下古木枯”，如下所示：
接著，單擊“確認(rèn)”按鈕后再顯示第二個(gè)對(duì)話框并顯示“白水泉邊少女妙！”，效果如下；
在頁(yè)面上彈出對(duì)話框并顯示一句話“上聯(lián)：山石巖下古木枯”，單擊“確認(rèn)”按鈕后再顯示第2個(gè)對(duì)話框并顯示“白水泉邊少女妙！”我們來(lái)分析一下這個(gè)小例子：
a、在<script>腳本塊中兩次調(diào)用alert()方法；
b、在每個(gè)alert()括號(hào)內(nèi)分別添加了一段文本信息，運(yùn)行出現(xiàn)如下圖所示的頁(yè)面，當(dāng)使用鼠標(biāo)單擊頁(yè)面上的“確定”按鈕后，出現(xiàn)第二個(gè)頁(yè)面，再點(diǎn)擊“確定”按鈕后就關(guān)閉頁(yè)面上的對(duì)話框。 注意：兩個(gè)對(duì)話框是分別顯示的，而不是一個(gè)覆蓋另一個(gè)，這是因?yàn)閖s實(shí)在執(zhí)行完第一個(gè)alert()并等到用戶點(diǎn)擊“確認(rèn)”按鈕之后才去執(zhí)行第二個(gè)alert()的。
alert()是js的window對(duì)象的一個(gè)方法，調(diào)用時(shí)可以寫成window.alert()，也可以寫成alert()，功能都是產(chǎn)生一個(gè)帶確認(rèn)按鈕的對(duì)話框，上面顯示括號(hào)內(nèi)的信息，
第二種：confirm()方法
confirm()方法與alert()方法的使用十分類似，不同點(diǎn)是在該種對(duì)話框上除了包含一個(gè)“確認(rèn)”按鈕外，還有一個(gè)“取消”按鈕，這種對(duì)話框稱為確認(rèn)對(duì)話框，在調(diào)用window對(duì)象的confirm()方法以及后面介紹的prompt()方法時(shí)也可以不寫window。下面來(lái)看一個(gè)關(guān)于confirm()的小例子,代碼如下所示：
<html> <head> <title>編寫html頁(yè)面</title> <script language="javascript"> //js腳本標(biāo)注 confirm("上聯(lián)：一但重泥攔子路；下聯(lián)：兩岸夫子笑顏回"); //在頁(yè)面上彈出確認(rèn)對(duì)話框 </script> </head> </html>
顯示效果如下：
分析一下這個(gè)小例子：
a、在<script>腳本塊中添加confirm()方法、
b、在confirm()括號(hào)內(nèi)添加了一段文本信息，運(yùn)行效果如上圖所示，如果用戶單擊“確認(rèn)”按鈕，則confirm()方法會(huì)返回true，如果用戶單擊“取消”按鈕，則confirm()方法會(huì)返回false，無(wú)論用戶選擇哪個(gè)按鈕，都會(huì)關(guān)閉對(duì)話框，而繼續(xù)執(zhí)行javascript代碼。單擊“確認(rèn)”或“取消”按鈕都是關(guān)閉對(duì)話框，似乎沒(méi)有什么區(qū)別，實(shí)際上，無(wú)論是單擊“確認(rèn)”或“取消”按鈕都會(huì)返回一個(gè)布爾值，這樣就 可以再幕后有一些js代碼來(lái)發(fā)揮按鈕的作用，請(qǐng)大家看下面的例子，體會(huì)使用confirm()返回布爾值的妙處。代碼如下：
<html> <head> <title>編寫html頁(yè)面</title> <script language="javascript"> //js腳本標(biāo)注 var con; con=confirm("你喜歡玫瑰花么?"); //在頁(yè)面上彈出對(duì)話框 if(con==true)alert("非常喜歡!"); else alert("不喜歡!"); </script> </head> </html>
我們來(lái)分析一下這個(gè)小例子：
a、在<script>腳本塊中聲明了一個(gè)變量con。
b、con=confirm()一句將confirm()方法返回的布爾值賦給con。
c、通過(guò)if語(yǔ)句來(lái)使用con的值，分別執(zhí)行不同的語(yǔ)句；執(zhí)行的效果如下：
如果單擊頁(yè)面的確認(rèn)框上的“確定”按鈕后，出現(xiàn)如下圖所示的頁(yè)面：
如果單擊“取消”按鈕，則出現(xiàn)如下圖所示的頁(yè)面：
第三種： prompt()方法
alert()方法和confirm()方法的使用十分類似，都是僅僅顯示已有的信息，但用戶不能輸入自己的信息，但是prompt()可以做到這點(diǎn)，她不但可以顯示信息，而且還提供了一個(gè)文本框要求用戶使用鍵盤輸入自己的信息，同時(shí)她還包含“確認(rèn)”或“取消”兩個(gè)按鈕，如果用戶“確認(rèn)”按鈕，則prompt()方法返回用戶在文本框中輸入的內(nèi)容（是字符串類型)或者初始值(如果用戶沒(méi)有輸入信息);如果用戶單擊“取消”按鈕，則prompt()方法返回null，我們稱這種對(duì)話框?yàn)樘崾究颍谶@三種對(duì)話框中，她的交互性最好。
看下面一個(gè)小例子：在頁(yè)面上兩次彈出提示對(duì)話框，使用戶能輸入有關(guān)信息，代碼如下：
<html> <head> <title>編寫html頁(yè)面</title> <script language="javascript"> //js腳本標(biāo)注 var name,age; name=prompt("請(qǐng)問(wèn)你叫什么名字?"); /*在頁(yè)面上彈出提示對(duì)話框， 將用戶輸入的結(jié)果賦給變量name*/ alert(name); //輸出用戶輸入的信息 age=prompt("你今年多大了?","請(qǐng)?jiān)谶@里輸入年齡"); /*在頁(yè)面上再一次彈出提示對(duì)話框， 講用戶輸入的信息賦給變量age*/ alert(age)//輸出用戶輸入的信息 </script> </head> </html>
運(yùn)行上面的程序，效果如下所示：
點(diǎn)擊確定，會(huì)有這么驚喜nie：
我們?cè)冱c(diǎn)擊確定按鈕：
再點(diǎn)擊確定按鈕：
分析一下這個(gè)小例子
a、在<script>腳本塊中添加了兩個(gè)prompt()方法。
b、在第一個(gè)prompt()括號(hào)內(nèi)添加了一段文本信息。
c、name=prompt()一句是將用戶在文本框中輸入的信息賦給變量name。
alert()、confirm()、prompt()的區(qū)別和聯(lián)系：
警告框alert()
alert是警告框，只有一個(gè)按鈕“確定”無(wú)返回值，警告框經(jīng)常用于確保用戶可以得到某些信息。當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。語(yǔ)法：alert("文本")。
確認(rèn)框confirm()
confirm是確認(rèn)框，兩個(gè)按鈕，確定或者取消，返回true或false。確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。語(yǔ)法：confirm("文本")
提示框prompt()
prompt是提示框，返回輸入的消息，或者其默認(rèn)值提示框經(jīng)常用于提示用戶在進(jìn)入頁(yè)面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。語(yǔ)法：prompt("文本","默認(rèn)值")
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
