第八講HTML語言初步教學(xué)課件_第1頁
第八講HTML語言初步教學(xué)課件_第2頁
第八講HTML語言初步教學(xué)課件_第3頁
第八講HTML語言初步教學(xué)課件_第4頁
第八講HTML語言初步教學(xué)課件_第5頁
已閱讀5頁，還剩81頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第八講HTML語言初步16、自己選擇的路、跪著也要把它走完。17、一般情況下)不想三年以后的事，只想現(xiàn)在的事?，F(xiàn)在有成就，以后才能更輝煌。18、敢于向黑暗宣戰(zhàn)的人，心里必須充滿光明。19、學(xué)習(xí)的關(guān)鍵--重復(fù)。20、懦弱的人只會裹足不前，莽撞的人只能引為燒身，只有真正勇敢的人才能所向披靡。第八講HTML語言初步第八講HTML語言初步16、自己選擇的路、跪著也要把它走完。17、一般情況下)不想三年以后的事，只想現(xiàn)在的事?，F(xiàn)在有成就，以后才能更輝煌。18、敢于向黑暗宣戰(zhàn)的人，心里必須充滿光明。19、學(xué)習(xí)的關(guān)鍵--重復(fù)。20、懦弱的人只會裹足不前，莽撞的人只能引為燒身，只有真正勇敢的人才能所向披靡。第八講HTML語言初步北京郵電大學(xué)徐惠民HTML初步HTML的優(yōu)點：HTML文件比較小，便于在網(wǎng)絡(luò)上傳輸；HTML文檔獨立于計算機操作平臺；原則上，建立HTML文檔不需要任何特殊的軟件，只需一般的文本編輯器即可；HTML標記語言，非常便于學(xué)習(xí)。HTML初步HTML的局限性：直接用文本編輯時，不是所見即所得；不同瀏覽器對同一個HTML文檔可能得到不同的顯示效果；已定義的標記往往不能滿足多方面的需要。HTML初步HTML文件的基本構(gòu)成：由文件的內(nèi)容和標記組成；標記基本上是成對出現(xiàn)，結(jié)束標記帶有“/”符：<標記名>文件的內(nèi)容</標記名>標記不區(qū)分大小寫字符，大小寫字符效果相同HTML初步HTML文檔基本格式<HTML><HEAD>

<title>,<base>,<link>,<isindex>,<meta>,<script></HEAD><BODY>HTML文件的正文寫在這里......</BODY></HTML>HTML初步HTML文檔必須以標記HTML開始和結(jié)束。HTML文檔劃分為兩個部分：HEAD和BODY；在HEAD部分TITLE（標題）是必須的，將出現(xiàn)在瀏覽器的標題欄，也將出現(xiàn)在“收藏夾”中，應(yīng)該慎重選??；其他參數(shù)簡介如下：HTML初步<title>…</title>

標題，出現(xiàn)在瀏覽器的標題、收藏夾。一般必須要有。如 <title>北京郵電大學(xué)主頁</title><base> 默認URL，指定文檔的基本URL，使得具體URL的書寫可以簡化(只寫相對地址即可)。如<basehref=“URL”>HTML初步<meta>指定一些不能被其他HTML標記指定的屬性。<METACONTENT=cdataHTTP-EQUIV=nameNAME=name>

CONTENT：指定屬性的值HTTP-EQUIV：HTTP等價的元素NAME：命名屬性如：<metaNAME="GENERATOR"CONTENT="MicrosoftFrontPage3.0">HTML初步<META>還經(jīng)常用來指定文檔所用的字符集：<metahttp-equiv="Content-Type"content="text/html;charset=#">#=us-ascii,iso-8859-1,x-mac-roman,iso-8859-2,x-mac-ce,iso-2022-jp,x-sjis,x-euc-jp,euc-kr,iso-2022-kr,gb2312,gb_2312-80,x-euc-tw,x-cns11643-1,x-cns11643-2,big5如：<metaHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb2312">HTML初步TheMETAelementisusedwithintheHEADelementtoembeddocumentmeta-informationnotdefinedbyotherHTMLelements.Suchinformationcanbeextractedbyservers/clients.IftheNAMEattributeisnotpresentitshouldbeassumedtobeequaltothevalueofHTTP-EQUIV.InterpretationoftheHTTPresponseheaderisbrowserdependent.HTML初步例1最簡單的HTML文件：<HTML><HEAD><TITLE>電信工程學(xué)院主頁</TITLE></HEAD><BODY>電信工程學(xué)院是北京郵電大學(xué)最大的…</BODY></HTML>關(guān)于文字和段落的標記關(guān)于文字和段落的標記：分段標記<P> HTML不識別回車符，分段時要加分段標記；分行標記<BR> 分段標記會自動加一個空行，用分行標記可以避免。

