HTML標(biāo)簽以及各個(gè)標(biāo)簽屬性大全（網(wǎng)頁(yè)制作必備）

<metahttp-equiv="Windows-Target"content="_top">

<NOBR> 取消換行和<br>相反

總類（所有HTML文件都有的

--------------------------------------------------------------------------------

文件類型 <HTML></HTML> 放在檔案的開(kāi)頭與結(jié)尾）

文件主題 <TITLE></TITLE> 必須放在「文頭」區(qū)塊內(nèi)）

文頭 <HEA D></HEA D> 描述性資料，像是「主題」）

文體 <BODY></BODY> 文件本體）

結(jié)構(gòu)性定義（由瀏覽器控制的顯示風(fēng)格）

--------------------------------------------------------------------------------

標(biāo)題<H?></H?>表示從16有六層選擇）數(shù)值越高字越小

標(biāo)題對(duì)齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>左對(duì)齊、居中對(duì)齊、右對(duì)齊

區(qū)分<P></P>

區(qū)分對(duì)齊<PALIGN=LEFT|RIGHT|CENTER|JUSTIFY></P>左對(duì)齊、右對(duì)齊、居中對(duì)齊、兩端對(duì)齊

引文區(qū)塊<BLOCKQUOTE></BLOCKQUOTE>通常會(huì)內(nèi)縮）

斜體 <EM></EM>

加粗 <SPONG></SPONG>

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

碼<CODE></CODE>顯示原始碼之用）

樣本<SA MP></SA MP>

表示一段用戶應(yīng)該對(duì)其沒(méi)有什么其他解釋的文本。要從正常的上下文抽取這些字符時(shí)，通常要用到這個(gè)標(biāo)簽。

并不經(jīng)常使用，只在要從正常上下文中將某些短字符序列提取出來(lái)，對(duì)其加以強(qiáng)調(diào)，才使用這個(gè)標(biāo)簽

鍵盤(pán)輸入<KBD></KBD>

變數(shù)<VA R></VA R>

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

地址<A DDRESS></A DDRESS>

3.0大字<BIG></BIG>

3.0小字<SMA LL></SMA LL>

與外觀相關(guān)的標(biāo)簽（作者自訂的表現(xiàn)方式）

--------------------------------------------------------------------------------

加粗<B></B>

斜體<I></I>

3.0底線<U></U>尚有些瀏覽器不提供）

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

3.0下標(biāo) <SUB></SUB>

3.0上標(biāo) <SUP></SUP>

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

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

預(yù)定格式的寬度<PREWIDTH=?></PRE>以字元計(jì)算）

N1.0+向中看齊<CENTER></CENTER>文字與圖片都可以）

N1.0閃耀<BLINK></BLINK>有史以來(lái)最被嘲弄的標(biāo)簽）

N1.0字體大小<FONTSIZE=?></FONT>從17

N1.0改變字體大小<FONTSIZE=+|-?></FONT>

N1.0基本字體大小<BA SEFONTSIZE=?>從17;內(nèi)定為3

N2.0字體顏色<FONTCOLOR="#$$$$$$"></FONT>

連結(jié)與圖形

--------------------------------------------------------------------------------

鏈接 <A HREF="URL"></A >

連結(jié)到錨點(diǎn)<A HREF="URL#***"></A >如果錨點(diǎn)在另一個(gè)檔案）

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

N2.0連結(jié)到目的視框<A HREF="URL"TA RGET="***"></A >

設(shè)定錨點(diǎn)<A NA ME="***"></A >

圖形 <IMGSRC="URL">

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

取代文字 <IMGSRC="URL"ALT="***">如果沒(méi)有辦法顯示圖形則顯示此文字）

點(diǎn)選圖<IMGSRC="URL"ISMA P>需要CGI程式）

N2.0點(diǎn)選圖 <IMGSRC="URL"USEMA P="URL">

N2.0地圖 <MA PNA ME="***"></MA P>描述地圖）

N2.0段落 <A REA SHA PE="RECT"COORDS=",,,"HREF="URL"|NOHREF>

3.0大小 <IMGSRC="URL"WIDTH="?"HEIGHT="?">以pixel為單位：px

N1.0圖形邊緣 <IMGSRC="URL"BORDER=?>以pixel為單位）

N1.0圖形邊緣空間 <IMGSRC="URL"HSPA CE=?VSPA CE=?>以pixel為單位）

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

N1.1用戶端拉 <META HTTP-EQUIV="Refresh"CONTENT="?;URL=URL">使用端自動(dòng)更新

N2.0內(nèi)嵌物件 <EMBEDSRC="URL">將物件插入頁(yè)面）

N2.0內(nèi)嵌物件大小 <EMBEDSRC="URL"WIDTH="?"HEIGHT="?">

分隔

--------------------------------------------------------------------------------

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

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

3.0文字看齊方式 <PALIGN=LEFT|CENTER|RIGHT></P>

換行 <BR>一個(gè)return

N1.0文字部份看齊方式<BRCLEA R=LEFT|RIGHT|A LL>與圖形合用時(shí)）

橫線 <HR>

N1.0橫線對(duì)齊 <HRALIGN=LEFT|RIGHT|CENTER>

N1.0橫線厚度 <HRSIZE=?>以pixel為單位）

N1.0橫線寬度 <HRWIDTH=?>以pixel為單位）

N1.0橫線比率寬度 <HRWIDTH=%>以頁(yè)寬為100%

N1.0實(shí)線 <HRNOSHA DE>沒(méi)有立體效果）

N1.0不可換行 <NOBR></NOBR>不換行）

N1.0可換行處 <WBR>如果需要，可在此斷行）

列舉（可以巢狀列舉）

--------------------------------------------------------------------------------

無(wú)次序式列舉<UL><LI></UL><LI>放在每一項(xiàng)前）

N1.0公布式列舉 <ULTYPE=DISC|CIRCLE|SQUA RE>定義全部的列舉項(xiàng)）

<LITYPE=DISC|CIRCLE|SQUA RE>定義這個(gè)及其後的列舉項(xiàng)）

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

N1.0數(shù)標(biāo)型態(tài) <OLTYPE=A |a|I|i|1>定義全部的列舉項(xiàng)）

<LITYPE=A |a|I|i|1>定義這個(gè)及其後的列舉項(xiàng)）

N1.0起始數(shù)字 <OLVA LUE=?>定義全部的列舉項(xiàng)）

<LIVA LUE=?>定義這個(gè)及其後的列舉項(xiàng)）

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

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

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

背景與顏色

--------------------------------------------------------------------------------

3.0重復(fù)排列的背景 <BODYBA CKGROUND="URL">

N1.1+背景顏色 <BODYBGCOLOR="#$$$$$$">依序?yàn)榧t、綠、藍(lán)）

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

N1.1+連結(jié)顏色 <BODYLINK="#$$$$$$">

N1.1+看過(guò)的連結(jié) <BODYVLINK="#$$$$$$">

N1.1使用中的連結(jié) <BODYALINK="#$$$$$$">

特殊字元（以下標(biāo)簽需用小寫(xiě)）

--------------------------------------------------------------------------------

特別符號(hào) &#?;其中 ?代表 ISO8859-1編碼）

<<>>&&""

注冊(cè)商標(biāo)TM?

N1.0+注冊(cè)商標(biāo)TM®

著作權(quán)符號(hào) ?

N1.0+著作權(quán)符號(hào) ©

表單（通常需要與CGI程式配合）

--------------------------------------------------------------------------------

定義表單 <FORMACTION="URL"METHOD=GET|POST></FORM>

N2.0上傳檔案 <FORMENCTYPE="multipart/form-data></FORM>

欄位名稱 <INPUTNA ME="***">

欄位內(nèi)定值 <INPUTVA LUE="***">

已選定 <INPUTCHECKED>適用於checkbox與 radiobox

欄位寬度 <INPUTSIZE=?>以字元數(shù)為單位）

最長(zhǎng)字?jǐn)?shù) <INPUTMA XLENGTH=?>以字元數(shù)為單位）

下拉式選單 <SELECT></SELECT>

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

選單項(xiàng)目數(shù)量 <SELECTSIZE=?></SELECT>

多選式選單 <SELECTMULTIPLE>多選）

選項(xiàng) <OPTION>

內(nèi)定選項(xiàng) <OPTIONSELECTED>

文字輸入?yún)^(qū) <TEXTA REA ROWS=?COLS=?></TEXTA REA >

輸入?yún)^(qū)名稱 <TEXTA REA NA ME="***"></TEXTA REA >

