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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第二章HTML文檔的結構2.1HTML文檔的結構<!doctypehtml><html><head><title>網頁的標題</title></head><body>

網頁的內容

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

<head>…</head>：網頁的題頭，說明文件命名與文件本身的相關信息。

<title>…<title>：網頁標題，在瀏覽器的標題欄顯示。

<body>…<body>：網頁的正文。

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

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

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

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

<標記>內容</標記>其中“內容”部分就是要被這對標記施加作用的部分。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規定激活元素的快捷鍵。class規定元素的一個或多個類名（引用樣式表中的類）。contenteditable規定元素內容是否可編輯。contextmenu規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。data-*用于存儲頁面或應用程序的私有定制數據。dir規定元素中內容的文本方向。draggable規定元素是否可拖動。dropzone規定在拖動被拖動數據時是否進行復制、移動或鏈接。hidden規定元素仍未或不再相關。id規定元素的唯一id。lang規定元素內容的語言。spellcheck規定是否對元素進行拼寫和語法檢查。style規定元素的行內CSS樣式。tabindex規定元素的tab鍵次序。title規定有關元素的額外信息。translate規定是否應該翻譯元素內容。2.2.2屬性語法實例1

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

文件的擴展名要以.html或.html結束。

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

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

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

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

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

對于成對出現的標記，最好同時輸入起始標記或結束標記，以免忘記。

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

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

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

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

<body>

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

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

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

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

屬性值描述http-equivcontent-type把content屬性關聯到HTTP頭部。expiresrefreshset-cookienameauthor把content屬性關聯到一個名稱。descriptionkeywordsgeneratorrevisedothersschemesome_text定義用于翻譯content屬性值的格式。2.5.3定義元信息<meta>語法說明<meta>標記中的http-equiv屬性用于設置一個http的標題域，但確定值由content屬性決定，name屬性用于設置元信息出現的形式，content屬性用于設置元信息出現的內容。<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>此行代碼表示：當給各項輸入正確的屬性值后，都會在網頁中顯示一定的效果。2.5.4設置頁面關鍵字－keywords基本語法<metaname=”keywords”content=”value”>2.5.4設置頁面關鍵字－keywords語法說明Keywords用于說明定義的是關鍵字，value用于說明為該網頁定義的關鍵字，可以是多個關鍵字。2.5.4設置頁面關鍵字－keywords實例代碼<!實例3-1-5代碼> <html><head><title>設置文件關鍵字</title><metaname=”keywords”content=”計算機、英語、經管、財會、職場”>

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

</head>

<body></body></html>Expires用于設置網頁的過期時間，content給出了網頁過期的具體時間值。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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論