P和BR不是成對出現(xiàn)。關(guān)于文字和段落的標記例2：不加標記的段落將連續(xù)顯示<BODY>電信工程學(xué)院是北京郵電大學(xué)最大的學(xué)院。它包括7個教學(xué)和科研中心。共有教職工約150人。</BODY>關(guān)于文字和段落的標記例3：加上<P>標記的段落將分段并顯示空行<BODY>電信工程學(xué)院是北京郵電大學(xué)最大的學(xué)院。<P>它包括7個教學(xué)和科研中心。<P>共有教職工約150人。<P></BODY>關(guān)于文字和段落的標記例4：加上<BR>標記的段落將分段并不加空行<BODY>電信工程學(xué)院是北京郵電大學(xué)最大的學(xué)院。<BR>它包括7個教學(xué)和科研中心。<BR>共有教職工約150人。<BR></BODY>關(guān)于文字和段落的標記HTML文檔一般也不識別多個空格。原樣顯示標記<PRE> 使用PRE標記就可以識別回車和多個空格；標題和子標題標記<H> 共分6級標題：H1~H6；H1的字體最大；H6最小，<H>標記本身就有<P>標記的功能，即可以換行，并添加空行。關(guān)于文字和段落的標記例5：不使用<PRE>標記，不顯示多個空格<BODY>Here's<br>someditty<br>Speciallydone<br>tolayitoutall<br>Formattedandpretty.<br>Unfortunately,thatisall<br>Thisjunkreallymeans<br>BecauseIadmitI<br>couldn'tscrawl<br>Poetryfor<br>beans.<br></BODY>例6：使用<PRE>標記，既有空格，也有換行<PRE>Here'ssomedittySpeciallydonetolayitoutallFormattedandpretty.Unfortunately,thatisallThisjunkreallymeansBecauseIadmitIcouldn'tscrawlPoetryforbeans.</PRE>關(guān)于文字和段落的標記例7：標題標記的效果<BODY><H1>今天天氣真好！</H1><H2>今天天氣真好！</H2><H3>今天天氣真好！</H3><H4>今天天氣真好！</H4><H5>今天天氣真好！</H5><H6>今天天氣真好！</H6></BODY>關(guān)于文字和段落的標記字體大小標記<fontsize=#>...</font>#=1,2,3,4,5,6,7or+#,-#<font>標記沒有<P>標記的功能；可以在原有字體大小的基礎(chǔ)上增加（+）或減少（-）；<basefontsize=#>#=1,2,3,4,5,6,7設(shè)置文檔的基本字體大小，此時使用（+）、（-），都將以基本字體大小為準。關(guān)于文字和段落的標記例8：字體大小標記的效果<BODY><fontsize=7>今天天氣真好！</font><fontsize=6>今天天氣真好！</font><fontsize=5>今天天氣真好！</font><fontsize=4>今天天氣真好！</font><fontsize=3>今天天氣真好！</font><fontsize=2>今天天氣真好！</font><fontsize=1>今天天氣真好！</font></BODY>關(guān)于文字和段落的標記例9：字體大小標記和標題標記的比較<BODY><fontsize=7>今天天氣真好！</font><H1>天氣真好！</H1><fontsize=6>今天天氣真好！</font><H2>天氣真好！</H2><fontsize=5>今天天氣真好！</font><H3>天氣真好！</H3><fontsize=4>今天天氣真好！</font><H4>天氣真好！</H4><fontsize=3>今天天氣真好！</font><H5>天氣真好！</H5><fontsize=2>今天天氣真好！</font><H6>天氣真好！</H6><fontsize=1>今天天氣真好！</font></BODY>關(guān)于文字和段落的標記例10：Basefont的效果<BODY><basefontsize=4><fontsize=-3>今天天氣真好！</font><fontsize=6>今天天氣真好！</font><fontsize=-2>今天天氣真好！</font><fontsize=4>今天天氣真好！</font><fontsize=3>今天天氣真好！</font><fontsize=2>今天天氣真好！</font><fontsize=1>今天天氣真好！</font></BODY>關(guān)于文字和段落的標記指定“字體大小”的標記和“指定字體”的標記的組合使用<i><fontsize=5><b>今天</b>天氣<fontsize=6>真好！</font></font></i>今天天氣真好！