N2.0輸入?yún)^(qū)換行方式 <TEXTA REA WRA P=OFF|VIRTUA L|PHYSICA L></TEXTA REA >

表格

--------------------------------------------------------------------------------

3.0定義表格 <TA BLE></TA BLE>

3.0表格框線 <TA BLEBORDER></TA BLE>有或沒(méi)有）

N1.1表格框線 <TA BLEBORDER=?></TA BLE>可以設(shè)定數(shù)值）

N1.1儲(chǔ)存格左右留白 <TA BLECELLSPA CING=?>

N1.1儲(chǔ)存格上下留白 <TA BLECELLPA DDING=?>

N1.1表格寬度 <TA BLEWIDTH=?>以pixel為單位）

N1.1寬度比率 <TA BLEWIDTH=%>頁(yè)寬為100%

3.0表格列<P></P>

3.0表格列內(nèi)容看齊 <PALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0儲(chǔ)存格<TD></TD>須與列并用）

3.0儲(chǔ)存格內(nèi)容看齊 <TDALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0不換行 <TDNOWRA P>

N3.0儲(chǔ)存格背景顏色 <TDBGCOLOR=#$$$$$$>

3.0儲(chǔ)存格橫向連接 <TDCOLSPA N=?>

3.0儲(chǔ)存格縱向連接 <TDROWSPA N=?>

N1.1儲(chǔ)存格寬度 <TDWIDTH=?>以pixel為單位）

N1.1儲(chǔ)存格寬度比率 <TDWIDTH=%>頁(yè)寬為100%

3.0表格標(biāo)題 <TH></TH>跟<TD>一樣，不過(guò)會(huì)對(duì)中并加粗）

3.0表格標(biāo)題對(duì)齊 <THALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0表格標(biāo)題不換行 <THNOWRA P>

3.0表格標(biāo)題占幾欄 <THCOLSPA N=?>

3.0表格標(biāo)題占幾列 <THROWSPA N=?>

N1.1表格標(biāo)題寬度 <THWIDTH=?>以pixel為單位）

N1.1表格標(biāo)題比率寬度<THWIDTH=%>頁(yè)寬為100%

3.0表格抬頭 <CA PTION></CA PTION>

3.0表格抬頭看齊 <CA PTIONALIGN=TOP|BOTTOM>表格之上/之下）

視框（定義與控制螢?zāi)簧系奶囟▍^(qū)域）

--------------------------------------------------------------------------------

N2.0視框格式總定義 <FRA MESET></FRA MESET>取代<BODY>

N2.0視框行長(zhǎng)度分配 <FRA MESETROWS=,,,></FRA MESET>pixel或 %

N2.0視框行長(zhǎng)度分配 <FRA MESETROWS=*></FRA MESET>*=相對(duì)大小）

N2.0視框欄寬度分配 <FRA MESETCOLS=,,,></FRA MESET>pixel或 %

N2.0視框欄寬度分配 <FRA MESETCOLS=*></FRA MESET>*=相對(duì)大小）

N2.0定義個(gè)別視框 <FRA ME>定義個(gè)別視框）

N2.0個(gè)別視框內(nèi)容 <FRA MESRC="URL">

N2.0個(gè)別視框名稱 <FRA MENA ME="***"|_blank|_self|_parent|_top>

N2.0邊緣寬度 <FRA MEMA RGINWIDTH=?>「左」與「右」邊界）

N2.0邊緣高度 <FRA MEMA RGINHEIGHT=?>「天頂」與「地底」邊界）

N2.0卷動(dòng)條 <FRA MESCROLLING="YES|NO|A UTO">

N2.0不可改變大小 <FRA MENORESIZE>

N2.0無(wú)視框時(shí)的內(nèi)容 <NOFRA MES></NOFRA MES>如果瀏覽器不提供視框功能的話）

雜項(xiàng)

--------------------------------------------------------------------------------

說(shuō)明 瀏覽器不會(huì)顯示）

檔案型態(tài)聲明 <!DOCTYPEHTMLPUBLIC"-//IETF//DTDHTML2.0//EN">

3.0檔案型態(tài)聲明 <!DOCTYPEHTMLPUBLIC"-//W3O//DTDW3HTML3.0//EN">

可搜尋 <ISINDEX>指示可搜尋的索引項(xiàng)）

N1.0提示 <ISINDEXPROMPT="***">要求輸入的提示文字）

送出搜尋條件 <A HREF="URL?***"></a>其中的問(wèn)號(hào)不是數(shù)字，而是「問(wèn)號(hào)」）

基本檔案的URL<BA SEHREF="URL">必須放在「文頭」區(qū)段內(nèi)）

N2.0基本視窗名稱 <BA SETA RGET="***">必須放在「文頭」區(qū)段內(nèi)）

相關(guān)性 <LINKREV="***"REL="***"HREF="URL">必須放在「文頭」區(qū)段內(nèi)）

背景資訊 <META >必須放在「文頭」區(qū)段內(nèi)）

HTML標(biāo)簽

HTML標(biāo)簽通常是英文詞匯的全稱（如塊引用:blockquot或縮略語(yǔ)（如“p代表Paragragh但它與一般文本有區(qū)別，因?yàn)樗旁趩螘?shū)名號(hào)里。故Paragragh標(biāo)簽是<p>,塊引用標(biāo)簽是<blockquote>有些標(biāo)簽說(shuō)明頁(yè)面如何被格式化（例如，<p>開(kāi)始一個(gè)新段落）其他則說(shuō)明這些詞如何顯示(<b>使文字變粗)還有一些其他標(biāo)簽提供在頁(yè)面上不顯示的信息－例如標(biāo)題。

關(guān)于標(biāo)簽，需要記住的成雙出現(xiàn)的每當(dāng)使用一個(gè)標(biāo)簽－如<blockquote>,則必須以另一個(gè)標(biāo)簽</blockquote>將它關(guān)閉。注意“blockquot前的斜杠，那就是關(guān)閉標(biāo)簽與打開(kāi)標(biāo)簽的區(qū)別。

基本HTML頁(yè)面以<html>標(biāo)簽開(kāi)始，以</html>結(jié)束。之間，整個(gè)頁(yè)面有兩部分－標(biāo)題和正文。

標(biāo)題詞－夾在<head>和</head>標(biāo)簽之間－這個(gè)詞語(yǔ)在打開(kāi)頁(yè)面時(shí)出現(xiàn)在屏幕底部最小化的窗口。正文則夾在<body>和</body>之間－即所有頁(yè)面的內(nèi)容所在頁(yè)面上顯示的任何東西都包含在這兩個(gè)標(biāo)簽之中。

那么讓我建立一個(gè)簡(jiǎn)單的范例吧，非常容易的第一步，當(dāng)然是要建立一個(gè)新的文本文件（記住，如果你使用比較復(fù)雜的文字處理器，就應(yīng)該用“純文本”或“普通文本”來(lái)保存）將它命名為“xxxx.html隨便你起一個(gè)什么名字,但記住,要用英文)

然后你可以用瀏覽器將它打開(kāi)，會(huì)看見(jiàn)最簡(jiǎn)單的自己做的頁(yè)面。

.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

Html英文 HyperTextMarkupLanguag縮寫(xiě)，中文意思是超文本標(biāo)志語(yǔ)言”用它編寫(xiě)的文件(文檔)擴(kuò)展名是.html或.htm可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫(xiě)字板或 FrontPagEditor等編輯工具來(lái)編寫(xiě)Html文件。Html語(yǔ)言使用標(biāo)志對(duì)的方法編寫(xiě)文件，既簡(jiǎn)單又方便，通常使用<標(biāo)志名></標(biāo)志名>來(lái)表示標(biāo)志的開(kāi)始和結(jié)束(例如<html></html>標(biāo)志對(duì))因此在Html文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的此教程中，先講一下Html基本標(biāo)志：

1.<html></html>

<html>標(biāo)志用于Html文檔的最前邊，用來(lái)標(biāo)識(shí)Html文檔的開(kāi)始。而</html>標(biāo)志恰恰相反，放在Html文檔的最后邊，用來(lái)標(biāo)識(shí)Html文檔的結(jié)束，兩個(gè)標(biāo)志必須一塊使用。

2.<head></head>

<head>和</head>構(gòu)成Html文檔的開(kāi)頭部分，此標(biāo)志對(duì)之間可以使用<title></title><script></script>等等標(biāo)志對(duì)，這些標(biāo)志對(duì)都是描述Html文檔相關(guān)信息的標(biāo)志對(duì)，<head></head>標(biāo)志對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來(lái)的兩個(gè)標(biāo)志必須一塊使用。

