<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 以上 3 個 meta 標簽 *必須* 放在 head 的最前面；其他任何的 head 內(nèi)容必須在這些標簽的 *后面* --><title>頁面標題</title>

<!-- 文檔標題 --><title>頁面標題</title><!-- 基本 URL 作用于文檔中所包含的所有相對 URL --><base ><!-- 外部的 CSS --><link rel="stylesheet" href="styles.css"><!-- 文檔內(nèi)的 CSS --><style> /* ... */</style><!-- JavaScript --><script src="script.js"></script>
<noscript><!--無 JS 時的替代--></noscript>

<!-- 設置文檔的字符編碼 --><meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 以上 3 個 meta 標簽 *必須* 放在 head 的最前面；其他任何的 head 內(nèi)容必須在這些標簽的 *后面* --><!-- 允許控制資源的過度加載 --><meta http-equiv="Content-Security-Policy" content="default-src 'self'"><!-- 盡早地放置在文檔中 --><!-- 僅應用于該標簽下的內(nèi)容 --><!-- Web 應用的名稱（僅當網(wǎng)站被用作為一個應用時才使用）--><meta name="application-name" content="應用名稱"><!-- 針對頁面的簡短描述（限制 150 字符）--><!-- 在*某些*情況下，該描述是被用作搜索結果展示片段的一部分 --><meta name="description" content="一個頁面描述"><!-- 控制搜索引擎的抓取和索引行為 --><meta name="robots" content="index,follow"><!-- 所有搜索引擎 --><meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 --><!-- 告訴 Google 不顯示網(wǎng)站鏈接的搜索框 --><meta name="google" content="nositelinkssearchbox"><!-- 告訴 Google 不提供此頁面的翻譯 --><meta name="google" content="notranslate"><!-- 驗證 Google 搜索控制臺的所有權 --><meta name="google-site-verification" content="verification_token"><!-- 驗證 Yandex 網(wǎng)站管理員的所有權 --><meta name="yandex-verification" content="verification_token"><!-- 驗證 Bing 網(wǎng)站管理員中心的所有權 --><meta name="msvalidate.01" content="verification_token"><!-- 驗證 Alexa 控制臺的所有權 --><meta name="alexaVerifyID" content="verification_token"><!-- 驗證 Pinterest 控制臺的所有權 --><meta name="p:domain_verify" content="code from pinterest"><!-- 驗證 Norton 安全站點的所有權 --><meta name="norton-safeweb-site-verification" content="norton code"><!-- 用來命名軟件或用于構建網(wǎng)頁（如 - WordPress、Dreamweaver）--><meta name="generator" content="program"><!-- 關于你的網(wǎng)站主題的簡短描述 --><meta name="subject" content="你的網(wǎng)站主題"><!-- 基于網(wǎng)站內(nèi)容給出一般的年齡分級 --><meta name="rating" content="General"><!-- 允許控制 referrer 信息如何傳遞 --><meta name="referrer" content="no-referrer"><!-- 禁用自動檢測和格式化可能的電話號碼 --><meta name="format-detection" content="telephone=no"><!-- 通過設置為 “off” 完全退出 DNS 預取 --><meta http-equiv="x-dns-prefetch-control" content="off"><!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 --><meta http-equiv="set-cookie" content="name=value; expires=date; path=url"><!-- 指定要顯示在一個特定框架中的頁面 --><meta http-equiv="Window-Target" content="_value"><!-- 地理標簽 --><meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" --><meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->

