Dreamweaver/Html常用標簽（代碼）含義匯總

本標簽: 32

<html></html>,創(chuàng)建一個HTML文檔;
<head></head>,設(shè)置文檔標題和其它在網(wǎng)頁中不顯示的信息;
<title></title>,設(shè)置文檔的標題;
<h1></h1>,最大的標題;
<pre></pre>,預先格式化文本;
<u></u>,下劃線
<b></b>,黑體字;
<i></i>,斜體字;
<tt></tt>,打字機風格的字體;
<cite></cite>,引用,通常是斜體;
<em></em>,強調(diào)文本(通常是斜體加黑體);
<strong></strong>,加重文本(通常是斜體加黑體);
<font,size="",color=""></font>,設(shè)置字體大小從1到7,顏色使用名字或RGB的十六進制值;
<BASEFONT></BASEFONT>,基準字體標記;
<big></big>,字體加大;
<SMALL></SMALL>,字體縮小;
<STRIKE></STRIKE>,加刪除線;
<CODE></CODE>,程式碼;
<KBD></KBD>,鍵盤字;
<SAMP></SAMP>,范例;
<VAR></VAR>,變量;
<BLOCKQUOTE></BLOCKQUOTE>,向右縮排;
<DFN></DFN>,述語定義;
<ADDRESS></ADDRESS>,地址標記;
<sup></SUP>,上標字;
<SUB></SUB>,下標字;
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標記符號);
<listing>...</listing>,固定寬度小字體;
<font,color=00ff00>...</font>字體顏色;
<font,size=1>...</font>最小字體;
<font,style,='font-size:100,px'>...</font>無限增大.

格式標簽: 16

<p></p>,創(chuàng)建一個段落;
<p,align="">,將段落按左、中、右對齊;
<br>,換行,插入一個回車換行符;
<blockquote></blockquote>,從兩邊縮進文本;
<dl></dl>,列表標簽,定義列表;
<dt>,定義列表標題;
<dd>,定義列表內(nèi)容;

例:

<dl>

</dl>

<ol></ol>,列表標簽,定義一個標有數(shù)字的列表;
<ul></ul>,列表標簽,定義一個標有圓點的列表;
<li>,放在每個列表項之前; 放在<ol></ol>之間則每個列表項加上一個數(shù)字,放在<ul></ul>之間則每個列表項加上一個圓點;
<div,align=""></div>,分區(qū)標簽,用來排版大塊HTML段落,也用于格式化表;
<MENU>,選項清單;
<DIR>,目錄清單;
<nobr></nobr>,強行不換行;
<hr,size='9',width='80%',color='ff0000'>水平線(設(shè)定寬度);
<center></center>,水平居中.

鏈接標簽: 7

<a,href="URL"></a>,創(chuàng)建超文本鏈接;
<a,href="mailtEMAIL">
</a>,創(chuàng)建自動發(fā)送電子郵件的鏈接;
<a,name="name"></a>,創(chuàng)建位于文檔內(nèi)部的書簽;
<a,href="#name"></a>,創(chuàng)建指向位于文檔內(nèi)部書簽的鏈接;
<BASE>,文檔中不能被該站點辨識的其它所有鏈接源的URL;
<LINK>,定義一個鏈接和源之間的相互關(guān)系;

鏈接標簽注解:

target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);

rel="...",發(fā)送鏈接的類型;

rev="...",保存鏈接的類型;

accesskey="...",指定該元素的熱鍵;

shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);

coord="...",使用像素或者長度百分比來定義形狀的尺寸;

tabindex="...",使用定義過的tabindex元素設(shè)置在各個元素之間的焦點獲取順序(使用tab鍵使元素獲得焦點).

表格標簽: 21

<table></table>,創(chuàng)建一個表格;
<tr></tr>,表格中的每一行;
<td></td>,表格中一行中的每一個格子;
<th></th>,設(shè)置表格頭:通常是黑體居中文字;
<table,cellspacing="">,設(shè)置表格格子之間空間的大小;
<table,border="">,設(shè)置邊框的寬度;
<table,cellpadding="">,設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小;
<table,width="">,設(shè)置表格的寬度.用絕對像素值或總寬度的百分比;
<table,align="">,設(shè)置表格格子的水平對齊方式(left,center,right,justify);
<tr,align="">,設(shè)置表格格子的水平對齊方式(left,center,right,justify);
<tr,valign="">,設(shè)置表格格子的垂直對齊方式(baseline,bottom,middle,top);
<td,colspan="">,設(shè)置一個表格格子跨占的列數(shù)(缺省值為1);
<td,rowspan="">,設(shè)置一個表格格子跨占的行數(shù)(缺省值為1);
<td,nowrap>,禁止表格格子內(nèi)的內(nèi)容自動斷行;
<CAPTION></CAPTION>,表格的標題;
<COLGROUP></COLGROUP>,定義多個列為一組列;
<TABLE></TABLE>,創(chuàng)建一個表格;
<THEAD></THEAD>,定義表格的頁眉;
<COL>,定義一個列組中的列，以便對它們能夠同時設(shè)置有關(guān)屬性;
<TBODY></TBODY>,定義一個表格的實體;
<TFOOT></TFOOT>,定義一個表格的頁腳;

