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

下載本文檔

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

文檔簡介

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

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

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

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

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

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

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

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

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

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

<標記>內(nèi)容</標記>其中“內(nèi)容”部分就是要被這對標記施加作用的部分。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．屬性語法

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

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

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

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

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

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

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

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

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

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

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

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

標記中的屬性值，用雙引號(“”)引起來：<pid=“firstP”>content</p>2.5頭部內(nèi)容2.5.1設(shè)置頁面標題<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è)置頁面標題<title>基本語法<!DOCTYPEhtml><html><head> <title>請在此輸入標題名</title></head><body></body></html>2.5.1設(shè)置頁面標題<title>語法說明在網(wǎng)頁中設(shè)置網(wǎng)頁的標題，只要在HTML文件的頭部文件的<title></title>中輸入標題信息就可以在瀏覽器的上顯示2.5.1設(shè)置頁面標題<title>實例代碼<html><head> <title>嘿嘿，大家努力吧</title></head>

<body>

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

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

剛剛過去的2006年對博文視點的發(fā)展來說是意義非凡的一年，在市場不斷變化，道路并不平坦的一年中，博文視點能夠穩(wěn)住軍心，堅持自己的出版方向，逐漸成為IT出版界的旗艦級機構(gòu)。</body></html>此行代碼表示：當網(wǎng)頁代碼運行后，把鼠標放在設(shè)置好鏈接的“博文視點”上面，在狀態(tài)欄上會顯示“博文視點”鏈接的完整地址，并且在單擊該鏈接后，網(wǎ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>標記中的http-equiv屬性用于設(shè)置一個http的標題域，但確定值由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>實例代碼<html><head><metahttp-equiv=””name=””content=””>

…</head><body>…</body></html>此行代碼表示：當給各項輸入正確的屬性值后，都會在網(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實例代碼<!實例3-1-5代碼> <html><head><title>設(shè)置文件關(guān)鍵字</title><metaname=”keywords”content=”計算機、英語、經(jīng)管、財會、職場”>

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

</head>

<body></body></html>Expires用于設(shè)置網(wǎng)頁的過期時間，content給出了網(wǎng)頁過期的具體時間值。2.6實例——單列頁面<!doctypehtml><html><head> <title>html小實例</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)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 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

提交評論