網(wǎng)頁設(shè)計(jì)-HTML基本標(biāo)記_第1頁
網(wǎng)頁設(shè)計(jì)-HTML基本標(biāo)記_第2頁
網(wǎng)頁設(shè)計(jì)-HTML基本標(biāo)記_第3頁
網(wǎng)頁設(shè)計(jì)-HTML基本標(biāo)記_第4頁
網(wǎng)頁設(shè)計(jì)-HTML基本標(biāo)記_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第二

章

HTML基本標(biāo)記2回顧：掌握HTML文檔的結(jié)構(gòu)掌握HTML標(biāo)記構(gòu)成及其使用方法熟練使用超鏈接●HyperText

Markup

Language—超文本標(biāo)記語言

制作Web頁面的基本編程語言

一系列標(biāo)記的集合用HTML編寫的超文本文檔稱為HTML文檔?！?/p>

HTML文檔的編寫方法手工直接編寫：記事本、EditPlus等，存成.htm

或.html文件

可視化編輯器：Dreamweaver、Frontpage等由Web服務(wù)器實(shí)時動態(tài)地生成：IIS、Tomcat等4HTML文檔的結(jié)構(gòu)HTML部分文檔頭部分包含：網(wǎng)頁標(biāo)題、網(wǎng)頁說明、CSS樣式、腳本代碼等文檔體部分瀏覽器頁面的顯示內(nèi)容<HTML> <HEAD> <TITLE>歡迎進(jìn)入HTML世界</TITLE> </HEAD> <BODY> <P>這會是一種很有趣的體驗(yàn)</P> </BODY></HTML>基本結(jié)構(gòu)：運(yùn)行結(jié)果5HTML標(biāo)記的格式組成：元素-標(biāo)識標(biāo)記屬性-描述標(biāo)記值-分配給屬性的內(nèi)容<ELEMENTATTRIBUTE=value></ELEMENT>標(biāo)記:人(事物)屬性:性別、頭發(fā)、職業(yè)……值:女性、長頭發(fā)、工程師……

男性、黃頭發(fā)、培訓(xùn)師……6超鏈接：錨記AHREF指定鏈接目標(biāo)點(diǎn)的地址或名稱<AHREF=protocol://host.domain:port/path/filename>

Hypertext

</A>NAME給鏈接目標(biāo)點(diǎn)命名<ANAME=name>text</A>eg.<AHREF="F:\Doc2.html">文檔2</A><AHREF=“#internet”>互聯(lián)網(wǎng)部分</A><AHREF=“F:\Doc2.html#internet”>文檔2的互聯(lián)網(wǎng)部分</A><AHREF=“

http://”>地大網(wǎng)</A>

語法為:7內(nèi)部鏈接1、到同一網(wǎng)站內(nèi)的其它網(wǎng)頁的鏈接2、到同一文檔內(nèi)的其他部分的鏈接外部鏈接到其他網(wǎng)站或服務(wù)器上的頁面的鏈接。----------------------------------------------------------------------Web站點(diǎn)1Web站點(diǎn)2鏈接類型8鏈接到其他文檔<HTML><HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY><BR><BR><P>本頁的所有內(nèi)容都講述關(guān)于如何創(chuàng)建到文檔的鏈接

<AHREF=Doc2.html>單擊此處查看文檔2</A></BODY></HTML>

9鏈接到同一文檔的各個部分<HTML><HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY>

<AHREF=#Internet>互聯(lián)網(wǎng)</A><BR><BR>

<AHREF=#HTML>HTML簡介</A><BR><BR>

<AHREF=#Consistency>多樣化和統(tǒng)一性</A><BR><BR>

<Aname=Internet>互聯(lián)網(wǎng)</A><BR><P>互聯(lián)網(wǎng)是網(wǎng)絡(luò)的網(wǎng)絡(luò)。也就是說，計(jì)算機(jī)網(wǎng)絡(luò)可以跨越國家甚至全球的范圍連接到其他網(wǎng)絡(luò)。世界上所有的計(jì)算機(jī)都可以通過TCP/IP傳輸協(xié)議綁定在一起。</P>

<Aname=HTML>HTML簡介</A><BR><P>超文本標(biāo)記語言是Web用來創(chuàng)建和識別文檔的標(biāo)準(zhǔn)語言。雖然它不是標(biāo)準(zhǔn)通用標(biāo)記語言(SGML)的子集，但與它有著某種程度上的關(guān)聯(lián)。SGML是一種文檔格式語言表示方法。</P>

<Aname=Consistency>多樣性和統(tǒng)一性</A><BR><P>萬事萬物都離不開多樣性和統(tǒng)一性這樣一條基本準(zhǔn)則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨(dú)特的與眾不同的一面。站點(diǎn)的獨(dú)特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設(shè)計(jì)元素應(yīng)在站點(diǎn)的每個部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>單擊10鏈接到另一文檔中某個特定位置<HTML><HEAD><TITLE>主文檔</TITLE></HEAD><BODY>

<AHREF=副文檔.html#Internet>互聯(lián)網(wǎng)</A><BR><BR>