關(guān)于文字和段落的標記客戶端字體(FontFace)<fontface="#,#,...,#">...</font>#=客戶端可獲得的字體如：<fontface="Arial,Helvetica">HellowWorld!</font>結(jié)果：HellowWorld!關(guān)于文字和段落的標記文字的分區(qū)(Division)顯示可以在左、中右三個區(qū)域顯示：<divalign=left>...</div><divalign=left>Pleaseshowmeyoursmile.</div>結(jié)果：Pleaseshowmeyoursmile.關(guān)于文字和段落的標記<divalign=center>Pleaseshowmeyoursmile.</div>Pleaseshowmeyoursmile.<divalign=right>Pleaseshowmeyoursmile.</div>Pleaseshowmeyoursmile.關(guān)于文字和段落的標記物理字體粗體：<B>…</B>斜體：<I>…</I>下劃線：<U>…</U>等寬體：<TT>…</TT>上標：<SUP>…</SUP>下標：<SUB>…</SUB>刪除線：<STRIKE>…</STRIKE>關(guān)于文字和段落的標記例11：物理字體效果<BODY><P>粗體：<B>今天天氣真好！</B><P>斜體：<I>今天天氣真好！</I><P>下劃線：<U>今天天氣真好！</U><P>等寬體：<TT>今天天氣真好！</TT><P>上標：A<SUP>今天天氣真好！</SUP><P>下標：A<SUB>今天天氣真好！</SUB><P>刪除：<STRIKE>今天天氣真好！</STRIKE></BODY>關(guān)于文字和段落的標記字體顏色標記<fontcolor=#>...</font>#=rrggbb16進制數(shù)碼，或者是下列預(yù)定義色彩：Black,Olive(橄欖),Teal,Red,Blue,Maroon(栗色),Navy,Gray,Lime(翠綠),Fuchsia(紫紅),White,Green,Purple(紫色),Silver,Yellow,Aqua(藍綠)例12：字體顏色效果<FONTCOLOR="Black">Black</FONT>,<FONTCOLOR="Olive">Olive</FONT>,<FONTCOLOR="Teal">Teal</FONT>,<FONTCOLOR="Red">Red</FONT>,<FONTCOLOR="Blue">Blue</FONT>,<FONTCOLOR="Maroon">Maroon</FONT>,<FONTCOLOR="Navy">Navy</FONT>,<FONTCOLOR="Gray">Gray</FONT>,<FONTCOLOR="Lime">Lime</FONT>,<BR><FONTCOLOR="Fuchsia">Fuchsia</FONT>,<FONTCOLOR="White">White</FONT>,<FONTCOLOR="Green">Green</FONT>,<FONTCOLOR="Purple">Purple</FONT>,<FONTCOLOR="Silver">Silver</FONT>,<FONTCOLOR="Yellow">Yellow</FONT>,<FONTCOLOR="Aqua">Aqua</FONT>關(guān)于文字和段落的標記字符實體(Entities)&#;#=字符實體名稱或者ascii值例如&&<<>>""關(guān)于文字和段落的標記文字的對齊(Alignment)<hnalign=#>...</hn><palign=#>...</p>#=left,center,right<center>...</center>文字的分區(qū)(Division)對齊<divalign=#>...</div>#=left,center,right列表（LIST）列表無序列表<ul><li>...</ul>如：<ul><li>Today<li>Tommorow</ul>結(jié)果：Today

