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

上傳人：2*** IP屬地：湖北上傳時間：2023-02-01 格式：PPT 頁數(shù)：158 大小：904.50KB 積分：28 舉報 版權(quán)申訴

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

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計HTML基礎(chǔ)西安協(xié)同教育HTML是什么1、HTML的由來——

早在web未發(fā)明之前，SGML（StandardGeneralizedMarkupLanguage——標(biāo)準(zhǔn)通用標(biāo)記語言)就早已存在，它包含DTD(文檔類型定義），因而具有可擴展性。但SGML十分龐大，不易學(xué)習(xí)和使用，在計算機上實現(xiàn)也很困難。鑒于這些因素，web的發(fā)明者們根據(jù)當(dāng)時（1989年）計算機技術(shù)的能力，提出了HTML語言。西安協(xié)同教育2、HTML——

是一個按SGML定義的語言；是一種描述性語言；是采用作標(biāo)記定義文本及圖像等元素的特殊格式；是由瀏覽器解釋并顯示的。HTML是什么西安協(xié)同教育標(biāo)記寫法任何標(biāo)記皆由"<"及">"所圍住，如<P>標(biāo)記名與小于號之間不能留有空白字符。某些標(biāo)記要加上參數(shù)，某些則不必。如<fontsize="+2">Hello</font>參數(shù)只可加于起始標(biāo)記中。在起始標(biāo)記之標(biāo)記名前加上符號"/"便是其終結(jié)標(biāo)記，如</font>標(biāo)記字母大小寫皆可。西安協(xié)同教育圍堵標(biāo)記與空標(biāo)記圍堵標(biāo)記

顧名思義，它以起始標(biāo)記及終結(jié)標(biāo)記將文字圍住，令其達(dá)到預(yù)期顯示效果。例如HTMLSource：<b>CreationofWebpage</b>ismyfavourite.

顯示成：CreationofWebpageismyfavourite.

其中<b></b>便稱為圍堵標(biāo)記。

它以起始標(biāo)記<b>及終結(jié)標(biāo)記</b>標(biāo)示文字Creationofwebpage，令它顯示成粗體，兩者失其一都會發(fā)生錯誤顯示。西安協(xié)同教育空標(biāo)記

是指標(biāo)記單獨出現(xiàn)，只有起始標(biāo)記沒有終結(jié)標(biāo)記。例如HTMLSource：

IloveCreationofWebpage.<br>It'sawonderfulplace.

顯示成：

IloveCreationofWebpage.

It'sawonderfulplace.其中換行標(biāo)記<br>便屬空標(biāo)記。

它的作用便是將標(biāo)記后所有東西顯示于下一行，可見終結(jié)標(biāo)記于它是沒意義的，但有些人會為空標(biāo)記加上終結(jié)標(biāo)記，這是為方便記認(rèn)而己，對HTML沒有影響。西安協(xié)同教育第一個HTML文件<HTML><HEAD><TITLE>第一個頁面</TITLE></HEAD><BODY>

我的第一個HTML頁面</BODY></HTML>西安協(xié)同教育HTML文件HTML文件特點文件分兩部分，由<HEAD>至</HEAD>稱為開頭，<BODY>至</BODY>稱本文。

基本上兩者各有適用的標(biāo)記，如<TITLE>只可出現(xiàn)于開頭部分。開頭部分用以存載重要資訊，而只有本文部分會被顯示。

所以大部分標(biāo)記會運用于本文部分。<TITLE>所標(biāo)示的是文件的標(biāo)題。

會出現(xiàn)于瀏覽器頂部及為別人Bookmark時的名稱，所以每頁有不同而明確的標(biāo)題是需要的。HEAD該標(biāo)簽的內(nèi)容不在瀏覽器中顯示其中主要用于保存域該HTML文件本身相關(guān)的各種信息比如<TITLE>則是該文件的名稱，通常顯示在瀏覽器的標(biāo)題欄中整份文件處于標(biāo)記<HTML>與</HTML>之間。

<HTML>用以聲明這是HTML文件，讓瀏覽器認(rèn)出并正確處理此HTML文件。西安協(xié)同教育文件標(biāo)記

西安協(xié)同教育排版標(biāo)記

西安協(xié)同教育字體標(biāo)記

西安協(xié)同教育字體標(biāo)記西安協(xié)同教育清單標(biāo)記

西安協(xié)同教育表格標(biāo)記

西安協(xié)同教育表單標(biāo)記

西安協(xié)同教育框架標(biāo)記

西安協(xié)同教育其余標(biāo)記西安協(xié)同教育BODY<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed“>西安協(xié)同教育BODYtext=“#000000”

用以設(shè)定文字顏色。#000000代表黑色，亦可以采用顏色的名稱，即text=“black”。link=“#0000FF”

設(shè)定一般文字連結(jié)顏色。alink=“#FF0000”

設(shè)定剛按下時文字連結(jié)顏色。vlink=“#0000FF”

設(shè)定連結(jié)后的顏色。（被按過）。background=“bg1.gif”

設(shè)定背景墻紙。GIF或JPEG皆可，可以是絕對途徑或相對途徑。西安協(xié)同教育BODYbgcolor="#FFFFFF"

設(shè)定背景顏色。當(dāng)己設(shè)定背景墻紙時會失去作用，除非墻紙有透明部分。leftmargin=2

設(shè)定整份文件顯示畫面的左方邊沿空間，單位為像素?！褐贿m用于IE』topmargin=2

設(shè)定整份文件顯示畫面的上方邊沿空間?！褐贿m用于IE』bgproperties="fixed"

固定背景墻紙，當(dāng)卷動文字時墻紙不會跟著卷動?！褐贿m用于IE』西安協(xié)同教育調(diào)色原理HTML的顏色表示可分兩種：以命名方式定義常用的顏色，如RED。以RGB值表示，如#FF0000表示red。RGB方式眾所皆知顏色是由"red""green""blue"三原色組合而成的，在HTML中對於彩度的定義是采十六進位的，對於三原色HTML分別給予兩個十六進位去定義，也就是每個原色可有256種彩度，故此三原色可混合成一千六佰多萬的顏色。西安協(xié)同教育調(diào)色原理例如

白色的組成是red=ff,green=ff,blue=ff,RGB值即為ffffff

紅色的組成是red=ff,green=00,blue=00,RGB值即為ff0000

綠色的組成是red=00,green=ff,blue=00,RGB值即為00ff00

藍(lán)色的組成是red=00,green=00,blue=ff,RGB值即為0000ff

黑色的組成是red=00,green=00,blue=00,RGB值即為000000於應(yīng)用時常在每個RGB值之前加上符號#以示分別，但不加亦可。西安協(xié)同教育調(diào)色原理西安協(xié)同教育調(diào)色原理西安協(xié)同教育：像很多電腦語言一樣，HTML文件亦提供注解功能。瀏覽器會忽略此標(biāo)記中的文字（可以是很多行）而不作顯示，一般使用目的：為文中不同部份加上說明，方便日后修改。

這對較復(fù)雜或非私人網(wǎng)頁尤其重要，它不單是提醒自已，亦提醒你的同事這部分做什么、那部分做什么。

例子：

用作版權(quán)聲明。

假如你不希望別人使用或復(fù)制你的網(wǎng)頁，可加上警告字眼。

例子：

西安協(xié)同教育排版標(biāo)記<P><BR><HR><CENTER><PRE><DIV><NOBR><WBR>西安協(xié)同教育<P><P>稱為段落標(biāo)記。作用：為字、畫、表格等之間留一空白行。本來<P>是一圍堵標(biāo)記，標(biāo)于一段落的頭尾，但從HTML2.0開始己不需要</P>作結(jié)尾。<P>的常用參數(shù)：如：<palign="center">align="center"

可選值：right,left,center。

內(nèi)定值：align="left"西安協(xié)同教育<P>示例西安協(xié)同教育<BR><BR>稱為換行標(biāo)記。作用：令字、畫、表格等顯示于下一行。由于瀏覽器會自動忽略原始碼中空白和換行的部分，這令到<BR>成為最常用的標(biāo)記之一。因為無論你在原始碼中編好了多漂亮的文章，若不適當(dāng)?shù)丶由蠐Q行標(biāo)記或段落標(biāo)記，瀏覽器只會將它顯示成一大段。西安協(xié)同教育<BR>錯誤的示例566EBostonPostRD

