Web程序設(shè)計課件chapter-02

1、 Web程序設(shè)計前端和后端開發(fā)第章22.1 HTML文檔的結(jié)構(gòu) 網(wǎng)頁的標(biāo)題網(wǎng)頁的標(biāo)題 網(wǎng)頁的內(nèi)容網(wǎng)頁的內(nèi)容 以以開頭，以開頭，以結(jié)尾。結(jié)尾。 包括頭部（包括頭部（head）和主體（）和主體（body）兩大部分。）兩大部分。 ：網(wǎng)頁的題頭，說明文件命名與文件本身的：網(wǎng)頁的題頭，說明文件命名與文件本身的相關(guān)信息。相關(guān)信息。 ：網(wǎng)頁標(biāo)題，在瀏覽器的標(biāo)題欄顯示。：網(wǎng)頁標(biāo)題，在瀏覽器的標(biāo)題欄顯示。 ：網(wǎng)頁的正文。：網(wǎng)頁的正文。 Web程序設(shè)計前端和后端開發(fā)第章22.2 HTML基本語法2.2.1 標(biāo)記語法 1、什么是標(biāo)記 2、標(biāo)記類型和語法 *單標(biāo)記 *雙標(biāo)記 Web程序設(shè)計前端和后端開發(fā)第章2什么是標(biāo)

2、記HTML用于描述功能的符號稱為“標(biāo)記”。比如、等，都是標(biāo)記，標(biāo)記表示HTML文檔的開始。標(biāo)記在使用時必須用尖括號“”括起來，有些標(biāo)記必須成對出現(xiàn)，以開頭無斜杠的標(biāo)記（如:）開始，以有斜杠的標(biāo)記（如:）結(jié)束。比如，表示一個表格的開始，表示一個表格的結(jié)束。在HTML中，標(biāo)記的大小寫作用相同，如和都是表示一個表格的開始。Web程序設(shè)計前端和后端開發(fā)第章2單標(biāo)記之所以稱為“單標(biāo)記”，是因為它只需單獨使用就能完整地表達(dá)意思，這類標(biāo)記的語法是：或或最常用的單標(biāo)記是或，它表示換行。Web程序設(shè)計前端和后端開發(fā)第章2雙標(biāo)記“雙標(biāo)記”由“始標(biāo)記”和“尾標(biāo)記”兩部分構(gòu)成，必須成對使用。 始標(biāo)記告訴Web瀏覽器從

3、此處開始執(zhí)行該標(biāo)記所表示的功能。 尾標(biāo)記告訴Web瀏覽器在這里結(jié)束該功能。始標(biāo)記前加一個正斜杠（/）即成為尾標(biāo)記。這類標(biāo)記的語法是： 內(nèi)容內(nèi)容 其中“內(nèi)容”部分就是要被這對標(biāo)記施加作用的部分。Web程序設(shè)計前端和后端開發(fā)第章22.2.1 HTML基本語法HTML5 DemoHTML5 DemoWeb程序設(shè)計前端和后端開發(fā)第章22.2.1 HTML基本語法Web程序設(shè)計前端和后端開發(fā)第章22.2 HTML基本語法 2.2.2 屬性語法 1 什么是屬性 2屬性語法 Web程序設(shè)計前端和后端開發(fā)第章22.2.2 全局屬性 屬性描述accesskey規(guī)定激活元素的快捷鍵。class規(guī)定元素的一個或多個

4、類名（引用樣式表中的類）。contenteditable規(guī)定元素內(nèi)容是否可編輯。contextmenu規(guī)定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。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)元素的額外信息

5、。translate規(guī)定是否應(yīng)該翻譯元素內(nèi)容。Web程序設(shè)計前端和后端開發(fā)第章22.2.2 屬性語法 實例1 div style=“border:1px solid red”Web程序設(shè)計前端和后端開發(fā)第章22.3 HTML文件的命名 注意： 文件的擴(kuò)展名要以.html或.html結(jié)束。 文件名中只可由英文字母、數(shù)字或下劃線組成。 文件名中不要包含特殊符號，比如空格、$等。 文件名是區(qū)分大小寫的，在Unix和Windows主機(jī)中有大小寫的不同。 網(wǎng)站首頁文件名默認(rèn)是index.htm或index.html。Web程序設(shè)計前端和后端開發(fā)第章22.4 編寫HTML文件的注意事項 所有標(biāo)記都要用尖括

6、號（）括起來，這樣，瀏覽器就可以知道，尖括號內(nèi)的標(biāo)記是HTML命令。 對于成對出現(xiàn)的標(biāo)記，最好同時輸入起始標(biāo)記或結(jié)束標(biāo)記，以免忘記。 采用標(biāo)記嵌套的方式可以為同一個信息應(yīng)用多個標(biāo)記，如下：同一個信息同一個信息 在代碼中，不區(qū)分大小寫，比如，將寫成或都可以。 任何空格或回車在代碼中都無效，插入空格或回車有專用的標(biāo)記，分別是&nbsp、。因此，不同的標(biāo)記間用回車鍵換行再編寫是個不錯的習(xí)慣。Web程序設(shè)計前端和后端開發(fā)第章22.4 編寫HTML文件的注意事項標(biāo)記中不要有空格，否則瀏覽器可能無法識別，比如不能將寫成。下面的代碼中有誤，將該文件存為.html文件后，用瀏覽器打開，所定義的文字沒有

