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
轉載于:https://www.cnblogs.com/ince/p/10099460.html
總結
- 上一篇： NAT 网络地址转换技术（一）NAT原理
- 下一篇： zabbix微信告警HTML,ZABBI