MamaroneckNY10543-9982

UnitedStatesofAmerica西安協(xié)同教育<BR>正確的示例566EBostonPostRD

<BR>MamaroneckNY10543-9982

<BR>UnitedStatesofAmerica西安協(xié)同教育<HR><HR>稱為水平線。作用：插入一條水平線。<HR>之參數(shù)修改：

以：<HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade>為例。align="LEFT"

設(shè)定線條置放位置，可選擇：left；right；center三種設(shè)定值。size="2"

設(shè)定線條厚度，以像素作單位，內(nèi)定為2。width="70%"

設(shè)定線條長度，可以是絕對值（以像素作單位）或相對值，內(nèi)定為100%。color="#0000FF"『只適用于IE』

設(shè)定線條顏色，內(nèi)定為黑色。#0000FF代表藍(lán)色，亦可以采用顏色的名稱，即text="blue"。noshade

設(shè)定線條為平面顯示，若刪去則具陰影或立體，這是內(nèi)定值。西安協(xié)同教育<HR>示例<HR>

<HRalign="LEFT"size="4">

<HRalign="LEFT"size="2"width="70%"color="#0000FF"noshade>

<HRalign="LEFT"size="4"width="70"color="#008000">西安協(xié)同教育<CENTER><CENTER>稱為居中標(biāo)記。作用：令字、畫、表格等顯示于中間。這標(biāo)記原先是Netscape所定義，后來其它瀏覽器都支持它，但你會發(fā)現(xiàn)很多標(biāo)記已有align=“CENTER”的參數(shù)，<CENTER>似乎多馀了，事實上它還是常用的標(biāo)記之一，其簡單易用，常用于文字上，對于己加有align=“CENTER”參數(shù)的<TABLE>標(biāo)記亦要不厭其煩地加上居中標(biāo)記，因有較多瀏覽器不支持<TABLE>標(biāo)記中的align="CENTER"參數(shù)。西安協(xié)同教育<CENTER><CENTER>Chris'sFirstHomepage</CENTER>

<CENTER>Myprofile</CENTER>西安協(xié)同教育<PRE><PRE>稱為預(yù)設(shè)格式標(biāo)記。作用：令文件按照原始碼的排列方式顯示。這標(biāo)記允許保留你于原始碼中輸入的空白及Return。細(xì)看以下例子你便可體會到此標(biāo)記的威力。除了運用一大堆表格標(biāo)記之外你只有采用這標(biāo)記才能有此效果。西安協(xié)同教育<PRE><pre>CreationofWebpageLogAnalysisIComposerLearning459407480522547586673HTMLAdvanced200268296358385453506</pre>西安協(xié)同教育<DIV><DIV>稱為區(qū)隔標(biāo)記。作用：設(shè)定字、畫、表格等的擺放位置。<DIV>應(yīng)用于StyleSheet（式樣表）方面會更顯威力，它最終目的是給設(shè)計者另一種組織能力，有Class;Style;title;ID等屬性，將會于【StyleSheet】一節(jié)才作詳述，這處只介紹一個屬性設(shè)定。

以<DIValign="center">為例：align="center"

可選值：center;left;right。決定字、畫、表格等居中、靠左或靠右。

<DIValign="center">的作用和居中標(biāo)記<CENTER>一樣，前者是由HTML3.0開始的標(biāo)準(zhǔn)，后者是通用己久的標(biāo)示法。西安協(xié)同教育<DIV><DIValign="center">Chris'sFirstHomepage

