網(wǎng)頁設(shè)計基礎(chǔ)

HTML網(wǎng)頁基礎(chǔ)講師：賴崗華核心技術(shù)點HTML的基本結(jié)構(gòu)標題字標簽段落標簽列表標簽

無序列表

有序列表

定義列表超鏈接

超鏈接的概念

錨點鏈接

內(nèi)部鏈接

外部鏈接插入圖像

圖片的基本格式

插入圖片

圖像映射div標簽和span標簽Flash和視頻播放實體符號路徑

相對路徑

絕對路徑學(xué)習(xí)目標掌握HTML的基本概念、HTML文件的編寫方法、常用瀏覽器掌握標題字標簽、段落標簽、無序列表、有序列表及定義列表掌握超鏈接的基本知識、內(nèi)部鏈接、錨點鏈接、外部鏈接掌握圖像的基本格式、插入圖像的方法、圖像的超鏈接及映射相對路徑和絕對路徑掌握DIV標簽和SPAN標簽學(xué)習(xí)重點無序列表及應(yīng)用標題標簽及應(yīng)用超鏈接及應(yīng)用圖像標簽及應(yīng)用div和span的應(yīng)用學(xué)習(xí)難點相對路徑和絕對路徑介紹隨著計算機網(wǎng)絡(luò)的迅速發(fā)展，利用Internet上的網(wǎng)站、和精美的網(wǎng)頁來吸引瀏覽者的目光，不再是一個孤立的問題，它成為了大家共同關(guān)注的目標?！毒W(wǎng)頁設(shè)計》課程涉及到的內(nèi)容有網(wǎng)頁架設(shè)、網(wǎng)頁編輯、多媒體元素插入、層疊樣式表的使用、表單元素的添加、表格的繪制等多方面的知識，具有很強的先進性；它是計算機應(yīng)用、電子商務(wù)、計算機網(wǎng)絡(luò)、計算機軟件等專業(yè)的一門基礎(chǔ)課程。課程引入HTML角色

相信同學(xué)們都有過上網(wǎng)沖浪的經(jīng)歷，打開瀏覽器并在地址欄中輸入一個網(wǎng)站的地址，就會展示出相應(yīng)的網(wǎng)頁內(nèi)容了。網(wǎng)頁中可以包含很多種類型的內(nèi)容作為網(wǎng)頁的元素，其中最基本的網(wǎng)頁元素是文字，此外還包括靜態(tài)的圖形和動畫，以及聲音和視頻等其他形式的多媒體文件。所有我們所看到的網(wǎng)頁內(nèi)容，都是通過HTML來實現(xiàn)的。本章將從HTML的基本知識開始，力圖深人淺出地向讀者介紹什么是HTML，以及如何運用HTML來設(shè)計網(wǎng)頁。HTML的重要性HTML非常重要

Internet的飛速發(fā)展導(dǎo)致了成千上萬互聯(lián)網(wǎng)網(wǎng)站的創(chuàng)建，用戶瀏覽這些網(wǎng)站的時候，看到的是豐富的影像、文字、圖片，而這些內(nèi)容都是通過一種名為HTML的語言所表現(xiàn)出來的。對于網(wǎng)頁設(shè)計和制作人員，尤其是開發(fā)動態(tài)網(wǎng)站的編程人員來講，制作網(wǎng)頁的時候，如果不涉及HTML語言，幾乎是不可能的。個人認為：社會的進步是由一些關(guān)鍵技術(shù)作為承載體才得以進行的，則蒸汽機，電視廣播，計算機，互聯(lián)網(wǎng)(html)我認為是近幾百年來最為偉大的技術(shù)發(fā)明，其直接推動著人類朝著更為美好的方向前進了一大步。什么是HTMLHTML與瀏覽器的關(guān)系

