版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第2章HTML概述和根本標(biāo)記趙海燕1.HTML概述最初的網(wǎng)頁(yè)都是靠編寫HTML代碼實(shí)現(xiàn)的,現(xiàn)在有了很多功能強(qiáng)大的網(wǎng)頁(yè)編輯軟件,如Dreamweaver、Frontpage等,使網(wǎng)頁(yè)制作變得很簡(jiǎn)單。但是學(xué)習(xí)HTML語(yǔ)言還是很有必要的。1.1HTML簡(jiǎn)介HTML〔HypertextMarkupLanguage〕是一種Web網(wǎng)頁(yè)元素的標(biāo)記語(yǔ)言標(biāo)準(zhǔn),稱為超文本標(biāo)記語(yǔ)言。所謂“超文本〞,是指頁(yè)面內(nèi)可以包含圖像、鏈接、多媒體對(duì)象、程序等非文本元素。所謂“標(biāo)記〞,是指它不是程序語(yǔ)言,而是由文字和標(biāo)簽組合而成。HTML文件是純文本文件,可以由任意文本編輯器編寫,文件的擴(kuò)展名為“html〞。事實(shí)上,HTML是一種因特網(wǎng)上常見的網(wǎng)頁(yè)制作標(biāo)注性語(yǔ)言,而并不能算做一種程序設(shè)計(jì)語(yǔ)言,因?yàn)樗鄙俪绦蛟O(shè)計(jì)語(yǔ)言所應(yīng)有的特征。HTML通過(guò)IE等瀏覽器的翻譯,將網(wǎng)頁(yè)中所要呈現(xiàn)的內(nèi)容、排版展現(xiàn)在用戶眼前。1.2HTML的開展歷史HTML在初期,為了它更廣泛地被接受,大幅度放寬了標(biāo)準(zhǔn)的嚴(yán)格性,導(dǎo)致出現(xiàn)了很多混亂和不標(biāo)準(zhǔn)的代碼。這顯然不符合標(biāo)準(zhǔn)化的開展趨勢(shì),影響了互聯(lián)網(wǎng)的進(jìn)一步開展。為此,相關(guān)標(biāo)準(zhǔn)的制定者——W3C〔全球萬(wàn)維網(wǎng)聯(lián)盟〕組織,一直在不斷地努力,逐步推出新的版本標(biāo)準(zhǔn)。從HTML到XHTML,大致經(jīng)歷了以下幾個(gè)版本:HTML2.0:1995.11發(fā)布發(fā)布發(fā)布發(fā)布XHTML1.0:2001.1發(fā)布修訂發(fā)布發(fā)布XHTML2.0:正在制定中1.3文檔類型的聲明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":///TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns=":///1999/xhtml">……</html>文檔類型聲明的作用是,告訴瀏覽器使用哪種標(biāo)準(zhǔn)來(lái)解釋這個(gè)文檔中的代碼。HTML4.01和XHTML1.0分別對(duì)應(yīng)于一種嚴(yán)格類型〔Strict〕和一種過(guò)渡類型〔Transitional〕。過(guò)渡類型是兼容以前版本定義的,而在新版本中已經(jīng)廢棄的標(biāo)記和屬性。嚴(yán)格類型那么不兼容已經(jīng)廢棄的標(biāo)記和屬性。1.4HTML的元素與標(biāo)記網(wǎng)頁(yè)文檔的結(jié)構(gòu)和格式的定義是由HTML元素來(lái)完成的,HTML元素是由單個(gè)或一對(duì)標(biāo)記〔標(biāo)簽〕定義的包含范圍。在HTML中用于描述功能的符號(hào)稱為“標(biāo)記〞,它是用來(lái)控制文字、圖形等顯示方式的符號(hào),例如“html〞、“head〞、“body〞等。標(biāo)記在使用時(shí)必須用“<>〞括起來(lái),開始標(biāo)記是指不以斜杠〔/〕開頭的標(biāo)記,其內(nèi)容是一串允許的屬性-值對(duì)。結(jié)束標(biāo)記那么是指以斜杠〔/〕開頭的標(biāo)記。1.5標(biāo)記的屬性標(biāo)記內(nèi)可以包含一些屬性,各屬性之間無(wú)先后次序,也可以省略〔即取默認(rèn)值〕。其語(yǔ)法是:<標(biāo)記名稱屬性1屬性2屬性3…>例如:<hrsize=“3〞align=“l(fā)eft〞width=“75%〞/>hr標(biāo)記表示在文檔當(dāng)前位置畫一條水平線,其中size屬性定義線的粗細(xì),屬性值取整數(shù),缺省值為1;align屬性表示對(duì)齊方式,可取left〔左對(duì)齊,缺省值〕,center〔居中〕,right〔右對(duì)齊〕;width屬性定義線的長(zhǎng)度,可取相對(duì)值〔由一對(duì)“〞號(hào)括起來(lái)的百分?jǐn)?shù),表示相對(duì)于充滿整個(gè)窗口的百分比〕,也可取絕對(duì)值〔用整數(shù)表示的屏幕像素點(diǎn)的個(gè)數(shù),如width=“300〞〕,缺省值是“100%〞。1.6HTML元素的四種形式空元素〔單標(biāo)記〕<br/>帶有屬性的空元素<hrcolor=“blue〞/>帶有內(nèi)容的元素〔雙標(biāo)記〕<title>首頁(yè)</title>帶有內(nèi)容和屬性的元素<fontcolor=“red〞>網(wǎng)頁(yè)設(shè)計(jì)</font>1.7HTML文檔的固有格式HTML網(wǎng)頁(yè)文件主要由文件頭和文件體兩局部?jī)?nèi)容構(gòu)成。其中,文件頭是對(duì)文件進(jìn)行一些必要的定義,文件體是HTML網(wǎng)頁(yè)的主要局部,它包括文件所有的實(shí)際內(nèi)容。下面是HTML網(wǎng)頁(yè)的根本結(jié)構(gòu)。<HTML>…….HTML文件開始<HEAD>……..文件頭開始文件頭</HEAD>..……文件頭結(jié)束<BODY>…….文件體開始文件體</BODY>…….文件體結(jié)束</HTML>……HTML文件結(jié)束
<HTML>和</HTML>標(biāo)記放在網(wǎng)頁(yè)文檔的最外層,表示這對(duì)標(biāo)記間的內(nèi)容是HTML文檔。<HTML>放在文件開頭,</HTML>放在文件結(jié)尾,中間可以參加其他標(biāo)記。1.8HTML與XHTML的重要區(qū)別1.在XHTML中標(biāo)記名稱必須小寫2.在XHTML中屬性名稱必須小寫3.在XHTML中標(biāo)記必須嚴(yán)格嚴(yán)格嵌套4.在XHTML中標(biāo)記必須封閉5.在XHTML中即使是空元素的標(biāo)記也必須封閉6.在XHTML中屬性值用雙引號(hào)括起來(lái)7.在XHTML中屬性值必須使用完整形式8.在XHTML中應(yīng)該區(qū)分“內(nèi)容標(biāo)記〞與“結(jié)構(gòu)標(biāo)記〞希望大家在編寫代碼的過(guò)程中嚴(yán)格按照XHTML的標(biāo)準(zhǔn)書寫。2.HTML的根本標(biāo)記HTML的各種根本標(biāo)記都是一個(gè)完整的網(wǎng)頁(yè)必不可少的。通過(guò)它們可以了解網(wǎng)頁(yè)的根本結(jié)構(gòu)及其工作原理。2.1頭部標(biāo)記<head>文件頭用<head>和</head>標(biāo)記,該標(biāo)記出現(xiàn)在文件的起始局部,用來(lái)說(shuō)明文件的有關(guān)信息,是文件的頭部信息。定義在HTML語(yǔ)言頭部的內(nèi)容往往不會(huì)在網(wǎng)頁(yè)上直接顯示,一般包含文件標(biāo)題、搜索引擎可用的關(guān)鍵詞以及不屬于網(wǎng)頁(yè)內(nèi)容的其他信息。例如<title>、<base>、<meta>、<style>、<link>等。2.2標(biāo)題標(biāo)記<title>在<head>標(biāo)記內(nèi)最常用的標(biāo)記是網(wǎng)頁(yè)標(biāo)題標(biāo)記<title>。語(yǔ)法:<title>網(wǎng)頁(yè)標(biāo)題</title>網(wǎng)頁(yè)標(biāo)題是提示網(wǎng)頁(yè)內(nèi)容和功能的文字,它將出現(xiàn)在瀏覽器的標(biāo)題欄中,一個(gè)網(wǎng)頁(yè)只能有一個(gè)標(biāo)題,并且只能在文件的頭部進(jìn)行設(shè)置。實(shí)例:2-1title.html<head><title>文件的標(biāo)題</title></head>2.3元信息標(biāo)記<meta>meta元素提供的信息是用戶不可見的,它不顯示在頁(yè)面中,一般用來(lái)定義頁(yè)面信息的名稱、關(guān)鍵字、作者等。在HTML中,meta標(biāo)記不需要設(shè)置結(jié)束標(biāo)記,是一個(gè)單標(biāo)記。在一個(gè)HTML頭部中可以有多個(gè)meta元素。Meta元素的屬性有兩種:name和-equiv,其中name屬性主要用于描述網(wǎng)頁(yè),以便于搜索引擎查找、分類。其中最重要的是description〔站點(diǎn)在搜索引擎上的描述〕和keywords〔關(guān)鍵詞〕。2.3.1設(shè)置頁(yè)面關(guān)鍵字設(shè)置頁(yè)面關(guān)鍵字是為了向搜索引擎說(shuō)明這一網(wǎng)頁(yè)的關(guān)鍵詞,從而幫助搜索引擎對(duì)該網(wǎng)頁(yè)進(jìn)行查找和分類。一般可設(shè)置不止一個(gè)關(guān)鍵字,用逗號(hào)隔開。語(yǔ)法:<metaname=“keywords〞content=“關(guān)鍵字1,關(guān)鍵字2,……〞/>實(shí)例:2-2keywords.html<head><title>學(xué)習(xí)元信息標(biāo)記</title><metaname="keywords"content="html,元信息,關(guān)鍵字"/></head>2.3.2設(shè)置頁(yè)面描述
設(shè)置頁(yè)面描述也是為了便于搜索引擎的查找,它用來(lái)描述網(wǎng)頁(yè)的主題等,與關(guān)鍵字一樣,設(shè)置的頁(yè)面描述也不會(huì)在網(wǎng)頁(yè)中顯示出來(lái)。語(yǔ)法:<metaname=“description〞content=“頁(yè)面的描述語(yǔ)言〞/>實(shí)例:2-3description.html<head><title>學(xué)習(xí)元信息標(biāo)記</title><metaname="keywords"content="html,元信息,關(guān)鍵字"/><metaname="description"content="關(guān)于HTML使用的網(wǎng)站"/></head>2.3.3設(shè)置作者信息在源代碼中設(shè)置網(wǎng)頁(yè)制作者的姓名信息。語(yǔ)法:<metaname=“author〞content=“作者的姓名〞/>實(shí)例:2-4author.html<head><title>學(xué)習(xí)元信息標(biāo)記</title><metaname="keywords"content="html,元信息,關(guān)鍵字"/><metaname="description"content="關(guān)于HTML使用的網(wǎng)站"/><metaname="author"content="張三"/></head>2.3.4設(shè)置網(wǎng)頁(yè)文字及語(yǔ)言在網(wǎng)頁(yè)中還可以通過(guò)語(yǔ)句來(lái)設(shè)定語(yǔ)言的編碼方式。這樣,瀏覽器就可以正確地選擇語(yǔ)言,而不需要人工選取。語(yǔ)法:<meta-equiv=“content-type〞content=“text/html;charset=字符集類型〞/>在該語(yǔ)法中,-equiv用于傳送HTTP通信協(xié)議的標(biāo)頭,也就是設(shè)定標(biāo)頭屬性的名稱,在content中才是具體的屬性值。其中charset設(shè)置了字符集的類型,中國(guó)內(nèi)地常用的是簡(jiǎn)體中文gb_2312。實(shí)例:2-5Content-Type.html<head><meta-equiv="Content-Type"content="text/html;charset=gb-2312"><title>設(shè)定語(yǔ)言</title></head>2.3.5設(shè)置網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn)在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到一些歡送信息的界面,在經(jīng)過(guò)一段時(shí)間后,這一頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到其他頁(yè)面中。語(yǔ)法:<meta-equiv=“refresh〞content=“跳轉(zhuǎn)時(shí)間;url=鏈接地址〞/>跳轉(zhuǎn)時(shí)間默認(rèn)以秒為單位。當(dāng)語(yǔ)法中的鏈接地址被省略時(shí),網(wǎng)頁(yè)的功能就變成了刷新頁(yè)面本身,這在不斷更新數(shù)據(jù)的頁(yè)面中常常會(huì)用到。2.3.5設(shè)置網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn)實(shí)例:2-6refresh跳轉(zhuǎn).html<html><head><title>學(xué)習(xí)元信息標(biāo)記</title><meta-equiv="refresh"content="3;url=://sohu"></head><body>您好,本頁(yè)在3秒之后將自動(dòng)跳轉(zhuǎn)到搜狐網(wǎng)站。</body></html>2.3.5設(shè)置網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn)實(shí)例:2-7refresh刷新.html<html><head><title>頁(yè)面的刷新</title><meta-equiv="refresh"content="60"></head><body>您好,本頁(yè)每隔1分鐘自動(dòng)刷新一次。</body></html>2.3.6設(shè)置網(wǎng)頁(yè)的過(guò)渡效果語(yǔ)法:<meta-equiv=“過(guò)渡事件〞content=“revealtrans(duration=過(guò)渡效果持續(xù)時(shí)間,transition=過(guò)渡方式)〞/>在該語(yǔ)法中,過(guò)渡事件值為enter時(shí)是進(jìn)入頁(yè)面,值為exit時(shí)是離開頁(yè)面。過(guò)渡效果持續(xù)時(shí)間默認(rèn)情況下以秒為單位,過(guò)渡方式取值為0到23,分別代表盒狀收縮、盒狀放射等不同的過(guò)渡方式。實(shí)例:2-8enter.html<head><title>進(jìn)入頁(yè)面的過(guò)渡效果</title><meta-equiv="enter"content="revealtrans(duration=5,transition=14)"/><meta-equiv="exit"content="revealtrans(duration=3,transition=12)"/></head>2.4基底網(wǎng)址標(biāo)記<base>絕對(duì)路徑是將效勞器上磁盤驅(qū)動(dòng)器名稱和完整的路徑寫出來(lái),同時(shí)也會(huì)表現(xiàn)出磁盤上的目錄結(jié)構(gòu);相對(duì)路徑是相對(duì)于當(dāng)前HTML文檔所在目錄或站點(diǎn)根目錄的路徑。當(dāng)瀏覽器瀏覽頁(yè)面時(shí),會(huì)通過(guò)<base>標(biāo)記將相對(duì)地址附在基底網(wǎng)址的后面,從而把當(dāng)前頁(yè)面中所有的相對(duì)URL轉(zhuǎn)換成絕對(duì)URL。例如:在頭部定義基底網(wǎng)址如下:<basehref=“://new/sample〞/>在頁(yè)面主體中設(shè)置的某個(gè)相對(duì)地址如下:<ahref=“../sample1.html〞/>當(dāng)使用瀏覽器瀏覽時(shí),這個(gè)鏈接地址就變成如下的絕對(duì)地址:因此,在HTML頁(yè)面中設(shè)置基底標(biāo)記時(shí)不應(yīng)該多于一個(gè)。2.4基底網(wǎng)址標(biāo)記<base>語(yǔ)法:<basehref=“鏈接地址〞target=“新窗口的翻開方式〞/>在該語(yǔ)法中,鏈接地址就是要設(shè)置的頁(yè)面基底地址,新窗口的翻開方式可以設(shè)置為不同的效果,具體取值如下:_parent在上一級(jí)窗口翻開,常用在分幀的框架頁(yè)中_blank在新窗口翻開_self在同一窗口翻開,可以省略_top在瀏覽器的整個(gè)窗口翻開,忽略任何框架2.4基底網(wǎng)址標(biāo)記<base>實(shí)例:2-9base.html<html><head><basehref="://list.taobao"target="_top"><title>學(xué)習(xí)元信息標(biāo)記</title></head><body><ahref="../browse/cat-0.htm">翻開一個(gè)相對(duì)地址</a></body></html>2.5頁(yè)面主體標(biāo)記<body>文件主體用<body>和</body>標(biāo)記,它是HTML文檔的主體局部,網(wǎng)頁(yè)正文中的所有內(nèi)容包括文字、表格、圖像、聲音和動(dòng)畫等都包含在這對(duì)標(biāo)記對(duì)之間。在網(wǎng)頁(yè)的主體標(biāo)記中可以設(shè)置很多屬性,如頁(yè)面的背景、文字屬性、鏈接屬性、邊距屬性等。2.5.1設(shè)置頁(yè)面背景色——bgcolor主體標(biāo)記中的bgcolor屬性用于設(shè)置頁(yè)面背景顏色,使用“#〞加上6位十六進(jìn)制來(lái)表現(xiàn)顏色。其中#FFFFFF為白色,#000000為黑色,#FF0000為紅色,#00FF00為綠色,#0000FF為藍(lán)色。語(yǔ)法:<bodybgcolor=“顏色代碼〞>實(shí)例:2-10bgcolor.html<html><head><title>設(shè)置頁(yè)面背景色</title></head><bodybgcolor="#3399CC"></body></html>2.5.2設(shè)置背景圖片——background語(yǔ)法:<bodybackground=“文件鏈接地址〞bgproperties=“背景圖片固定屬性〞>文件鏈接地址可以是相對(duì)地址,也可以是絕對(duì)地址。在默認(rèn)情況下,如果省略bgproperties屬性,圖片會(huì)按照水平和垂直方向不斷重復(fù)出現(xiàn),直到鋪滿整個(gè)頁(yè)面。如果希望圖片不重復(fù)顯示,一般情況下需要借助CSS樣式,我們將會(huì)在以后的章節(jié)中學(xué)習(xí)。如果將bgproperties屬性設(shè)置為fixed,那么當(dāng)滾動(dòng)頁(yè)面時(shí),背景圖像也會(huì)跟著移動(dòng)。實(shí)例:2-11background.htm<bodybackground="圖片/03.jpg"bgproperties="fixed"><center><fontcolor="red"size="7">背景圖片的設(shè)置<br/></font></center></body>2.5.3設(shè)置文字顏色——text在沒有對(duì)文字的顏色進(jìn)行單獨(dú)定義時(shí),可以在主體標(biāo)記中用text屬性對(duì)頁(yè)面中所有文字設(shè)置顏色。語(yǔ)法:<bodytext=“顏色代碼〞>實(shí)例:2-12text.html<html><head><title>設(shè)置頁(yè)面文字顏色</title></head><bodybgcolor="#99CCCC"text="#FF0000">設(shè)置頁(yè)面的文字顏色</body></html>2.5.4設(shè)置鏈接文字屬性——link通常情況下,瀏覽器以藍(lán)色作為超鏈接文字的顏色,訪問(wèn)過(guò)的文字那么變?yōu)榘导t色,用戶可以在頁(yè)面主體標(biāo)記中對(duì)沒有單獨(dú)設(shè)置過(guò)顏色的鏈接進(jìn)行顏色的設(shè)置。語(yǔ)法:<bodylink=“未訪問(wèn)鏈接顏色代碼〞alink=“正在訪問(wèn)的鏈接顏色代碼〞v
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年房屋建設(shè)全包服務(wù)合同合同書一
- 線上線下心理互動(dòng)-洞察分析
- 冶金廢料資源化利用-洞察分析
- 胸腔鏡手術(shù)健康宣教
- 采購(gòu)合同編碼的3篇
- 采購(gòu)合同的應(yīng)對(duì)供應(yīng)鏈風(fēng)險(xiǎn)策略3篇
- 采購(gòu)合同培訓(xùn)與職業(yè)能力提升3篇
- 2024年度編外人員勞動(dòng)爭(zhēng)議處理與調(diào)解合同3篇
- 流行病研究方法
- 四年級(jí)數(shù)學(xué)(小數(shù)加減運(yùn)算)計(jì)算題專項(xiàng)練習(xí)與答案
- 高處作業(yè)吊籃安裝驗(yàn)收表(范本模板)
- DB33∕2169-2018 城鎮(zhèn)污水處理廠主要水污染物排放標(biāo)準(zhǔn)
- 臨時(shí)操作平臺(tái)施工方案(33頁(yè))
- 創(chuàng)造性思維與創(chuàng)新方法ppt課件
- 35kv及以下架空線路施工及驗(yàn)收規(guī)范
- 導(dǎo)光管采光施工工法
- 山東昌樂二中“271高效課堂”解讀
- 配電工程竣工資料
- Y-△降壓?jiǎn)?dòng)控制線路ppt課件
- 急危重患者的手術(shù)護(hù)理.ppt
- 一次風(fēng)機(jī)動(dòng)葉調(diào)節(jié)裝置故障原因分析及處理
評(píng)論
0/150
提交評(píng)論