<br>What'snew

<br>Myprofile</DIV>西安協(xié)同教育字體標(biāo)記<STRONG><B>

西安協(xié)同教育<STRONG><B>兩者皆能產(chǎn)生字體加粗的效果CreationofWebpage

<br><STRONG>CreationofWebpage</STRONG>

<br><B>CreationofWebpage</B>西安協(xié)同教育<I><EM><VAR><CITE><DFN><ADDRESS>這些標(biāo)記于InternetExplorer都產(chǎn)生斜體效果,這些標(biāo)記中只有<ADDRESS>較為特別，因它包括換行效果所以不必在它前面加上<BR>標(biāo)記西安協(xié)同教育示例<I>CreationofWebpage</I>

<br><EM>CreationofWebpage</EM>

<br><VAR>CreationofWebpage</VAR>

<br><CITE>CreationofWebpage</CITE>

<br><DFN>CreationofWebpage</DFN>

<ADDRESS>CreationofWebpage</ADDRESS>西安協(xié)同教育<U><STRIKE><BIG><SMALL><SUP><SUB>

<U>是加底線的標(biāo)記，一些特別的瀏覽器并不支援，因顧慮到與連結(jié)混淆。<STRIKE>加上刪除線的標(biāo)記。<BIG>令字體加大。<SMALL>令字體變細(xì)。<SUB>為下標(biāo)字，<SUP>則為上標(biāo)字，僅剩的數(shù)學(xué)標(biāo)記。西安協(xié)同教育示例CreationofWebpage

<br><TT>CreationofWebpage</TT>

<br><SAMP>CreationofWebpage</SAMP>

<br><CODE>CreationofWebpage</CODE>

<br><KBD>CreationofWebpage</KBD>

<br><U>CreationofWebpage</U>

<br><STRIKE>CreationofWebpage</STRIKE>

<br><BIG>CreationofWebpage</BIG>

<br><SMALL>CreationofWebpage</SMALL>

<br>12345<SUB>7</SUB>6789<SUP>9</SUP>西安協(xié)同教育<H1><H2><H3><H4><H5><H6>這些是標(biāo)題標(biāo)記，由<H1>至<H6>變粗變大加寬的程度逐漸減小。每個標(biāo)題標(biāo)記所標(biāo)示的字句將獨占一行且上下留一空白行。<H1>HeaderLevel1</H1>

<H2>HeaderLevel2</H2>

<H3>HeaderLevel3</H3>

<H4>HeaderLevel4</H4>

<H5>HeaderLevel5</H5>

<H6>HeaderLevel6</H6>西安協(xié)同教育示例西安協(xié)同教育<FONT><BASEFONT>這兩個標(biāo)記具參數(shù)設(shè)定，且兩者的參數(shù)設(shè)定是一樣的，都是負(fù)責(zé)設(shè)定文字的大小、字形及顏色<BASEFONT>可以用于文件的開頭部分，即<HEAD>與</HEAD>之間的位置，將影響全文字句，是一個空標(biāo)記，用以改變字體顯示的內(nèi)定值。

<FONT>是應(yīng)用于文件的內(nèi)文部分，即<BODY>與</BODY>之間的位置，只影響所標(biāo)示的字句，是一個圍堵標(biāo)記。兩標(biāo)記可同時存在，唯沒被<FONT>所標(biāo)示的字句才直接受<BASEFONT>所影響，而<FONT>本身亦受<BASEFONT>的影響。西安協(xié)同教育<FONT><fontface="Arial"size="+2"color="#008000“>CreationofWebpage</font>face="Arial"

設(shè)定文字的字形。Arial是常用的一種，請不要使用Window內(nèi)建字形以外的字形。于沒有設(shè)定為Gb2312Encoding的中文網(wǎng)頁，NetscapeNetvigator

不會顯示此標(biāo)記所指明的任何中文字形。size="+2"

設(shè)定文字的大小。其值可以是絕對或相對，

絕對的意思便是標(biāo)記自己決定文字的大小，不受<BASEFONT>的影響，如

size="5"表示其大小便是5，而html內(nèi)定值為3，即size="3"和沒有設(shè)定是一樣的。

相對的意思便是在內(nèi)定值3的基礎(chǔ)上增加或減少大小級數(shù)，如size="+2"便等同絕對表示法的size="5"，但若已設(shè)定<BASEFONTsize="n">則其實際大小便是n+2不再是3+2了。<BASEFONT>只有絕對表示法。color="#008000"

設(shè)定文字的顏色。#008000表示綠色西安協(xié)同教育<FONT><fontsize="+1">IloveCreationofWebpage</font>

<br><fontsize="+2"color="#800080">IloveCreationofWebpage</font>

<br><fontface="TimesNewRoman"size="5"color="#008000">IloveCreationofWebpage</font>西安協(xié)同教育清單標(biāo)記或者列表標(biāo)記<OL><LI><UL><MENU><DIR><DL><DT><DD>西安協(xié)同教育<OL><LI><OL>稱為順序清單標(biāo)記。所謂順序清單就是在每一項前面加上1,2,3...等數(shù)目，又稱編號清單<LI>則用以標(biāo)示清單項目。

西安協(xié)同教育<OL><ol type="i“ start="4"></ol>type="i"

設(shè)定數(shù)目款式，其值有五種，請參考右表，內(nèi)定為type="1"。start="4"

設(shè)定開始數(shù)目，不論設(shè)定了哪一數(shù)目款式，其值只能是1,2,3..等整數(shù)，內(nèi)定為start="1"。西安協(xié)同教育<LI><litype="square"value="4">type="square"

只適用于非順序清單，設(shè)定符號款式，其值有三種，如下，內(nèi)定為type="disc"：

符號●是當(dāng)type="disc"時的列項符號。

符號○是當(dāng)type="circle"時的列項符號。

符號■是當(dāng)type="square"時的列項符號。value="4"