3.<body></body>

<body></body>Html文檔的主體部分，此標(biāo)志對(duì)之間可包含<p></p><h1></h1><br><hr>等等眾多的標(biāo)志，所定義的文本、圖像等將會(huì)在瀏覽器的框內(nèi)顯示出來(lái)。兩個(gè)標(biāo)志必須一塊使用。<body>標(biāo)志中還可以有以下屬性：屬性

用途

示例

<bodibgcolor="#rrggbb">設(shè)置背景顏色。<bodibgcolor="red">紅色背景

<boditext="#rrggbb">設(shè)置文本顏色。<boditext="#0000ff">藍(lán)色文本

<bodilink="#rrggbb">設(shè)置鏈接顏色。<bodilink="blue">鏈接為藍(lán)色

<bodivlink="#rrggbb">設(shè)置已使用的鏈接的顏色。<bodivlink="#ff0000">

<bodialink="#rrggbb">設(shè)置正在被擊中的鏈接的顏色。<bodialink="yellow">

說(shuō)明:以上各個(gè)屬性可以結(jié)合使用，如<bodibgcolor="red"text="#0000ff">引號(hào)內(nèi)的rrggbb用六個(gè)十六進(jìn)制數(shù)表示的RGB即紅、綠、藍(lán)三色的組合)顏色，如#ff0000對(duì)應(yīng)的紅色。此外，還可以使用Html語(yǔ)言所給定的常量名來(lái)表示顏色：BlackWhiteGreenMaroonOliveNaviPurplGraiYellowLimeAguaFuchsiaSilverRedBlue和Teal如<boditext="Blue">表示<body></body>標(biāo)志對(duì)中的文本使用藍(lán)色顯示在瀏覽器的框內(nèi)。

4.<title></title>

使用過(guò)瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁(yè)的主題”要將您的網(wǎng)頁(yè)的主題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn)單，只要在<title></title>標(biāo)志對(duì)之間加入您要顯示的文本即可。注意：<title></title>標(biāo)志對(duì)只能放在<head></head>標(biāo)志對(duì)之間。

下面是一個(gè)綜合的例子，仔細(xì)閱讀，您便可以了解以上各個(gè)標(biāo)志對(duì)在一個(gè)Html文檔中的布局或所使用的位置。

例1Html文檔中基本標(biāo)志的使用

<html>

<head>

<title>顯示在瀏覽器最上邊藍(lán)色條中的文本</title>

</head>

<bodibgcolor="red"text="blue">

</body>

</html>

1.<p></p>

2.<br>

3.<blockquote></blockquote>

4.<dl></dl><dt></dt><dd></dd>

5.<ol></ol><ul></ul><li></li>

6.<div></div>

上一個(gè)教程中我講了Html文檔的基本標(biāo)志，但我還不知道怎樣在瀏覽器中顯示文本之類的東西，這正是教程二中將要談到學(xué)習(xí)之前，必須強(qiáng)調(diào)一下，這個(gè)教程中所講的格式標(biāo)志統(tǒng)統(tǒng)都是用于<body></body>標(biāo)志對(duì)之間的

1.<p></p>

<p></p>標(biāo)志對(duì)是用來(lái)創(chuàng)建一個(gè)段落，此標(biāo)志對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。另外，<p>標(biāo)志還可以使用align屬性，用來(lái)說(shuō)明對(duì)齊方式，語(yǔ)法是<palign=""></p>align可以是Left左對(duì)齊)Center居中)和Right右對(duì)齊)三個(gè)值中的任何一個(gè)。如<palign="Center"></p>表示標(biāo)志對(duì)中的文本使用居中的對(duì)齊方式。

2.<br>

<br>一個(gè)很簡(jiǎn)單的標(biāo)志，沒(méi)有結(jié)束標(biāo)志，因?yàn)樗脕?lái)創(chuàng)建一個(gè)回車(chē)換行，這么一說(shuō)我想您該會(huì)使用了吧。<br>使用上還有一定的技巧，如果您把<br>加在<p></p>標(biāo)志對(duì)的外邊，將創(chuàng)建一個(gè)大的回車(chē)換行，即<br>前邊和后邊的文本的行與行之間的距離比較大，若放在<p></p>里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小，您不妨試試看。

3.<blockquote></blockquote>

<blockquote></blockquote>標(biāo)志對(duì)之間加入的文本將會(huì)在瀏覽器中按兩邊縮進(jìn)的方式顯示出來(lái)。

4.<dl></dl><dt></dt><dd></dd>

<dl></dl>用來(lái)創(chuàng)建一個(gè)普通的列表，<dt></dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，<dd></dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)志對(duì)之間。看一下下邊的例子您就會(huì)明白了

例2創(chuàng)建一個(gè)普通列表

<html>

<head>

</head>

<boditext="blue">

<dl>

</dl>

</body>

</html>

此例在瀏覽器中的顯示如下:

中國(guó)城市

北京

上海

廣州

美國(guó)城市

華盛頓

芝加哥

紐約

5.<ol></ol><ul></ul><li></li>

<ol></ol>標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表；<ul></ul>標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的列表；<li></li>標(biāo)志對(duì)只能在<ol></ol>或<ul></ul>標(biāo)志對(duì)之間使用，此標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)列表項(xiàng)，若<li></li>放在<ol></ol>之間則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字，若在<ul></ul>之間則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn)。請(qǐng)看下邊的例子：

例3標(biāo)有數(shù)字或圓點(diǎn)的列表

<html>

<head>

</head>

<boditext="blue">

<ol>

</ol>

<ul>

</ul>

</body>

</html>

此例在瀏覽器中的顯示如下:

中國(guó)城市

北京

上海

廣州

美國(guó)城市

華盛頓

芝加哥

紐約

6.<div></div>

<div></div>標(biāo)志對(duì)用來(lái)排版大塊Html段落，也用于格式化表，此標(biāo)志對(duì)的用法與<p></p>標(biāo)志對(duì)非常相似，同樣有align對(duì)齊方式屬性，讀者可以自己試試看。

html標(biāo)簽的用法=======================================================================================

一、基本概念：

網(wǎng)頁(yè)、網(wǎng)站、瀏覽器、IE/NetScape

HTML超文本標(biāo)記語(yǔ)言，什么是超文本、什么是標(biāo)記語(yǔ)言。

HTML內(nèi)容怎樣顯示出來(lái)。

二、HTML語(yǔ)法：

三、<body>一些屬性：

什么是屬性：

text:設(shè)定整個(gè)網(wǎng)頁(yè)中文字的色彩

link:用于設(shè)定一般超鏈接文本的顯示色彩

alink:用于設(shè)定鼠標(biāo)移動(dòng)到超鏈接上并按下鼠標(biāo)是超文本的顯示色彩

vlink:設(shè)置訪問(wèn)過(guò)的超鏈接的色彩

background:設(shè)定背景圖片，可以是絕對(duì)路徑也可以是相對(duì)路徑。

bgcolor:用戶設(shè)定背景色，當(dāng)已設(shè)定background時(shí)這個(gè)屬性會(huì)失去作用

leftmargin:左邊距

topmargin:上邊距

四、注釋與特殊字符：

注釋的內(nèi)容不會(huì)被顯示出來(lái)

注釋不能被嵌套。

注冊(cè)符號(hào)

版權(quán)符號(hào)

"TM

空格

五、格式標(biāo)簽

<p></p>:用來(lái)創(chuàng)建一個(gè)段落,可以用align屬生來(lái)設(shè)置段落的對(duì)齊方式

<br/>:單標(biāo)記直接在>前加一個(gè)“/表示結(jié)束標(biāo)記，顯示一個(gè)換行

<center></center>:對(duì)之間的圖形或文本在水平方向居中顯示

<marquee></marquee>:移動(dòng)圖片或文本。direct屬性：內(nèi)容的移動(dòng)方向（left,right,down,up;behavior指定內(nèi)容的移動(dòng)行為（scroll,alternate,slid

<dl></dl><dt></dt><dd></dd>用來(lái)創(chuàng)建一個(gè)普通列表。

<ol></ol><ul></ul><li></li>:<ol></ol>創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表;<ul></ul>對(duì)創(chuàng)建的列表標(biāo)有一個(gè)圓點(diǎn);<li></li>只能在<ol></ol>或<ul></ul>之間使用，表示列表項(xiàng)

