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

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

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

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

4、類(lèi)名（引用樣式表中的類(lèi)）。contenteditable規(guī)定元素內(nèi)容是否可編輯。contextmenu規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時(shí)顯示。data-*用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有定制數(shù)據(jù)。dir規(guī)定元素中內(nèi)容的文本方向。draggable規(guī)定元素是否可拖動(dòng)。dropzone規(guī)定在拖動(dòng)被拖動(dòng)數(shù)據(jù)時(shí)是否進(jìn)行復(fù)制、移動(dòng)或鏈接。hidden規(guī)定元素仍未或不再相關(guān)。id規(guī)定元素的唯一 id。lang規(guī)定元素內(nèi)容的語(yǔ)言。spellcheck規(guī)定是否對(duì)元素進(jìn)行拼寫(xiě)和語(yǔ)法檢查。style規(guī)定元素的行內(nèi) CSS 樣式。tabindex規(guī)定元素的 tab 鍵次序。title規(guī)定有關(guān)元素的額外信息

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

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

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

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

9、007年1月16日，電子工業(yè)出版社博文視點(diǎn)公司召開(kāi)了“博文視點(diǎn)三周年慶典暨頒獎(jiǎng)晚會(huì)”。 剛剛過(guò)去的2006年對(duì)博文視點(diǎn)的發(fā)展來(lái)說(shuō)是意義非凡的一年，在市場(chǎng)不斷變化，道路并不平坦的一年中，博文視點(diǎn)能夠穩(wěn)住軍心，堅(jiān)持自己的出版方向，逐漸成為IT出版界的旗艦級(jí)機(jī)構(gòu)。此行代碼表示：當(dāng)網(wǎng)頁(yè)代碼運(yùn)行后，把鼠標(biāo)放在設(shè)置好鏈接的“博文視點(diǎn)”上面，在狀態(tài)欄上會(huì)顯示“博文視點(diǎn)”鏈接的完整地址，并且在單擊該鏈接后，網(wǎng)頁(yè)會(huì)在當(dāng)前窗口中被打開(kāi)。Web程序設(shè)計(jì)前端和后端開(kāi)發(fā)第章22.5.2 設(shè)置基底網(wǎng)址 網(wǎng)頁(yè)效果Web程序設(shè)計(jì)前端和后端開(kāi)發(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)到一個(gè)名稱(chēng)。descriptionkeywordsgeneratorrevisedothersschemesome_text定義用于翻譯 content 屬性值的格式。Web程序設(shè)計(jì)前端和后端開(kāi)發(fā)第章22.5.3定義元信息 語(yǔ)法說(shuō)明標(biāo)記中的http-equiv屬性用于設(shè)置一個(gè)http的標(biāo)題域，但確定值由conten

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