只適用于順序清單，設(shè)定該一項的數(shù)目，其後各項將以此作為起始數(shù)目而遞增，但前面各項則不受影響，其值只能是1,2,3..等整數(shù)，沒有內(nèi)定值。西安協(xié)同教育<LI>Mybestfriends:

<ol>

<li>MichelleWei

<li>MichaelWan

<li>GloriaLam

</ol>西安協(xié)同教育<UL><UL>稱為無序清單標(biāo)記。

所謂無序清單就是在每一項前面加上○、■、●

等符號，故又稱符號清單。<ULtype="square">type="square"

設(shè)定符號款式，其值有三種，如下，內(nèi)定為type="disc"：

符號●是當(dāng)type="disc"時的列項符號。

符號○是當(dāng)type="circle"時的列項符號。

符號■是當(dāng)type="square"時的列項符號。西安協(xié)同教育示例MyHomepages:

<ul>

<li>PenpalsGarden

<li>ICQGarden

<li>SoftwareCity

<li>CreationofWebpage

</ul>

西安協(xié)同教育<DL><DT><DD><DL>稱為定義清單標(biāo)記。<DT>用以標(biāo)示定義條目，<DD>則用以標(biāo)示定義內(nèi)容。所謂定義清單就是一種分二層的項目清單，三個標(biāo)記都沒有常用的參數(shù)。而<DT><DD>可以獨立使用，只是一些舊的瀏覽器并不支援，如IE3.0。常用的如<DD>標(biāo)記可用以制造段落第一個字前面的空白。西安協(xié)同教育示例<dl>

<dt>HowtouseDefinitionList

<dd>First,youshouldnotplaceparagraphtagrightafterorbeforealiststructureorbetweentheitemsofalist.Incerntaincontexts,useofextraparagraphtagsshouldalwaysbeavoided,whenyourealizethisconcept,itisquiteasytowriteaHTML.

<dt>Otherthingstoknow

<dd>WeusuallyputonlyONEDefinitiontagfollowingtheDefinitionTermtag,morethanoneDDtagisnotrecommanded.Besides,unlikeDefinitionListisanonemptytag,bothDefinitionTermandDefinitionDescriptionareemptytags.

</dl>西安協(xié)同教育示例西安協(xié)同教育鏈接標(biāo)記<A><BASE>西安協(xié)同教育<A><A>稱連結(jié)標(biāo)記，由<A>與</A>所圍的文字、圖片等等可以成為一個連結(jié)。<A>的一般參數(shù)設(shè)定：例如<ahref="index.html"name="hello"target="_top">西安協(xié)同教育<href屬性>href="index.html"

這參數(shù)不能與另一參數(shù)name同時使用，使用這參數(shù)才能造成可按的連結(jié)。當(dāng)作為一外部連結(jié)時：

href

所設(shè)定的是該連結(jié)所要連到的文件名稱，若該文件與此html檔不是同在一目錄請加上適當(dāng)?shù)穆窂?，相對絕對皆可。當(dāng)作為一內(nèi)部連結(jié)時：

href

所設(shè)定的是該連結(jié)所要連到的同文件內(nèi)參考點或指定文件之參考點，且不要包圍任何字畫只加上結(jié)束標(biāo)示</a>便可以，例如

<ahref=“#there”></a>、

<ahref=“index.html#there”></a>

及

<ahref=".hk/~chris55/index.html#there"></a>

其中there便是參考點，并於其前加上符號#以作識別，參考點由下一個參數(shù)name事先於文件中埋下。西安協(xié)同教育Name屬性name="hello"

這參數(shù)是為文件埋下參考點，作為被連結(jié)，不會被顯示。所以說造成一個內(nèi)部連結(jié)要使用兩次<A>連結(jié)標(biāo)記。一個使用參數(shù)name事先於文件中埋下一參考點，另一個使用參數(shù)href

連到這個參考點。西安協(xié)同教育TARGET屬性target="_top"

設(shè)定連結(jié)被按後之結(jié)果所要顯示的視窗?？蛇x值為：_blank,_parent,_self,_top,框窗名稱。target="框窗名稱"

這只運用於框架中，若被設(shè)定則連結(jié)結(jié)果將顯示於該“框窗名稱”之框窗中，框窗名稱是事先由框架標(biāo)記所命名。target="_blank"或target="new"

將連結(jié)的畫面內(nèi)容，開在新的瀏覽視窗中。target="_parent"

將連結(jié)的畫面內(nèi)容，當(dāng)成文件的上一個畫面。target="_self"

將連結(jié)的畫面內(nèi)容，顯示在目前的視窗中。(內(nèi)定值)target="_top"

將框架中連結(jié)的畫面內(nèi)容，顯示在沒有框架的視窗中。（即除去了框架)西安協(xié)同教育示例1<ahref="/xdjyzx/">現(xiàn)代教育中心</a>

<img

src="sdjtu.gif"width=212height=60border=1alt="現(xiàn)代教育中心"></a>

<img

src="sdjtu.gif"width=212height=60border=0alt="現(xiàn)代教育中心"></a>西安協(xié)同教育示例1西安協(xié)同教育內(nèi)部連接<aname="test"></a>

<ahref="#test">本頁的內(nèi)部連結(jié)</a>

<br><ahref=".hk/~chi/faq.html#14">跳到PenPalGarden的FAQ部分</a>西安協(xié)同教育<BASE><BASE>是一個連結(jié)基準(zhǔn)標(biāo)記，用以改變文件中所有連結(jié)標(biāo)記的參數(shù)內(nèi)定值。它只能應(yīng)用於文件的開頭部分，即標(biāo)記<HEAD>與</HEAD>之間。<BASE>的一般參數(shù)設(shè)定：例如<basehref="/"target="_top">西安協(xié)同教育<BASE>href="/"

