本標簽: 32
例:
<dl>
<dt>標題1</dt>
<dd>內(nèi)容11</dd>
<dd>內(nèi)容12</dd>
<dt>標題2</dt>
<dd>內(nèi)容21</dd>
<dd>內(nèi)容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發(fā)送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長度百分比來定義形狀的尺寸;
tabindex="...",使用定義過的tabindex元素設(shè)置在各個元素之間的焦點獲取順序(使用tab鍵使元素獲得焦點).
action="...",接收數(shù)據(jù)的服務(wù)器的URL;
method="...",HTTP的方法(get,,post),其中g(shù)et是被反對使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當提交表單時發(fā)生的內(nèi)部事件;
noreset="...",在重新設(shè)置表單時發(fā)生的內(nèi)部事件;
target="...",決定把內(nèi)容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態(tài)設(shè)置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個單選鈕設(shè)置為選中的狀態(tài);
disabled="...",把控件的狀態(tài)設(shè)置為不能使用;
readonly="...",只對輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數(shù)目;
src="...",一個圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數(shù)目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對.控制對齊方式(left,,center,,right,,justify);
tabindex="...",通過定義的tabindex值確定在不同元素之間獲得焦點的順序;
onfocus="...",當元素獲得焦點時發(fā)生的事件;
onblur="...",當元素失去焦點時發(fā)生的事件;
onselect="...",當元素被選中時發(fā)生的事件;
onchang="...",當元素狀態(tài)被改變時發(fā)生的事件;
accept="...",允許上載的文件類型.
scr="...",定義在幀中顯示的內(nèi)容的來源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對,控制對齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
聯(lián)網(wǎng)給我們帶來方便的同時,也時常讓我們感到困惑。隨便搜搜就出一大堆結(jié)果,然而總是有大量的重復和錯誤。小妖發(fā)出的內(nèi)容,都是自己實測過的,有問題請留言。
前方出現(xiàn)一頭牛!
沒錯,這是一個 gif,但這個 gif 也是從小妖的 Demo 頁上錄下來的,聞到了原滋原味的 CSS3 的味道了嗎?Demo 見:
http://xngeer.frostbelt.cn/itemcss/frame-animation.html
那如何用 CSS3 實現(xiàn)這個幀動畫呢?
準備素材
頭兒經(jīng)常說前端應(yīng)該能做出炫酷的東西,但巧媳婦難為無米之炊,沒有好的設(shè)計和素材,前端有時候還是只能徒喚奈何呀。本Demo素材來源于網(wǎng)絡(luò)
怎么讓它動起來呢?
有同學已經(jīng)想到了,把這張圖片設(shè)為背景,不斷修改 background-position 就可以了!對,其實就是這個道理
那有沒有更優(yōu)雅,而且不涉及 JS 的實現(xiàn)方式呢?
我們今天說的 CSS3 幀動畫就是用來解決這個問題,上代碼:
定義一個簡單的 keyframes , 修改 background-position-x,從 0 到 -590(圖片寬度)
animation: ox1 1s steps(6, start) 0ms infinite normal backwards
分別說一下各屬性的涵義:
animation-name: ox1; /* 使用 keyframes ox1 */
animation-duration: 1s; /* 動畫持續(xù)時間 1s */
animation-timing-function: steps(6, start); /* 動畫函數(shù),分6步執(zhí)行,每一幀顯示幀結(jié)束時的狀態(tài) */
animation-delay: 0ms; /* 延遲多長時間后開始執(zhí)行動畫 */
animation-iteration-count: infinite; /* 動畫執(zhí)行無限次 */
animation-direction: normal; /* 是否應(yīng)該輪流反向播放動畫 normal/alternate */
animation-fill-mode: backwards; /* 會在向元素應(yīng)用動畫樣式時迅速應(yīng)用動畫的初始幀 */
不必計算每一幀具體的偏移,沒有 JS!
這里提到了 animation,幀動畫是 animation 的一種使用,想了解更多 animation 相關(guān)屬性請查看以下 Demo 的源碼:
http://xngeer.frostbelt.cn/itemcss/animation.html
有了 CSS3 這把利劍,相信你會走得更遠~
TML 是網(wǎng)絡(luò)的基石。 了解這種標記語言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。 HTML 屬性提供了多種功能,可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或?qū)傩浴T诒疚闹?,小編將帶您了?11 個您可能還沒有聽說過的 HTML 屬性。
此屬性允許用戶輸入多個值。 您可以將 multiple 屬性與 <input> 標簽和 <select> 標簽一起使用。 此布爾屬性僅對電子郵件或文件輸入類型有效。
在 <select> 標簽中使用 multiple 屬性
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>
使用 multiple 屬性進行文件輸入
通過對文件輸入使用 multiple 屬性,您可以選擇多個文件(通過按住 Shift 或 Ctrl 鍵)。
<input type="file" multiple>
使用 multiple 屬性進行電子郵件輸入
通過對電子郵件輸入使用 multiple 屬性,您可以輸入以逗號分隔的電子郵件地址列表。 將從列表中的每個地址中刪除所有空格。
<input type="email" multiple>
您可以使用 contenteditable 屬性使網(wǎng)頁上的 HTML 內(nèi)容可編輯。 這是一個全局屬性,即它對所有 HTML 元素都是通用的。
<p contenteditable="true">
在這里您可以編輯您想輸入的內(nèi)容
</p>
spellcheck 屬性指定是否可以檢查元素的拼寫錯誤。 您可以對 <textarea> 元素中的文本、可編輯元素中的文本或輸入元素中的文本(密碼除外)中的文本進行拼寫檢查。
<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內(nèi)容
</p>
您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導航到它。 您可以將下載屬性與 <a> 標簽和 <area> 標簽一起使用。
注意:下載屬性僅適用于同源 URL。 它遵循同源策略的規(guī)則。
<a href="xyz.png" download="myImage">下載</a>
<input> 標簽的 accept 屬性指定用戶可以上傳的文件類型。 您可以指定一個或多個文件類型的逗號分隔列表作為其值。
接受音頻文件
<input type="file" id="audioFile" accept="audio/*">
接受視頻文件
<input type="file" id="videoFile" accept="video/*">
接受圖像文件
<input type="file" id="imageFile" accept="image/*">
接受 Microsoft Word 文件
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
接受 PNG 或 JPEG 文件
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">
接受 PDF 文件
<input type="file" id="pdfFile" accept=".pdf">
translate 屬性告訴瀏覽器在頁面本地化時該元素是否應(yīng)該被翻譯。 它可以有 2 個值:“是”或“否”。
<p translate="no">
輸入您想翻譯或者不需要翻譯的內(nèi)容
</p>
poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。
注意:如果您不指定任何內(nèi)容,則在第一幀可用之前不會顯示任何內(nèi)容。 當?shù)谝粠捎脮r,它顯示為海報幀。
<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
inputmode 屬性指示瀏覽器在用戶選擇任何 input 或 textarea 元素時顯示哪個鍵盤。 此屬性接受各種值:
None
<input type="text" inputmode="none" />
Numeric
<input type="text" inputmode="numeric" />
Tel
<input type="text" inputmode="tel" />
Decimal
<input type="text" inputmode="decimal" />
<input type="text" inputmode="email" />
URL
<input type="text" inputmode="url" />
Search
<input type="text" inputmode="search" />
<input> 元素的模式屬性允許您指定一個正則表達式,元素的值將根據(jù)該正則表達式進行驗證。 您可以將模式屬性與多種輸入類型一起使用,例如文本、日期、搜索、URL、電話、電子郵件和密碼。
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>
autocomplete 屬性指定瀏覽器是否應(yīng)根據(jù)用戶輸入自動完成輸入。 您可以將 autocomplete 屬性用于多種輸入類型,例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。 您可以將此屬性與 <input> 元素或 <form> 元素一起使用。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
autofocus 屬性是一個布爾屬性,指示元素應(yīng)該專注于頁面加載。 您可以將此屬性與 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。
在 input 元素中使用 autofocus 屬性
<input type="text" autofocus>
在 select 元素中使用 autofocus 屬性
select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
在 textarea 元素中使用 autofocus 屬性
<textarea autofocus>
輸入您想要顯示的內(nèi)容
</textarea>
單行代碼有助于以更少的代碼實現(xiàn)更多的目標。 您可以像專業(yè)人士一樣使用多個 JavaScript 單行代碼來編寫代碼。
只需一行代碼,您就可以對數(shù)組進行混合、求數(shù)組的平均值、檢查數(shù)組是否為空、生成隨機十六進制顏色、生成隨機 UUID 等等。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。