<!-- 表明一個 CSS 樣式表 --><link rel="stylesheet" ><!-- 有助于防止出現(xiàn)內(nèi)容重復的問題 --><link rel="canonical" ><!-- 之前用于包含 icon 鏈接，但已被廢棄并不再使用 --><link rel="shortlink" ><!-- 鏈接到當前文檔的一個 AMP HTML 版本 --><link rel="amphtml" ><!-- 鏈接到一個指定 Web 應用程序“安裝”證書的 JSON 文件 --><link rel="manifest" href="manifest.json"><!-- 鏈接到文檔的作者 --><link rel="author" href="humans.txt"><!-- 指向一個適用于鏈接內(nèi)容的版權申明 --><link rel="license" href="copyright.html"><!-- 給出可能的你的另一種語言的文檔位置參考 --><link rel="alternate"  hreflang="es"><!-- 提供了關于作者或其他人的信息 --><link rel="me"  type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125"><!-- 鏈接到一個描述歷史記錄、文檔或其他具有歷史意義的材料的集合的文檔。 --><link rel="archives" ><!-- 鏈接到層次結構中的頂級資源 --><link rel="index" ><!-- 給出一個自我參考 - 當文檔有多個可能的參考時非常有用 --><link rel="self" type="application/atom+xml" ><!-- 分別是在一系列文件中的第一個、下一個、上一個和最后一個 --><link rel="first" >
<link rel="next" >
<link rel="prev" >
<link rel="last" ><!-- 當使用第三方服務來維護 blog 時使用 --><link rel="EditURI"  type="application/rsd+xml" title="RSD"><!-- 當另一個 WordPress 博客鏈接到你的 WordPress 博客或文章時形成一個自動化的評論 --><link rel="pingback" ><!-- 當你在自己的頁面上鏈接到一個 url 時通知它 --><link rel="webmention" ><!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 --><link rel="import" href="/path/to/component.html"><!-- 打開搜索 --><link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"><!-- Feeds --><link rel="alternate"  type="application/rss+xml" title="RSS">
<link rel="alternate"  type="application/atom+xml" title="Atom 0.3"><!-- 預取，預載，預瀏覽 --><link rel="dns-prefetch" >
<link rel="preconnect" >
<link rel="prefetch" >
<link rel="prerender" >
<link rel="preload" href="image.png" as="image"><!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

<!-- 針對 IE 10 及以下版本 --><!-- 如果將 `favicon.ico` 放在根目錄下，則無需標簽 --><!-- 對于 IE 11、Chrome、Firefox、Safari 和 Opera --><link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"><!-- 更多信息: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0"><!-- 你的文章的 Web 版網(wǎng)址 --><link rel="canonical" ><!-- 用于該文章的樣式 --><meta property="fb:article_style" content="myarticlestyle">

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

<link  rel="publisher">
<meta itemprop="name" content="內(nèi)容標題">
<meta itemprop="description" content="內(nèi)容描述少于 200 個字符">
<meta itemprop="image" content="https://example.com/image.jpg">

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

<link rel="alternate" type="application/json+oembed"

title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"

title="oEmbed Profile: XML">

<!-- 智能應用 Banner --><meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"><!-- 禁用自動檢測和格式化可能的電話號碼 --><meta name="format-detection" content="telephone=no"><!-- 添加到主屏幕 --><meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="應用標題"><!-- 觸摸圖標 --><!-- 在大多數(shù)情況下，在 `<head>` 中，一個 180×180px 觸摸圖標就已經(jīng)足夠了 --><link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"><!-- 注意：iOS 7 上的 Safari 不會對圖標產(chǎn)生效果。 --><!-- 較早版本的 Safari 不會對以 `-precomposed.png` 后綴命名的圖標文件產(chǎn)生效果。 --><!-- 啟動畫面（已無效） --><link rel="apple-touch-startup-image" href="path/to/startup.png"><!-- iOS 應用深層鏈接 --><meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

<!-- 固定網(wǎng)站 --><link rel="mask-icon" href="path/to/icon.svg" color="red">

<meta name="theme-color" content="#E64545"><!-- 添加到主屏幕 --><meta name="mobile-web-app-capable" content="yes"><!-- 更多信息：https://developer.chrome.com/multidevice/android/installtohomescreen -->

<link rel="chrome-webstore-item" ><!-- 禁用翻譯提示 --><meta name="google" content="notranslate">