設(shè)定該頁網(wǎng)頁中所有HTTP文件及圖形（包括相對路徑連結(jié)及<IMG>圖形標(biāo)記等）的內(nèi)定路徑，其他如ftp://及gopher://等則不受影響。這參數(shù)只可填入一個相對或絕對的路徑，不必填入檔案名稱。一般相對路徑連結(jié)及<IMG>圖形標(biāo)記等是內(nèi)定以該頁網(wǎng)頁所在的目錄作為起點，若依這例子，該文件中所有連結(jié)將會以/作為起點，若其中有連結(jié)如<ahref="index.html">BacktoMainPage</a>，那末它不會連到自已目錄下的index.html，它將會連到Microsoft的首頁，這是因為相對路徑己給<BASE>轉(zhuǎn)成絕對的了。target="_top"

設(shè)定該頁網(wǎng)頁中所有連結(jié)被按後之結(jié)果所要顯示的視窗，免得分別為所有連結(jié)加上target參數(shù)，常應(yīng)用於框架中。其設(shè)定與<A>連結(jié)標(biāo)記中target參數(shù)相同。西安協(xié)同教育圖形標(biāo)記<IMG>IMG>稱圖形標(biāo)記，主要用以插入圖片于網(wǎng)頁中<IMG>的一般參數(shù)設(shè)定：例如<img

src="logo.gif"width=100height=100

hspace=5

vspace=5border=2align="top"alt="LogoofPenPalsGarden" lowsrc="pre_logo.gif">西安協(xié)同教育圖片<IMG>src="logo.gif"

圖片來源，接受.gif,.jpg及.png

格式，前兩者通行己久，后者由96年開始發(fā)展，于未來取代前兩者。若圖片文件與該html文件同處一目錄則只寫上文件案名稱，否則必須加上正確的途徑，相對及絕對皆可。width=100height=100

設(shè)定圖片大小，此寬度、及高度一般采用pixels作單位。通常只設(shè)為圖片的真實大小以免失真，若要改變圖片大小最好事先使用圖像編輯工具。hspace=5vspace=5

設(shè)定圖片邊沿空白，以免文字或其它圖片過于貼近。hspace

是設(shè)定圖片左右的空間，vspace

則是設(shè)定圖片上下的空間，高度采用pixels作單位。border=2

圖片邊框厚度。西安協(xié)同教育圖片<IMG>align="top"

調(diào)整圖片旁邊文字的位置，你可以控制文字出現(xiàn)在圖片的偏上方、中間、底端、左右等，可選值：top,middle,bottom,left,right，內(nèi)定為bottom。alt="LogoofPenPalGarden"

這是用以描述該圖形的文字，若用者使用文字瀏覽器，由于不支持圖片，這些文字更會代替圖片而被顯示。若于支持圖片顯示的瀏覽器，當(dāng)鼠標(biāo)移至圖片上該些文字亦會顯示。lowsrc="pre_logo.gif"

設(shè)定先顯示低解像圖片，若所加入的是一張很大的圖片，下載時很長，這張低解像圖片會先被顯示以免瀏覽失卻興趣，通當(dāng)是原圖片灰階版本。西安協(xié)同教育示例<img

src="girl.gif"width=100height=112border=0alt="beautifulgirl">普通插入西安協(xié)同教育示例<img

src="girl.gif"width=100height=112border=0alt="beautiful"hspace=10vspace=20">設(shè)定上下左右空白位置西安協(xié)同教育示例<img

src="girl.gif"width=100height=112border=4alt="beautiful"hspace=10vspace=20">設(shè)定上下左右空白位置西安協(xié)同教育示例<img

src="girl.gif"width=100height=112alt="beautifullady"align="right"border=0>設(shè)定圖片靠右。西安協(xié)同教育示例<img

src="girl.gif"width=200height=220alt="I'mnotbeautifulrightnow"border=0>放大了的圖片西安協(xié)同教育框架標(biāo)記<FRAMESET><FRAME><NOFRAMES><IFRAME>西安協(xié)同教育框架概念所謂框架便是網(wǎng)頁畫面分成幾個框窗，同時取得多個URL。只要<FRAMESET><FRAME>即可，而所有框架標(biāo)記要放在一個總起的html檔，這個檔案只記錄了該框架如何劃分，不會顯示任何資料，所以不必放入<BODY>標(biāo)記，瀏覽這框架必須讀取這檔案而不是其它框窗的檔案。<FRAMESET>是用以劃分框窗，每一框窗由一個<FRAME>標(biāo)記所標(biāo)示，<FRAME>必須在<FRAMESET>范圍中使用。如下例：<framesetcols="50%,*"><framename="hello"src="up2u.html"><framename="hi"src="me2.html"></frameset>此例中<FRAMESET>把畫面分成左右兩相等部分，左便是顯示up2u.html，右邊則會顯示me2.html這檔案，<FRAME>標(biāo)記所標(biāo)示的框窗永遠(yuǎn)是按由上而下、由左至右的次序。西安協(xié)同教育<FRAMESET><FRAMESET>稱框架標(biāo)記，用以宣告HTML文件為框架模式，并設(shè)定視窗如何分割。

<FRAME>則只是設(shè)定某一個框窗內(nèi)的參數(shù)屬性。<FRAMESET>參數(shù)設(shè)定：

例子：<framesetrows="90,*"

frameborder="0"border=0

framespacing="2"

bordercolor="#008000">西安協(xié)同教育屬性COLS="90,*"

垂直切割畫面(如分左右兩個畫面)，接受整數(shù)值、百分?jǐn)?shù)，*則代表占用馀下空間。數(shù)值的個數(shù)代表分成的視窗數(shù)目且以逗號分隔。例如COLS="30,*,50%"可以切成三個視窗，第一個視窗是30pixels的寬度，為一絕對分割，第二個視窗是當(dāng)分配完第一及第三個視窗後剩下的空間，第三個視窗則占整個畫面的50%寬度為一相對分割。您可自己調(diào)整數(shù)字。ROWS="120,*"