<pre></pre>:對(duì)文本進(jìn)行預(yù)格式處理

六、文本標(biāo)簽：

<h1></h1>......<h6></h6>:把文本以標(biāo)題方式顯示。

<b></b><i></i><u></u>:分別對(duì)應(yīng)粗體，斜體，下劃線

<sub></sub><sup></sup>:分別對(duì)應(yīng)下上標(biāo)的顯示

<cite></cite>:引用方式的字體，通常是斜體

<em></em>:顯示需要強(qiáng)調(diào)的文本，通常是斜體加粗

<strong></strong>:用來(lái)顯示加重文本，通常是加粗顯示

<font></font>:對(duì)字體、字號(hào)、顏色進(jìn)行改變。face屬性：字體;Size屬生：大小; Color屬生：色彩

七、圖像標(biāo)簽：

<img/>

src屬性：必不可少，用來(lái)設(shè)置圖像文件所在位置。

alt屬性：當(dāng)鼠標(biāo)移到圖像上顯示的提示文本，當(dāng)圖像無(wú)法顯示時(shí)，所顯示的代替文字

align屬性：設(shè)置圖像與周?chē)谋镜膶?duì)齊方式。top,bottom,left,right

border屬性：設(shè)置圖像的邊框?qū)挾?/p>

width和height設(shè)置圖像的長(zhǎng)寬高

<hr/>:HTML文檔中加入一條水平線。

size:線的粗細(xì)

color:線的色彩

width:線的長(zhǎng)度

noshade:陰影顯示

八、超鏈接標(biāo)簽：

通一資源定位符：URL;

如：http://www.sina.com

http所使用的協(xié)議;www.sina.net要訪問(wèn)的主機(jī)名;80端口號(hào)

<ahref=""></a>:把中間標(biāo)記的內(nèi)容作為超鏈接顯示，href內(nèi)容作為超連接點(diǎn)擊后轉(zhuǎn)向的頁(yè)面。

如：<ahref="http://www.sina.com">新浪網(wǎng)</a>

<ahref=http://www.jungjaehyung.com/uploadfile/2024/1012/20241012045509946.gif"></a>

href屬性是不可少的

target屬性：指明在瀏覽器的哪個(gè)窗口打開(kāi)新頁(yè)面。

<aname="">錨點(diǎn)標(biāo)記，同一網(wǎng)頁(yè)中設(shè)置多個(gè)錨點(diǎn)便于超鏈接的瀏覽。

如：<ahref="#標(biāo)記１">跳轉(zhuǎn)到第一個(gè)標(biāo)記上</a>

mailto:打開(kāi)電子郵件:

<ahref="mailto:ldc_5588@163.comsubject=hello&body=您好">聯(lián)系我</a>

九、<mapname=""></map>圖像地圖將一個(gè)圖像分成多個(gè)部分，各部分分別指向不同的鏈接。

<areashape="形狀"coords="坐標(biāo)"href="url">給圖像分塊

shape屬性可以是以下幾種形狀：

rect:矩形，此時(shí)的coord為矩形的左上角個(gè)右下角的坐標(biāo)

poly:多邊形，此時(shí)的coord為多邊形的各個(gè)頂點(diǎn)

circle:圓，此時(shí)coord為圓習(xí)坐標(biāo)及半徑

如：

<imgsrc="chinagif"usemap="mymap"/>

<mapname=mymap>

<areashape="rect"href="a.html"coords="140,20,280,60">

<areashape="poly"href="b.html"coords="100,100,180,80,200,400">

<areashape="circle"href="c.html"coords="10,100,60">

</map>

十、表格標(biāo)簽：<table></table><tr></tr><td></td>

這三個(gè)標(biāo)簽的層次結(jié)構(gòu)：

<table></table>定義一個(gè)表格的開(kāi)始和結(jié)束

<tr></tr>定義一行的開(kāi)始和結(jié)束

<td></td>定義一個(gè)單元格的開(kāi)始和結(jié)束

<table></table>屬性：

bgcolor:設(shè)置表格的背景色彩

border:設(shè)置表格的邊框的寬度

bordercolor:設(shè)置表格邊框色彩

bordercolorlight:設(shè)置表格邊框明亮部分的色彩

bordercolordark:設(shè)置表格邊框昏暗部分的色彩

cellspacing:設(shè)置單元格之間的間隔

cellpad設(shè)置單元格內(nèi)部的內(nèi)容與邊框的間隔

width:表格的寬度

height:表格的高度

align:整行單元格的內(nèi)容水平對(duì)齊方式left,center,right

valign:整行單元格的內(nèi)容豎直對(duì)齊方式topmiddle,bottom

bgcolor:設(shè)置這一行的色彩

width:單元格的寬度（大小）

height:單元格的高度

align:單元格內(nèi)部?jī)?nèi)容的水平對(duì)齊方式

valign:單元格內(nèi)部?jī)?nèi)容的豎直對(duì)齊方式

colspan:設(shè)置一個(gè)單元格跨占的列數(shù)

rowspan:設(shè)置一個(gè)單元格跨占的行數(shù)

nowrap:禁止單元格內(nèi)的內(nèi)容自動(dòng)換行

<th></th>與<td></td>類似只不過(guò)里面顯示的內(nèi)容是黑體居中的

十一、框架標(biāo)簽<frameset></frameset><frame></frame>

什么是框架：將一個(gè)窗口分割成多部分，每一部分顯示一個(gè)獨(dú)立的頁(yè)面。

框架只是分割窗口。

<frameset></frameset>定義一個(gè)框架集：

rows:將窗口豎直拆分時(shí)窗口的大小比例

cols:將窗口水平拆分窗口的大小比例

<frame></frame>定義一個(gè)具體的框架窗口：

src:要顯示網(wǎng)頁(yè)的ＵＲＬ

name:框架窗口的名子

taget:該框架中的超鏈接默認(rèn)的打開(kāi)窗口_blank,_parent,_self,_top

scrolling:否在框架邊上出現(xiàn)滾動(dòng)條yes,no,auto

noresize:禁止用戶拖動(dòng)分隔線來(lái)調(diào)整框架的大小,直接將該屬生放入就可以了

name:框架窗口的名子

src:框架窗口中所顯示的新的網(wǎng)頁(yè)

十二、表單標(biāo)簽：

什么時(shí)表單？

<form></form>:定義表單的開(kāi)始和結(jié)束位置<略講>

action:處理表單內(nèi)容的服務(wù)器程序的ＵＲＬ

method:提交給服務(wù)器處理表單信息的方式

get:將表單信息以ＵＲＬ參數(shù)的形式附在actionＵＲＬ后面

set:將表單信息以ＨＴＴＰ消息實(shí)體發(fā)送給ＷＥＢ服務(wù)器

target:設(shè)置服務(wù)器返回結(jié)果顯示的窗口

title:當(dāng)鼠標(biāo)放在表單上的時(shí)候以黃色的泡泡進(jìn)行提示

<inputtype="submit">定義一個(gè)提交按鈕

action:指定ＵＲＬ所指定的服務(wù)器程序

value:按鈕上的文字

<inputtype="reset">:定義一個(gè)重新填寫(xiě)的按鈕。

value:按鈕上的文字

<inputtype="text">:定義一個(gè)單行文本框

size:輸入?yún)^(qū)域的寬度，以字符個(gè)數(shù)為單位

value:文本框的內(nèi)容

maxlength:用戶能夠輸入的最大字符串長(zhǎng)度

readonly:屬性存在時(shí)，文本框可以獲得焦點(diǎn)，但用戶不能更改里面的內(nèi)容。

disable:屬性存在時(shí)，文本框不能獲得焦點(diǎn)，也不能更改里面的內(nèi)容。

<inputtype="checkbox">:定義一個(gè)復(fù)選框

name:復(fù)選框的名，同一組復(fù)選框用同一個(gè)名子

checked:該復(fù)選框是否被選中

value:指定復(fù)選框被選中時(shí)，這個(gè)復(fù)選框的后臺(tái)值

<inputtype="radio">:定義一個(gè)單選按鈕

name:單選按鈕的名，同一組單選按鈕用同一個(gè)名子

value:指定單選按鈕被選中時(shí)，這個(gè)單選按鈕的后臺(tái)值

<inputtype="hidden">表單上添加一個(gè)隱式的字段的元素，瀏覽器不會(huì)顯示這個(gè)字段

name:名子

value:值

當(dāng)表單提交的時(shí)候會(huì)以name=valu形式提交到服務(wù)器上去。