<!-- 鏈接到一個 manifest 并定義 manifest 的元數(shù)據(jù)。--><!-- manifest.json 中的例子也可以通過以下鏈接找到。--><link rel="manifest" href="manifest.json"><!-- 定義你的網(wǎng)頁為 Web 應用 --><meta name="mobile-web-app-capable" content="yes"><!-- 主屏幕圖標 --><link rel="icon" sizes="192x192" href="highres-icon.png">

<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible"><!-- IE10: 禁用鏈接點擊高亮 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --><meta name="msapplication-tap-highlight" content="no"><!-- 固定網(wǎng)站 (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --><meta name="application-name" content="Sample Title">
<meta name="msapplication-tooltip" content="A description of what this site does.">
<meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml">
<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
<meta name="msapplication-config" content="http://example.com/browserconfig.xml">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2">
<meta name="msapplication-task-separator" content="1">

<!-- iOS --><meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links"><!-- Android --><meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks"><!-- Web 回退 --><meta property="al:web:url" content="http://applinks.org/documentation"><!-- 更多信息：http://applinks.org/documentation/ -->

<!-- 選擇渲染引擎 --><meta name="renderer" content="webkit|ie-comp|ie-stand">

<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） --><meta name="x5-orientation" content="landscape/portrait"><!-- 全屏顯示此頁面 --><meta name="x5-fullscreen" content="true"><!-- 頁面將以“應用模式”顯示（全屏等）--><meta name="x5-page-mode" content="app">

<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） --><meta name="screen-orientation" content="landscape/portrait"><!-- 全屏顯示此頁面 --><meta name="full-screen" content="yes"><!-- 即使在“文本模式”下，UC 瀏覽器也會顯示圖片 --><meta name="imagemode" content="force"><!-- 頁面將以“應用模式”顯示（全屏、禁止手勢等） --><meta name="browsermode" content="application"><!-- 在此頁面禁用 UC 瀏覽器的“夜間模式” --><meta name="nightmode" content="disable"><!-- 簡化頁面，減少數(shù)據(jù)傳輸 --><meta name="layoutmode" content="fitscreen"><!-- 禁用的 UC 瀏覽器的功能，“當此頁面中有較多文本時縮放字體” --><meta name="wap-font-scale" content="no">

<link  rel="stylesheet">

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

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

總類（所有HTML文件都有的

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

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

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

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

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

結構性定義（由瀏覽器控制的顯示風格）

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

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

標題對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>左對齊、居中對齊、右對齊

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

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

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

斜體 <EM></EM>

加粗 <SPONG></SPONG>

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

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

樣本<SA MP></SA MP>

表示一段用戶應該對其沒有什么其他解釋的文本。要從正常的上下文抽取這些字符時，通常要用到這個標簽。

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

鍵盤輸入<KBD></KBD>

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

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

地址<A DDRESS></A DDRESS>

3.0大字<BIG></BIG>

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

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

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

加粗<B></B>

斜體<I></I>

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

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

3.0下標 <SUB></SUB>

3.0上標 <SUP></SUP>

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

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

預定格式的寬度<PREWIDTH=?></PRE>以字元計算）

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

N1.0閃耀<BLINK></BLINK>有史以來最被嘲弄的標簽）

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

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

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

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

連結與圖形

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

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

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

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

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

設定錨點<A NA ME="***"></A >

圖形 <IMGSRC="URL">

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

N1.0圖形看齊方式<IMGSRC="URL"ALIGN=LEFT|RIGHT|TEXTTOP|A BSMIDDLE|BA SELINE|A BSBOTTOM>

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

點選圖<IMGSRC="URL"ISMA P>需要CGI程式）

N2.0點選圖 <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">使用端自動更新

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

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

分隔

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

段落 <P>通常是兩個return

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

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

換行 <BR>一個return

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

橫線 <HR>

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

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

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

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

N1.0實線 <HRNOSHA DE>沒有立體效果）

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

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

列舉（可以巢狀列舉）

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

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

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

<LITYPE=DISC|CIRCLE|SQUA RE>定義這個及其後的列舉項）

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

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

<LITYPE=A |a|I|i|1>定義這個及其後的列舉項）

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