就是橫向切割，將畫面上下分開，數(shù)值設(shè)定同上。唯COLS與ROWS兩參數(shù)盡量不要同在一個<FRAMESET>標(biāo)記中，因Netacape

偶然不能顯示這類形的框架，盡采用多重分割。frameborder=“0”

設(shè)定框架的邊框，其值只有0和1，0表示不要邊框，1表示要顯示邊框。（避免使用yes或no）border="0"

設(shè)定框架的邊框厚度，以pixels為單位。bordercolor="#008000"

設(shè)定框架的邊框顏色。framespacing="5"

表示框架與框架間的保留空白的距離西安協(xié)同教育FRAME<FRAME>參數(shù)設(shè)定：

例子：<framename="top"

src="a.html"

marginwidth="5"

marginheight="5"scrolling="Auto"

frameborder="0"

noresize

framespacing="6"

bordercolor="#0000FF">西安協(xié)同教育屬性SRC="a.html"

設(shè)定此框窗中要顯示的網(wǎng)頁檔案名稱，每個框窗一定要對應(yīng)著一個網(wǎng)頁檔案。你可使用絕對路徑或相對路徑，有關(guān)此兩者詳見於【連結(jié)進階】。NAME="top"

設(shè)定這個框窗的名稱，這樣才能指定框架來作連結(jié)，必須但任意命名。frameborder=0

設(shè)定框架的邊框，其值只有0和1，0表示不要邊框，1表示要顯示邊框。（避免使用yes或no）framespacing="6"

表示框架與框架間的保留空白的距離。bordercolor="#008000"

設(shè)定框架的邊框顏色。顏色值請參考【HTML剖析】。scrolling="Auto"

設(shè)定是否要顯示卷軸，YES表示要顯示卷軸，NO表示無論如何都不要顯示，AUTO是視情況顯示。noresize

設(shè)定不讓使用者可以改變這個框框的大小，亦沒有設(shè)定此參數(shù)，使用者可以很隨意地拉動框架，改變其大小。marginhight=5

表示框架高度部份邊緣所保留的空間。marginwidth=5

表示框架寬度部份邊緣所保留的空間。西安協(xié)同教育示例<framesetrows="80,*"> <framename="top"src="a.html"> <framename="bottom"src="b.html">

</frameset>西安協(xié)同教育示例<framesetrows="80,*,80"> <framename="top"src="a.html"> <framename="middle"src="b.html"> <framename="bottom"src="c.html">

</frameset>西安協(xié)同教育示例<framesetcols="150,*">

<framesetrows="80,*"> <framename="upper_left"src="a.html"> <framename="lower_left"src="b.html">

</frameset> <framename="right"src="c.html">

</frameset>西安協(xié)同教育示例<framesetrows="80,*"> <framename="top"src="a.html">

<framesetcols="150,*"> <framename="lower_left"src="b.html"> <framename="lower_right"src="c.html">

</frameset>

</frameset>西安協(xié)同教育示例<framesetcols="150,*"><framename="left"src="a.html">

<framesetrows="80,*"><framename="upper_right"src="b.html"><framename="lower_right"src="c.html">

</frameset>

</frameset>西安協(xié)同教育<NOFRAMES>當(dāng)別人使用的瀏覽器太舊，不支援框架這個功能時，他看到的將會是一片空白。為了避免這種情況，可使用<NOFRAMES>這個標(biāo)記，當(dāng)使用者的瀏覽器看不到框架時，他就會看到<NOFRAMES>與</NOFRAMES>之間的內(nèi)容，而不是一片空白。這些內(nèi)容可以是提醒瀏覽轉(zhuǎn)用新的瀏覽器的字句，甚至是一個沒有框架的網(wǎng)頁或能自動切換至沒有框架的版本亦可。應(yīng)用方法：

在<frameset>標(biāo)記范圍加入</NOFRAMES>標(biāo)記，以下是一個例子：<framesetrows="80,*"><noframes>

<body>

很抱歉，饋下使用的瀏覽器不支援框架功能，請轉(zhuǎn)用新的瀏覽器。

</body>

</noframes><framename="top"src="a.html"><framename="bottom"src="b.html"></frameset>若瀏覽器支援框架，那堋它不會理會<noframes>中的東西，但若瀏覽器不支援框架，由於不認(rèn)識所有框架標(biāo)記，不明的標(biāo)記會被略過，標(biāo)記包圍的東西便被解讀出來，所以放在<noframes>范圍內(nèi)的文字會被顯示。西安協(xié)同教育<IFRAME>它的作用是在一頁網(wǎng)頁中間插入一個框窗以顯示另一個文件。它是一個圍堵標(biāo)記，但圍著的字句只有在瀏覽器不支援iframe

標(biāo)記時才會顯示，如<noframes>一樣，可以放些提醒字句之類。通常iframe

配合一個辨認(rèn)瀏覽器的JavaScript會較好，若JavaScript認(rèn)出該瀏覽器并非InternetExplorer便會切換至另一版本。<iframe>的參數(shù)設(shè)定如下：

例子：<iframe

src="iframe.html"name="test"align="MIDDLE"width="300"height="100"

marginwidth="1"

marginheight="1"

frameborder="1"scrolling="Yes">西安協(xié)同教育屬性src="iframe.html"

欲顯示於此框窗的文件來源除檔案名稱，必要加上相對或絕對路徑。name="test"

此框窗名稱，這是連結(jié)標(biāo)記的target參數(shù)所要的，align="MIDDLE"

可選值為left,right,top,middle,bottom，作用不大width="300"height="100"

框窗的寬及長，以pixels為單位。marginwidth="1"marginheight="1"

該插入的文件與框邊所保留的空間。frameborder="1"

使用1表示顯示邊框，0則不顯示。（可以是yes或no）scrolling="Yes"

使用Yes表示容許卷動（內(nèi)定），No則不容許卷動。西安協(xié)同教育示例<center><iframe

