HTML語言入門教程

上傳人：y*** IP屬地：安徽上傳時間：2023-06-23 格式：DOC 頁數：58 大小：158KB 積分：15 舉報 版權申訴

已閱讀5頁，還剩53頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML語言入門教程(一)什么是HTML語言

HTML(HyperTextMarkUpLanguage)是使用特殊標記來描述文檔結構和表現形式的一種語言，由W3C(WorldWideWebConsortium)所制定和更新，我們可以用任何一種文本編譯起來編輯HTML文件，因為它就是一總純文本文件。HTML語言的基本結構下面我們來看一小段HTML語言的代碼，來了解HTML語言的基本結構：<html>

<head>

<title>HTML語言的基本結構</title>

</head>

<body>

HTML(HyperTextMarkUpLanguage)是使用特殊標記來描述文檔結構和表現形式的一種語言。

</body></html>將這一小段代碼粘貼至文本文件中，然后選擇“另存為”，將文件的后綴名改為.htm或者.html即可，然后再所在的目錄下就可看到一個IE的圖標，名字就是你所存的文件名稱。<html>…………</html>

這是聲明HTML文件的語法格式。每一個HTML文件，都必須以<HTML>開頭，以</HTML>結束<head>…………</head>

這是文件頭聲明的語法格式。在這之內的所有文字都屬于文件的文件頭，并不屬于文件本體。<title>…………</title>

這是聲明文件標題的語法格式。在這之中寫下的所有內容，都將寫在網頁最上面的標題欄中。<body>…………</body>

這是聲明文件主體的語法格式。在者之間寫下的內容都是文件的主體，也就是說將會被顯示在客戶區(qū)之中。注意：幾乎每一種HTML語言的語法都是以<>開頭，以</>結束。在編輯HTML語言過程中，也可以使用注釋。語法格式為：<!-文件注釋->。就好像C語言中的/*…………*/一樣，中間的內容只是解釋說明，并不被編譯器所編譯。HTML語言的基本單位1.長度單位

長度單位可以用來定義水平線、表格邊匡、圖像等對象的長、寬、高等一系列屬性，同時也可以用來定義這些對象在頁面上的位置等屬性，用來描述頁面上可能遇到的各種長度。

長度的表示方法有兩種：絕對長度和相對長度。他們的單位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每個點，而百分比代表的是相對于客戶區(qū)的多少。下面我們就以水平線的寬度為例，說明這兩種表示方法。<html>

<head>

<title>HTML語言的長度表示</title>

</head>

<body>

HTML(HyperTextMarkUpLanguage)是使用特殊標記來描述文檔結構和表現形式的一種語言。

<hrwidth="500">

<!絕對長度的聲明>

<hrwidth="50%">

<!相對長度的聲明>

</body></html>

在文本編譯器中編譯，改變網頁的大小，就會看到這兩者表示長度方法的不同。

其中<hr>標記是在頁面上建立水平線的標記。width是水平線元素中的一種屬性，用來表示水平線的寬度。這里width="500"即表示這個水平線的寬度是500像素；width="%50"即表示水平線占據客戶區(qū)的總寬度的%50。2.顏色單位

和長度單位一樣，顏色單位也是描述頁面表現形式的一種很重要的的數據類型。顏色單位有三種表示方法：16進制顏色代碼、10進制RGB碼、直接顏色名稱。這三種表示方法不同，但是效果卻是一樣的。下面用一小段代碼說明這三種顏色的表示方法。<html>

<head>

<title>HTML語言中顏色的不同表示方法</title>

</head>

<body>

<fontcolor="red">靜夜思</font><br><!紅色>

<fontcolor="#008000">窗前明月光</font><br><!綠色>

<fontcolor="rgb(0,0,255)">疑是地上霜</font><br><!藍色>

<fontcolor="#ffff00">舉頭望明月</font><br><!黃色>

<fontcolor="#800000">低頭思故鄉(xiāng)</font><!栗色>

</body></html>

注意：本文件在保存時請選擇Unicode字符型進行保存。

16進制顏色代碼，語法格式：#RRGGBB。16進制顏色代碼之前必須有一個“#”號，這種顏色代碼是由三部分組成的，其中前兩位代表紅色，中間兩位代表綠色，后兩位代表藍色。不同的取值代表不同的顏色，他們的取值范圍是00--FF。

10進制RGB碼，語法格式：RGB(RRR,GGG,BBB)。在這種表示法中，后面三個參數分別是紅色、綠色、藍色，他們的取值范圍是0--255。以上兩種表達方式可以相互轉換，標準是16進制與10進制的相互轉換。

直接顏色名稱，可以在代碼中直接寫出顏色的英文名稱。

以上三種表示方法的效果相同，一般16進制顏色代碼的表示方法比較常用。讀者可以根據自己的喜好和實際情況來決定使用哪一種表示方法。關于不同顏色的定義，請查看相關資料。。3.URL路徑

URL(UniversalResourceLocator)路徑是一種互聯網地址的表示法。在這個數據里可以包括以何種協議連接、要連接到哪一個地址、連接地址的端口(Port)號以及服務器(Server)里文件的完整路徑和文件名稱等信息。在HTML中，URL路徑分為兩種形式：絕對路經和相對路徑。

a.絕對路徑：

絕對路徑是將服務器上磁盤驅動器名稱和完整的倫夠寫出來，同時也會表現出磁盤上的目錄結構。

語法格式：

其中，<scheme>是某一種傳輸協議，而<scheme_dependent_information>則是連接的位置信息。

例如：

<ahref="">

<ahref="file:///D:/test/html.htm">

b.相對路徑：

相對路徑是相對于當前的HTML文檔所在目錄或站點根目錄的路徑。

語法格式：

相對關系/部分路徑/文件名

根據相對路徑的參照點又可以分為相對文檔的相對路徑以及相對根目錄的相對路徑。