<LIVA LUE=?>定義這個及其後的列舉項）

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

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

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

背景與顏色

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

3.0重復排列的背景 <BODYBA CKGROUND="URL">

N1.1+背景顏色 <BODYBGCOLOR="#$$$$$$">依序為紅、綠、藍）

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

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

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

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

特殊字元（以下標簽需用小寫）

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

特別符號 &#?;其中 ?代表 ISO8859-1編碼）

<&lt;>&gt;&&amp;"&quot;

注冊商標TM?

N1.0+注冊商標TM&reg;

著作權符號 ?

N1.0+著作權符號 &copy;

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

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

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

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

輸入欄位 <INPUTTYPE="TEXT|PA SSWORD|CHECKBOX|RA DIO|IMA GE|HIDDEN|SUBMIT|RESET">

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

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

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

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

最長字數(shù) <INPUTMA XLENGTH=?>以字元數(shù)為單位）

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

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

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

多選式選單 <SELECTMULTIPLE>多選）

選項 <OPTION>

內(nèi)定選項 <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>有或沒有）

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

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

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

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

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

3.0表格列<P></P>

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

3.0儲存格<TD></TD>須與列并用）

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

3.0不換行 <TDNOWRA P>

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

3.0儲存格橫向連接 <TDCOLSPA N=?>

3.0儲存格縱向連接 <TDROWSPA N=?>

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

N1.1儲存格寬度比率 <TDWIDTH=%>頁寬為100%

3.0表格標題 <TH></TH>跟<TD>一樣，不過會對中并加粗）

3.0表格標題對齊 <THALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0表格標題不換行 <THNOWRA P>

3.0表格標題占幾欄 <THCOLSPA N=?>

3.0表格標題占幾列 <THROWSPA N=?>

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

N1.1表格標題比率寬度<THWIDTH=%>頁寬為100%

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

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

視框（定義與控制螢幕上的特定區(qū)域）

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

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

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

N2.0視框行長度分配 <FRA MESETROWS=*></FRA MESET>*=相對大小）

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

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

N2.0定義個別視框 <FRA ME>定義個別視框）

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

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

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

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

N2.0卷動條 <FRA MESCROLLING="YES|NO|A UTO">

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

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

雜項

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

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

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

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

可搜尋 <ISINDEX>指示可搜尋的索引項）

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

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

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

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

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

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

HTML標簽

HTML標簽通常是英文詞匯的全稱（如塊引用:blockquot或縮略語（如“p代表Paragragh但它與一般文本有區(qū)別，因為它放在單書名號里。故Paragragh標簽是<p>,塊引用標簽是<blockquote>有些標簽說明頁面如何被格式化（例如，<p>開始一個新段落）其他則說明這些詞如何顯示(<b>使文字變粗)還有一些其他標簽提供在頁面上不顯示的信息－例如標題。

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

基本HTML頁面以<html>標簽開始，以</html>結束。之間，整個頁面有兩部分－標題和正文。

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

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

然后你可以用瀏覽器將它打開，會看見最簡單的自己做的頁面。

.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

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

1.<html></html>

<html>標志用于Html文檔的最前邊，用來標識Html文檔的開始。而</html>標志恰恰相反，放在Html文檔的最后邊，用來標識Html文檔的結束，兩個標志必須一塊使用。

2.<head></head>

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

3.<body></body>

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

用途

示例

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

<boditext="#rrggbb">設置文本顏色。<boditext="#0000ff">藍色文本

<bodilink="#rrggbb">設置鏈接顏色。<bodilink="blue">鏈接為藍色

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

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

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

4.<title></title>

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

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

例1Html文檔中基本標志的使用

<html>

<head>

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

</head>

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

<p>紅色背景、藍色文本</p>

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

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

1.<p></p>

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

2.<br>

<br>一個很簡單的標志，沒有結束標志，因為它用來創(chuàng)建一個回車換行，這么一說我想您該會使用了吧。<br>使用上還有一定的技巧，如果您把<br>加在<p></p>標志對的外邊，將創(chuàng)建一個大的回車換行，即<br>前邊和后邊的文本的行與行之間的距離比較大，若放在<p></p>里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小，您不妨試試看。

3.<blockquote></blockquote>

<blockquote></blockquote>標志對之間加入的文本將會在瀏覽器中按兩邊縮進的方式顯示出來。

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

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

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

<html>

<head>

<title>一個普通列表</title>

</head>

<boditext="blue">

<dl>

<dt>中國城市</dt>

<dd>北京 </dd>

<dd>上海 </dd>

<dd>廣州 </dd>

<dt>美國城市</dt>

<dd>華盛頓 </dd>

<dd>芝加哥 </dd>

<dd>紐約 </dd>

</dl>

</body>

</html>

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

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

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

<ol></ol>標志對用來創(chuàng)建一個標有數(shù)字的列表；<ul></ul>標志對用來創(chuàng)建一個標有圓點的列表；<li></li>標志對只能在<ol></ol>或<ul></ul>標志對之間使用，此標志對用來創(chuàng)建一個列表項，若<li></li>放在<ol></ol>之間則每個列表項加上一個數(shù)字，若在<ul></ul>之間則每個列表項加上一個圓點。請看下邊的例子：

例3標有數(shù)字或圓點的列表

<html>

<head>

<title></title>

</head>

<boditext="blue">

<ol>

<p>中國城市 </p>

<li>北京 </li>

<li>上海 </li>

<li>廣州 </li>

</ol>

<ul>

<p>美國城市 </p>

<li>華盛頓 </li>

<li>芝加哥 </li>

<li>紐約 </li>

</ul>

</body>

</html>

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

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

6.<div></div>

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

html標簽的用法=======================================================================================

一、基本概念：

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

HTML超文本標記語言，什么是超文本、什么是標記語言。

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

二、HTML語法：

<html></html>

<head></head>

<title></title>

<body></body>

三、<body>一些屬性：

什么是屬性：

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

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

alink:用于設定鼠標移動到超鏈接上并按下鼠標是超文本的顯示色彩

vlink:設置訪問過的超鏈接的色彩

background:設定背景圖片，可以是絕對路徑也可以是相對路徑。

bgcolor:用戶設定背景色，當已設定background時這個屬性會失去作用

leftmargin:左邊距

topmargin:上邊距

四、注釋與特殊字符：

<!--.........-->

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

注釋不能被嵌套。

<<

>>

&&

"'

注冊符號

版權符號

"TM

空格

五、格式標簽

<p></p>:用來創(chuàng)建一個段落,可以用align屬生來設置段落的對齊方式

<br/>:單標記直接在>前加一個“/表示結束標記，顯示一個換行

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

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

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

<ol></ol><ul></ul><li></li>:<ol></ol>創(chuàng)建一個標有數(shù)字的列表;<ul></ul>對創(chuàng)建的列表標有一個圓點;<li></li>只能在<ol></ol>或<ul></ul>之間使用，表示列表項

<pre></pre>:對文本進行預格式處理

六、文本標簽：

<h1></h1>......<h6></h6>:把文本以標題方式顯示。

<b></b><i></i><u></u>:分別對應粗體，斜體，下劃線

:分別對應下上標的顯示

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

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

<strong></strong>:用來顯示加重文本，通常是加粗顯示

<font></font>:對字體、字號、顏色進行改變。face屬性：字體;Size屬生：大小; Color屬生：色彩

七、圖像標簽：

<img/>

src屬性：必不可少，用來設置圖像文件所在位置。

alt屬性：當鼠標移到圖像上顯示的提示文本，當圖像無法顯示時，所顯示的代替文字

align屬性：設置圖像與周圍文本的對齊方式。top,bottom,left,right

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

width和height設置圖像的長寬高

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

size:線的粗細

color:線的色彩

width:線的長度

noshade:陰影顯示

八、超鏈接標簽：

通一資源定位符：URL;

如：http://www.sina.com

http所使用的協(xié)議;www.sina.net要訪問的主機名;80端口號

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

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

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