<AHREF=副文檔.html#HTML>HTML簡介</A><BR><BR>

<AHREF=副文檔.html#Consistency>多樣性和統(tǒng)一性</A></BODY></HTML>

單擊11鏈接到另一文檔中某個特定位置<HTML><HEAD><TITLE>副文檔</TITLE></HEAD><BODY>

<Aname=Internet>互聯(lián)網(wǎng)</A><BR><P>互聯(lián)網(wǎng)是網(wǎng)絡(luò)的網(wǎng)絡(luò)。也就是說，計(jì)算機(jī)網(wǎng)絡(luò)可以跨越國家甚至全球的范圍連接到其他網(wǎng)絡(luò)。世界上所有的計(jì)算機(jī)都可以通過TCP/IP傳輸協(xié)議綁定在一起。</P>

<Aname=HTML>HTML簡介</A><BR><P>超文本標(biāo)記語言是Web用來創(chuàng)建和識別文檔的標(biāo)準(zhǔn)語言。雖然它不是標(biāo)準(zhǔn)通用標(biāo)記語言(SGML)的子集，但與它有著某種程度上的關(guān)聯(lián)。SGML是一種文檔格式語言表示方法。</P>

<Aname=Consistency>多樣性和統(tǒng)一性</A><BR><P>萬事萬物都離不開多樣性和統(tǒng)一性這樣一條基本準(zhǔn)則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨(dú)特的與眾不同的一面。站點(diǎn)的獨(dú)特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設(shè)計(jì)元素應(yīng)在站點(diǎn)的每個部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>

單擊12鏈接到其他文檔<HTML><HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY><BR><BR><P>本頁的所有內(nèi)容講述鏈接到其它網(wǎng)站

<AHREF="http://">地大網(wǎng)</A></BODY></HTML>補(bǔ)充：<A>目標(biāo)顯示方式屬性--target用來指定目標(biāo)窗口的打開方式。包含4個取值：_blank：在新窗口中打開。_parent：在上一級的瀏覽窗口中打開。_self：在當(dāng)前頁面或框架中打開。_top：在當(dāng)前瀏覽窗口頁面中打開。<HTML><head></head><BODY><AHREF="x1.html"TARGET="_blank">文件x</A></BODY></HTML>14HTML基本標(biāo)記標(biāo)題標(biāo)記字體標(biāo)記IMG圖像標(biāo)記字符級標(biāo)記段落級標(biāo)記容器標(biāo)記水平線標(biāo)記列表標(biāo)記16目標(biāo)使用基本標(biāo)記在HTML文檔中插入圖像17題目標(biāo)記<HTML> <HEAD> <TITLE>HTML簡介</TITLE> </HEAD><BODY>

<H1>HTML簡介</H1> <H2>HTML簡介</H2> <H3>HTML簡介</H3> <H4>HTML簡介</H4> <H5>HTML簡介</H5> <H6>HTML簡介</H6></BODY></HTML>可顯示六種大小的標(biāo)題，即<H1>到<H6>，<H1>為最大，<H6>為最小18字符級標(biāo)記<B>...</B>粗體文本<U>...</U>下劃線效果<S>...</S>刪除線效果<SUP>.../SUP>上標(biāo)文本<SUB>.../SUB>下標(biāo)文本<EM>..</EM>強(qiáng)調(diào)文本<CODE>...</CODE>用于顯示編程代碼<CITE>...</CITE>用于引用19字符級標(biāo)記<HTML> <HEAD> <TITLE>字符級標(biāo)記示例</TITLE> </HEAD> <BODY> <PALIGN="center"><B>字符級標(biāo)記示例</B></P><P>圓的面積=pi*r<SUP>2</SUP></P><P>水的化學(xué)符號：H<SUB>2</SUB>O</P><P><EM>這是一種很有趣的體驗(yàn)</EM></P> </BODY></HTML>20塊引用標(biāo)記：<BLOCKQUOTE>標(biāo)記<HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY> <P>blockquote元素用于以文本塊的形式設(shè)置內(nèi)容格式。

<BLOCKQUOTE>

漢普蒂·鄧普蒂坐在墻上 漢普蒂·鄧普蒂摔了一大跤 國王所有的馬 和所有的人 也無法再把漢普蒂·鄧普蒂拼起來 </BLOCKQUOTE> <P>請注意，上述內(nèi)容顯示為一個文本塊。 </BODY></HTML>可以使用BLOCKQUOTE元素顯示文檔中的引用文本。BLOCKQUOTE用于較長的引用且顯示為縮進(jìn)式段落。

21預(yù)排版標(biāo)記：<PRE>標(biāo)記<HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY> <PRE>漢普蒂·鄧普蒂坐在墻上 漢普蒂·鄧普蒂摔了一大跤國王所有的馬 和所有的人也無法再把漢普蒂·鄧普蒂拼起來 </PRE> </BODY></HTML>如果希望文本以預(yù)定義的格式顯示，可以使用PRE元素。此元素用于定義文本的格式。文本在瀏覽器中顯示時遵循在HTML源文檔中定義的格式。22使用FONT標(biāo)記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODY> <H3><FONTSIZE=3COLOR=HOTPINKFACE="隸書">我的第一個HTML文檔</FONT></H3> <P>這<FONTCOLOR=BLUESIZE=6>將會</FONT>是一種很有趣的體驗(yàn)