表單標簽: 18

<form></form>,創(chuàng)建表單;

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)

<select,multiple,name="name",size=""></select>,創(chuàng)建滾動菜單,size設(shè)置在需要滾動前可以看到的表單項數(shù)目;
<option>,設(shè)置每個表單項的內(nèi)容;
<select,name="name"></select>,創(chuàng)建下拉菜單;
<textarea,name="name",cols=40,rows=8></textarea>,創(chuàng)建一個文本框區(qū)域,列的數(shù)目設(shè)置寬度,行的數(shù)目設(shè)置高度;
<input,type="checkbox",name="name">,創(chuàng)建一個復選框,文字在標簽后面;
<input,type="radio",name="name",value="">,創(chuàng)建一個單選框,文字在標志后面;
<input,type=text,name="foo",size=20>,創(chuàng)建一個單行文本輸入?yún)^(qū)域,size設(shè)置以字符串的寬度;
<input,type="submit",value="name">,創(chuàng)建提交(submit)按鈕;
<input,type="image",border=0,name="name",src="name.gif">,創(chuàng)建一個使用圖象的提交(submit)按鈕;
<input,type="reset">,創(chuàng)建重置(reset)按鈕;
<BUTTON></BUTTON>,創(chuàng)建一個按鈕;

disabled="...",把按鈕的狀態(tài)設(shè)置為不能;

name="...",按鈕的控制名,value="...",按鈕的值;

type="...",按鈕的類型(button,,submit,,reset);

<FIELDSET></FIELDSET>,把相互關(guān)聯(lián)的控件組合成一組;
<ISINDEX>,提示用戶輸入;
<LABEL></LABEL>,為一個控件提供標簽;
<LEGEND></LEGEND>,為FIELDSET元素指定一標題;
<SELECT></SELECT>,為用戶做選擇創(chuàng)建各個選項;
<TEXTAREA></TEXTAREA>,創(chuàng)建一個允許用戶多行輸入的區(qū)域.

表單標簽注解:

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="...",允許上載的文件類型.

幀標簽(框架標簽): 27

<frameset></frameset>,放在一個幀文檔的<body>標簽之前,也可以嵌在其他幀文檔中;
<frameset,rows="value,value">,定義一個幀內(nèi)的行數(shù),可用像素值或高度百分比;
<frameset,cols="value,value">,定義一個幀內(nèi)的列數(shù),可用像素值或?qū)挾劝俜直?
<frame>,定義一個幀內(nèi)的單一窗或窗區(qū)域;
<noframes></noframes>,定義在不支持幀的瀏覽器中顯示什么提示;
<frame,src="URL">,規(guī)定幀內(nèi)顯示的HTML文檔;
<frame,name="name">,命名幀或區(qū)域以便別的幀可以指向它;
<frame,marginwidth="">,定義幀左右邊緣的空白大小,必須大于等于1;
<frame,marginheight="">,定義幀上下邊緣的空白大小,必須大于等于1;
<frame,scrolling="">,設(shè)置幀是否有滾動欄,其值可以是"yes","no",或"auto";
<frame,noresize>,禁止用戶調(diào)整一個幀的大小;
<IFRAME></IFRAME>,創(chuàng)建一個內(nèi)聯(lián)的幀;

scr="...",定義在幀中顯示的內(nèi)容的來源;

frameborder="...",定義幀之間的邊界(0或1);

align="...",被反對,控制對齊方式(left,,center,,right,,justify);

height="...",幀的高度,width="..."幀的寬度;