href屬性是不可少的

target屬性：指明在瀏覽器的哪個窗口打開新頁面。

<aname="">錨點標記，同一網(wǎng)頁中設置多個錨點便于超鏈接的瀏覽。

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

mailto:打開電子郵件:

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

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

<areashape="形狀"coords="坐標"href="url">給圖像分塊

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

rect:矩形，此時的coord為矩形的左上角個右下角的坐標

poly:多邊形，此時的coord為多邊形的各個頂點

circle:圓，此時coord為圓習坐標及半徑

如：

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

十、表格標簽：<table></table><tr></tr><td></td>

這三個標簽的層次結構：

<table></table>定義一個表格的開始和結束

<tr></tr>定義一行的開始和結束

<td></td>定義一個單元格的開始和結束

<table></table>屬性：

bgcolor:設置表格的背景色彩

border:設置表格的邊框的寬度

bordercolor:設置表格邊框色彩

bordercolorlight:設置表格邊框明亮部分的色彩

bordercolordark:設置表格邊框昏暗部分的色彩

cellspacing:設置單元格之間的間隔

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

width:表格的寬度

height:表格的高度

<tr></tr>

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

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

bgcolor:設置這一行的色彩

<td></td>

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

height:單元格的高度

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

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

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

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

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

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

十一、框架標簽<frameset></frameset><frame></frame>

什么是框架：將一個窗口分割成多部分，每一部分顯示一個獨立的頁面。

框架只是分割窗口。

<frameset></frameset>定義一個框架集：

rows:將窗口豎直拆分時窗口的大小比例

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

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

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

name:框架窗口的名子

taget:該框架中的超鏈接默認的打開窗口_blank,_parent,_self,_top

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

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

<iframe></iframe>一個網(wǎng)上插入一個簡單的框架窗口，這個窗口用來顯示另一個文件。

name:框架窗口的名子

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

十二、表單標簽：

什么時表單？

<form></form>:定義表單的開始和結束位置<略講>

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

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

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

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

target:設置服務器返回結果顯示的窗口

title:當鼠標放在表單上的時候以黃色的泡泡進行提示

<inputtype="submit">定義一個提交按鈕

action:指定ＵＲＬ所指定的服務器程序

value:按鈕上的文字

<inputtype="reset">:定義一個重新填寫的按鈕。

value:按鈕上的文字

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

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

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

maxlength:用戶能夠輸入的最大字符串長度

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

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

<inputtype="checkbox">:定義一個復選框

name:復選框的名，同一組復選框用同一個名子

checked:該復選框是否被選中

value:指定復選框被選中時，這個復選框的后臺值

<inputtype="radio">:定義一個單選按鈕

name:單選按鈕的名，同一組單選按鈕用同一個名子

value:指定單選按鈕被選中時，這個單選按鈕的后臺值

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

name:名子

value:值

當表單提交的時候會以name=valu形式提交到服務器上去。

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

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

<inputtype="file">:用來從本機向服務器傳文件

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

圖像的源文件由src屬性來指定，沒有valu屬性。

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

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

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

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

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

列表框中定義各項是用<option></option>來實現(xiàn)的

<option></option>為列表框中添加項目

value:項目的后臺值

selected:指定項目是否被選定

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

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

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

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

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

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

十四、頭元素:

<base>標簽：用于指定網(wǎng)頁中超鏈接的基準地址。網(wǎng)頁中所有超鏈接的相對地址都以該地址為基準地址。

該標簽只能放在<head></head>標簽之間。

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

<meta>標簽：通常用于文件的<head></head>之間。主要有兩種類型的<meta>用不同的屬性名(name,http-equiv來劃分。

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

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

什么是HTTP頭？

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

name屬性的設置：

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

<metaname="keywords"content="軟件工程師培訓,清華IT,華育國際">

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

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

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

Copyright:用于版權聲明，content中填入你版權聲明。

http-equiv屬性設置：

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

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

Refresh:告訴瀏覽器定時自動刷新網(wǎng)頁

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

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

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

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

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