Tommorow列表（LIST）定制列表元素定制表中的標記<litype=#>#=disk,circle,square列表（LIST）有序列表<ol><li>...</ol>如：<ol><li>Today<li>Tommorow</ol>效果：1.Today2.Tommorow列表（LIST）定制有序列表表中的序號<litype=#>#=A,a,I,i,1A：大寫字母 a：小寫字母I：羅馬字母 I：小寫羅馬字母1：數(shù)字列表（LIST）定制有序列表表中的序號的起始值<olstart=#>#=number<olstart=5><litype=A>ONE-ONE<li>ONE-TWO<olstart=10><li>TWO-ONE<litype=i>TWO-TWO</ol></ol>列表（LIST）定義列表(Definitionlists)<dl><dt>...<dd>...</dl>如：<dl><dt>Today<dd>Todayisyesterday.<dt>Tomorrow<dd>Tomorrowistoday.</dl>Today Todaywillbeyesterday.Tomorrow Tomorrowwillbetoday.HTML的鏈接用HTML建立鏈接：鏈接的種類：鏈接到任何一個web頁面；通過不同的規(guī)程鏈接到不同的站點，即通過URL來進行鏈接；鏈接到本機中的一個文件；鏈接到同一個文件的不同部分；鏈接到不同文件的指定部分。HTML的鏈接用HTML建立鏈接：基本的格式： <AHREF=“URL或文件名”>顯示的文字</A>如：<AHREF=“”>北京郵電大學(xué)</A><AHREF=“computer_center.html”>計算機技術(shù)中心</A>HTML的鏈接用HTML建立鏈接：錨接（archer）：鏈接到文件中某個位置；必須在要鏈接的地方設(shè)一個標記： <ANAME=“錨名”> 這個標記不需要配對；在同一個文件用以下格式進行鏈接： <AHERE=“#被鏈接的錨名”>不同文件中用吐血格式進行鏈接 <AHERE=“文件名#被鏈接的錨名”>HTML的鏈接用HTML建立鏈接：注意絕對路徑和相對路徑的差別對外部web的文件一般采用絕對路徑；對本身主頁所鏈接的本地文件，可采用相對路徑，只要保持這些文件的相對存放位置不變，就不容易出現(xiàn)斷鏈的情況。用頁面編輯器一般產(chǎn)生絕對路徑，如 file:///C|/ProgramFiles/HTMLFiles/readme.htmlHTML的鏈接文件若使用絕對路徑，則文件復(fù)制后，必須保持路徑不變；使用相對路徑，就較少出現(xiàn)斷鏈的現(xiàn)象；若所有文件都在一個目錄中，則可以簡單地用文件名進行鏈接，如： <AHREF="part02.html">Part02</A>若將此文件復(fù)制到A:\win目錄，則可解釋為： file:///A|/Win/part02.html若將此文件復(fù)制到C:\MyDocument目錄，則又解釋為： file:///C|/MyDocument/part02.htmlHTML的鏈接若被鏈接文件直接在當前目錄的子目錄下，如folder01，則可寫為：<AHREF="folder01/part02.html">Part02</A>但不要寫為：<AHREF="/folder01/part02.html">Part02</A>可以寫為：<AHREF="./folder01/part02.html">Part02</A>HTML的鏈接開一個新的(瀏覽器)窗口(TargetWindow)<ahref="URL"target="Window_Name">...</a>如：<ahref="samp/window.html"target="window_name">開一個新窗口!</a>表格表格的基本語法<table>...</table>-定義表格<tr>-定義表行<th>-定義表頭<td>-定義表元(表格的具體數(shù)據(jù))表格帶邊框的表格：<tableborder><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>表格不帶邊框的表格：<table><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>FoodDrinkSweetABC表格跨多列的表元<thcolspan=#><tableborder><tr><thcolspan=3>MorningMenu</th><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>表格跨多行的表元<throwspan=#><tableborder><tr><throwspan=3>MorningMenu</th><th>Food</th><td>A</td></tr><tr><th>Drink</th><td>B</td></tr><tr><th>Sweet</th><td>C</td></tr></table>表格<tableborder=#>邊框尺寸設(shè)置：<tableborder=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>表格<tableborderwidth=#height=#>表格尺寸設(shè)置：<tableborderwidth=170height=100><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>表格<tablebordercellspacing=#>表元間隙設(shè)置：<tablebordercellspacing=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>表格表格內(nèi)文字的對齊/布局<tralign=#><thalign=#>#=left,center,right<tdalign=#><tableborderwidth=160><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><tdalign=left>A</td><tdalign=center>B</td><tdalign=right>C</td></table>表格垂直位置上的對齊<trvalign=#><thvalign=#>#=top,middle,bottom,baseline<tdvalign=#>表格<tableborderheight=100><tr><th>Food</th><th>Drink</th><th>Sweet</th><th>Other</th><tr><tdvalign=top>A</td><tdvalign=middle>B</td><tdvalign=bottom>C</td><tdvalign=baseline>D</td></table>表格表格在頁面中的對齊/布局(FloatingTable)<tablealign=left><tablealign=right><tablealign=center>表格左對齊<tablealign="left"border><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>Myfavorites...<br>cookies,chocolates,andmore.表格表格的色彩表元的背景色彩和背景圖象<thbgcolor=#><thbackground="URL">表格<tableborder><tr><thbgcolor=ffaa00>Food</th><thbgcolor=Red>Drink</th><throwspan=2background="image.gif">Sweet</th><trbgcolor=white><td>A</td><td>B</td></table>表單（Form）表單的基本語法:<formaction="url"method=*>......<inputtype=submit><inputtype=reset></form>*=GET,POST表單（Form）表單中提供給用戶的輸入形式<inputtype=*name=**>*=text,password,checkbox,radio,image,hidden,submit,reset**=SymbolicNameforCGIscript表單（Form）文字輸入和密碼輸入<formaction=/cgi-bin/post-querymethod=POST>您的姓名:<inputtype=textname=姓名><br>您的主頁的網(wǎng)址:<inputtype=textname=網(wǎng)址value=><br>密碼:<inputtype=passwordname=密碼><br><inputtype=submitvalue="發(fā)送"><inputtype=resetvalue="重設(shè)"></form>表單（Form）可設(shè)置文本框的長度<inputtype=*size=**><inputtype=*maxlength=**>如：<formaction=/cgi-bin/post-querymethod=POST><inputtype=textname=a01size=40><br><inputtype=textname=a02maxlength=5><br><inputtype=submit><inputtype=reset></form>表單（Form）復(fù)選框(Checkbox)和單選框(RadioButton)<inputtype=checkbox><inputtype=checkboxchecked><inputtype=checkboxvalue=**><formaction=/cgi-bin/post-querymethod=POST><inputtype=checkboxname=水果1>