HTML(HyperTextMarkupLanguage，中文通常稱作超文本標記語言)是一種文本類、解釋執(zhí)行的標記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。用戶可以用任何文本編輯器，例如windows的“記事本”程序打開它，查看其中的HTML源代碼，也可以在用瀏覽器打開網(wǎng)頁時，通過相應(yīng)的“查看/源文件”命令查看網(wǎng)頁中的HTML代碼。HTML文件可以直接由瀏覽器解釋執(zhí)行，而無需編譯。當用瀏覽器打開網(wǎng)頁時，瀏覽器讀取網(wǎng)頁中的HTML代碼，分析其語法結(jié)構(gòu)，然后根據(jù)解釋的結(jié)果顯示網(wǎng)頁內(nèi)容，正是因為如此，網(wǎng)頁顯示的速度同網(wǎng)頁代碼的質(zhì)量有很大關(guān)系，保持精簡和高效的HTML源代碼是十分重要的。什么是htmlHTML與生活常識html指的是超文本標記語言(HyperTextMarkupLanguage)html是文件的一種(.html,.pdf,.doc,.紅頭文件)了解html之html不是什么?HTML不是一種編程語言，而是一種標記語言HTML使用標記標簽來描述網(wǎng)頁中的內(nèi)容標記語言：使用一些標記符號來表示一定的含義編程語言：使用一些語法格式和符號來表示一定的含義和邏輯了解html發(fā)展歷史1991年，蒂姆·伯納斯-李（TimBerners-Lee）編寫了一份叫做“HTML標簽”的文檔，定義了大約20個標簽1993年，超文本標記語言（第一版）作為草案發(fā)布1994年，W3C組織成立，負責(zé)html標準的制定1995年11月，HTML2.0（草案）發(fā)布1997年01月，HTML3.2，作為W3C推薦標準1997年12月，HTML4.0，作為W3C推薦標準1998年02月，XML1.0，作為W3C的標準1999年12月，HTML4.01，作為W3C推薦標準，實際只做了微小改進了解html發(fā)展歷史2000年1月，XHTML1.0作為W3C推薦標準發(fā)布2001年5月，XHTML1.1作為W3C推薦標準發(fā)布之后W3C開始著手XHTML2.0標準的相關(guān)工作，但計劃中的XHTML2.0過于龐大和強大，并打算不與XHTML1.0兼容，于是：2004年，一些廠商提議在HTML4的基礎(chǔ)上進行擴展以適應(yīng)新的web應(yīng)用的需要，但W3C表示了拒絕，于是他們組織成立超文本應(yīng)用技術(shù)工作組（WHATWG）致力于HTML5工作2006年，Tim在一篇文章中承認從HTML到XML是行不通的2007年，W3C接納了HTML5標準，并成立HTML5工作組2008年，HTML5作為W3C標準發(fā)布了第一份正式草案，但目前仍然是草案，據(jù)說還需要很多很多年才能成為最終正式標準并得到普及。2009年，W3C宣布停止XHTML2.0的工作W3C簡介(了解)W3C是英文WorldWideWebConsortium的縮寫，中文意思是W3C理事會或萬維網(wǎng)聯(lián)盟。W3C于1994年10月在麻省理工學(xué)院計算機科學(xué)實驗室成立。創(chuàng)建者是萬維網(wǎng)

