Input標簽(類型屬性)
email/url/range/number/search/color/tel/時間選擇/針對PC端的其它類型(除了number和時間選擇外畦木,其它的類型都只有在手機端的輸入板有效果)
- email(郵箱輸入框根盒,focus后在手機輸入版中會有@字符)
<input type="email">
- url(網(wǎng)址輸入框,focus后在手機輸入版中會有.com字符)
<input type='url'>
- tel(電話輸入框,focus后自動彈出數(shù)字輸入板)
<input type="tel" name='tel'>
- number(數(shù)字輸入框)
<input type="number" name='number'>
PC端顯示(只有數(shù)字自沧、運算符和字母e可以作為自然數(shù)的常數(shù)可以輸入):
移動端輸入板顯示:
- 時間選擇(年月日)
<input type="date"> :年月日
<input type="month"> :年月
<input type="week"> :年月星期
<input type="time"> :時分秒
<input type="datetime"> :年月日時分秒(UTC時間)
<input type="datetime-local">:年月日時分秒(本地時間)
PS:以上的input類型基本只有谷歌和Opera瀏覽器是完全支持的纵柿,datetime類型谷歌瀏覽器不兼容
效果圖:
此外還有選項框等:
手機端效果都是以滾輪的形式呈現(xiàn)的:
例如datetime-local類型
- 其它類型:(color、range鸯绿、search)
1.color:選取顏色跋破,點擊可以彈出調(diào)色板
<input type="color">
2.range:選取數(shù)值范圍,有max和min兩個屬性(不填寫則默認為0到100)
<input type="range" max='20' min='0' value='20'>
3.search:search類型和普通輸入框很相像瓶蝴,但是當有值輸入的時候毒返,會多出一個可以點選刪除的叉叉
<input type="search">
表單屬性
autocomplete/autofocus/multiple/required
- autocomplete:是否自動補全(該屬性有兩個值,on/off舷手,默認是on)拧簸,該屬性也可以用在所有input標簽中
- autofocus:在頁面剛載入時,焦點放在哪個輸入框上聚霜,(該屬性有一個值autofocus狡恬,只填寫屬性不填寫值也能生效),可以用于所有input標簽中蝎宇,當頁面中有多個autofocus時弟劲,只有自上而下第一個使用該屬性的標簽生效
-
multiple:輸入多個值,只適用于file和email類型的input姥芥,語法multiple='multiple'兔乞,或者只寫一個multiple屬性也有效果
1.file:在type='file'中,使用multiple屬性后,選取文件可以按住ctrl鍵同時選取多個文件(在此吐槽一下狗爹的網(wǎng)頁文件上傳只能一個一個上傳庸追,惡心死.)
2.email:在type='email'中霍骄,使用multiple屬性后,可以在一個輸入框中填寫多個郵箱地址(用分號分隔)淡溯,然后傳輸過去后臺读整,后臺會識別這是多個郵箱地址(數(shù)組)而不是一個郵箱地址
- required:input填寫該屬性后,表單提交時會對該input做簡單的校驗咱娶,不能為空并且需要必須的字段
例如:
<input type='text' required>
<input type='email' required>
鏈接屬性
link的sizes屬性/base對的target屬性
-
sizes(主要用于link中的網(wǎng)頁圖標進行大小的控制米间,如下圖圖標)
- base標簽(放置在head標簽中)中的target(可以控制整個網(wǎng)頁中a鏈接打開新窗口。也可以控制a鏈接跳轉(zhuǎn)的頁面)
例如:a鏈接在新窗口中打開百度
<head>
<base target='_blank'>
</head>
<body>
<a href>aaa</a>
</body>
其他屬性
script/ol
script標簽新增屬性
async和defer(異步加載外部js文件膘侮,可解決外部js放置在頭部導(dǎo)致的白屏問題)
不同點:
async:什么時候加載完js什么時候執(zhí)行
defer:所有資源加載完后再執(zhí)行js-
ol新增屬性
start(起始值)和reversed(倒序排列)屈糊,注意,reversed的倒敘并不會使內(nèi)容也倒敘琼了,只是ol自帶的序號倒敘
start:
reversed: