HTML5代碼大全


一、HTML各種命令的代碼:

1、文本標簽(命令) 

<pre></pre>         創建預格式化文本 

<h1></h1>         創建最大的標題

<h6></h6>          創建最小的標題 

<b></b>           創建黑體字 

<i></i>           創建斜體字 

<tt></tt>          創建打字機風格的字體 

<cite></cite>        創建一個引用,通常是斜體 

<em></em>          加重一個單詞(通常是斜體加黑體) 

<strong></strong>      加重一個單詞(通常是斜體加黑體) 

<font size=?></font>     設置字體大小,從 1 到 7 

<font color=?></font>    設置字體的顏色,使用名字或十六進制值

 

2、圖形(命令) 

<img src="name">       添加一個圖像 

<img src="name" align=?>   排列對齊一個圖像:左中右或上中下 

<img src="name" border=?>  設置圍繞一個圖像的邊框的大小 

<hr>             加入一條水平線 

<hr size=?>         設置水平線的大小(高度) 

<hr width=?>         設置水平線的寬度(百分比或絕對像素點) 

<hr noshade>         創建一個沒有陰影的水平線  

 

3、鏈接(命令) 

<a href="URL"></a>      創建一個超鏈接 

<a href="mailto:EMAIL"></a> 創建一個自動發送電子郵件的鏈接  

<a name="NAME"></a>     創建一個位於文檔內部的靶位  

<a href="#NAME"></a>     創建一個指向位於文檔內部靶位的鏈接   

 

4、格式排版(命令) 

<p>             創建一個新的段落 

<p align=?>         將段落按左、 中、 右對齊 

<br>             插入一個回車換行符 

<blockquote></blockquote>  從兩邊縮進文本 

<dl></dl>          創建一個定義列表 

<dt>             放在每個定義術語詞之前 

<dd>             放在每個定義之前 

<ol></ol>          創建一個標有數字的列表 

<li>             放在每個數字列表項之前,並加上一個數字 

<ul></ul>          創建一個標有圓點的列表 

<li>             放在每個圓點列表項之前,並加上一個圓點 

<div align=?>        一個用來排版大塊HTML 段落的標簽,也用於格式化表

 

二、HTML基本語法  

1.文件格式

<html></html>(文件的開頭與結尾) 主題

<title></title>(放在文件的開頭)

文頭區段<head></head>(描述文件的信息)

內文區段<body></body>(放此文件的內容)

 

2.文本

標題<h?></h>(?=1~6,改變標題字的大小)

標題對齊<h align=right,left,center></h>

字加大<big></big>

字變小<small></small>

粗體字<b></b>

斜體字<i></i>

底線字<u></u>

上標字<sup></sup>

下標字<sub></sub>

居中<center></center>

居左<left> </left>

居右<right> </right>

基本字體大小<basefont size>(取值范圍從1到7,默認值為3)

改變字體大小<font size=?></font>(?=1~7)

字體顏色<font color=#rrggbb></font>(RGB色碼)

指定字型<font face=?></font>(?=宋體,楷體等)

 

3.超鏈接

網址鏈結<a href="URL"></a>

設定錨點<a name="?"></a>(?以容易記為原則)

鏈結到錨點<a href="#?"></a>(同一份文件)

<a href="URL#?"></A>(錨點不同文件)

 

4.圖形

顯示圖形<img src="URL"></a>

圖形位置<img src="URL" align=top,bottom,middle,left,right>(分別為上、下、中、左、右的位置)

 圖形取代文字<img src="URL"alt=?>(無法顯示圖形時用)

圖形尺寸<img src="URL" width=? height=?>(?以像素為單位)

連結圖形邊線<img src="URL"border=?>(?以像素為單位)

圖形四周留白<img src="URL"hspace=? vspace=?>(?以像素為單位)

 

5.段落

段落<p></p>

斷行<br></br>

橫線<hr>

橫線厚度<hr size=?>(?以像素為單位)

橫線長度<hr width=?>(?以像素為單位)

橫線長度<hr width=?%>(?與頁寬相比較)

實橫線<hr noshade>(無立體效果)

 

6.背景

背景圖案<body background=圖形文件名>(圖形文件格式為gif和jpg)

背景顏色<body bgcolor=#rrggbb>(RGB色碼)

背景文字顏色<body text=#rrggbb>(RGB色碼)

未鏈結點顏色<body link=#rrggbb>(RGB色碼)

已鏈結點顏色<body vlink=#rrggbb>(RGB色碼)

正在鏈結點顏色<body alink=#rrggbb(RGB色碼)

 

7.文件結構

文件類型 <HTML></HTML> (放在檔案的開頭與

文件主題 <TITLE></TITLE> (必須放在「文頭」區塊內)

文頭 <HEAD></HEAD> (描述性資料,像是「主題」)

文體 <BODY></BODY> (文件本體) (由瀏覽器控制的顯示風格)

標題 <H?></H?> (從1到6,有六層選擇)

標題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

區分 <DIV></DIV>

區分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊 <BLOCKQUOTE></BLOCKQUOTE> (通常會內縮)

 強調 <EM></EM> (通常會以斜體顯示)

特別強調 <STRONG></STRONG> (通常會以加粗顯示)

引文 <CITE></CITE> (通常會以斜體顯示)

碼 <CODE></CODE> (顯示原始碼之用)

樣本 <SAMP></SAMP> 鍵盤輸入 <KBD></KBD>

變數 <VAR></VAR>

定義 <DFN></DFN> (有些瀏覽器不提供)

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL> 與外觀相關的標簽(作者自訂的表現方式)

加粗 <B></B>

斜體 <I></I>

底線 <U></U> (尚有些瀏覽器不提供)

刪除線 <S></S> (尚有些瀏覽器不提供)

下標 <SUB></SUB> 上標 <SUP></SUP>

打字機體 <TT></TT> (用單空格字型顯示)

預定格式 <PRE></PRE> (保留文件中空格的大小)

預定格式的寬度 <PRE WIDTH=?></PRE>(以字元計算)

向中看齊 <CENTER></CENTER> (文字與圖片都可以)

閃耀 <BLINK></BLINK> (有史以來最被嘲弄的標簽)

字體大小 <FONT SIZE=?></FONT>(從1到7)

改變字體大小 <FONT SIZE=+|-?></FONT>

基本字體大小 <BASEFONT SIZE=?> (從1到7; 內定為3)

字體顏色 <FONT COLOR="#$$$$$$"></FONT>  

 

8.特殊字元

(以下標簽需用小寫) 特別符號 &#?; (其中 ? 代表 ISO 8859-1 的編碼)

 < < > > & & " "

注冊商標TM ?  N1.0+ 注冊商標TM ? 著作權符號 ?  N1.0+ 著作權符號 ?

 

9.表單

(通常需要與CGI程式配合)

定義表單 <FORM ACTION="URL" METHOD=GET|POST></FORM>  N2.0

上傳檔案 <FORM ENCTYPE="multipart/form-data></FORM>

輸入欄位 <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">

欄位名稱 <INPUT NAME="***">

欄位內定值 <INPUT value="***">

已選定 <INPUT CHECKED> (適用於checkboxes與 radio boxes)

欄位寬度 <INPUT SIZE=?> (以字元數為單位)

最長字數 <INPUT MAXLENGTH=?> (以字元數為單位)

下拉式選單 <SELECT></SELECT> 下拉式選單名稱 <SELECT NAME="***"></SELECT>

選單項目數量 <SELECT SIZE=?></SELECT>

多選式選單 <SELECT MULTIPLE> (多選)

選項 <OPTION>

內定選項 <OPTION SELECTED>

文字輸入區 <TEXTAREA ROWS=? COLS=?></TEXTAREA>

輸入區名稱 <TEXTAREA NAME="***"></TEXTAREA>  N2.0

輸入區換行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

 

10.表格 

3.0 定義表格 <TABLE></TABLE> 

3.0 表格框線 <TABLE BORDER></TABLE> (有或沒有) 

N1.1 表格框線 <TABLE BORDER=?></TABLE>(可以設定數值) 

N1.1 儲存格左右留白 <TABLE CELLSPACING=?> 

N1.1 儲存格上下留白 <TABLE CELLPADDING=?> 

N1.1 表格寬度 <TABLE WIDTH=?> (以pixels為單位) 

N1.1 寬度比率 <TABLE WIDTH=%> (頁寬為100%)

3.0 表格列 <TR></TR> 

3.0 表格列內容看齊 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> 

3.0 儲存格 <TD></TD> (須與列並用) 

3.0 儲存格內容看齊 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> 

3.0 不換行 <TD NOWRAP> 

N3.0 儲存格背景顏色 <TD BGCOLOR=#$$$$$$> 

3.0 儲存格橫向連接 <TD COLSPAN=?> 

3.0 儲存格縱向連接 <TD ROWSPAN=?> 

N1.1 儲存格寬度 <TD WIDTH=?> (以pixels為單位) 

N1.1 儲存格寬度比率 <TD WIDTH=%> (頁寬為100%) 

3.0 表格標題 <TH></TH> (跟<TD>一樣,不過會對中並加粗) 

3.0 表格標題對齊 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

3.0 表格標題不換行 <TH NOWRAP> 

3.0 表格標題占幾欄 <TH COLSPAN=?> 

3.0 表格標題占幾列 <TH ROWSPAN=?> 

N1.1 表格標題寬度 <TH WIDTH=?> (以pixels為單位) 

N1.1 表格標題比率寬度<TH WIDTH=%> (頁寬為100%)

3.0 表格抬頭 <CAPTION></CAPTION> 

3.0 表格抬頭看齊 <CAPTION ALIGN=TOP|BOTTOM>(在表格之上/之下) 視框 (定義與控制螢幕上的特定區域) 

N2.0 視框格式總定義 <FRAMESET></FRAMESET> (取代<BODY>) 

N2.0 視框行長度分配 <FRAMESET ROWS=,,,></FRAMESET>(pixels 或 %) 

N2.0 視框行長度分配 <FRAMESET ROWS=*></FRAMESET> (* = 相對大小) 

N2.0 視框欄寬度分配 <FRAMESET COLS=,,,></FRAMESET>(pixels 或 %) 

N2.0 視框欄寬度分配 <FRAMESET COLS=*></FRAMESET> (* =相對大小) 

N2.0 定義個別視框 <FRAME> (定義個別視框)

N2.0 個別視框內容 <FRAME SRC="URL"> 

N2.0 個別視框名稱 <FRAME NAME="***"|_blank|_self|_parent|_top> 

N2.0 邊緣寬度 <FRAME MARGINWIDTH=?> (「左」與「右」邊界) 

N2.0 邊緣高度 <FRAME MARGINHEIGHT=?> (「天頂」與「地底」邊界) 

N2.0 卷動條 <FRAME SCROLLING="YES|NO|AUTO"> 

N2.0 不可改變大小 <FRAME NORESIZE> 

N2.0 無視框時的內容 <NOFRAMES></NOFRAMES>(如果瀏覽器不提供視框功能的話)   

 

二、連結與圖形

連結 <A HREF="URL"></A>

連結到錨點 <A HREF="URL#***"></A>(如果錨點在另一個檔案) 

<A HREF="#***"></A> (如果錨點目前的檔案)

連結到目的視框 <A HREF="URL" TARGET="***"></A>

設定錨點 <A NAME="***"></A>

圖形 <IMG SRC="URL">

圖形看齊方式 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>

圖形看齊方式 <IMG SRC="URL"  ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> 取代文字 <IMG SRC="URL" ALT="***"> (如果沒有辦法顯示圖形則顯示此文字)

點選圖 <IMG SRC="URL" ISMAP> (需要CGI程式) 

N2.0 點選圖 <IMG SRC="URL" USEMAP="URL"> 

N2.0 地圖 <MAP NAME="***"></MAP>(描述地圖) 

N2.0 段落 <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> 

3.0 大小 <IMG SRC="URL" WIDTH="?" HEIGHT="?">(以pixels為單位)

N1.0 圖形邊緣 <IMG  SRC="URL" BORDER=?> (以pixels為單位) 

N1.0 圖形邊緣空間 <IMG SRC="URL" HSPACE=? VSPACE=?> (以pixels為單位) 

N1.0 低解析度圖形 <IMG SRC="URL" LOWSRC="URL"> 

N1.1 用戶端拉 <META HTTP-EQUIV="Refresh" C>(使用端自動更新 ) 

N2.0 內嵌物件 <EMBED SRC="URL"> (將物件插入頁面) 

N2.0 內嵌物件大小 <EMBED SRC="URL" WIDTH="?" HEIGHT="?">

 

三、分隔

段落 <P> (通常是兩個return) 

3.0 段落 <P></P> (新定義成容器型標簽)  

3.0 文字看齊方式 <P ALIGN=LEFT|CENTER|RIGHT></P> 換行 <BR> (一個return) 

N1.0 文字部份看齊方式<BR CLEAR=LEFT|RIGHT|ALL>(與圖形合用時) 橫線 <HR> 

N1.0 橫線對齊 <HR ALIGN=LEFT|RIGHT|CENTER> 

N1.0 橫線厚度 <HR SIZE=?> (以pixels為單位) 

N1.0 橫線寬度 <HR WIDTH=?> (以pixels為單位)

N1.0 橫線比率寬度 <HR WIDTH=%> (以頁寬為100%) 

N1.0 實線 <HR NOSHADE> (沒有立體效果) 

N1.0 不可換行 <NOBR></NOBR> (不換行) 

N1.0 可換行處 <WBR> (如果需要,可在此斷行)

列舉 (可以巢狀列舉)

無次序式列舉 <UL><LI></UL> (<LI> 放在每一項前)

N1.0 公布式列舉 <UL TYPE=DISC|CIRCLE|SQUARE>(定義全部的列舉項)

<LI TYPE=DISC|CIRCLE|SQUARE>(定義這個及其後的列舉項)

有次序式列舉 <OL><LI></OL> (<LI> 放在每一項前) 

N1.0 數標型態 <OL TYPE=A|a|I|i|1> (定義全部的列舉項) 

<LI TYPE=A|a|I|i|1> (定義這個及其後的列舉項) 

N1.0 起始數字 <OL value=?> (定義全部的列舉項) 

<LI value=?> (定義這個及其後的列舉項)

定義式列舉 <DL><DT><DD></DL>(<DT>項目, <DD>定義)

表單式列舉 <MENU><LI></MENU>(<LI> 放在每一項前)

目錄式列舉 <DIR><LI></DIR> (<LI> 放在每一項前)

 

四、背景與顏色 

3.0 重復排列的背景 <BODY BACKGROUND="URL"> 

N1.1+ 背景顏色 <BODY BGCOLOR="#$$$$$$"> (依序為紅、綠、藍) 

N1.1+ 文字顏色 <BODY TEXT="#$$$$$$"> 

N1.1+ 連結顏色 <BODY LINK="#$$$$$$"> 

N1.1+ 看過的連結 <BODY VLINK="#$$$$$$"> 

N1.1 使用中的連結 <BODY ALINK="#$$$$$$">

 

五、雜項

說明 <!-- *** --> (瀏覽器不會顯示) 

<!--修改滾動條--> 

<style type="text/css">

 body {  scrollbar-face-color: #330033;  scrollbar-shadow-color: #FFFFFF;  scrollbar-highlight-color: #FFFFFF;  scrollbar-3dlight-color: #FFFFFF;  scrollbar-darkshadow-color: #FFFFFF;  scrollbar-track-color: #330033;  scrollbar-arrow-color: #FFFFFF;  } 

</style>

<!--修改滾動條結束-->

將上面的代碼放在葉子代碼的<head></head>之間,顏色可根據自己的需要修改。

滾動條的代碼意思如下:

Scrollbar-Face-Color為滾動條表面顏色設定;

Scrollbar-Track-Color為滾動條底板顏色設定;

Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設定;

Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設定;

Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設定;

Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設定;

Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設定。 

<!> 跑馬燈

<marquee>...</marquee>普通捲動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設捲動

<marquee behavior=alternate>...</marquee>來回捲動

<marquee direction=down>...</marquee>向下捲動

<marquee direction=up>...</marquee>向上捲動

<marquee direction=right></marquee>向右捲動

<marquee direction=’left’></marquee>向左捲動

<marquee loop=2>...</marquee>捲動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定捲動距離

<marquee scrolldelay=300>...</marquee>設定捲動時間

 

https://wenku.baidu.com/view/dd963a3e5fbfc77da369b177.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM