Web程序設(shè)計課件chapter02_第1頁
Web程序設(shè)計課件chapter02_第2頁
Web程序設(shè)計課件chapter02_第3頁
Web程序設(shè)計課件chapter02_第4頁
Web程序設(shè)計課件chapter02_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第二章HTML文檔的結(jié)構(gòu)2.1HTML文檔的結(jié)構(gòu)<!doctypehtml><html><head><title>網(wǎng)頁的標(biāo)題</title></head><body>

網(wǎng)頁的內(nèi)容

</body></html>以<html>開頭，以</html>結(jié)尾。包括頭部（head）和主體（body）兩大部分。

<head>…</head>：網(wǎng)頁的題頭，說明文件命名與文件本身的相關(guān)信息。

<title>…<title>：網(wǎng)頁標(biāo)題，在瀏覽器的標(biāo)題欄顯示。

<body>…<body>：網(wǎng)頁的正文。

2.2HTML基本語法2.2.1標(biāo)記語法1、什么是標(biāo)記2、標(biāo)記類型和語法*單標(biāo)記

*雙標(biāo)記什么是標(biāo)記HTML用于描述功能的符號稱為“標(biāo)記”。比如<html>、<head>、<body>等，都是標(biāo)記，<html>標(biāo)記表示HTML文檔的開始。標(biāo)記在使用時必須用尖括號“<>”括起來，有些標(biāo)記必須成對出現(xiàn)，以開頭無斜杠的標(biāo)記（如:<html>）開始，以有斜杠的標(biāo)記（如:</html>）結(jié)束。比如，<table>表示一個表格的開始，</table>表示一個表格的結(jié)束。在HTML中，標(biāo)記的大小寫作用相同，如<TABLE>和<table>都是表示一個表格的開始。單標(biāo)記之所以稱為“單標(biāo)記”，是因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思，這類標(biāo)記的語法是：<標(biāo)記名稱/>或<標(biāo)記名稱>最常用的單標(biāo)記是<br/>或<br>，它表示換行。雙標(biāo)記“雙標(biāo)記”由“始標(biāo)記”和“尾標(biāo)記”兩部分構(gòu)成，必須成對使用。

始標(biāo)記告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能。

尾標(biāo)記告訴Web瀏覽器在這里結(jié)束該功能。始標(biāo)記前加一個正斜杠（/）即成為尾標(biāo)記。這類標(biāo)記的語法是：

<標(biāo)記>內(nèi)容</標(biāo)記>其中“內(nèi)容”部分就是要被這對標(biāo)記施加作用的部分。2.2.1HTML基本語法<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>HTML5Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html>2.2.1HTML基本語法2.2HTML基本語法2.2.2屬性語法

1．什么是屬性

2．屬性語法

<標(biāo)記名字屬性1屬性2屬性3…>2.2.2全局屬性屬性描述accesskey規(guī)定激活元素的快捷鍵。class規(guī)定元素的一個或多個類名（引用樣式表中的類）。contenteditable規(guī)定元素內(nèi)容是否可編輯。contextmenu規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時顯示。data-*用于存儲頁面或應(yīng)用程序的私有定制數(shù)據(jù)。dir規(guī)定元素中內(nèi)容的文本方向。draggable規(guī)定元素是否可拖動。dropzone規(guī)定在拖動被拖動數(shù)據(jù)時是否進(jìn)行復(fù)制、移動或鏈接。hidden規(guī)定元素仍未或不再相關(guān)。id規(guī)定元素的唯一id。lang規(guī)定元素內(nèi)容的語言。spellcheck規(guī)定是否對元素進(jìn)行拼寫和語法檢查。style規(guī)定元素的行內(nèi)CSS樣式。tabindex規(guī)定元素的tab鍵次序。title規(guī)定有關(guān)元素的額外信息。translate規(guī)定是否應(yīng)該翻譯元素內(nèi)容。2.2.2屬性語法實(shí)例1