Banana<p><inputtype=checkboxname=水果2checked>Apple<p><inputtype=checkboxname=水果3value=橘子>

Orange<p><inputtype=submit><inputtype=reset></form>表單（Form）<inputtype=radiovalue=**><inputtype=radiovalue=**checked><formaction=/cgi-bin/post-querymethod=POST><inputtype=radioname=水果>

Banana<p><inputtype=radioname=水果checked>Apple<p><inputtype=radioname=水果value=橘子>

Orange<p><inputtype=submit><inputtype=reset></form>表單（Form）列表框(SelectableMenu)基本語法<selectname=*><option>...</select><optionselected><optionvalue=**>表單（Form）列表框示例：<formaction=/cgi-bin/post-querymethod=POST><selectname=fruits><option>Banana<optionselected>Apple<optionvalue=My_Favorite>Orange</select><p><inputtype=submit><inputtype=reset></form>頁面標記背景色彩和文字色彩<bodybgcolor=#text=#link=#alink=#vlink=#>bgcolor背景色彩text非可鏈接文字的色彩link可鏈接文字的色彩alink正被點擊的可鏈接文字的色彩vlink已經(jīng)點擊(訪問)過的可鏈接文字的色彩#=rrggbb背景圖象<bodybackground="image-URL">圖象標記水平線<HRALIGN=left|right|centerNOSHADESIZE=numberWIDTH=cdata>ALIGN：對齊方式，可為left、center、和right。NOSHADE：無陰影。SIZE：高度，以象素（pixels）為單位。WIDTH：寬度，以象素或窗口寬度的百分比表示。圖象標記鏈入圖象的基本語法<imgsrc="圖象的URL",alt="文字">#=圖象的URLalt=#：在瀏覽器尚未完全讀入圖象時，在圖象位置顯示的文字。如： <imgsrc="f.gif"alt="Campus">圖象標記圖象和文字的對齊<imgalign=#>#=top,middle,bottom如：

top

middlebottom圖象標記圖象在頁面中的對齊/布局(FloatingImage)<imgsrc=URLalign=#>"文字"<br>如：<imgsrc=”f.gif”,align=left>MyFace!<br>Itisalways<br>smiling.<br>Hahaha<br>圖象標記通過圖象插入超級鏈接<ahref="file:///C:/MyDocuments//day3_1.htm

溫馨提示

  • 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)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論