src="/"name="test"align="MIDDLE"width="450"height="200"marginwidth="5"marginheight="5"frameborder="1">

很抱歉，饋下使用的瀏覽器并不支援IFrame，不能正常瀏覽我的網(wǎng)頁。</iframe>

</center>

西安協(xié)同教育表格標(biāo)記<TABLE><TR><TD><TH><CAPTION>西安協(xié)同教育<TABLE><TR><TD><TABLE>是一個容器標(biāo)記，意思是說它用以聲明這是表格而且其他表格標(biāo)記只能在他的范圍內(nèi)才適用，屬容器標(biāo)記的還有其他。<TR>用以表示表格列（row）<TD>用以表示行中的單元格（cell）西安協(xié)同教育<TABLE>的參數(shù)設(shè)定<TABLE>的參數(shù)設(shè)定（常用）：

例如：<tablewidth="400"border="1"

cellspacing="2"

cellpadding="2"align="CENTER"

valign="TOP"background="myweb.gif"

bgcolor="#0000FF"

bordercolor="#FF00FF"

bordercolorlight="#00FF00"

bordercolordark="#00FFFF"cols="2“>西安協(xié)同教育表格屬性width="400"

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

表格邊框厚度，不同瀏覽器有不同的內(nèi)定值，故請指明。cellspacing="2"

表格格線厚度，請看例子三，那是加厚到5的格線。cellpadding="2"

文字與格線的距離，請看例子四，那是加至10的padding。align="CENTER"

表格的擺放位置（水平），可選值為：left,right,center，請看例子五或六，那表格是放于中間的，為怕一些瀏覽器不支援，故特加上居中標(biāo)記<CENTER>，只是多層保證而己，當(dāng)然只用<CENTER>亦可。valign="TOP".

表格內(nèi)字畫等的擺放貼位置（垂直），可選值為：top,middle,bottom。西安協(xié)同教育表格屬性background="myweb.gif"

表格紙，與bgcolor

不要同用。bgcolor="#0000FF"

表格底色，與background不要同用，請看例子六。bordercolor="#FF00FF"

表格邊框顏色，NC與IE有不同的效果，請看例子六。bordercolorlight="#00FF00"

表格邊框向光部分的顏色，請看例子二。『只適用于IE』bordercolordark="#00FFFF"

表格邊框背光部分的顏色，請看例子二，使用bordercolorlight

或bordercolordark

時bordercolor

將會失效?！褐贿m用于IE』cols="2"

表格欄位數(shù)目，只是讓瀏覽器在下載表格是先畫出整個表格而己。西安協(xié)同教育<TR>的參數(shù)設(shè)定（常用）<TR>的參數(shù)設(shè)定（常用）

例如：<tralign="RIGHT"

valign="MIDDLE"

bgcolor="#0000FF"

bordercolor="#FF00FF"

bordercolorlight="#808080"

bordercolordark="#FF0000“>西安協(xié)同教育<TR>屬性align=“RIGHT”

該一行內(nèi)字畫等的擺放貼位置（水平），可選值為：left,center,right。valign=“MIDDLE”

該一行內(nèi)字畫等的擺放貼位置（垂直），可選值為：top,middle,bottom。bgcolor="#0000FF"

該一列底色，請看例子五。bordercolor="#FF00FF"

該一列邊框顏色，請看例子三?！褐贿m用于IE』bordercolorlight="#808080"

該一列邊框向光部分的顏色，請看例子三?！褐贿m用于IE』bordercolordark="#FF0000"

該一列邊框背光部分的顏色，請看例子三，使用bordercolorlight

或bordercolordark

時bordercolor

將會失效?！褐贿m用于IE』西安協(xié)同教育TD>的參數(shù)設(shè)定TD>的參數(shù)設(shè)定（常用）：

例如：<tdwidth="48%"height="400"

colspan="5"

rowspan="4"align="RIGHT"

valign="BOTTOM"

bgcolor="#FF00FF"

bordercolor="#808080"

bordercolorlight="#FF0000"

bordercolordark="#00FF00"background="myweb.gif“>西安協(xié)同教育TD屬性width="48%"

該一儲存格寬度，接受絕對值（如80）及相對值（如80%）。height="400"

該一儲存格高度。colspan="5"

該一儲存格向右打通的欄數(shù)。請看例子六rowspan="4"

該一儲存格向下打通的列數(shù)。請看例子六align="RIGHT"

該一儲存格內(nèi)字畫等的擺放貼位置（水平），可選值為：left,center,right。西安協(xié)同教育TD屬性valign="BOTTOM"

該一儲存格內(nèi)字畫等的擺放貼位置（垂直），可選值為：top,middle,bottom。bgcolor="#FF00FF"

該一儲存格底色，請看例子四。bordercolor="#808080"

該一儲存格邊框顏色，請看例子三。『只適用于IE』bordercolorlight="#FF0000"

該一儲存格邊框向光部分的顏色，請看例子三?！褐贿m用于IE』bordercolordark="#00FF00"

該一儲存格邊框背光部分的顏色，請看例子三，使用bordercolorlight

或bordercolordark

時bordercolor

將會失效?！褐贿m用于IE』background="myweb.gif"

該一儲存格紙，與bgcolor

任用其一。西安協(xié)同教育示例<tablewidth="60%"border="1">

<tr><td>只有一個儲存格（cell）的表格</td></tr>

</table>西安協(xié)同教育示例<tablewidth="60%"border="5"bordercolorlight="#FF00FF"bordercolordark="#FF0000">

<tr><td>第一列第一欄</td><td>第一列第二欄</td></tr>

</table>西安協(xié)同教育示例<tablewidth="60%"border="1"cellspacing="5">

<tr

bordercolor="#0000FF"><td>第一列第一欄</td><td>第一列第二欄</td>

</tr>

<tr

bordercolorlight="#FF00FF"bordercolordark="#00FF00"><td>第二列第一欄</td><td>第二列第二欄</td>