</BODY></HTML><FONT>標(biāo)記用于控制文本在網(wǎng)頁上的顯示?？梢灾付╯ize（大?。olor（顏色）face（字體）style（樣式）等屬性。

23補(bǔ)充：關(guān)于顏色顏色值是一個關(guān)鍵字或一個RGB格式的數(shù)字。aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow24在HTML中對于顏色的定義可以用6位十六進(jìn)制數(shù)。電腦屏幕的色彩是由rgb（紅、綠、藍(lán)）三種色光所合成的，通過調(diào)整這三個基色就可以調(diào)配出其它的顏色。每2位數(shù)代表一種顏色的濃度，三種顏色的順序?yàn)榧t、綠、藍(lán)，00代表顏色濃度最小，F(xiàn)F代表顏色濃度最大。#000000代表純黑、#FFFFFF代表純白、25d圖中所示是部分顏色的RGB代碼:

例：為頁面設(shè)置背景色：

<bodybgcolor=“#FFFF33”>26容器（區(qū)域控制）標(biāo)記<SPAN>、<DIV>

<DIV>…</DIV>可以設(shè)定多行或跨段落或某一區(qū)域的內(nèi)容樣式；<SPAN>…</SPAN>一般只用在一行中設(shè)定幾個字的情況。<HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY>

<DIV>

第1部分 <P>元素用于組織元素 <P>DIV通常用于塊級元素

</DIV>

<DIValign=right>

第2部分 <P>這是第二部分 <BR> <H2>您覺得有意思嗎？</H2>

</DIV> <P>第二部分向右對齊。

<SPANSTYLE="font-size:25">

公共格式</SPAN>應(yīng)用于這一部分中的所有元素 </BODY></HTML>

27列表無序列表有序列表定義列表28無序列表<HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY> <UL>

<LI>星期一</LI> <LI>星期二</LI> <LI>星期三</LI> <LI>星期四</LI> <LI>星期五</LI> </UL> </BODY></HTML>無序列表是一種“項(xiàng)目符號列表”。其中的項(xiàng)目都帶有項(xiàng)目符號前綴。該列表包含在無序列表標(biāo)記<UL>..</UL>內(nèi)。列表中的每個項(xiàng)目都使用列表標(biāo)記<LI>進(jìn)行標(biāo)記，其中LI表示ListItem（列表項(xiàng)）。關(guān)閉標(biāo)記</LI>是可選的。29自定義項(xiàng)目符號<LITYPE=SQUARE>方形項(xiàng)目符號<LITYPE=DISC>實(shí)心圓項(xiàng)目符號<LITYPE=CIRCLE>空心圓項(xiàng)目符號30有序列表<HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY> <OL>

<LI>星期一</LI> <LI>星期二</LI> <LI>星期三</LI> <LI>星期四</LI> <LI>星期五</LI> </OL> </BODY></HTML>有序列表包含在<OL>..</OL>標(biāo)記內(nèi)。有序列表也顯示列表項(xiàng)目。它與無序列表的區(qū)別在于有序列表項(xiàng)前面的編號是可設(shè)置的有序編號。

31自定義編號大寫羅馬數(shù)字<LITYPE=I>小寫羅馬數(shù)字<LITYPE=i>大寫字母<LITYPE=A>小寫字母<LITYPE=a>從第n個值開始編號<OLSTART=n><HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY> <UL> <LI>星期一

<OL> <LITYPE=i>簡介HTML</LI> <LITYPE=i>創(chuàng)建列表</LI> </OL> <LI>星期二 <OL> <LITYPE=a>創(chuàng)建表</LI> <LITYPE=a>插入圖像</LI> </OL> <LI>星期三 <LI>星期四 <LI>星期五 </UL> </BODY></HTML>32定義列表<HTML> <HEAD> <TITLE>學(xué)習(xí)HTML</TITLE> </HEAD> <BODY> <DL>

<DT>星期日 <DD>一周的第一天 <DT>HTML <DD>超文本標(biāo)記語言 <DT>互聯(lián)網(wǎng) <DD>網(wǎng)絡(luò)的網(wǎng)絡(luò) </DL> </BODY></HTML>定義列表用于生成術(shù)語列表（術(shù)語和定義）。定義列表包含在<DL>..</DL>標(biāo)記內(nèi)。<DT>標(biāo)記用于指定要定義的術(shù)語，而<DD>標(biāo)記用于對術(shù)語的定義。33水平線<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODY> <H3>我的第一個HTML文檔</H3>

<HRnoshadesize=5align=centerwidth=50%> <HRsize=15align=leftwidth=80%> <HR> <P>這將會是一種很有趣的體驗(yàn) </BODY></HTML><HR>水平線標(biāo)記用于在頁面上繪制一條水平線。可借助于下列屬性控制水平

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論