7、在瀏覽器標(biāo)題中顯示，反而顯示在正文中，而錯誤的標(biāo)記也被當(dāng)作正文來顯示。Web程序設(shè)計前端和后端開發(fā)第章22.4 編寫HTML文件的注意事項Web程序設(shè)計前端和后端開發(fā)第章22.4 編寫HTML文件的注意事項 標(biāo)記中的屬性值，用雙引號(“”)引起來： contentWeb程序設(shè)計前端和后端開發(fā)第章22.5 頭部內(nèi)容2.5.1 設(shè)置頁面標(biāo)題2.5.2 設(shè)置基底網(wǎng)址2.5.3 定義元信息2.5.4 設(shè)置頁面關(guān)鍵字keywords2.5.5 設(shè)置頁面過期時間expiresWeb程序設(shè)計前端和后端開發(fā)第章22.5.1 設(shè)置頁面標(biāo)題 基本語法 請在此輸入標(biāo)題名Web程序設(shè)計前端和后端開發(fā)第章22.5.1

8、設(shè)置頁面標(biāo)題 語法說明在網(wǎng)頁中設(shè)置網(wǎng)頁的標(biāo)題，只要在HTML文件的頭部文件的中輸入標(biāo)題信息就可以在瀏覽器的上顯示W(wǎng)eb程序設(shè)計前端和后端開發(fā)第章22.5.1 設(shè)置頁面標(biāo)題 實例代碼 嘿嘿，大家努力吧 請看標(biāo)題欄!此行代碼用于插入HTML顯示的標(biāo)題Web程序設(shè)計前端和后端開發(fā)第章22.5.1 設(shè)置頁面標(biāo)題 網(wǎng)頁效果Web程序設(shè)計前端和后端開發(fā)第章22.5.2 設(shè)置基底網(wǎng)址 基本語法 Web程序設(shè)計前端和后端開發(fā)第章23.1.2 設(shè)置基底網(wǎng)址 語法說明href用于設(shè)置網(wǎng)頁文件鏈接的地址，target用于設(shè)置頁面顯示的目標(biāo)窗口。Web程序設(shè)計前端和后端開發(fā)第章22.5.1 設(shè)置基底網(wǎng)址 實例代碼 2

9、007年1月16日，電子工業(yè)出版社博文視點公司召開了“博文視點三周年慶典暨頒獎晚會”。 剛剛過去的2006年對博文視點的發(fā)展來說是意義非凡的一年，在市場不斷變化，道路并不平坦的一年中，博文視點能夠穩(wěn)住軍心，堅持自己的出版方向，逐漸成為IT出版界的旗艦級機(jī)構(gòu)。此行代碼表示：當(dāng)網(wǎng)頁代碼運行后，把鼠標(biāo)放在設(shè)置好鏈接的“博文視點”上面，在狀態(tài)欄上會顯示“博文視點”鏈接的完整地址，并且在單擊該鏈接后，網(wǎng)頁會在當(dāng)前窗口中被打開。Web程序設(shè)計前端和后端開發(fā)第章22.5.2 設(shè)置基底網(wǎng)址 網(wǎng)頁效果Web程序設(shè)計前端和后端開發(fā)第章22.5.3 定義元信息必需的屬性必需的屬性屬性值描述contentsome_t

10、ext定義與 http-equiv 或 name 屬性相關(guān)的元信息可選的屬性可選的屬性屬性值描述http-equivcontent-type把 content 屬性關(guān)聯(lián)到 HTTP 頭部。expiresrefreshset-cookienameauthor把 content 屬性關(guān)聯(lián)到一個名稱。descriptionkeywordsgeneratorrevisedothersschemesome_text定義用于翻譯 content 屬性值的格式。Web程序設(shè)計前端和后端開發(fā)第章22.5.3定義元信息 語法說明標(biāo)記中的http-equiv屬性用于設(shè)置一個http的標(biāo)題域，但確定值由conten

11、t屬性決定，name屬性用于設(shè)置元信息出現(xiàn)的形式，content屬性用于設(shè)置元信息出現(xiàn)的內(nèi)容。 Web程序設(shè)計前端和后端開發(fā)第章22.5.3定義元信息 實例代碼 此行代碼表示：當(dāng)給各項輸入正確的屬性值后，都會在網(wǎng)頁中顯示一定的效果。Web程序設(shè)計前端和后端開發(fā)第章22.5.4 設(shè)置頁面關(guān)鍵字keywords 基本語法Web程序設(shè)計前端和后端開發(fā)第章22.5.4 設(shè)置頁面關(guān)鍵字keywords 語法說明Keywords用于說明定義的是關(guān)鍵字，value用于說明為該網(wǎng)頁定義的關(guān)鍵字，可以是多個關(guān)鍵字。Web程序設(shè)計前端和后端開發(fā)第章22.5.4 設(shè)置頁面關(guān)鍵字keywords 實例代碼 設(shè)置文件關(guān)鍵字 此行代碼表示在該HTML文件中，定義的關(guān)鍵字為“計算機(jī)、英語、經(jīng)管、財會、職場”，當(dāng)利用搜索引擎搜索圖書時，輸入任何一個關(guān)鍵字都可以搜索到該網(wǎng)頁。Web程序設(shè)計前端和后端開發(fā)第章22.5.5 設(shè)置頁面過期時間expires 基本語法 語法說明expires用于設(shè)計頁面過期時間，content屬性設(shè)置具體過期時間值。Web程序設(shè)計前端和后端開發(fā)第章22.5.5 設(shè)置頁面過期時間expires 實例代碼 設(shè)置頁面過期時間 Expires用于設(shè)置網(wǎng)頁的過期時間，content給出了網(wǎng)頁過期的具體時間值。Web程序設(shè)計前端和后端開發(fā)第章22.6 實例單列頁面html小實例p