的發(fā)明者TimBerners-Lee。W3C組織是制定網(wǎng)絡(luò)標準的一個非贏利組織，像HTML、XHTML、CSS、XML的標準就是由W3C定制的。大約500名W3C會員包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團體用戶、研究與實驗室、標準制定機構(gòu)和政府部門，一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達成共識。HTML實例分析幼兒園網(wǎng)站界面展示HTML實例分析教學(xué)網(wǎng)站演示網(wǎng)頁總案例（呱呱網(wǎng)）網(wǎng)頁總案例說明每個網(wǎng)站都是由很多獨立的網(wǎng)頁構(gòu)成。網(wǎng)頁之間以一定的鏈接關(guān)系放在一起就構(gòu)成了整個網(wǎng)站每個網(wǎng)頁都至少是一個html文件。每個html文件都具有相同的結(jié)構(gòu)模式和代碼規(guī)則我們學(xué)習(xí)的主要是制作網(wǎng)頁的一般流程和相關(guān)知識我們能做一個網(wǎng)頁，就能做一個網(wǎng)站我們的網(wǎng)頁總案例就是一個網(wǎng)站的首頁（即一個網(wǎng)頁）通常在網(wǎng)站中，首頁最為典型，并引領(lǐng)整個網(wǎng)站風(fēng)格；我們能做一個首頁，也就能做其他頁面。HTML語法基本格式HTML語法的基本單位是元素（也叫標簽）元素是符合標準的文檔組成部分，即規(guī)定好了有哪些標簽，各代表什么含義，如title（文檔標題）、IMG（圖象）、table（表格）等。元素之間可以嵌套（一個元素包含另一個元素）。一個元素的構(gòu)成通常包括元素名（標簽名）和元素屬性（標簽屬性），其一般格式如下圖所示，并說明如下：屬性可能為0個或0個以上（上圖用省略號表示），各個屬性用空格隔開，屬性名和屬性值之間用等號連接，且等號兩邊沒有空格。屬性值用單引號或雙引號引起來。有的標簽沒有“內(nèi)容”部分。如果有，有的標簽只能是文字，而有的標簽的內(nèi)容還可以是其他標簽（即標簽嵌套，這是普遍情況）<元素名屬性名1=“某值1”屬性名2=“某值2”…>內(nèi)容</元素名>HTML元素基本規(guī)則元素：元素是HTML語言的基本組織單位。每一個元素通常都由一個開始的標簽和一個結(jié)束的標簽組成。注：有少數(shù)元素沒有結(jié)束標簽，而是寫成<元素名…./>的形式。元素的標簽要用一對尖括號“<>”括起來，結(jié)束的標簽前加一個斜杠。元素可以有自己的相關(guān)屬性，每一個屬性還可以設(shè)置一定的值。屬性出現(xiàn)在元素的開始標簽“<>”內(nèi)，并且和元素名之間用空格分隔，屬性值用雙引號或單引號引起來，并用等號（=)與屬性名鏈接起來。各個屬性之間也用空格分隔開來。HTML文檔的基本結(jié)構(gòu)<html><head> ............ </head><body> ......... </body></html>HTML文件開始HTML文件結(jié)束HTML文件頭部信息（非表現(xiàn)性信息）HTML文件主體信息（表現(xiàn)性信息）一個簡單的html文檔<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"""><htmlxmlns=""lang="zh-CN"><head><title>我的第一個網(wǎng)頁</title></head><body> helloworld！<br/>這是我的第一個網(wǎng)頁!

雖然簡單， 但這是一個很好的開始！

</body></html>這兩行代碼通常就是固定的，甚至可以不寫，不用背下來，所以不用害怕

后面會進一步解釋請結(jié)合代碼，對比瀏覽器中顯示效果，觀察差異并思考主要標簽說明<html></html><html>標簽用于HTML文檔的最前面，用來標識HTML文檔的開始；</html>標簽則相反，它放在HTML文檔的結(jié)尾，用來標識HTML文檔的結(jié)束，兩個標簽必須成對使用，一個網(wǎng)頁中有且只有一對<html></html>標簽，網(wǎng)頁中所有其他的內(nèi)容都要放在<html>和</html>之間。<head></head>一個網(wǎng)頁文件從總體上可以分為頭部和主體兩部分。<head>和</head>定義了HTML文檔的頭部，必須開始標簽與結(jié)束標簽成對使用。在此標簽對之間可以使用<title></title>、<meta/>、<script></script>、<style></style>、<link/>等標簽.這些標簽的內(nèi)容不會在瀏覽器的文檔窗口(可視窗口)中顯示出來，而是描述HTML文檔的相關(guān)信息或輔助信息主要標簽說明<body></body><body></body>定義HTML文檔的主體部分，必須是開始標簽與結(jié)束標簽成對使用。在<body></body>之間放置要顯示的文本內(nèi)容和其他用于控制文本顯示方式的標簽，如<p></p>、<h1></h1>、<br>、<hr>等，他們中間所定義的文本、圖像等將會在瀏覽器的窗口內(nèi)顯示出來。<title></title>使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色標題欄部分顯示的文本信息，這些文本信息一般是網(wǎng)頁的“主題”，要將您的網(wǎng)頁的主題顯示到瀏覽器的頂部其實很簡單，只要在<title></title>標簽對之間加入您要顯示的文本即可。注意：<title></title>標簽對只能放在<head></head>標簽對之間。簡單meta標簽說明在網(wǎng)頁的<head></head>標志對之間，我們經(jīng)常見到這樣一段代碼：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>用來標記你的頁面文件所使用的字符集（簡單理解就是用中文還是用英文還是用法文）<metaname="keywords"content="puter"/>用來標記搜索引擎在搜索你的頁面時所取出的關(guān)鍵詞<metaname="Description"content="Thisisanschool"/>用來標記搜索引擎在搜索你頁面時所取出的描述基本標簽案例標題，段落，水平線，粗體，斜體，紅色字，下劃線，居中，換行等效果簡單文本格式化標簽加粗標簽：<b>這文字看起來是粗體</b>斜體標簽：<i>這文字看起來是斜體</i>放大字體：<big>這是放大的字體</big>縮小字體：<small>這是縮小的字體</small>字體標簽：<fontsize=“3”color=“red”>這是文字</font>強調(diào)標簽：<strong>這是要強調(diào)的文字內(nèi)容</strong>刪除標簽：<del>這個文字有刪除線</del>引用標簽：<blockquote>這是引用的文本</blockquote>加下劃線：<u>這文字有一條下劃線</u>下標上標標簽上標Sup9*9=819²=81下標Sub硫酸分子式H2SO4H₂SO₄標題標簽標題標簽<h1></h1><h2></h2>…<h6></h6>HTML語言提供了一系列對文本中的標題進行操作的標簽對。標題（Heading）是通過<h1></h1>……<h6></h6>即一共六對標簽進行定義的。<h1></h1>定義最大的標題，而<h6></h6>定義最小的標題，即標簽中h后面的數(shù)字越大標題文本就越小。標題標簽的字體默認都是粗體。標題標簽-案例展示<h1>我是一級標題！</h1><h2>我是二級標題！！</h2><h3>我是三級標題！?。?lt;/h3><h4>我是四級標題?。。?！</h4><h5>我是五級標題！?。。。?lt;/h5><h6>我是六級標題?。。。。。?lt;/h6>使用標題時我們要確保將HTML標題標簽只用于標題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標題Html標簽篇段落標簽<p></p>在HTML語言中，有專門的標簽表示段落。所謂段落，就是一段格式上統(tǒng)一的文本。段落標簽由<p>定義。段落與段落之間默認會自動插入一個空行，導(dǎo)致文字的行間距過大，這時可以使用換行標簽<br/>來完成文字的緊湊換行顯示。如果需要多個換行可以連續(xù)使用多個<br/>標簽。Html標簽篇水平線的標簽<hr/>，其屬性有：align：線條對齊方向，用于線條寬度小于其外部的容器寬的時候，線條放置的位置，分left（左），center（中），right（右）noshade：無陰影size：線的粗細，直接寫數(shù)字，比如1，2，3。width：寬度，也就是線條在水平方向的“長度”，可以寫數(shù)字或百分比。百分比表示其寬度是相對于其上一級容器的寬度的，如：width=“500”,

width=“80%”Html標簽篇<pre><pre>元素可定義預(yù)格式化的文本。被包圍在pre元素中的文本通常會保留空格和換行符。但如果該標簽中出現(xiàn)了其他標簽，則其他標簽也會照樣被瀏覽器識別。<pre>標簽的一個常見應(yīng)用就是用來表示計算機的源代碼。<div><pre>for(vari=1;i<=100;i++){z=z+i}</pre></div>列表與鏈接案例無序列表標簽列表是一種非常有用的數(shù)據(jù)排列方式，它以列表的形式來顯示數(shù)據(jù)。HTML列表分無序列表、有序列表和定義列表。默認情況下，無序列表的項目符號是●，而通過type屬性可以調(diào)整無序列表的項目符號，避免列表符號的單調(diào)。<ul> <li>abc</li> <li>abc</li> <li>abc</li></ul>ul的屬性type，用于定義所有列表項的符號（li上也能用）circle空心圓圈square實心方塊disc實心圓點，同時也是默認值有序列表標簽有序列表：表示具有一定編號的列表項有序列表使用標簽<ol>定義，列表項使用標簽<li>定義屬性Type的值可以為：1,A,a,I,i

，分別表示使用數(shù)字，大小寫英文字母，大小寫羅馬數(shù)字來進行編號屬性start表示編號從哪里開始<oltype=“1”start=“5”> <li>abc</li> <li>abc</li> <li>abc</li></ol>定義列表標簽定義列表標簽包括：dl,dt,dd,同樣是配合著使用的<dl></dl>用來創(chuàng)建一個普通的定義列表，<dt></dt>用來創(chuàng)建列表中的上層項目（項目名），<dd></dd>用來創(chuàng)建列表中下層項目（項目描述）<dl> <dt>北京</dt> <dd>北京是中華人民共和國的首都</dd> <dt>天津</dt> <dd>天津市是一個古老而又現(xiàn)代的城市，面朝大海，春暖花開</dd></dl>超鏈接超鏈接的概念：簡單來說，超鏈接就是可以從一個頁面轉(zhuǎn)到另一頁面的一種技術(shù)。對于互聯(lián)網(wǎng)，我認為超鏈接是整個互聯(lián)網(wǎng)最為重要的功能。超鏈接超鏈接概念：超鏈接是網(wǎng)站頁面中最重要的元素之一。一個網(wǎng)站是由多個頁面組成的，頁面之間依據(jù)超鏈接確定相互的導(dǎo)航關(guān)系。每一個網(wǎng)頁都是獨一無二的地址，在英文中被稱作URL（UniformResourceLocator：統(tǒng)一資源定位器)。打開瀏覽器，在地址欄輸入，然后按下回車，會打開新浪網(wǎng)站的主頁面?？梢钥吹剑撁嬷杏卸鄠€欄目、多條新聞等，最上方不同的欄目就是文字鏈接。超鏈接超鏈接標簽及其屬性超鏈接應(yīng)用通常是基于<a>標簽基礎(chǔ)上的。鏈接標簽的常用屬性href：指定鏈接地址；name：給鏈接命名；target：指定鏈接的目標窗口例如：<ahref=“”target=“_blank”name=“sina”>單擊我可以跳轉(zhuǎn)到sina網(wǎng)站</a>target：指定超鏈接的連接位置_blank：使鏈接在一個新的窗口打開_self：使鏈接在本窗口打開_top：使鏈接在“頂層窗口”錨點鏈接錨點鏈接介紹：在瀏覽頁面的時候，如果頁面的內(nèi)容較多，頁面過長，瀏覽的時候需要不斷拖拉滾動條，很不方便，如果要是尋找特定的內(nèi)容，就更加不方便。這時如果能在該網(wǎng)頁上，或另外一個頁面上建立目錄，瀏覽者單擊目錄的項目就能自動跳到網(wǎng)頁相應(yīng)的位置進行閱讀，應(yīng)該是件很方便的事，并且還可以在頁面中設(shè)置諸如“返回首頁”之類的鏈接。這就是錨點連接或書簽鏈接。錨點示例：

customer/display.html?nodeId=200683940錨點鏈接建立錨點連接分為兩步一是建立錨點，二是為錨點制作鏈接。錨點有時也叫做頁內(nèi)鏈接錨點使用案例建立錨點：<aname=“1”></a><h3商品如何保修</h3>……錨點超鏈接：<ahref="#1">商品如何保修</a>則單擊“商品如何保修”鏈接，頁面會自動定位到可以顯示“商品如何保修”的位置。超鏈接內(nèi)部鏈接通常指的是在同一個網(wǎng)站的內(nèi)部，不同的HTML頁面之間的鏈接。_self：在當前窗口中打開鏈接；_blank：在一個全新的空白窗口中打開鏈接_top：在頂層框架中打開鏈接——后面學(xué)習(xí)框架時介紹某name，在指定名字的框架窗口中打開鏈接——后面學(xué)習(xí)框架時介紹外部鏈接鏈接到外部網(wǎng)頁：<ahref="">…</a>鏈接到email：<ahref=“mailto:郵件地址”>…</a>鏈接到下載文件：<ahref=“文件地址”>…</a>，此時通常就成為文件下載了。圖像、圖像映射與鏈接案例帶/不帶鏈接圖片，絕對/相對路徑圖片帶多個熱區(qū)鏈接的圖片插入圖像圖片的基本格式GIF圖像格式：擴展名是.GIF。它在壓縮過程中，圖像的像素資料不會被丟失，然而丟失的卻是圖像的色彩。GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及字體。有一些數(shù)碼相機會有一種名為TextMode的拍攝模式，就可以儲存成GIF格式。GIF可以包含透明區(qū)域和多幀動畫。因此GIF通常適用于卡通、圖形、logo、帶有透明區(qū)域的圖形、動畫等。JPEG圖像格式：擴展名是.JPG，其全稱為JointPhotograhicExpertsGroup。它利用一種失真式的圖像壓縮方式將圖像壓縮在很小的儲存空間中，其壓縮比率通常在10:1～40:1之間。這樣可以使圖像占用較小的空間，所以很適合應(yīng)用在網(wǎng)頁的圖像中。JPEG格式的圖像主要壓縮的是高頻信息，對色彩的信息保留較好，因此也普遍應(yīng)用于需要連續(xù)色調(diào)的圖像中。插入圖像圖片的基本格式PNG(PortableNetworfGraphics)的原名稱為"可移植性網(wǎng)絡(luò)圖像"，是網(wǎng)上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30％的無損壓縮圖像文件。它同時提供24位和48位真彩色圖像支持以及其他諸多技術(shù)性支持。由于PNG非常新，所以目前并不是所有的程序都可以用它來存儲圖像文件，但Photoshop可以處理PNG圖像文件，也可以用PNG圖像文件格式存儲。插入圖片圖片標簽：<img/>，此標簽為單標簽。該標簽屬性src：圖像地址alt：圖像缺失時的顯示信息，同時供搜索引擎識別圖片用。title：提示信息，鼠標放上就會顯示出提示文字。引入圖片例子<imgsrc=“3d.jpg”alt=“”title=“”/><imgsrc=“images/abc.jpg”alt=“”title=“”/><imgsrc=“../p1/sub2/123.jpg”alt=“”title=“”/><imgsrc=“”alt=“”title=“”/>路徑什么是絕對路徑：大家都知道，在我們平時使用計算機時，要找到需要的文件就必須知道文件的位置，而表示文件的位置的方式就是路徑，例如只要看到這個路徑：c:/website/img/photo.jpg我們就知道photo.jpg文件是在c盤的website目錄下的img子目錄中。類似于這樣完整的描述文件位置的路徑就是絕對路徑。例如：<imgsrc=“file:///c:/website/img/photo.jpg”alt=“圖片展示”/><imgsrc=""alt=""title=""/>路徑什么是相對路徑：如果你使用絕對路徑c:/website/img/photo.jpg，那么在自己的計算機上將一切正常，因為確實可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件，但是當你將頁面上傳到服務(wù)器的時候就很可能會出錯了，因為你的網(wǎng)站可能放在服務(wù)器的c盤或d盤，也可能在aa目錄下，還可能在bb目錄下，總之沒有理由會有c:/website/img/photo.jpg這樣一個路徑。那么，在index.htm文件中要使用什么樣的路徑來定位photo.jpg文件呢？對，應(yīng)該是用相對路徑所謂相對路徑，顧名思義就是相對自己來說，文件位置是怎樣的。例如：<imgsrc=“./photo.gif”/>，此時src的值并沒有給出該圖片的“實際位置”。相對路徑：./當前目錄，可以省略../上級目錄../../上兩級目錄../img/sub/上級目錄里的img目錄里的sub目錄。圖像映射成型網(wǎng)站示例圖像映射

在HTML中可以讓一張圖片擁有多個超鏈接，一幅圖像被切分成不同的區(qū)域，每個區(qū)域可以鏈接到不同的地址，這稱為圖像的熱區(qū)。每一個熱區(qū)可以有各自的鏈接地址，瀏覽者單擊熱區(qū)后，就會轉(zhuǎn)到相應(yīng)的地址，這就是圖像映射。圖像映射圖像映射的使用<imgsrc="images/hot.jpg"usemap="#map1"><mapname="map1"><!--矩形四角坐標--><areashape="rect"coords="33,36,195,189"href="01圖片標記.html"><!--圓形中心坐標、半徑--><areashape="circle"coords="300,300,40"href="02圖片超鏈接.html"><!--多邊形各點坐標--><areashape=“poly”coords=“400,80,360,140,400,180,459,140,500,140”href=“#”></map>使用dreamware可以看熱區(qū)效果DIV標簽和SPAN標簽DIV標簽：（division分區(qū)）div標簽早在HTML3.0時代就已經(jīng)出現(xiàn)，但那時并不常用，直到CSS的普及，才逐漸發(fā)揮出它的優(yōu)勢。div是一個區(qū)塊容器標簽，其沒有語義與表現(xiàn)上的含義，即<div></div>只是相當于一個容器，可以容納段落、標題、表格、圖片乃至章節(jié)、摘要和備注等各種HTML元素。可以把<div></div>視為一個獨立的對象，用于以后學(xué)習(xí)CSS的控制。聲明時只需要對<div>進行相應(yīng)的控制，其中各種標簽元素都會隨之改變。<div>是一個通用的塊級元素，它包圍的元素會自動換行。用它可以容納各種元素，從而方便排版。DIV標簽和SPAN標簽SPAN標簽該標簽在HTML4.0時才被引入，它是專門針對樣式表設(shè)計的標簽。與<div>標簽一樣，span作為容器標簽被廣泛應(yīng)用在HTML語言中。在<span>和</span>中間可以容納多種HTML元素，從而形成獨立的對象。該標簽是一個行內(nèi)元素(inlineelements)，在它的前后不會換行。該標簽沒有語義與表現(xiàn)上的含義，純粹是應(yīng)用樣式，當其他行內(nèi)元素都不合適時，就可以使用<span>元素。該標簽可以包含于<div>標簽中，成為它的子元素，而反過來則不成立，即<span>標簽不能包含<div>標簽。從div和span之間的區(qū)別和聯(lián)系，就可以更深刻地理解塊級元素和行內(nèi)元素的區(qū)別了。div標簽和span標簽案例<p>div標簽不同行,一個標簽占一行：</p><div><imgsrc="cup.gif"></div><div>這是一個div標簽中的內(nèi)容</div><div><imgsrc="cup.gif“></div><p>span標簽會在同一行連續(xù)出現(xiàn)：</p><span><imgsrc="cup.gif“></span><span>這是一個span標準中的內(nèi)容</span><span><imgsrc="cup.gif“></span>HTML引入flash引入flash代碼<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase=""width="400"height="300"><paramname="movie"value="123.swf"/><paramname="quality"value="high"/><embedsrc="123.swf"quality="high"pluginspage=""type="application/x-shockwave-flash"width="400"height="300"></embed></object>HTML引入wmv視頻引入wmv<objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"width="300"height="300"> <paramname="filename"value="abc.wmv"/> <paramname="autostart"value="false"/></object>或者：<objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"width="300"height="300"> <paramname="filename"value="abc.wmv"/> <paramname="autostart"value="false"/></object>或者：<embedautostart="false"src="abc.wmv"width="232"height="232"></embed>HTML引入MP3聲音引入MP3<objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"width="300"height="300"> <paramname="filename"value="abc.mp3"/> <paramname="autostart"value="false"/></object>或者：<embedautostart="false"src="abc.mp3"width="232"height="232"></embed>多媒體內(nèi)容一點說明在html中引入多媒體內(nèi)容，比圖片，聲音，視頻等，雖然在標簽上有共同規(guī)范，但實際上各瀏覽器是否實現(xiàn)，或?qū)崿F(xiàn)到什么程度，差別還是很大的。相對來說，網(wǎng)頁中插入圖片，大家基本上都可相互兼容，可使用的圖片格式也基本集中于gif，jpg，png這幾種。而對于聲音和視頻，因為實際上的格式非常多（幾十上百種），所以各瀏覽器實際上很難做到“全部識別”，甚至可以說識別的很少，而且嚴重依賴于插件。故在實際應(yīng)用中，這類多媒體內(nèi)容基本都集中于使用flash技術(shù)來播放，而flash也是一個插件，只是相對來說各瀏覽器上使用得較為普遍而已。實際上，html中不僅僅能夠表現(xiàn)以上所說的多媒體信息，還能表現(xiàn)比如word，excel，pdf等等各種信息，自然也都依賴于插件，應(yīng)用中很少有人裝這些插件。符號實體一句話理解符號實體?答:符號實體（字符實體）就是用"外號"表示一個字符為什么要用符號實體?一些字符在HTML中擁有特殊的含義，比如小于號大于號(<>)，用于定義標簽的基本形式。如果我們希望瀏覽器正確地顯示這些字符，我們就必須在HTML源碼中插入字符實體，否則可能出現(xiàn)意想不到的效果。比如要想在網(wǎng)頁中輸出：“如果a<b,那么…”，

此時這個小于號就需要用符號實體常見符號實體：空格<>&??

<>&©®符號實體舉例案例演示更多的符號實體請參考相關(guān)html手冊Xml簡介(了解)什么是xmlXML是eXtensibleMarkupLanguage的縮寫XML是一種類似于HTML的標記語言XML是用來描述數(shù)據(jù)的xml和html的區(qū)別XML不是HTML的替代品，XML和HTML是兩種不同用途的語言。XML是被設(shè)計用來描述數(shù)據(jù)的，重點是：什么是數(shù)據(jù)，如何存放數(shù)據(jù)。HTML是被設(shè)計用來顯示數(shù)據(jù)的，重點是：顯示數(shù)據(jù)以及如何更好地顯示數(shù)據(jù)。HTML是與顯示信息相關(guān)的XML則是與描述信息相關(guān)的Xml簡介(了解)xml文檔的基本規(guī)則：xml也是使用類似html格式的標簽層層嵌套構(gòu)成的；xml