</tr>

</table>西安協(xié)同教育示例<tablewidth="60%"border="1"cellpadding="10">

<tr><tdbgcolor="#FFCCE6">第一列第一欄</td><tdbgcolor="#FFFFC6">第一列第二欄</td>

</tr>

<tr><tdbgcolor="#FFD9FF">第二列第一欄</td><tdbgcolor="#DAB4B4">第二列第二欄</td>

</tr>

</table>西安協(xié)同教育示例<center>

<tablewidth="60%"cellspacing="0"cellpadding="2"align="CENTER">

<tr><tdbgcolor="#FFD2E9">第一列第一欄</td><tdbgcolor="#FFDAB5">第一列第二欄</td><tdbgcolor="#FFFFB5">第一列第三欄</td>

</tr>

<tr

bgcolor="#C0C0C0"><td>第二列第一欄</td><td>第二列第二欄</td><td>第二列第三欄</td>

</tr>

</table>

</center>

西安協(xié)同教育示例<center>

<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"bgcolor="#FFC4E1"bordercolor="#0000FF">

<tr><td>第一列第一欄</td><tdcolspan="2">第一列之第二欄及第三欄</td>

</tr>

<tr><tdrowspan="2">第二列及第三列之第一欄</td><td>第二列第二欄</td><td>第二列第三欄</td>

</tr>

<tr><td>第三列第二欄</td><td>第三列第三欄</td>

</tr>

</table>

</center>西安協(xié)同教育<TH><TH>與<TD>同樣是標(biāo)示一個儲存格，唯一不同的是<TH>所標(biāo)示的儲存格中的文字是以粗體出現(xiàn)，通常用于表格第一列以標(biāo)示欄目。它的用法是取代<TD>的位置便可以，其參數(shù)設(shè)定請參考<TD>。

當(dāng)然若為<TD>所標(biāo)示的儲存格中的文字加上粗體標(biāo)記<B>便等如<TH>的效果。西安協(xié)同教育示例<center>

<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER">

<tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th>

</tr>

<tralign="CENTER"><td>August</td><td>61%</td><td>39%</td>

</tr>

<tralign="CENTER"><td>July</td><td>54%</td><td>46%</td>

</tr>

<tralign="CENTER"><td>June</td><td>52%</td><td>48%</td>

</tr>

</table>

</center>西安協(xié)同教育<CAPTION><CAPTION>的作用是為表格標(biāo)示一個標(biāo)題列，有如在表格上方加上一沒格線的打通列。當(dāng)然亦可置于下方，通常用以存放該表格的標(biāo)題。<CAPTION>的參數(shù)設(shè)定（常用）：

例如：<captionalign="TOP"valign="TOP"></caption>align="TOP"

該表格標(biāo)題列相對于表格的擺放貼位置（水平），可選值為：left,center,right,top,middle,bottom，若align="bottom"的話標(biāo)題列便會出現(xiàn)對表格的下方，不管你的原始碼中把<caption>放在<table>中的頭部或尾部。valign="TOP"

該表格標(biāo)題列相對于表格的擺放位置（上下），可選值為：top,bottom。和align="TOP"或align="BOTTOM"是一樣的，雖然功能重復(fù)了，但如果你要標(biāo)題列置于下方及向右或向左貼，那末兩個參數(shù)便可一用了。當(dāng)只一個參數(shù)時，請首選align，因為valign

是由HTML3.0才開始的參數(shù)。西安協(xié)同教育示例<center>

<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER">

<caption>網(wǎng)頁速成八月份訪客瀏覽器使用分析</caption>

<tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th>

</tr>

<tralign="CENTER"><td>August</td><td>61%</td><td>39%</td>

</tr>

</table>

</center>西安協(xié)同教育表單標(biāo)記表單的用處很多，于網(wǎng)上無處不見，當(dāng)然是配合CGI使用為佳，所以饋下有意使用或?qū)W習(xí)CGI的話，表單設(shè)計見必需的，這一節(jié)介紹的標(biāo)記不多，但其參數(shù)變化很多。一份表單的基本架構(gòu)是：在<FORM>標(biāo)記的包圍下加上一種或以上的表單輸入方式及一個或以上的按鍵表單用于與服務(wù)器進行遠(yuǎn)程交互西安協(xié)同教育表單標(biāo)記<FORM><FORM>稱為表單標(biāo)記，用以宣告此為表單模式，屬于一個容器標(biāo)記，表示其它表單標(biāo)記需要在它的包圍中才有效，<INPUT>便是其中的一個，用以設(shè)定各種輸入資料的方法。它是一個空標(biāo)記。<FORM>的參數(shù)設(shè)定（常用）：

例如：<formaction="/cgi-local/example.cgi"method="POST">西安協(xié)同教育表單action=“/cgi-local/example.cgi”

表單通常是與CGI配合使用的，參數(shù)action便是用以指明該CGI程式的位置，這樣此表單所填的資料才能正確傳給CGI作處理。若饋下沒有CGI以進行測試，可設(shè)定此參數(shù)為ACTION=“mailto:your@”那樣該表單所填的資料將會寄至此電郵地址（紅色部分）。

action=“./register.asp”method=“POST”

傳送資料給CGI的的方式，可選值為POST,GET。你只需記住POST容許傳送大量資料，但GET則只接受低于1K的資料，所以你若看過別人的表單原始碼的話，你會發(fā)現(xiàn)申請表單用的是POST而搜索用的是GET。西安協(xié)同教育<INPUT>由于其第一個參數(shù)type己有很多的選擇，而不同的選擇表示出不同的輸入方式，且其它參數(shù)亦因此而異，故以下將獨立介紹不同輸入方式及其它參數(shù)設(shè)定。type="Text"

可選值為Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。西安協(xié)同教育Text輸入<inputtype="Text"name="age"value="20"

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

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

文檔簡介

溫馨提示

最新文檔

評論

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

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