<inputtype="button">:表單上定義一個(gè)普通的按鈕，這個(gè)按鈕通常與某個(gè)腳本代碼下關(guān)聯(lián)

<inputtype="password">:表單上定義一個(gè)密碼輸入?yún)^(qū)域.

<inputtype="file">:用來(lái)從本機(jī)向服務(wù)器傳文件

<inputtype="image">:表單上創(chuàng)建一個(gè)圖像元素。

圖像的源文件由src屬性來(lái)指定，沒(méi)有valu屬性。

圖像元素在某些情況下可以代替submit按鈕來(lái)使用

單擊圖像元時(shí)就會(huì)將表單信息和單擊處的x,y值一起發(fā)送到服務(wù)器

<select></select>創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。

size:設(shè)置列表框中可見(jiàn)選項(xiàng)的數(shù)目。默認(rèn)值是１，這時(shí)顯示的下拉列表框。

mutipl屬性：這是一個(gè)不且賦值的屬性，定義列表框是否可以多選。

列表框中定義各項(xiàng)是用<option></option>來(lái)實(shí)現(xiàn)的

<option></option>為列表框中添加項(xiàng)目

value:項(xiàng)目的后臺(tái)值

selected:指定項(xiàng)目是否被選定

<textarea></textarea>創(chuàng)建一個(gè)可輸入多行文本的文本框

cols:文本框的列數(shù)

rows:文本框的列數(shù)

十三、分區(qū)標(biāo)簽：

<div></div>:區(qū)域標(biāo)簽，層

<span></span>:區(qū)域標(biāo)簽

十四、頭元素:

<base>標(biāo)簽：用于指定網(wǎng)頁(yè)中超鏈接的基準(zhǔn)地址。網(wǎng)頁(yè)中所有超鏈接的相對(duì)地址都以該地址為基準(zhǔn)地址。

該標(biāo)簽只能放在<head></head>標(biāo)簽之間。

如：<basehref="http://www.sina.com/image"target="_blank">

name屬性主要用于在網(wǎng)頁(yè)中加入一些關(guān)于網(wǎng)頁(yè)的描述信息，例如，網(wǎng)頁(yè)的關(guān)鍵字，網(wǎng)頁(yè)的描述信息等

http-equiv屬性主要用于在HTML文檔中模擬HTTP頭。

什么是HTTP頭？

通過(guò)訪問(wèn)網(wǎng)頁(yè)時(shí)，服務(wù)器除了返回網(wǎng)頁(yè)文件本身的內(nèi)容（也就是瀏覽器中用查看源文件能看到東西）之外，還在返回網(wǎng)頁(yè)文件內(nèi)容之前，傳送一部分被稱為HTTP頭的內(nèi)容給瀏覽器，這部分肉容是瀏覽器的查看源文件中看不到HTTP頭的內(nèi)容相當(dāng)于服務(wù)器發(fā)送給瀏覽器的一些暗號(hào)指令，通知瀏覽器查看該網(wǎng)頁(yè)時(shí)應(yīng)使用的字符編碼、否本地緩存、網(wǎng)頁(yè)的期時(shí)間、否間隔一定時(shí)間以后刷新頁(yè)面或跳到其它頁(yè)面等。

name屬性的設(shè)置：

Keywords:網(wǎng)頁(yè)的關(guān)鍵字，以便于在搜索引擎中進(jìn)行收集信息。

<metaname="keywords"content="軟件工程師培訓(xùn),清華IT,華育國(guó)際">

Descript網(wǎng)頁(yè)描述信，以便于搜索。

Gener用于編輯此頁(yè)所用的工具名，content中填入所用的網(wǎng)頁(yè)編輯軟件。

Author用于說(shuō)明網(wǎng)頁(yè)的作者，content中填入作者的姓名。

http-equiv屬性設(shè)置：

Content-Type:用于說(shuō)明網(wǎng)頁(yè)內(nèi)容的類型以及文本內(nèi)容所使用的字符集編碼。

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

Refresh:告訴瀏覽器定時(shí)自動(dòng)刷新網(wǎng)頁(yè)

<metahttp-equiv="Content-Type"content="1;url=http://www.sina.com.cn">

通知瀏覽器過(guò)一秒后跳轉(zhuǎn)到新浪網(wǎng)上去。

Expires:用于設(shè)定網(wǎng)頁(yè)的期時(shí)間。為了提高效率，瀏覽器可以被設(shè)置成緩存以前訪問(wèn)的頁(yè)面，當(dāng)再次訪問(wèn)該頁(yè)面時(shí)，瀏覽器不會(huì)再去服務(wù)器上訪問(wèn)，而是直接在本地緩存中讀到如果將其Content設(shè)為0則禁止瀏覽器使用緩存頁(yè)面。

<metahttp_equiv="Expires"content=""Mon,12,May,200700:00:00GMT>

Windows-Target:強(qiáng)制頁(yè)面在某個(gè)窗口顯示。例如要防止別人把你網(wǎng)頁(yè)作為frame頁(yè)面調(diào)用：

流行的 PLC 編程語(yǔ)言是什么？