<marquee>...</marquee>,普通卷動;
<marquee,behavior=slide>...</marquee>,滑動;
<marquee,behavior=scroll>...</marquee>,預設(shè)卷動;
<marquee,behavior=alternate>...</marquee>,來回卷動;
<marquee,direction=down>...</marquee>,向下卷動;
<marquee,direction=up>...</marquee>,向上卷動;
<marquee,direction=right></marquee>,向右卷動;
<marquee,direction='left'></marquee>,向左卷動;
<marquee,loop=2>...</marquee>,卷動次數(shù);
<marquee,width=180>...</marquee>,設(shè)定寬度;
<marquee,height=30>...</marquee>,設(shè)定高度;
<marquee,bgcolor=FF0000>...</marquee>,設(shè)定背景顏色;
<marquee,scrollamount=30>...</marquee>,設(shè)定卷動距離;
<marquee,scrolldelay=300>...</marquee>,設(shè)定卷動時間;
<img,src="">,插入圖片,參數(shù)有:width="寬",alt="說明文字",height="高",boder="邊框".

文檔整體屬性標簽: 10

<body,bgcolor="">,設(shè)置背景顏色.使用名字或RGB的十六進制值;
<body,background="">,設(shè)置背景圖片;
<body,bgsound="">,設(shè)置背景音樂;
<body,bgproperties="fixed">,固定背景圖片(IE適用);
<body,text="">,設(shè)置文本顏色.使用名字或RGB的十六進制值;
<body,link="">,設(shè)置鏈接顏色.使用名,字或RGB的十六進制值;
<body,vlink="">,設(shè)置已使用的鏈接的顏色.使用名字或RGB的十六進制值;
<body,alink="">,設(shè)置正在被擊中的鏈接的顏色.使用名字或RGB的十六進制值;
<body,topmargin="">,設(shè)置頁面的上邊距;
<body,leftmargin="">,設(shè)置頁面的左邊距.

聯(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ū)傩浴Ｔ诒疚闹?，小編將帶您了?11 個您可能還沒有聽說過的 HTML 屬性。

1. multiple

此屬性允許用戶輸入多個值。您可以將 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>

2.contenteditable

您可以使用 contenteditable 屬性使網(wǎng)頁上的 HTML 內(nèi)容可編輯。這是一個全局屬性，即它對所有 HTML 元素都是通用的。

<p contenteditable="true">
在這里您可以編輯您想輸入的內(nèi)容
</p>

3.spellcheck

spellcheck 屬性指定是否可以檢查元素的拼寫錯誤。您可以對 <textarea> 元素中的文本、可編輯元素中的文本或輸入元素中的文本（密碼除外）中的文本進行拼寫檢查。

<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內(nèi)容
</p>

4.download

您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導航到它。您可以將下載屬性與 <a> 標簽和 <area> 標簽一起使用。

注意：下載屬性僅適用于同源 URL。它遵循同源策略的規(guī)則。

<a href="xyz.png" download="myImage">下載</a>

5. accept

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

6. translate

translate 屬性告訴瀏覽器在頁面本地化時該元素是否應(yīng)該被翻譯。它可以有 2 個值：“是”或“否”。

<p translate="no">
輸入您想翻譯或者不需要翻譯的內(nèi)容
</p>

7.poster

poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。

注意：如果您不指定任何內(nèi)容，則在第一幀可用之前不會顯示任何內(nèi)容。當?shù)谝粠捎脮r，它顯示為海報幀。

<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8.inputmode

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" />

Email

<input type="text" inputmode="email" />

URL

<input type="text" inputmode="url" />

Search

<input type="text" inputmode="search" />

9. pattern

<input> 元素的模式屬性允許您指定一個正則表達式，元素的值將根據(jù)該正則表達式進行驗證。您可以將模式屬性與多種輸入類型一起使用，例如文本、日期、搜索、URL、電話、電子郵件和密碼。

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>

10.autocomplete

autocomplete 屬性指定瀏覽器是否應(yīng)根據(jù)用戶輸入自動完成輸入。您可以將 autocomplete 屬性用于多種輸入類型，例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。您可以將此屬性與 <input> 元素或 <form> 元素一起使用。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

11.autofocus

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>

使用 JavaScript One-Liners 讓您的生活更輕松

單行代碼有助于以更少的代碼實現(xiàn)更多的目標。您可以像專業(yè)人士一樣使用多個 JavaScript 單行代碼來編寫代碼。

只需一行代碼，您就可以對數(shù)組進行混合、求數(shù)組的平均值、檢查數(shù)組是否為空、生成隨機十六進制顏色、生成隨機 UUID 等等。

在線咨詢

上一篇：認識 HTML5
下一篇：初識Flutter中的Layer

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商