<1>相對文檔：

這種路徑的表現形式是根據目標文檔所在目錄和當前文檔所在目錄之間的關系的一種表現形式?！?./”表示上一級目錄，沒有“../”表示當前目錄。

例如當前文檔的路徑是：test/project1/index.htm。我們要找test目錄下的html.htm。而當前的目錄是project1，我們要回到上一級目錄中，所以路徑是“../html.htm”。

<2>相對根目錄：

這種路徑根據目標文檔相對于根目錄的關系的一種表現形式。在這種表達式種的第一個字符是“/”，這個符號表示這個路徑是一個相對于根目錄的表達式。

例如：

<ahref="/test/html.htm">

這一課我給大家介紹html文檔中head部分的基本使用方法。

head這一部分是由標記<head>開始，以標記</head>結束，是html文檔的首要部分。下面我們看一下head部分所包含的元素：元素描述title文檔標題meta描述非html標準的一些文檔信息link描述當前文檔與其他文檔之間的連接關系base定義體試時默認的外部資源script腳本程序內容style樣式表內容下面簡要介紹一下各個部分的功能及用法：

title：

title包含的內容將會被顯示在瀏覽器窗口的標題欄中。給自己的網頁起一個適當的名字，可以體現出一些自己的個性。

語法格式：

在省略號處加入的文字或符號，都將顯示在瀏覽器的標題欄中。

meta：

meta元素提供的信息是用戶不可見的。下面是meta的幾種用法：定義搜索關鍵字：

這里介紹兩種基本的用法：<metaname="keywords"content（內容）="html,css,javascript"><metaname="description"(描述，描寫)content="網頁制作">

這樣一來，在你的網頁中就會體現出這樣的信息。但是這些信息是不可見的，只是提供給那些搜索引擎使用。

控制頁面緩存：<metahttp-equiv="pragma"（雜注）content="no-cache">

瀏覽器一般為了節(jié)約時間，都在本地硬盤上保存一個網上的文件作為臨時版本。在用戶下次打開這個網頁的時候，瀏覽器將會直接調用硬盤上的這個版本，而不是網上的。如果想讓瀏覽者每次打開網頁的時候都是看到的最新版本，那么就在網頁上加上這一句吧！

定義語言：<metahttp-equiv="content-type"content="text/html;charset="GB2312">

我們可以通過這樣的語句設定語言的編碼方式。這樣，瀏覽器就可以為我們正確的選擇語言，不需要我們來選取。上面的例子顯示的就是簡體中文，如果想要顯示繁體中文，將GB3212替換為BIG5就可以了。

刷新頁面<metahttp-equiv="refresh"content="60",URL="new.htm">

這樣的語句可以讓我們的瀏覽器按照content屬性中制定的時間來跳轉到URL屬性中設定的URL地址。上面的例子就是在打開頁面60秒后調用一個新的頁面new.htm。如果沒有能夠找到new.htm，瀏覽器就﹞執(zhí)行刷新本頁的操作。這也是大多數聊天室的設定方法。

link：

這個元素用來指定當前文檔和其他文檔之間的聯接關系。

語法格式：<linkrel="描述"href="URL地址">

rel說明兩個文檔之間的關系；href說明目標文檔名。以下是一個指定外聯樣式表文件的例子：<linkrel="stylesheet"href="style.css">

關于css層疊樣式表，請查閱有關資料。

base：

用于定義文檔提交是默認的外部資源。

語法格式：<basehref="原始地址"target="目標窗口名稱">

href指定文檔中鏈接到的所有文件默認的URL地址。在這里指定href的屬性，所有的相對盧勁的前面都會加上href屬性中的值。

target指定文檔中所有鏈接的默認打開窗口。最常見的應用是在框架頁(frame)中。我們要把Menu框架中的聯接顯示到content框架中，就可以在Menu的網頁中加上<basetarget="content">。這樣，就省去了在Menu網頁上所有鏈接的<a>屬性上加上target屬性了。

script：

標記用來在頁面中加入腳本程序。

語法格式：<scriptlanguage="腳本語言">…………</script>

在language中一定要指定腳本語言的種類。如VBScript等。

style：

用來指定當前文檔的css層疊樣式表。css對于網頁的字體樣式、背景、邊界等都有很大的應用。詳細部分請大家參閱css有關內容。

這一次我給大家介紹html語言中的body的部分用法。大家從各大門戶網站的主頁上就可以看出，body部分占據了大部分的代碼?？梢奲ody是一個網頁代碼的絕對主要部分。body是由<body>開始，由</body>結束。下面我們看一下body部分的元素：元素描述bgcolor背景色background背景圖案text文本顏色link鏈接文字顏色alink活動鏈接文字顏色vlink已訪問鏈接文字顏色leftmargin頁面左側的留白距離topmargin頁面頂部的留白距離下面介紹各個部分的功能及用法：

bgcolor:bgcolor用于指定頁面的背景顏色。在Microsoft公司的IE瀏覽器中，默認情況下是白色，Netscape公司的Navigator瀏覽器的默認情況是灰色。語法格式：<bodybgcolor="顏色值">

background:background屬性用于指定頁面的背景圖案。語法格式：<bodybackground="URL">

下面介紹幾種文字的屬性，可以改變文字的顏色,以及在頁面上留出空白：text

link

alink

