Web程序設計課件chapter-02

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

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

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

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

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

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

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

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

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

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

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