<pid=“firstP”></p><htmllang=“en”><divstyle=“border:1pxsolidred”2.3HTML文件的命名注意：

文件的擴(kuò)展名要以.html或.html結(jié)束。

文件名中只可由英文字母、數(shù)字或下劃線組成。

文件名中不要包含特殊符號，比如空格、$等。

文件名是區(qū)分大小寫的，在Unix和Windows主機(jī)中有大小寫的不同。

網(wǎng)站首頁文件名默認(rèn)是index.htm或index.html。2.4編寫HTML文件的注意事項

所有標(biāo)記都要用尖括號（<>）括起來，這樣，瀏覽器就可以知道，尖括號內(nèi)的標(biāo)記是HTML命令。

對于成對出現(xiàn)的標(biāo)記，最好同時輸入起始標(biāo)記或結(jié)束標(biāo)記，以免忘記。

采用標(biāo)記嵌套的方式可以為同一個信息應(yīng)用多個標(biāo)記，如下：<tag1><tag2>同一個信息</tag2></tag1>

在代碼中，不區(qū)分大小寫，比如，將<head>寫成<HEAD>或<Head>都可以。

任何空格或回車在代碼中都無效，插入空格或回車有專用的標(biāo)記，分別是 、<br>。因此，不同的標(biāo)記間用回車鍵換行再編寫是個不錯的習(xí)慣。2.4編寫HTML文件的注意事項標(biāo)記中不要有空格，否則瀏覽器可能無法識別，比如不能將<title>寫成<title>。下面的代碼中有誤，將該文件存為.html文件后，用瀏覽器打開，<title>所定義的文字沒有在瀏覽器標(biāo)題中顯示，反而顯示在正文中，而錯誤的<title>標(biāo)記也被當(dāng)作正文來顯示。2.4編寫HTML文件的注意事項2.4編寫HTML文件的注意事項

標(biāo)記中的屬性值，用雙引號(“”)引起來：<pid=“firstP”>content</p>2.5頭部內(nèi)容2.5.1設(shè)置頁面標(biāo)題<title>2.5.2設(shè)置基底網(wǎng)址<base>2.5.3定義元信息<meta>2.5.4設(shè)置頁面關(guān)鍵字——keywords2.5.5設(shè)置頁面過期時間——expires2.5.1設(shè)置頁面標(biāo)題<title>基本語法<!DOCTYPEhtml><html><head> <title>請在此輸入標(biāo)題名</title></head><body></body></html>2.5.1設(shè)置頁面標(biāo)題<title>語法說明在網(wǎng)頁中設(shè)置網(wǎng)頁的標(biāo)題，只要在HTML文件的頭部文件的<title></title>中輸入標(biāo)題信息就可以在瀏覽器的上顯示2.5.1設(shè)置頁面標(biāo)題<title>實(shí)例代碼<html><head> <title>嘿嘿，大家努力吧</title></head>

<body>

請看標(biāo)題欄!</body></html>此行代碼用于插入HTML顯示的標(biāo)題2.5.1設(shè)置頁面標(biāo)題<title>網(wǎng)頁效果2.5.2設(shè)置基底網(wǎng)址<base>基本語法<html><head><basehref=”文件路徑”target=“目標(biāo)窗口”></head><body></body></html>3.1.2設(shè)置基底網(wǎng)址<base>語法說明href用于設(shè)置網(wǎng)頁文件鏈接的地址，target用于設(shè)置頁面顯示的目標(biāo)窗口。2.5.1設(shè)置基底網(wǎng)址<base>實(shí)例代碼<html><head> <basehref=""target="_self">

</head><body>2007年1月16日，電子工業(yè)出版社<ahref="index">博文視點(diǎn)</a>公司召開了“博文視點(diǎn)三周年慶典暨頒獎晚會”。