vlinkleftmargintopmargin他們的作用分別是：非鏈接文字的顏色；可連接文字的顏色；正被點擊的可鏈接文字的顏色；已被點擊的可鏈接的文字的顏色；頁面左側的留白；頁面頂部的留白。語法格式：<bodytext="color"link="color"alink="color"vlink="color"><bodyleftmargin="value"topmargin="value">示例：<html><head><title>body元素示例</title></head><bodybgcolor="#ff0000"text="#ffff00"leftmargin="100"><p>這里顯示body的示例。</p></body></html>說明：對于link這樣的屬性，大多數html的頁面已經不使用這樣的用法了?，F在多數是在head中加入相應的代碼。要達到的效果是鼠標放到有鏈接的字體上時，字體變色，點擊后字體變?yōu)榛疑?。具體方法如下：A:link{color:#00007f;}

A:visited{color:#65038e;}

A:active{color:#ff0000;}

A:hover{color:#ff0000;}將這段代碼加入到head中，在body中加入有鏈接的文字，就可以看出效果了。這一部分是屬于css中的知識。在body中加入有鏈接的文字：在Dreamweaver中，選定文字后，在下面的Properties中的link中加入想要鏈接到的頁面的地址。在FrontPage中，選定文字后，點擊右鍵就會有相應的選項。第一課基礎

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

當我們暢游Internet時，我們透過瀏覽器所看到的網站，是由HTML(HyperTextMarkupLanguage)語言所構成。HTML(超文件標記語言)是一種建立網頁文件的語言，透過標記式的指令(Tag)，將影像、聲音、圖片、文字等連結顯示出來。HTML標記是由<和>所括住的指令，主要分為:單標記指令、雙標記指令(由<起始標記>，</結束標記>所構成)。HTML網頁文件可由任何文本編輯器或網頁專用編輯器編輯，完成后(以.htm或.html為文件后綴保存)將HTML網頁文件由瀏覽器打開顯示，若測試沒有問題則可以放到服務器(Server)上，對外發(fā)布信息。HTML文件基本架構<HTML>文件開始

<HEAD>標頭區(qū)開始

<TITLE>...</TITLE>標題區(qū)

</HEAD>標頭區(qū)結束<BODY>本文區(qū)開始

本文區(qū)內容

</BODY>本文區(qū)結束</HTML>文件結束<HTML>網頁文件格式。

<HEAD>標頭區(qū):記錄文件基本資料，如作者、編寫時間。

<TITLE>標題區(qū):文件標題須使用在標頭區(qū)內，可以在瀏覽器最上面看到標題。

<BODY>本文區(qū):文件資料，即在瀏覽器上看到的網站內容。注意事項通常一份HTML網頁文件包含二個部份:<HEAD>...</HEAD>標頭區(qū)、<BODY>...</BODY>本文區(qū)。而<HTML>和</HTML>代表網頁文件格式。習慣上一個網站的首頁名稱通常訂為index.htm或index.html這樣只要瀏覽網站，瀏覽器便會自動的找出index.htm文件。第二課字體

<hn>...</hn>標題，設定標題字體大小，n=1(大)~6(小)會自動跳下一行。通常用在如章節(jié)、段落等標題上。如:<h2>標題</h2>標題如:<h3align=center>標題</h3>(標題置中)標題<b>...</b>粗體字。如:<b>粗體字</b>粗體字<i>...</i>斜體字。如:<i>斜體字</i>

斜體字<del>...</del>橫線(表示刪除)。如:<del>橫線</del>

<tt>...</tt>打字體(固定寬度文字)。如:<tt>打字體</tt>

打字體<sup>...</sup>上標字。如:字體<sup>上標字</sup>

字體上標字<sub>...</sub>下標字。如:字體<sub>下標字</sub>

字體下標字<!...>注解(不會顯示在瀏覽器上)，可以多行。如:<!更新日期:2000/1/1>第三課表格

表格是html的一項非常重要功能，利用其多種屬性能夠設計出多樣化的表格。使用表格可以使你的頁面有很多意想不到的效果，使頁面更加整齊美觀。常用表格標記<table>...</table>表格指令。相關屬性:

·align調整

·bgcolor背景顏色

·border邊框

·height高度

·width寬度<caption>...</caption>表格標題。相關屬性:

·align調整<tr>...</tr>表格列(</tr>可省略)。相關屬性:

·align調整<th>...</th>表格欄標題(表頭)粗體字(</th>可省略)。相關屬性:

·align調整

·colspan欄寬

·rowspan欄高<td>...</td>表格欄資料(儲存格)(</td>可省略)。相關屬性:

·align調整

·bgcolor背景顏色

·height高度

·width寬度

·colspan欄寬

·rowspan欄高舉例如:(基礎型)

<tableborder=1align=center>

<tr><td>太平洋網絡學院<td>太平洋網絡學院

</table>太平洋網絡學院太平洋網絡學院太平洋網絡學院太平洋網絡學院如:(加強型)增加背景顏色、表格標題、欄標題、跨欄寬、跨欄高。<tableborder=1align=centerbgcolor=#ccccff>

<tr><td><thcolspan=2>行標題1<thcolspan=2>行標題2

<tr><throwspan=2>列標題1<td>a<td>a<td>a<td>a

<tr><td>b<td>b<td>b<td>b

<tr><throwspan=2>列標題2<td>c<td>c<td>c<td>c

<tr><td>d<td>d<td>d<td>d

</table>表格標題行標題1行標題2列標題1aaaabbbb列標題2ccccdddd第四課標示html提供許多種類的標示標記，作項目標示，而且可以作巢狀式標示！常用標示標記<li>標示項目。如:

<ol>

<li>第一項

<li>第二項

</ol>第一項第二項<ol>...</ol>編號標示，可標示數字或英文、羅馬字母。如:

<oltype=i>

<li>第一項

<li>第二項

</ol>第一項第二項<ul>...</ul>符號標示，可標示數字或英文、羅馬字母。如:

<ul>

<li>第一項

<li>第二項

</ul>第一項第二項<dt>定義項目。<dd>定義資料。<dl>...</dl>定義標示。如:

<dl>

<dt>十進制:<dd>0、1、2、3、4、5、6、7、8、9

<dt>十六進制:<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

</dl>十進制:0、1、2、3、4、5、6、7、8、9十六進制:0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f巢狀式標示巢狀式標示如:<ol><li>第一章<oltype=i><li>第一節(jié)<ul><li>第一段<li>第二段</ul><li>第二節(jié)</ol><li>第二章<li>第三章</ol>第一章第一節(jié)第一段第二段第二節(jié)第二章第三章其他標示標記<dir>...</dir>目錄式標示(自動加圓點)。如:

網絡學院:

<dir>

<li>新手上路

<li>軟件教室

<li>設計教室

<li>開發(fā)教室

</dir>網絡學院:新手上路軟件教室設計教室開發(fā)教室注意事項標示項目符號也可以用<font>...</font>標記，以符號字元(○、◆、◎、★、■...等)標示。如:<fontcolor=#ff0000>●</font>特殊符號:在html文件中，有些符號是代表特定的意義的。所以當我們要使用這些特殊符號時，便要用替代指令。符號替代指令""或"&&或&<<或<>>或>不可分空格第五課區(qū)段標記

一個網站不僅要內容豐富外，也要有美觀簡潔的版面。html所提供的區(qū)段標記功能，如果可以好好的利用也會有相當不錯的效果。常用區(qū)段標記<hr>產生水平線。如:<hraling=certenwidth=90%><br>跳下一行。如:太平洋網絡學院，<br>網上學電腦的好去處。

太平洋網絡學院，

網上學電腦的好去處。<p>...</p>段落，跳下一行并加一行空白。(</p>可省略)如:太平洋網絡學院，<p>網上學電腦的好去處。

太平洋網絡學院，網上學電腦的好去處。<center>...</center>置中。如:<center>置中</center>置中<nobr>...</nobr>不跳下一行。如:<nobr>太平洋網絡學院，</nobr>網上學電腦的好去處。

太平洋網絡學院，網上學電腦的好去處。<pre>...</pre>以文件原始格式顯示。如:<pre>原始格式:文件</pre>原始格式:文件第六課鏈接

鏈接可說是html中最重要的功能！因為html擁有鏈接的功能，使你能接上internet、www……享受多姿多彩的網絡世界?；旧湘溄臃殖?外部鏈接——鏈接至網絡的某個url網址或文件，可參考考網絡鏈接方式。

內部鏈接——鏈接html文件的某個區(qū)段。網絡鏈接方式網絡鏈接方式://主機名稱/路徑/文件名稱網址如:http:///文件傳輸如:ftp:///gropher傳輸如:gropher:///遠端登入如:telnet:///文件下載如:file://data/html/file.zipnetnews傳輸如:news:e-mail如:mailto:pcedu@常用鏈接標記<base>設定基本url位置或路徑，以後只要設定文件名稱即會自動加上位置或路徑。相關屬性:

·href鏈接的url位址或文件

·target指定鏈接到的url位址或文件顯示于那一個視窗(可和<frame>視窗標記配合使用或開新的視窗)如:

<basehref="http:///">

<ahref="kk.htm">■</a><basehref="http:///"target=frame1><a>...</a>鏈接指令。相關屬性:

·href鏈接的url位址或文件

·name名稱

·target指定鏈接到的url位址或文件顯示于那一個視窗(可和<frame>視窗標記配合使用或開新的視窗)如:

外部鏈接

<ahref="http:///">■</a><ahref="http:///"target=frame1>■</a>

第六課鏈接

內部鏈接

·ch1.htm文件

<ahref=#a>■</a>(欲鏈接至html文件a點)<aname=a>■</a>(html文件a點)·ch2.htm文件

<ahref=ch1.htm#a>■</a>(欲鏈接至ch1.htm文件a點)"■"表示鏈接點，可以是文字或圖案。(即游標移到時，會變成手指形狀的地方)<link>鏈接指令(用于head區(qū)，設定css文件)。<meta>儲存應用資訊，可設定時間載入網頁(用于head區(qū))。相關屬性:

·charset設定

·content回應表頭資料內容,若是數字表示秒數

·http-equiv回應表頭,若設定為refresh載入url設定

·urlhtml位置如:

·設定中文自動跳行。

<metahttp-equiv="content-type"content="text/html;charset=gb2312">·設定十秒回到首頁。(若不設定html文件位置則再載入原h(huán)tml文件)

<metahttp-equiv="refresh"content=10url=index.htm>設定鏈接、未鏈接部份顏色設定鏈接、未鏈接部份顏色，用<body>...</body>標記。相關屬性:·alink按下鏈接部份未放開時顏色

·link未看過的鏈接部份顏色

·vlink已看過的鏈接部份顏色如:<bodylink=#0000ffalink=#ff0000vlink=#00ff00>第八課設置圖片

圖片增加了網站版面的美觀，不過也不要放了大量的圖片，而拖慢網站傳輸的效率有關設定圖片的方法共有以下幾種:設定html文件背景圖片、背景顏色。<body>...</body>標記。

如:<bodybackground=a.gif>...</body>或

<bodybgcolor=#000000>...</body>設定圖片。<img>標記。設定地圖。<map>...</map>標記。常用圖片標記<img>指令相關屬性:

·align調整

·alt提示字

·border邊框

·height高度

·src文件或url位址

·usemap地圖名稱

·width寬度如:可插入圖片(gif、jpg格式)、avi電影

<imgsrc="../../../images/pcedu_lo.gif"alt="太平洋網絡學院"align=topborder=1>

</center><map>...</map>地圖相關屬性:

·name名稱<area>設定地圖動作區(qū)域相關屬性:

·coords設定動作區(qū)域座標(左上角座標:x1,y1;右下角座標:x2,y2)

·href動作區(qū)域連結點(可載入位址或文件)

·nohref動作區(qū)域連結點不動作

·shape外型舉例設定地圖

<imgborder=0src=a.gifusemap=#a>

<mapname=a>

<areashape=rectcoords=0,0,200,100href=1.htm>

<areashape=rectcoords=0,100,200,200nohref>

<areashape=rectcoords=0,200,200,300href=3.htm>

</map>第九課加入聲音

html不僅能插入圖片，也可以載入midi音樂、wav音效喔！常用音樂標記<bgsound>背景音樂、音效。相關屬性:

·loop循環(huán),背景音樂播放次數

·src文件或url位址(可為wav、midi格式)如:

<bgsoundsrc=m-1.midloop=true>內嵌音樂插件<embed>...</embed>內嵌插件。相關屬性:

·height高度

·width寬度(可設百分比%)

·src設定內嵌物件的url位址

·loop循環(huán),背景音樂播放次數

·autostart自動播放如:

<embedsrc=m-1.midwidth=145height=60autostart=trueloop=true></embed>第十課滾動條

這是由ie提供的滾動條，可不要被眾多的屬性嚇到了，越多的屬性功能越強喔！【文字卷動標記】<marquee>...</marquee>文字卷動(滾動條)。【相關屬性】·behavior=設定卷動方式

--alternate交替來回卷動

--scroll卷動(預設)

--slide滑動·bgcolor=color背景顏色

·direction=設定卷動方向

·height=n高度

·loop=n循環(huán),卷動次數(預設循環(huán))

·scrollamount=n設定卷動距離

·scrolldelay=milliseconds設定卷動時間

·truespeed=milliseconds設定卷動速度

·width=n寬度(可設百分比%)【舉例】如:<marqueebgcolor=redbehavior=alternatedirection=leftscrollamout=10scrolldelay=100><fontcolor=white>太平洋網絡學院</font></marquee>如:<marqueebgcolor=greenheight=50behavior=scrolldirection=upscrollamout=10scrolldelay=300><fontcolor=white><center>太平洋網絡學院</center></font></marquee>一html的標簽table，tbody,tr,td稱為html的標簽，以雙標簽的形式出現，所謂雙標簽，也就是有一個<table>就有一個對應的</table>與之對應，同樣適用于其他的雙標簽。一般標簽都為雙標簽。標簽最終所顯示的網頁效果由各個屬性來表達，屬性可選擇使用，不一定全部都用。在整個圖片或帖子里雙標簽以首尾呼應的方式出現。<tablealign=centerbackground="背景圖片地址"border=0cellpadding=0cellspacing=0bordercolor=#0000ffwidth="100%">

<tbody>

<tr>

<td>

這里是圖片,文字或帖子內容.

</td>

</tr>

</tbody>

</table><table>的常用參數設定：<tablewidth="400"border="1"cellspacing="2"cellpadding="2"align="center"valign="top"background="myweb.gif"bgcolor="#0000ff"bordercolor="#cf0000"bordercolorlight="#00ff00"bordercolordark="#00ffff">width="400"

表格寬度，接受絕對值(如width=80)及相對值(width=80%)。border="1"

表格邊框的厚度，不同瀏覽器有不同的內定值。cellspacing="2"

表格格線的厚度align="center"

表格的擺放位置(水平)，可選值為：left(居左),right(居右),center(居中)valign="top".

表格內內容的對齊方式(垂直)，可選值為：top,middle,bottom。background="myweb.gif"

表格的背景圖片，與bgcolor不要同用。bgcolor="#0000ff"

表格的背景顏色，與background不要同用bordercolor="#cf0000"

表格邊框顏色bordercolorlight="#00ff00"

表格邊框向光部分的顏色bordercolordark="#00ffff"

表格邊框背光部分的顏色，使用bordercolorlight或bordercolordark時bordercolor將會失效。播放器寬度width和高度height的值根據需要自定二帖圖格式帖圖基本代碼如下：<imgsrc="圖片連接url地址"><img>稱圖形標記，主要用來插入圖形標記。三文字設制基本代碼如下：<palign=center><fontcolor=#0066ffface=隸書size=5>插入文字</font></p>align=center表示字體居中，可選值為居右（right）居左（left）color=顏色代碼face=字體常用字體為：宋體.黑體.楷體.仿宋.幻緣.新宋體.細明體等size=字體大小，這里的最大值為7取值越大文字就越大四加入音樂<embedsrc="音樂文件地址">常用屬性如下：src="your.mid"

設定midi檔案及路徑，可以是相對或絕對。autostart=true

是否在音樂檔下載完之后就自動播放。true是，false否(內定值)。loop="true"

是否自動反復播放。loop=2表示重復兩次，true是，false否。hidden="true"

是否完全隱藏控制畫面，true為是，no為否(內定)。starttime="分:秒"

設定歌曲開始播放的時間。如starttime="00:30"表示從第30秒處開始播放。volume="0-100"

設定音量的大小，數值是0到100之間。內定則為使用系統(tǒng)本身的設定width="整數"和high="整數"

設定控制面板的高度和寬度。(若hidden="no")align="center"

設定控制面板和旁邊文字的對齊方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottomcontrols="smallconsole"

設定控制面板的外觀。預設值是console。

console一般正常面板

smallconsole較小的面板

playbutton只顯示播放按鈕

pausecutton只顯示暫停按鈕

stopbutton只顯示停止按鈕

volumelever只顯示音量調節(jié)按鈕貼音樂的完整語法如下:一:隱藏播放器<embedsrc="音樂文件地址"hidden=trueautostart=trueloop=true>二:不隱藏播放器<embedsrc="音樂文件地址"width=""height="">入門HTML>

<HEAD>

</HEAD>

<BODY>

網頁的內容

</BODY>

</HTML>

例1-1

當你點開任何網頁的源文件的時候，相信都可以在長長的字符中尋找到上面這些單詞,或者你現在把上面這些單詞復制到你新建的文檔文件中，保存之后把后綴名改成.html，一個網頁就誕生了。這就是HTML語言，它不象C++，VB等等程序語言要你摸不清頭腦，HTML語言只是一個在SGML定義下的描述性語言，或者說是標識語言。

既然是標識語言，我們就從標識開始進行學習好了，也許當你完全掌握標識之后，就會發(fā)現基本上已經明白什么是HTML了。

標識的寫法:

1.任何標識都應該寫在"<"和">"之間，如<html>

2.標識的字母沒有大小寫的區(qū)分。

3.在起始標識中加入“/”就是終止標識，一般情況下有起始表示就有終止標識。例如<html>...</html>

4.有的標識需要加入參數，有的不必，需要注意的是這些參數只能加在起始標識中。

現在我們開始認識第一類標識：文件標識

事實上你已經見過了這些標識,沒錯就是<HTML>；<HEAD>；<BODY>；<TITLE>，

這段標識告訴瀏覽器現在運行HTML文件，所以你寫HTML文件都應該以<html>開頭，</html>.

這是HTML文件的開頭部分，相應的<body>...</body>就是本文部分，開頭部分主要是用來記載關于這個頁面的一寫重要資訊，所以呢大部分的標記都將在本文部分進行應用。

這里的文字就成了你所建立頁面的標題，你可以更改一下例1-1中非標記部分。

這些標記就構成了HTML的基本構架，其中只有<body>具有參數設定,我們就通過一個例子還認識好了

<BODYtext=""link=""alink=""vlink=""background=""bgcolor=""leftmargin=topmargin=bgproperties="fixed">

text=""

用以設定文字顏色。

link=""

設定一般文字連結顏色。

alink=""

設定剛按下時文字連結顏色。

vlink=""

設定連結后的顏色。（被按過）。

background=""

設定背景墻紙。

bgcolor=""

設定背景顏色。

leftmargin=

設定整份文件顯示畫面的左方邊沿空間，單位為像素。

topmargin=

設定整份文件顯示畫面的上方邊沿空間。

bgproperties="fixed"

固定背景墻紙，當卷動文字時墻紙不會跟著卷動。

這里需要說明的是色彩的問題，色彩是用16進制的紅－綠－藍(red-green-blue,RGB)值來表示的，所以一個顏色也就由RRGGBB的格式構成,而16進制的數碼有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

#000000,其中紅=00，藍=00,綠=00，色彩即為黑色

#0000FF，其中紅=00,綠=00，藍=ff,色彩即為藍色

如果你想深入了解色彩的問題，你可以查看諸如FLASH等等軟件的色彩表.

首先我們看<font>,<basefont>

這兩個標識都是用于控制字體的大小，色彩，字體，但<basefont>可以用于<head></head>之間，控制全文的文字;而<font>只應用與<body></body>之間，控制在它選擇范圍中的文字.兩個標識出現在一個html文件中的時候，沒有被<font>選擇的文字才會受到<basefont>的影響。

下面我們就來看一個例子：

<html>

<head>

<title>H.SWorkshop</title><basefontface="Arial"size="7"color="#000000">

</head>

<body>

歡迎來到<fontface="Arial"size="5"color="ff0000">H.SWorkshop</font>

</body>

<html>

[例2-1]

我們看到<basrfont>告訴IE全文用7號黑色Arial字體顯示，但H.SWorkshop被我們用<font>圍住了，所以執(zhí)行<font>的設定.這里有face=,size=,color=三個參數可以進行設定，

face=

設定字體。

size=(1,2,3,4,5,6,7,-x,+x)

設定字體大小，這里需要注意的是相對值和絕對值，我們在例2-1中，把<font>的size的值改成"-2"你會發(fā)現效果是一樣的，相應的把<basefont>的size值改成其他任何小于7的數值，你就會發(fā)現改變。我們在這里就把size="-2"稱為相對值,被<font>圍住的文字在<basefont>的基礎上，減少2個字符大小,公式為"n-/+x".當然只有<font>可以設定相對值。

color=

設定文字色彩.

這里我們還發(fā)現了一個問題，<basefont>沒有終止標識，但它一樣可以實現它的功能，這就是HTML的空標識，因為我們看到</basefont>沒有存在的意義，所以可以忽略，當然如果你在<basefont>后面添加</basefont>對整個html文件也沒有影響。其他的我們就稱之為圍堵標識。

接下來看<Hn>...</Hn>（n=1,2,3,4,5,6)

這是一個標題標識，從1到6替減，是一個圍堵標識，我們需要注意的是這個標識獨占一行并自動插入一個空行，你可以自己嘗試一下，這里就不舉例說明了。

<STRONG><B><TT><SAMP><CODE><KBD><U><STRIKE><s><BIG><SMALL><SUP><SUB><I><EM><VAR><CITE><DFN><ADDRESS>：

這是對文字進行一些特殊處理的標識，我們就來看看他們的效果來進行學習好了.

歡迎來到H.SWorkshop歡迎來到H.SWorkshop

<strong>歡迎來到H.SWorkshop</strong>歡迎來到H.SWorkshop

<b>歡迎來到H.SWorkshop</b>歡迎來到H.SWorkshop

<tt>歡迎來到H.SWorkshop</tt>歡迎來到H.SWorkshop

<samp>歡迎來到H.SWorkshop</samp>歡迎來到H.SWorkshop

<code>歡迎來到H.SWorkshop</code>歡迎來到H.SWorkshop

<kbd>歡迎來到H.SWorkshop</kbd>歡迎來到H.SWorkshop

<u>歡迎來到H.SWorkshop</u>歡迎來到H.SWorkshop

<strike>歡迎來到H.SWorkshop</strike>歡迎來到H.SWorkshop

<s>歡迎來到H.SWorkshop</s>歡迎來到H.SWorkshop

<big>歡迎來到H.SWorkshop</big>歡迎來到H.SWorkshop

<small>歡迎來到H.SWorkshop</small>歡迎來到H.SWorkshop

<sup>歡迎來到H.SWorkshop</sup>歡迎來到H.SWorkshop

<sub>歡迎來到H.SWorkshop</sub>歡迎來到H.SWorkshop

<i>歡迎來到H.SWorkshop</i>歡迎來到H.SWorkshop

<em>歡迎來到H.SWorkshop</em>歡迎來到H.SWorkshop

<var>歡迎來到H.SWorkshop</var>歡迎來到H.SWorkshop

<cite>歡迎來到H.SWorkshop</cite>歡迎來到H.SWorkshop

<dfn>歡迎來到H.SWorkshop</dfn>歡迎來到H.SWorkshop

<address>歡迎來到H.SWorkshop</address>歡迎來到H.SWorkshop

你是否已經了解了呢，這些就是HTML實現字體特殊效果的標識，唯一特別的是，<address>可以不用插入<br>換行。至于<br>是什么，我想看了明天的排版標識我就可以了解了。

昨天我們已經認識了文字標識，為了讓整個網頁更清晰美觀，我們就不可以少了排版標識，那么現在就要我們開始來認識他們吧。

現在比較講知識產權，呵呵~我們就先來看看如何告訴別人這是你的產權好了，當然我們還可以用它來告訴你的工作伙伴，這段開始是什么，那就是

HTML和其他的程序語言一樣，可以在代碼中添加注釋，來告訴別人這里開始寫的是什么，當然這也是告訴自己，方便以后的管理，不過你放心，這只存在于你的原代碼中，不會在瀏覽器中發(fā)生任何影響。

現在我們開始認識對段落控制的標識，<p>,<br>,<nobr>.

<p>

我們可以把他看做一個空行標識，既在網頁中顯示一段空白行，一般在DW或者FG等網頁編輯工具中，回車即在HTML插入一個<P>，這也是一個空標記，他的常用參數是

align="#"(#=right,left,center)

分別表示左對齊，右對齊，居中。默認值為left.

實現一下下面的例子你就明白了:

<HTML>

<HEAD>

</HEAD>

<BODY>

H.SWrokshop

<p>H.SWrokshop

<palign="center">H.SWrokshop

<palign="right">H.SWorkshop

</BODY>

</HTML>

[例3-1]

這兩個標記分別表示換行和不換行，前者使網頁中的元素直接在下一行，不插入空行，后者則表示不換行，對于一些必須在一行中顯示的文字，對電話號碼等等的顯示比較有用。這里的<br>是個空標識,<nobr>是圍堵標識.需要注意的是align=""在BR中沒有的意義.

這時候我們就要通過一個另一個標識來實現對齊效果，<div></div>,當然這個標識有它更廣泛的用途，在這里只簡單的提一下其中的對齊參數運用。下面我們就來看一個簡單的例子。

<HTML>

<HEAD>

</HEAD>

<BODY>

<DIValign="center">H.SWorkshop

<br>H.SWorkshop</DIV>

<br>H.SWorkshopH.SWorkshopH.SWorkshopH.SWorkshopH.SWorkshopH.SWorkshop<nobr>H.SWorkshop</nobr>

<DIValign="right">H.SWorkshop

<br>H.SWorkshop</DIV>

</BODY>

</HTML>

[例3-2]

這樣一來我們就可以實現對<br>的對齊效果了。

現在我們把align=""的三個值提出來，發(fā)現他們其實自身也是標識，它們可以對單個，單行文字進行圍堵，實現他的效果，這樣又多了一個途徑實現<br>的對齊效果了，具體的就舉例說明了，你可以自行嘗試一下，注意，他們可是圍堵標識哦。

<wbr>

這里把它從換行中分出來，是想大家于<br>對比一下，這是個建議折行的標識，當用戶的分辨率無法完整的顯示出一段文字的時候，你就可以插入這個標識,這時候就會發(fā)生于<br>同樣的效果,如果達到了條件則沒有效果產生，你可以自己嘗試一下，它是一個空標識。接著我們來看看HTML兩個在排版上非常使用的標識。

預格式化文本標識，他們允許你在HTML原文件里輸入空白，并顯示出和你在HTML編輯的一模一樣的格式，區(qū)別就在<pre>顯示出來的是設定好了的字體大小，<listing>顯示小于設定的一號字體,〈xmp>則在<pre>的基礎上把html里的標識也顯示出來。

<pre>

Pleaseuseyourcard.

VISAMaster

<b>Hereisanorderform.</b>

<ul><li>Fax

<li>AirMail</ul>

</pre>

Pleaseuseyourcard.

VISAMaster

<b>Hereisanorderform.</b>

<ul><li>Fax

<li>AirMail</ul>

</listing>

<xmp>

Pleaseuseyourcard.

VISAMaster

<b>Hereisanorderform.</b>

<ul><li>Fax

<li>AirMail</ul>

</xmp>

大家可以自己看看三者的效果。

<hr>

今天的最后一個標識稱為水平線。顧名思義，它實現插入一條水平線的效果。

<HRalign=""size=""width=""color=""noshade>。

align=

設定線條置放位置，可選擇：left；right；center三種設定值。

size=

設定線條厚度，以像素作單位.

width=

設定線條長度，可以是絕對值（以像素作單位）或相對值，默認值為100%。

color=

設定線條顏色，內定為黑色.

noshade

設定線條為平面顯示，若刪去則具陰影或立體，這是默認值。

通過這三天的學習，你是否可以運用已知的標識寫出一個網頁了呢？呵呵~這就開始嘗試一下吧.

今天我們學習的只有一個標識，重點并不在這個標標識本身，而在于這個標識的參數設置，現在我們就來認識一下吧。

<img>

圖形對于一個網頁來說其占的位置盡次于文字所占的比重，我們同過這個標識在網頁中加入一張圖片做到圖文并茂，它只是一個空連接，現在我們就來看看它的參數設定。

<imgsrc=""width=height=hspace=vspace=border=align=""alt=""lowsrc="">

src=

首先我們必須向HTML中導入一張圖片，這張圖片的格式可以是jpg，gif或者png，同時我們還要注意導入圖片的途徑書寫，當你要求導入的圖片和顯示此圖的html在同一個文件夾下，我們就可以只寫文件名即可，如則需要完整的途徑表示。

width=,height=

設定圖象顯示的大小，以象素為單位，不過一般情況下為了保持頁面的美觀，我們使用真實的大小為佳，通過專業(yè)的圖形編輯工具來編輯圖形的大小。

border=

設定圖象邊框的大小，單位也是象素，它可以是任何數值，在現代網頁編輯中通常取值為1。

hspace=,vspace=

設定圖象邊緣的空白數，hspace設定左右，vspace設定上下，這樣可以確保其他元素與圖片的距離。

align=（top,middle,bottom,left,right）默認值為botom

這個參數昨天我們已經講過，在這里我們我們需要注意的是它的作用是控制文字的位置，具體的運用我們就通過這下面的例子來看看好了.

alt=

在圖片顯示的位置插入一段文字，當圖片還沒有被讀取或這瀏覽者使用的是文字游覽器的時候，這段文字就會顯示出來。

lowsrc=

同樣在顯示src所顯示的圖片之前先顯示出一張圖片，條件也是在src還沒有被讀取的時候，一般我們用于顯示原圖片的縮略圖，使瀏覽者不會因為圖片讀取慢而失去瀏覽的興趣。

表格在網頁排版中所占的比重不用說相信大家也都知道，它把整個頁面清晰的分成多個區(qū)域。專業(yè)的網頁怎么可以少了對表格的操作呢~現在我們就來看看關于表格的標識。首先我們必須建立一個表格，我們可以通過<table>著個圍堵標識來實現，著個標識的作用就好象<html>告訴瀏覽器開始處理HTML文件一樣，它告訴瀏覽器現在開始處理表格，其他所有的表格標識都必須寫在<table>里面。

關于它的參數比較多，我們現在一個個來看它有什么作用。

<tablewidth=""border=""cellspacing=""cellpadding=""align=""valign=""background=""bgcolor=""bordercolor=""bordercolorlight=""bordercolordark=""cols=""rules=""frame="">

windth=

設定表格的寬度，一般來說在這層我們只需要指定一個表格的寬度就可以了。這個值可以是絕對的也可以是相對的。

border=

設定表格邊框的厚度，當取值為0時或者不用這個參數的時候，表格就不在瀏覽器中顯示出來，但表格中的元素仍然是按表格排列。

cellspacing=

表格線的厚度，為了和border=區(qū)別開來，我們看個例子

<tablewidth="70"border="1">

<tr>

</tr>

<tr>

</tr>

</table>

<tablewidth="70"border="1"cellspacing="5">

<tr>

</tr>

<tr>

</tr>

</table>

[例5-1]

比較一下這兩個例子，我們就可以很清晰的看到兩個例子的不同.

cellpadding=""

文字和格線之間的距離，使文字看起來更清晰。

align=""(left,right,center)

這個值在前面我們已經重復的介紹過了，這里是對表格的位置進行水平位置設定.

valign=""(top,middle,bottom)

這是對表格垂直位置的設定.

background=""

導入表格的背景圖片。

bgcolor=""

設定表格的背景顏色。

bordercolor=""

設定表格的邊框顏色。（注意，當設定border=為0時，這個值無效)

bordercolorlight=""

設定表格邊框向光部分的顏色.

bordercolordark=""

設定表格邊框背光部分的顏色.

cols=""

表格欄位數目，只是讓瀏覽器在下載表格是先畫出整個表格而己.

frame=""(box,above,below,hsides,vsides,lhs,rhs,void)

顯示邊框，參數的含義依此是：顯示所有邊框，只顯示上邊框，只顯示下邊框，只顯示上下邊框，只顯示左右邊框，只顯示左邊框，只顯示右邊框，不顯示任何邊框.

rules=""(all,groups,rows,cols,none)

顯示分隔線，參數的含義依此是：顯示所有分隔線，只顯示組與組之間的分隔線，只顯示行與行之間的分隔線，只顯示列與列之間的分隔線，不顯示任何分隔線。

建立了一個表格區(qū)，接著我們就要把這個表格分開，那么就必須用到<tr></tr>這個標識，一般我們添加多少個<tr></tr>就表格就會分成多少行。一個表格的基本格式如下:

<table>

<tr>

<td>

</td>

</tr>

</table>

[例5-2]

現在我們就來看看<tr>的參數設定吧。

<tralign=""valign=""bgcolor=""bordercolor=""bordercolorlight=""bordercolordark="">

align=""(left,right,center)

這就不多說了。水平位置的設定.

valign=""(top,middle,bottom)

垂直位置的設定琀?瑧?瑬;開嫞??????。

bgcolor=""

這一列的背景色。

bordercolor=""

這一列的邊框顏色。

bordercolorlight=""

這一列的向光部分.

bordercolordark=""

這一列的背光部分.

有了列，就要開始設定單元格，可以說單元格就是一個表格的最小單位。我們用過<td></td>來實現.在<tr>下面寫入多少個<td></td>就會在這一列中顯示出多少個單元格。然后我們來看看對單元格有些什么參數可以設定吧。

<tdwidth=""height=""colspan=""rows

人人文庫> 全部分類> 應用文書 > 規(guī)章制度

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

HTML語言入門教程

文檔簡介

溫馨提示

最新文檔

評論

HTML語言入門教程

文檔簡介

溫馨提示

最新文檔

評論

相關文檔