世界各地的工程師都在爭(zhēng)論這個(gè)問(wèn)題。普遍認(rèn)為，PLC 編程最常用的語(yǔ)言是梯形邏輯。這是因?yàn)樗浅ｌ`活、易于學(xué)習(xí)，而且使用過(guò)相同架構(gòu)原理圖的電工很容易理解它。

然而，在過(guò)去十年中，更年輕的勞動(dòng)力進(jìn)入了制造業(yè)。這些工程師和技術(shù)人員主要學(xué)習(xí) Java、Python 和 Javascript 等現(xiàn)代語(yǔ)言。這些語(yǔ)言與結(jié)構(gòu)化文本 [ST] 更相似，因此促進(jìn)了其使用。

考慮相關(guān)行業(yè)也很重要。化學(xué)工藝通常使用管道和儀表圖 (P&ID) 進(jìn)行設(shè)計(jì)。這些特定示意圖可通過(guò)使用功能塊圖 [FBD] 輕松復(fù)制。

梯形邏輯 PLC 編程

在可編程邏輯控制器流行之前，大多數(shù)制造工廠都采用繼電器控制。繼電器根據(jù)通過(guò)設(shè)備物理接線實(shí)現(xiàn)的簡(jiǎn)單邏輯來(lái)驅(qū)動(dòng)負(fù)載。這些設(shè)備的接線在電氣圖紙中指定，這些圖紙假定布局類似于梯子。隨著最基本的 PLC 被引入該領(lǐng)域，梯形邏輯 PLC 編程旨在模仿基于繼電器的電路布局。換句話說(shuō)，梯形邏輯是最早的PLC 編程語(yǔ)言之一，由于其簡(jiǎn)單性，至今仍在使用。

?自誕生以來(lái)，梯形邏輯已發(fā)生了重大變化。但是，操作的基本原理保持不變。梯形邏輯PLC 編程按順序評(píng)估梯形圖的每個(gè)梯級(jí)，評(píng)估條件指令，如果結(jié)果評(píng)估為“TRUE”，則執(zhí)行輸出指令。

梯形邏輯 PLC 編程的優(yōu)點(diǎn)

易于實(shí)施和故障排除：梯形邏輯是一種可視化語(yǔ)言，可為大多數(shù)指令提供狀態(tài)確認(rèn)。換句話說(shuō)，即使對(duì)特定流程知之甚少的人也可以輕松瀏覽程序并了解邏輯。
模塊化設(shè)計(jì)：梯形邏輯可通過(guò)邏輯的增加或減少輕松修改。每個(gè)梯級(jí)都是一個(gè)單獨(dú)的條件，可以根據(jù)需要?jiǎng)h除或添加。
彈性和一致性：Ladder Logic 允許用戶實(shí)現(xiàn)許多功能。但是，該語(yǔ)言高度標(biāo)準(zhǔn)化，無(wú)法提供充分的靈活性，因此需要在不同實(shí)現(xiàn)之間保持代碼的一致性。

梯形邏輯的缺點(diǎn)

學(xué)習(xí)難度高：Ladder Logic 是一種簡(jiǎn)單的語(yǔ)言，但對(duì)于具有 C、C++、Java 或 Python 背景的人來(lái)說(shuō)，它并不是非常直觀。話雖如此，但對(duì)于電氣工程師和具有匯編編程基礎(chǔ)知識(shí)的人來(lái)說(shuō)，它可能更容易掌握。
部署緩慢：由于梯形邏輯的可視化特性，程序員需要更長(zhǎng)的時(shí)間來(lái)創(chuàng)建他們所設(shè)想的邏輯。與其他現(xiàn)代編程語(yǔ)言相比，需要拖放元素，這會(huì)減慢開(kāi)發(fā)過(guò)程。
對(duì)于復(fù)雜應(yīng)用來(lái)說(shuō)不夠直觀：梯形邏輯在順序布爾任務(wù)方面表現(xiàn)優(yōu)異。然而，當(dāng)涉及到涉及 PID、流量控制、模擬傳感器和反饋回路的現(xiàn)代控制理論時(shí)，它并不總是易于實(shí)施和解讀。

結(jié)構(gòu)化文本 PLC 編程

結(jié)構(gòu)化文本是一種與 C 或匯編語(yǔ)言非常相似的PLC 編程語(yǔ)言。用戶輸入按順序執(zhí)行的代碼行，評(píng)估特定函數(shù)、布爾檢查并激活 PLC 的適當(dāng)輸出。結(jié)構(gòu)化文本為具有 C、C++、Java 或 Python 等傳統(tǒng)編程語(yǔ)言背景的用戶提供了進(jìn)入 PLC 的簡(jiǎn)單過(guò)渡。此外，它可以在文本處理器中輕松操作，因此無(wú)需硬件即可快速實(shí)現(xiàn)。

結(jié)構(gòu)化文本 PLC 編程的優(yōu)點(diǎn)

與其他編程語(yǔ)言一樣直觀：如上所述，結(jié)構(gòu)化文本對(duì)于那些希望從軟件工程背景過(guò)渡的人來(lái)說(shuō)很容易學(xué)習(xí)。它具有與 C 或 Java 中相同的結(jié)構(gòu)、編程范例和功能。
高復(fù)雜度：結(jié)構(gòu)化文本比其他語(yǔ)言具有更大的靈活性，因此掌握該語(yǔ)言的人可以更輕松地實(shí)現(xiàn)高級(jí)功能。
可移植性|：結(jié)構(gòu)化文本在大多數(shù) PLC 系統(tǒng)中都是標(biāo)準(zhǔn)化的，因此很容易在平臺(tái)之間遷移。您會(huì)發(fā)現(xiàn)不同平臺(tái)之間其他語(yǔ)言存在顯著差異，但結(jié)構(gòu)化文本可以在硬件和軟件平臺(tái)上實(shí)現(xiàn)。

結(jié)構(gòu)化文本的缺點(diǎn)

難以排除故障| 與梯形邏輯編程相比，結(jié)構(gòu)化文本從故障排除的角度來(lái)看要復(fù)雜得多。沒(méi)有視覺(jué)隊(duì)列，視覺(jué)輔助較少，并且一行上通常有更多代碼。不熟悉這種語(yǔ)言的人很難弄清楚流程。
易出錯(cuò)| 結(jié)構(gòu)化文本為用戶提供了更大的靈活性。然而，這種靈活性是以標(biāo)準(zhǔn)化為代價(jià)的。用戶必須使用軟件工程最佳實(shí)踐來(lái)創(chuàng)建安全后備并捕獲軟件的任何潛在故障。

功能塊圖 PLC 編程語(yǔ)言

功能塊圖 (FBD) 是一種專門(mén)為化學(xué)過(guò)程開(kāi)發(fā)的編程語(yǔ)言。它允許用戶創(chuàng)建過(guò)程的可視化表示和流程，并在指令之間進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換。可視化編輯器用戶友好、直觀，并創(chuàng)建了一種自然的方式來(lái)實(shí)現(xiàn)特定流程。

我們?cè)?PLC 程序中使用功能塊圖的最常見(jiàn)應(yīng)用是建立 PID 控制器。FBD 的可視化功能使 PID 易于在現(xiàn)場(chǎng)實(shí)施、可視化、調(diào)整和故障排除。

功能塊圖 PLC 編程的優(yōu)點(diǎn)

靈活的可視化編輯器：功能塊圖編程編輯器非常用戶友好，并提供了創(chuàng)建任何布局的簡(jiǎn)單方法。
適合復(fù)雜的編程結(jié)構(gòu)：在梯形邏輯中，用戶必須使用多個(gè)梯級(jí)才能在單個(gè) FBD 頁(yè)面上完成可能完成的任務(wù)。這些指令可以直接帶入實(shí)現(xiàn) PID 循環(huán)、運(yùn)動(dòng)控制和附加指令 (AOI) 的復(fù)雜 PLC 指令中。
用戶友好：FBD 的可視化編輯器對(duì)于大多數(shù)用戶來(lái)說(shuō)都是自然而然的事情。可以通過(guò)拖放方法重新創(chuàng)建流程布局，幾乎不需要猜測(cè)。

功能塊圖 PLC 編程的缺點(diǎn)

難以標(biāo)準(zhǔn)化：由于布局的靈活性，標(biāo)準(zhǔn)化用 FBD 編寫(xiě)的程序具有挑戰(zhàn)性。每個(gè) PLC 程序員的方法都與其他人不同。落后的人很難理解信息流。?
規(guī)模化帶來(lái)的麻煩：FBD 在流程特定領(lǐng)域的小型實(shí)施方面表現(xiàn)出色。然而，隨著程序變得復(fù)雜，很容易迷失在所有表格中。

順序功能圖 PLC 編程語(yǔ)言

顧名思義，順序功能圖（SFC）在后續(xù)流程中非常有用。對(duì)于不熟悉此概念的人來(lái)說(shuō)，一個(gè)例子是從原材料到成品的化學(xué)轉(zhuǎn)化。讓我們以一個(gè)簡(jiǎn)單的釀造過(guò)程為例。

想象一下一個(gè)大型啤酒釀造廠，里面有無(wú)數(shù)的罐子、閥門(mén)、壓力傳感器、加熱元件和包裝部分。當(dāng)操作員開(kāi)始生產(chǎn)新一批啤酒時(shí)，該過(guò)程將按照以下步驟進(jìn)行。請(qǐng)注意，這些步驟已簡(jiǎn)化。

步驟 1 - 驗(yàn)證系統(tǒng)是否準(zhǔn)備就緒。所有適當(dāng)?shù)某煞质欠窨捎茫績(jī)?chǔ)罐是否空了？閥門(mén)是否處于正確狀態(tài)？如果所有檢查的答案均有效，則繼續(xù)。如果不是，則中止。

步驟 2 - 啟動(dòng)罐體填充程序，可能需要多種成分（水、糖、鹽、酵母等）。驗(yàn)證狀態(tài)并在罐體裝滿后繼續(xù)。

步驟 3 - 開(kāi)始沖泡過(guò)程。升高溫度并維持一段時(shí)間。監(jiān)測(cè)罐壓并做出相應(yīng)反應(yīng)。如有必要，添加配料。沖泡完成后繼續(xù)下一步。

步驟 4 - 開(kāi)始轉(zhuǎn)移到儲(chǔ)罐。我們的批次已準(zhǔn)備就緒；確認(rèn)所有適當(dāng)?shù)拈y門(mén)都已設(shè)置在正確的位置，儲(chǔ)罐已空，然后開(kāi)始轉(zhuǎn)移過(guò)程。

步驟 5——將批次轉(zhuǎn)移至裝瓶設(shè)施。

從上面的示例大綱可以看出，流程步驟按順序執(zhí)行，具有定義的啟動(dòng)條件和流程，就像流程在生產(chǎn)設(shè)施中運(yùn)行一樣。在梯形邏輯中，此過(guò)程可以通過(guò) SQI/SQO 指令實(shí)現(xiàn)。但是，更好的方法是利用 SFC。

順序功能圖 PLC 編程的優(yōu)點(diǎn)

模擬大多數(shù)化學(xué)工藝的工藝流程 | 配料是一種常見(jiàn)的化學(xué)工藝方法，它采用一定數(shù)量的原料并將其轉(zhuǎn)化為最終產(chǎn)品。SFC 在這些應(yīng)用中大放異彩。
結(jié)合 ST | 大多數(shù) SFC 編輯器允許在特定情況下使用結(jié)構(gòu)化文本來(lái)創(chuàng)建高級(jí)邏輯流。

順序功能圖的缺點(diǎn)

不適用于大多數(shù)應(yīng)用 | 將順序功能圖應(yīng)用于非順序流程是一項(xiàng)挑戰(zhàn)。換句話說(shuō)，它的用例數(shù)量有限。?
并行流程難以實(shí)施和排除故障 | 您可以通過(guò) SFC 實(shí)施無(wú)限數(shù)量的流程。但是，隨著流程路徑分成多個(gè)流程，實(shí)施單獨(dú)的流程路徑以形成穩(wěn)健的序列變得困難。

指令表 PLC 編程語(yǔ)言

由于指令列表和結(jié)構(gòu)化文本的編輯器相似，因此它們經(jīng)常被混淆。這兩種 PLC 編程語(yǔ)言通常出現(xiàn)在不同的平臺(tái)上，因?yàn)樗鼈兊牧鞒滔嗨啤?/p>

就程序流程而言，每行都指定指令以及執(zhí)行的條件和結(jié)果。在許多方面，指令列表比結(jié)構(gòu)化文本更接近于您實(shí)現(xiàn)梯形邏輯程序的方式。但是，這兩種語(yǔ)言都能夠創(chuàng)建相同的流程。

指令表 PLC 編程的優(yōu)點(diǎn)

高度標(biāo)準(zhǔn)化：指令列表遵循嚴(yán)格的結(jié)構(gòu)，要求用戶明確創(chuàng)建變量、指定條件并列出每條指令。程序?qū)崿F(xiàn)之間幾乎沒(méi)有差異，因此代碼易于理解。
以指令為中心：顧名思義，指令比數(shù)據(jù)流更重要。這種編程風(fēng)格使程序中數(shù)據(jù)的處理方式更加清晰。

指令列表的缺點(diǎn)

大多數(shù) PLC 平臺(tái)上都不可用：如上所述，指令列表不是一種流行的編程方法，因?yàn)樗鼈儗?duì)大多數(shù)程序員來(lái)說(shuō)并不自然。它們更接近于人們?cè)趨R編語(yǔ)言中看到的內(nèi)容，而不是市場(chǎng)上任何其他編程語(yǔ)言。

結(jié)論

五種最流行的 PLC 編程語(yǔ)言是梯形邏輯、結(jié)構(gòu)化文本、功能塊圖、順序流程圖和指令列表。這些編程方法在大多數(shù)平臺(tái)上都可用。但是，某些 PLC 會(huì)限制用戶使用某些語(yǔ)言，除非用戶支付額外費(fèi)用。

你使用的是哪種編程語(yǔ)言呢？評(píng)論區(qū)留言！

篇文章適合誰(shuí)

這邊文章適合對(duì)于JavaScript有興趣也有一點(diǎn)基礎(chǔ)的開(kāi)發(fā)者，以下除了介紹何謂JavaScript外，本篇將運(yùn)用簡(jiǎn)單的范例程式，讓大家可以初步認(rèn)識(shí)JavaScript。

什么是JavaScript?

如果您想讓網(wǎng)頁(yè)動(dòng)起來(lái)，除了使用各種程式語(yǔ)言外，JavaScript 是最適合使用的語(yǔ)言之一。早期的網(wǎng)頁(yè)都是用HTML 語(yǔ)法，制作出一個(gè)個(gè)靜態(tài)網(wǎng)頁(yè)，向用戶顯示一些固定不變的資料。若想要讓網(wǎng)頁(yè)有更多的變化并且更加精致，您就必須加上某些程式語(yǔ)言，如Script 語(yǔ)言。

Script language 是屬于使用前不需先編釋譯的程式語(yǔ)言，很適合網(wǎng)路學(xué)習(xí)，他將程式的文字直接放在網(wǎng)頁(yè)內(nèi)。JavaScript 前名是Live Script，是Netscape 的產(chǎn)品。后因Netscape 支援JAVA(Sun Microsystems) 的產(chǎn)品， LiveScript 也就改名為JavaScript。最后提醒一個(gè)很多人搞錯(cuò)的觀念：Java 和JavaScript 程式是完全不同的兩件事。

編寫(xiě)基本的JavaScript

JavaScript最常使用在網(wǎng)頁(yè)上，所以基本上所有瀏覽器都可以用來(lái)執(zhí)行JavaScript程式，我們簡(jiǎn)單的建立一個(gè)網(wǎng)頁(yè)，例如hello.html，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>Hello World!</title>
    <script>
      document.write('Hello world!');
    </script>
  </head>
  <body>
  </body>
</html>

document.write表示寫(xiě)入資料到文件中(因?yàn)楫?dāng)前文件尚未關(guān)閉，所以會(huì)寫(xiě)到文件未端，而瀏覽器會(huì)自動(dòng)寫(xiě)到<body>尾端，但如果<body>未建立，則會(huì)在建立后跑到<body>的開(kāi)始處)，接著利用瀏覽器開(kāi)啟網(wǎng)頁(yè)檔，就可以看到程式的結(jié)果。

在HTML中加入JavaScript

如前面的范例所示，在HTML中直接使用<script>…</script>的標(biāo)簽來(lái)表示嵌入一段JavaScript程式，而嵌入的位置可以在<head>和<body>之中的任意位置(不建議放在<head>最前面，因?yàn)?lt;head>第一個(gè)節(jié)點(diǎn)通常為編碼宣告)。

<html> 
<body> 
<script type="text/javascript"> 
var x=6, y=8; 
var s="Hello! " 

t=s + x; 
z=x * y; 

document.write("< pre>x="+x+" \n y="+y+" \n s="+s+" \n t="+t+" \n z="+z+"</pre>"); 
</script > 
</body> 
</html>

結(jié)果：

x=6 
y=8 
s=Hello! 
t=Hello! 6 
z=48

另一種方式是將JavaScript程式獨(dú)立寫(xiě)成別的檔案，不直接和HTML檔案寫(xiě)在一起，JavaScript的檔案副檔名為js，例如我們建立一個(gè)hello.js檔，里面寫(xiě)入：

document.write('Hello world!');

然后HTML檔案則改為：

<!DOCTYPE html> 
  <html> 
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <meta charset="utf-8">  
  <title>Hello World!</title>   
  <script src="hello.js"></script>  
  </head>  
     <body>  
    </body>
</html>

如上所示，在<script>中使用src的屬性指出外部js的位置

注解

注解的部份不會(huì)執(zhí)行，是給人看的，JavaScript中有兩種注解方式：

1. // 單行注解：兩個(gè)斜線后面的部份將不會(huì)處理。

2. /* … */ 多行注解：注解中間的部份將不會(huì)處理。

alert(“注解一”); //單行注解alert(“注解二”); /*多行注解

我們可以利用//* … //*/的寫(xiě)法來(lái)作為區(qū)塊注解的開(kāi)關(guān)，藉由刪除/加入開(kāi)頭的斜線作為開(kāi)啟或關(guān)閉區(qū)塊

alert("不會(huì)影響到");//*區(qū)塊注解開(kāi)關(guān)if ($confition) {alert("要注解的區(qū)塊";}//*/alert("不會(huì)影響到");

分號(hào)結(jié)尾

JavaScript如一般程式語(yǔ)言，每段程式結(jié)尾都是以分號(hào)表示，但JavaScript能夠自動(dòng)幫你在未加上分號(hào)的結(jié)尾加上分號(hào)，例如：

alert('Hello')alert('World');

第一行沒(méi)加上分號(hào)并不會(huì)造成解析錯(cuò)誤，JavaScript容許這樣的錯(cuò)誤發(fā)生。然而省略分號(hào)并不是一件正確的寫(xiě)作習(xí)慣，因?yàn)橛袝r(shí)候JavaScript會(huì)誤解你意思而造成程式錯(cuò)誤，例如：

var func=function() {
return 42;
} // 省略分號(hào)
(function() {
// ...
})();

原本的意思是，建立一個(gè)函式變數(shù)，接著在Clousre中執(zhí)行部分程式，但是瀏覽器以為你是要這樣：

var func=function() {return 42;} ( function() {} ) ();// 1 2 3// 1. 建立函式function() {return 42;}// 2. 將function() {} 作為參數(shù)代入1的函式執(zhí)行// 3. 將回傳的結(jié)果(42)作為函式執(zhí)行

然而42是數(shù)字，無(wú)法執(zhí)行造成錯(cuò)誤。

也因?yàn)檫@個(gè)特性，有時(shí)候如果在不正確的地方斷行，也會(huì)造成不如預(yù)期的結(jié)果，例如：

returntrue;

原本是要回傳true，卻被當(dāng)成：

return;true;

另一個(gè)例子

breakloop;

原本是要跳出loop這個(gè)回圈，卻被當(dāng)成：

break;loop;

只跳出當(dāng)前的回圈。

基本語(yǔ)法范例

運(yùn)算式
分枝
回圈
函數(shù)
陣列

運(yùn)算式范例

<html> 
<body> 
<script type="text/javascript"> 
var x=6, y=8; 
var s="Hello! " 

t=s + x; 
z=x * y; 

document.write("< pre>x="+x+" \n y="+y+" \n s="+s+" \n t="+t+" \n z="+z+"</pre>"); 
</script > 
</body> 
</html>

執(zhí)行結(jié)果

x=6 
y=8 
s=Hello! 
t=Hello! 6 
z=48

分枝范例

<html> 
<body> 
<script type="text/javascript"> 
var score=70; 
if (score >=60) 
  document.write("及格"); 
else 
  document.write("不及格"); 
</ script> 
</body> 
</html>

執(zhí)行結(jié)果

及格

回圈范例

<html> 
<body> 
<script type="text/javascript"> 
for (i=1;i<=10;i++) { 
  if (i==3) continue; 
  if (i==8) break; 
  document. write("i="+i+"<BR/>"); 
} 
</script> 
</body> 
</html>

執(zhí)行結(jié)果

i=1 
i=2 
i=4 
i=5 
i=6 
i=7

函數(shù)范例

<html> 
<body> 

<script type="text/javascript"> 
var add=function(a,b) { //第一種寫(xiě)法，將匿名函數(shù)指定給變數(shù)。
  return a+b; 
} 

function sub(a,b) { //第二種寫(xiě)法，直接宣告函數(shù)，該函式是一個(gè)函數(shù)物件，
  return ab; 
} 

document.write("add(3,5)=" +add(3,5)+" sub(7,2)="+sub(7,2)); 
</script> 

</body> 
</html>

執(zhí)行結(jié)果

add(3,5)=8 sub(7,2)=5

陣列范例

<html> 
<body> 
<script type="text/javascript"> 
var x; 
var friends=new Array(); 
friends[0]="John"; 
friends[1]="Mary"; 
friends[2]="George"; 
for (p in friends) { 
  document.write(p + ":"+ friends[p] + "<br />"); 
} 
</script> 
</body> 
</html>

執(zhí)行結(jié)果

0:John 
1:Mary 
2:George

JavaScript Event

事件流：描述的是從頁(yè)面中接受事件的順序，IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。

事件冒泡：事件冒泡指的是「從啟動(dòng)事件的元素節(jié)點(diǎn)開(kāi)始，逐層往上傳遞」，直到整個(gè)網(wǎng)頁(yè)的根節(jié)點(diǎn)，也就是document。

舉例一個(gè)HTML如下：

<!DOCTYPE html> 
<html> 
<head> 
  <title>TITLE</title> 
</head> 
<body> 

  <div>CLICK</div> 

</body> 
</html>

假設(shè)我們點(diǎn)擊(click) 了<div>CLICK</div> 元素，那么在「事件冒泡」的機(jī)制下，觸發(fā)事件的順序會(huì)是：

1.<div>CLICK</div>

2.<body>

3.<html>

4.document

像這樣click 事件逐層向上依序被觸發(fā)，就是「事件冒泡」機(jī)制。

事件捕獲：剛剛說(shuō)過(guò)「事件冒泡」機(jī)制是由下往上來(lái)傳遞，那么「事件捕獲」(Event Capturing) 機(jī)制則正好相反。

<!DOCTYPE html> 
<html> 
<head> 
  <title>TITLE</title> 
</head> 
<body> 

  <div>CLICK</div> 

</body> 
</html>

假設(shè)我們點(diǎn)擊(click) 了<div>CLICK</div> 元素，那么在「事件捕獲」的機(jī)制下，觸發(fā)事件的順序會(huì)是：

1.document

2.<html>

3.<body>

4.<div>CLICK</div>

像這樣click 事件由上往下依序被觸發(fā)，就是「事件捕獲」機(jī)制。

JavaScript氣泡事件

首先，得先了解一個(gè)事件發(fā)生時(shí)，都會(huì)有一個(gè)事件源，因?yàn)槭虑椴粫?huì)憑空發(fā)生。當(dāng)事件發(fā)生后，因?yàn)槭录幢旧頉](méi)有處理事件的能力，所以事件會(huì)開(kāi)始傳播。舉例來(lái)說(shuō)：當(dāng)我點(diǎn)擊一個(gè)按鈕時(shí)，就會(huì)產(chǎn)生一個(gè)click事件，但按鈕本身無(wú)法處理這個(gè)事件，所以事件必須傳播出去，從而找到能處理這件事的函數(shù)，當(dāng)找到了之后我們就會(huì)說(shuō)這個(gè)函數(shù)捕捉到了這個(gè)事件。

那么一個(gè)函數(shù)是如何捕捉事件的呢，其實(shí)就像是一杯水,但是這杯水是分層次的,最底下是當(dāng)前觸發(fā)事件的物件。然后越往上范圍越大，最頂層是window，倒數(shù)第二層是document。氣泡在上浮過(guò)程中會(huì)判斷當(dāng)前所到達(dá)的層有沒(méi)有相應(yīng)的函數(shù)或是處理方法。有話就執(zhí)行相應(yīng)的處理，沒(méi)有的話就繼續(xù)向上起泡，直到到達(dá)最頂層的window視窗層。我們可以在任何一層做相應(yīng)的處理以阻止事件繼續(xù)起泡，方法就是呼叫事件物件的阻止起泡的方法。以下是事件起泡的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http ://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>sun</title > 
<script src="js/jquery-1.4.3.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
    $(' .one').click(function(e){ 
        alert('one'); 
    }); 
    
    $('.two').click(function(e){ 
        alert('two');                                                  
    });                                                                           

    $('.three').click(function(e){
        alert('three'); 
       //阻止起泡取消下面的注釋
        //e.stopPropagation(); 

    }); 

});   
</script> 
</head> 
<body> 
<div class="one" style="width:200px;height:200px;background:green;"> 
one 
    <div class="two" style="width:150px;height:150px;background:yellow;"> 
    two 
        <div class="three"> 
            three 
        </div> 
    </div> 
</div> 

</body> 
</html>

一個(gè)事件起泡對(duì)應(yīng)觸發(fā)的是上層的同一事件，單擊two的時(shí)候就會(huì)起泡觸發(fā)one單擊的事件，單擊tree時(shí),會(huì)同時(shí)觸發(fā)two,然后觸發(fā)one。
如果在click事件中，在你要處理的事件之前加上e.preventDefault()；那么就取消了行為(通俗理解：相當(dāng)于做了個(gè)return操作)，不執(zhí)行之后的語(yǔ)句了。
e.stopPropagation()只要在click事件中，就不會(huì)觸發(fā)上層click事件。

結(jié)語(yǔ)

希望這篇文章能夠幫助你了解基本的JavaScript，如果想看更多內(nèi)容，可以到快樂(lè)學(xué)程式的官網(wǎng)逛逛，相信可以在你學(xué)程式的路上有所幫助。

在線咨詢

上一篇：JavaScript當(dāng)我們無(wú)法從故障中恢復(fù)
下一篇：html5的一些基礎(chǔ)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML標(biāo)簽以及各個(gè)標(biāo)簽屬性大全（網(wǎng)頁(yè)制作必備）

流行的 PLC 編程語(yǔ)言是什么？

梯形邏輯 PLC 編程

梯形邏輯 PLC 編程的優(yōu)點(diǎn)

梯形邏輯的缺點(diǎn)

結(jié)構(gòu)化文本 PLC 編程

結(jié)構(gòu)化文本 PLC 編程的優(yōu)點(diǎn)

結(jié)構(gòu)化文本的缺點(diǎn)

功能塊圖 PLC 編程語(yǔ)言

功能塊圖 PLC 編程的優(yōu)點(diǎn)

功能塊圖 PLC 編程的缺點(diǎn)

順序功能圖 PLC 編程語(yǔ)言

順序功能圖 PLC 編程的優(yōu)點(diǎn)

順序功能圖的缺點(diǎn)

指令表 PLC 編程語(yǔ)言

指令表 PLC 編程的優(yōu)點(diǎn)

指令列表的缺點(diǎn)

結(jié)論

篇文章適合誰(shuí)

什么是JavaScript?

編寫(xiě)基本的JavaScript

在HTML中加入JavaScript

注解

分號(hào)結(jié)尾

基本語(yǔ)法范例

運(yùn)算式范例

JavaScript Event

JavaScript氣泡事件

結(jié)語(yǔ)

您的項(xiàng)目需求