剛剛過去的2006年對博文視點(diǎn)的發(fā)展來說是意義非凡的一年，在市場不斷變化，道路并不平坦的一年中，博文視點(diǎn)能夠穩(wěn)住軍心，堅持自己的出版方向，逐漸成為IT出版界的旗艦級機(jī)構(gòu)。</body></html>此行代碼表示：當(dāng)網(wǎng)頁代碼運(yùn)行后，把鼠標(biāo)放在設(shè)置好鏈接的“博文視點(diǎn)”上面，在狀態(tài)欄上會顯示“博文視點(diǎn)”鏈接的完整地址，并且在單擊該鏈接后，網(wǎng)頁會在當(dāng)前窗口中被打開。2.5.2設(shè)置基底網(wǎng)址<base>網(wǎng)頁效果2.5.3定義元信息<meta>必需的屬性

屬性值描述contentsome_text定義與http-equiv或name屬性相關(guān)的元信息可選的屬性

屬性值描述http-equivcontent-type把content屬性關(guān)聯(lián)到HTTP頭部。expiresrefreshset-cookienameauthor把content屬性關(guān)聯(lián)到一個名稱。descriptionkeywordsgeneratorrevisedothersschemesome_text定義用于翻譯content屬性值的格式。2.5.3定義元信息<meta>語法說明<meta>標(biāo)記中的http-equiv屬性用于設(shè)置一個http的標(biāo)題域，但確定值由content屬性決定，name屬性用于設(shè)置元信息出現(xiàn)的形式，content屬性用于設(shè)置元信息出現(xiàn)的內(nèi)容。<metahttp-equiv="charset"content="iso-8859-1">

<meta

http-equiv="expires"content="31Dec2008">2.5.3定義元信息<meta>實(shí)例代碼<html><head><metahttp-equiv=””name=””content=””>

…</head><body>…</body></html>此行代碼表示：當(dāng)給各項輸入正確的屬性值后，都會在網(wǎng)頁中顯示一定的效果。2.5.4設(shè)置頁面關(guān)鍵字－keywords基本語法<metaname=”keywords”content=”value”>2.5.4設(shè)置頁面關(guān)鍵字－keywords語法說明Keywords用于說明定義的是關(guān)鍵字，value用于說明為該網(wǎng)頁定義的關(guān)鍵字，可以是多個關(guān)鍵字。2.5.4設(shè)置頁面關(guān)鍵字－keywords實(shí)例代碼<!實(shí)例3-1-5代碼> <html><head><title>設(shè)置文件關(guān)鍵字</title><metaname=”keywords”content=”計算機(jī)、英語、經(jīng)管、財會、職場”>

…</head><body>…</body></html>此行代碼表示在該HTML文件中，定義的關(guān)鍵字為“計算機(jī)、英語、經(jīng)管、財會、職場”，當(dāng)利用搜索引擎搜索圖書時，輸入任何一個關(guān)鍵字都可以搜索到該網(wǎng)頁。2.5.5設(shè)置頁面過期時間－expires基本語法<metahttp-equiv=”expires”content=”value”>語法說明expires用于設(shè)計頁面過期時間，content屬性設(shè)置具體過期時間值。2.5.5設(shè)置頁面過期時間－expires實(shí)例代碼<html><head><title>設(shè)置頁面過期時間</title><metahttp-equiv=”expires”content=”FRI,1JUN2007000000GMT”>

</head>

<body></body></html>Expires用于設(shè)置網(wǎng)頁的過期時間，content給出了網(wǎng)頁過期的具體時間值。2.6實(shí)例——單列頁面<!doctypehtml><html><head> <title>html小實(shí)例</title></head><body> <header> <hgroup><h1>primarytitle</h1><h2>secondarytitle</h2> </hgroup> </header> <nav> <ul> <li>menuone</li> <li>menutwo</li> <li>menuthree</li><li>menufour</li> <ul> </nav> <section> <article> <hgroup><h3>江雪</h3><hgroup> <p>千山鳥飛絕</p> <

溫馨提示

  • 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

提交評論