Html簡介
全寫： HyperText Mark-up Language 譯名： 超文件注標式語言（譯名之一）
簡釋：一種為普通文件中某些字句加上標示的語言，其目的在于運用標記（tag）使文件達到預期的顯示效果。
HTML 是在 SGML 定義下的一個描述性語言，或可說 HTML 是 SGML 的一個應用程式，HTML 不是程式語言，如 C++ 和 Java 之類，它只是標示語言，基本上你只要明白了各種 標記的用法便算學懂了 HTML，HTML 的格式非常簡單，只是由文字及標記組合而成，于 編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當然 以專業的網頁編輯軟件為佳。
■ 閱讀須知：
這一篇【HTML剖析】偏重于標記的介紹，考慮到易懂及每節的篇幅問題，我并不按 W3C 的 HTML 分類，這可令你更易選擇有興趣的標記，其中只有【文件標記】是必讀的，其 余可任意選擇。這一篇不會提及任何網頁編輯軟件，只要掌握了 HTML，任何網頁 編輯工具都可以變成一把利器。■ 標記寫法：
任何標記皆由“<”及“>”所圍住，如
標記名與小于號之間不能留有空白字符。
某些標記 要加上參數，某些則不必。如 Hello 參數只可加于起始標記中。
在起始標記之標記名前加上符號“/”便是其終結標記，如 標記字母大小寫皆可。
■ 圍堵標記與空標記：
標記按型態分為圍堵標記與空標記 圍堵標記
顧名思義，它以起始標記及終結標記將文字圍住，令其達到預期顯示效果。例如 HTML Source ： Creation of Webpage is my favourite.顯示成： Creation of Webpage is my favourite.其中 便稱為圍堵標記。
它以起始標記及終結標記標示文字 Creation of webpage，令它顯示成粗體，兩者失其一都會發生錯誤顯示。
空標記
是指標記單獨出現，只有起始標記沒有終結標記。例如 HTML Source：
I love Creation of Webpage.
It's a wonderful place.顯示成： I love Creation of Webpage.It's a wonderful place.其中換行標記
便屬空標記。
它的作用便是將標記后所有東西顯示于下一行，可見終結標記于它是沒意義的，但有些人會為空標記加上終結標記，這是為方便記認而己，對 HTML 沒有影響
HTML 標記一覽
標記 類型 譯名或意義用 文件標記
● 文件聲明
● 開頭
● 標題 <BODY> ● 本文 排版標記</p><p><!--注解--> ○ 說明標記 <p>○ 段落標記 <BR> ○ 換行標記 <HR> ○ 水平線 <CENTER> ● 居中 <p>● 預設格式 示</p><p><DIV> ● 區隔標記 <NOBR> ● 不折行 <WBR> ● 建議折行 字體標記</p><p>● 加重語氣 <B> ● 粗體標記 <EM> ● 強調標記 <I> ● 斜體標記 <TT> ● 打字字體 Courier<U> ● 加上底線 <H1> ● 一級標題標記 <H2> ● 二級標題標記 <H3> ● 三級標題標記 <H4> ● 四級標題標記 <H5> ● 五級標題標記 <H6> ● 六級標題標記 <FONT> ● 字形標記 <base href="http://www.tmdps.cn/"/> ○ 基準字形標記 <BIG> ● 字體加大 作 備注 讓瀏覽器知道這是 HTML 文件 提供文件整體資訊</p><p>定義文件標題，將顯示于瀏覽頂端 設計文件格式及內文所在 為文件加上說明，但不被顯示</p><p>為字、畫、表格等之間留一空白行 令字、畫、表格等顯示于下一行 插入一條水平線</p><p>令字、畫、表格等顯示于中間 反對 令文件按照原始碼的排列方式顯設定字、畫、表格等的擺放位置 令文字不因太長而繞行 預設折行部位 產生字體加粗 Bold 的效果 產生字體加粗的效果 字體出現斜體效果 字體出現斜體效果</p><p>字體，字母寬度相同 加上底線 反對</p><p>變粗變大加寬，程度與級數反比 將字體變粗變大加寬 將字體變粗變大加寬 將字體變粗變大加寬</p><p>將字體變粗變大加寬 將字體變粗變大加寬 設定字形、大小、顏色 反對 設定所有字形、大小、顏色 反對 令字體稍為加大</p><p><SMALL> ● 字體縮細 令字體稍為縮細 <STRIKE> ● 畫線刪除 為字體加一刪除線 反對 <CODE> ● 程式碼 字體稍為加寬如<TT> <KBD> ● 鍵盤字 字體稍為加寬，單一空白 <SAMP> ● 范例 字體稍為加寬如<TT> <VAR> ● 變數 斜體效果 <CITE> ● 傳記引述 斜體效果 <BLOCKQUOTE> ● 引述文字區塊 縮排字體</p><p><DFN> ● 述語定義 斜體效果 <ADDRESS> ● <SUB> ● <SUP> ● 清單標記</p><p><OL> ● <UL> ● <LI> ○ <MENU> ● 對</p><p><DIR> ● <UL> 反對</p><p><DL> ● <DT> ○ <DD> ○ 表格標記</p><p><TABLE> ● <CAPTION> ● <TR> ● <TD> ● <TH> ● 會變粗 表單標記</p><p><FORM> ● 式</p><p><TEXTAREA> ● 字</p><p><INPUT> ○ <SELECT> ● 單</p><p><OPTION> ○ 圖形標記</p><p><IMG> ○ 性</p><p>連結標記</p><p><A> ●地址標記 下標字 下標字 順序清單 無序清單清單項目 選單清單 目錄清單 定義清單 定義條目 定義內容 表格標記 表格標題 表格列 表格欄 表格標頭 表單標記 文字區塊 輸入標記 選擇標記 選項 圖形標記 連結標記 斜體效果 指數 下標字 清單項目將以數字、字母順序排列 清單項目將以圓點排列 每一標記標示一項清單項目 清單項目將以圓點排列，如<UL> 反清單項目將以圓點排列，如清單分兩層出現 標示該項定義的標題 標示定義內容 設定該表格的各項參數 做成一打通列以填入表格標題 設定該表格的列 設定該表格的欄 相等于<TD>，但其內之字體決定單一表單的運作模提供文字方盒以輸入較大量文決定輸入形式</p><p>建立 pop-up 卷動清每一標記標示一個選項 用以插入圖形及設定圖形屬加入連結</p><p><BASE> ○ 基準標記 可將相對 URL 轉絕對及指定連結目標 框架標記</p><p><FRAMESET> ● 框架設定 設定框架</p><p><FRAME> ○ 框窗設定 設定框窗</p><p><IFRAME> ○ 頁內框架 于網頁中間插入框架 IE <NOFRAMES> ● 不支援框架 設定當瀏覽器不支援框架時的提示 影像地圖</p><p><MAP> ● 影像地圖名稱 設定影像地圖名稱 <AREA> ○ 連結區域 設定各連結區域 多媒體</p><p><BGSOUND> ○ 背景聲音 于背景播放聲音或音樂 IE <EMBED> ○ 多媒體 加入聲音、音樂或影像</p><p>其他標記</p><p><MARQUEE> ● 走動文字 令文字左右走動 IE <BLINK> ● 閃爍文字 閃爍文字 NC <ISINDEX> ○ 頁內尋找器 可輸入關鍵字尋找于該一頁 反對</p><p><META> ○ 開頭定義 讓瀏覽器知道這是 HTML 文件</p><p><LINK> ○ 關系定義 定義該文件與其他 URL 的關系 StyleSheet <STYLE> ● 樣式表 控制網頁版面 <span> ● 自訂標記 獨立使用或與樣式表同用</p><p>注：</p><p>● 表示該標記屬圍堵標記，即需要關閉標記如 </標記>。○ 表示該標記屬空標記，即不需要關閉標記。IE 表示該標記只適用于 Internet Explorer。NC 表示該標記只適用于 Netscape Communicator。</p><p>反對 表示該標記不為 W3C 所贊同，通常這標記是 IE 或 NC 自訂，且己為眾所支 持，只是 HTML 標準中有其它同功能或更好的選擇。</p><p>棄用 表示該標記己為 W3C 所棄用，是過時的標記，但 HTML 具向下兼容的特 性，不用擔心新瀏覽器不支援舊標記。</p><p>新 表示該標記是 HTML 4.0 中新增的</p><p>文件標記</p><p><HTML> ； <HEAD> ； <TITLE> ； <BODY> ■ HTML 基本架構： 以下 HTML Source Code 便是一份 HTML 文件的基本架構 ： <HTML> <HEAD> <TITLE> 網頁的標題 網頁的內容，很多標記都作用于此
HTML（即超文本標記語言）的學習總結：
一：（html基本標記）：
head,頭部標記 里面常用的標記（
）</p><p>title 標題標記<title><title></p><p>二:(文字與段落)</p><p>標題文字的對齊方式：align屬性值（leftcenterright）設置文字常用屬性：（face字體；size字號；color顏色）</p><p>設置文字常用標記：<font>=文本 粗體；<em>斜體；<u>下劃線；<p>段落標記</p><p><br>換行標記</p><p>三 :（超鏈接）</p><p>超鏈接語法：<a href=“鏈接地址”>新浪</a></p><p>建立書簽：<a name=“書簽名稱”>連接文字</a></p><p>四 :（插入圖像及圖像連接）</p><p>圖像的格式：jpg格式； png格式；gif格式;bmp;</p><p>插入圖像語法：<img src=“圖像的地址”>注：圖片標記<img>不成對出現圖像的超鏈接：<a href=“連接的地址”><img src=“圖像的地址”></a></p><p>五 :(多媒體)</p><p>滾動文字的標記與語法：<marquee></p><p>....滾動文字</p><p></marquee></p><p>設置滾動文字常用屬性：</p><p>滾動方向：direction=(up;down;left;right)</p><p>背景音樂的設置：<bgsound src=“音樂的地址” loop=“循環的次數”>注：圖片標記<bgsound>不成對出現</p><p>六（表格的插入）</p><p>標格的插入：<table></p><p><tr>行</p><p><td>列......</td></p><p><td>......</td></p><p></tr></p><p></table></p><p>設置表格的常用屬性：width寬；height高；align對齊方式；標格的邊框：border</p><p>標格的邊框顏色：bordercolor</p><p>行文字以及表格標題的對其方式：valign</p><p>水平跨度：colspan</p><p>垂直跨度：rowspan</p><p>單元格的亮，暗邊框：bordercolorlightbordercolordark</p><p>七（框架）</p><p>框架的基本結構語法：</p><p></frameset></p><p><frameset> <frame> <frame></p><h2><a name="3" >第三篇：HTML學習心得</a></h2><p>HTML學習心得</p><p>一、HTML簡介</p><p>全寫： HyperText Mark-up Language，譯名： 超文件注標式語言（譯名之一），簡釋：一種為普通文件中某些字句加上標示的語言，其目的在于運用標記（tag）使文件達到預期的顯示效果。</p><p>HTML 是在 SGML 定義下的一個描述性語言，SGML(Standard Generalized Markup Language,標準通用標記語言)，是一種定義電子文檔結構和描述其內容的國際標準語言，是所有電子文檔標記語言的起源，早在Web發明之前SGML就已存在。HTML 不是程式語言，如 C++ 和 Java 之類，它只是標示語言，基本上你只要明白了各種標記的用法便算學懂了 HTML，它的格式非常簡單，只是由文字及標記組合而成，在編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當然以專業的網頁編輯軟件為佳。</p><p>1.優點</p><p>HTML文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入，這也是WWW盛行的原因之一，其主要特點如下：1 簡易性，HTML版本升級采用超集方式，從而更加靈活方便。2 可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統擴展帶來保證。3平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。</p><p>二、HTML標記</p><p>任何標記皆由“<”與“>”圍住，如 <p>標記名與小于號之間不能留有空白字符。某些標記要加上參數，某些則不必。如 <font size=“+2”>Hello</font> 參數只可加于起始標記中。在起始標記名前加上符號“/”便是其終結標記，如 </font>，標記字母大小寫皆可。</p><p>1.標記種類</p><p>標記種類分為兩種：圍堵標記和空標記。圍堵標記是以起始標記及終結標記將文字圍住，令其達到預期顯示效果。也就是說，標記是成對出現的，例如 <b>Creation of Webpage</b>，其中<b></b> 便稱為圍堵標記。它以起始標記<b>及終結標記</b>標示文字 Creation of webpage，令其顯示成粗體，兩者失其一都會發生錯誤顯示。空標記是指標記單獨出現，只有起始標記沒有終結標記。例如 <BR>，它的作用便是將標記后所有東西顯示于下一行，可見終結標記于它是沒意義的，但有些人會為空標記加上終結標記，這是為方便記認而己，對 HTML 沒有影響。</p><p>2.標記類型</p><p>標記類型按用途可以分為：文件標記(如：<HTML>、<BODY>)、排版標記(如：<p>、<BR>、<DIV>)、字體標記(如：<FONT>、<B>)、清單標記(如：<OL>、<UL>)表格標記(如：<TABLE>、<TD>)、表單標記(如：<FORM><INPUT>)、圖形標記(如：<IMG>)、連結標記(如：<A>、<BASE>)、框架標記(如：<FRAMESET>、<FRAME>)、影像地圖標記(如：<MAP>、<AREA>)、多媒體標記(如：<BGSOUND>、<EMBED>)、樣式標記(如：<STYLE>、<span>)和其它標記(如：<MARQUEE>、<BLINK>)。</p><p>三、HTML結構</p><p>基本HTML頁面以DOCTYPE開始，它聲明文檔的類型，且它之前不能有任何內容（包括換行符和空格），否則將使文檔聲明無效，接著是<html>標簽，以</html>結束。在它們之間，整個頁面有兩部分－－標題和正文。標題詞－－夾在<head>和</head>標簽之間－－這個詞語在打開頁面時出現在屏幕底部最小化的窗口。正文則夾在<body>和</p><h2><a name="4" >第四篇：HTML實驗報告</a></h2><p>東北大學軟件學院</p><p>《HTML與JavaScript》</p><p>實驗報告</p><p>專 業：軟件工程</p><p>班</p><p>級：1405 學</p><p>號：20144706 姓</p><p>名：張俊怡</p><p>完成時間：2015/12/6</p><p>指導教師：王蓓蕾</p><p>總共頁數： 8</p><p>網站主界面：（針對顏色不協調的問題已經改進）</p><p>主界面布局：</p><p>全程采用table布局，主要分塊為上邊一塊，下邊一塊，中間過渡用動態效果展示網站信息。</p><p>下邊左邊是主要功能選擇區，中間是文字動態區，右邊是圖片以及視頻動態展示區。采用的CSS方法：</p><p>Class外部關聯和內部關聯配合使用 網站整體顏色風格： 用淡雅淺色作為主頁背景 編寫代碼步驟：</p><p>最重要的是整體布局，布局好后分塊修飾。</p><p>使用了JavaScript <script language=“JavaScript” type=“text/javascript”> var d=new Date();var</p><p>monthname=new Array(“January”,“February”,“March”,“April”,“May”,“June”,“July”,“August”,“September”,“October”,“November”,“December”);var TODAY = monthname[d.getMonth()] + “" + d.getDate()+ ”, " + d.getFullYear();</script> 來獲取當前系統時間。</p><p>網站介紹頁面：</p><p>使用了較多是js和jQuery 實現了圖片的動態特效。資料下載頁面：</p><p>布局方式：</p><p>采用table布局，布局較為簡單，資料下載這個頁面能實現的功能其實包括資料下載和上傳。代碼：</p><p>留言頁面：</p><p>用JavaScript實現的邏輯判斷</p><p>用table進行布局，form，input標簽。CSS采用的是內部關聯使用。</p><p>文章欣賞界面：</p><p>訪客可以再次閱讀所發布的文章</p><p>登陸界面，采用div布局，用內部CSS關聯裝飾</p><p>用JavaScript進行密碼驗證（當然這沒用，應該用后臺邏輯驗證）文章展示區使用的table布局 Herf了幾個文章的連接</p><p>注冊粉絲界面：</p><p>簡單的一個表單form，和JavaScript判斷</p><p>采用table布局，難點在JavaScript判斷，得一個一個判斷，符合格式才能輸入下一個信息。</p><p>在線聊天界面：</p><p>視頻欣賞界面：</p><p>查看留言界面：</p><p>實驗報告總結：網站全部界面已完成還有少部分界面未寫，部分功能設計后臺數據庫的未實現，其他屬于HTML，HTML5和JavaScript知識的功能均已實現（數據庫等后臺交互功能有困難），這個網站雖然不是商業性盈利模式的，但的確是我心里想要展示的，文章欣賞那一塊功能是整個網站靈感的起源，因為展示的是我自己寫的文章。</p><h2><a name="5" >第五篇：html教案</a></h2><p>《HTML基礎》教案</p><p>教材：《dreamweaver cs3網頁制作與實訓》</p><p>執教：羅執清</p><p>一、教學目標：</p><p>1、了解HTML的概念、作用及特點</p><p>2、理解HTML文檔結構</p><p>3、掌握標簽的使用規范</p><p>4、了解常用標簽的用法</p><p>二、教學重點：</p><p>1、HTML文件結構</p><p>2、標簽使用規范</p><p>3、常用標簽的使用</p><p>三、教學難點： HTML概念的理解</p><p>四、教學方法：</p><p>直觀演示和任務驅動相結合</p><p>五、教學過程：</p><p>1、回顧站點管理相關操作</p><p>2、HTML概念及作用</p><p>3、HTML文件結構</p><p><html>：HTML文檔開始。</p><p><head>：文檔頭部開始。</p><p><title>：文檔標題開始。</p><p>HTML基礎：文檔標題。</p><p>：文檔標題結束。
：文檔頭部結束。
：文檔主體開始。
一個簡單的網頁：文檔主體內容，它是網頁的最主要部分。
點擊咨詢 