1、網站設計與制作網站設計與制作第二課第二課楊曉亮 2016年2月1HTML5文檔結構 2HTML5常用標記本節大綱本節大綱HTML5文件的基本結構文件的基本結構 文檔類型申明 文件開始的標記 文件頭部開始的標記 文件頭部的內容 文件頭部結束的標記 文件主體開始的標記 文件主體的內容 文件主體結束的標記 文件結束的標記 完整的HTML文件包括標題、段落、列表、表格、繪制的圖形以及各種嵌入對象，這些對象統稱為HTML元素。文檔類型說明文檔類型說明l 申明需要出現在HTML5文件的第一行l 不屬于html標記l 他是一條指令，目的：告訴瀏覽器編寫頁面所用標記的版本l 化繁為簡HTML標記標記l 以開頭

2、，以結尾l 文檔的所有內容書寫在開頭和結尾的中間l 可以省略，但不建議省略l 書寫統一保持小寫頭標記頭標記headl 用于說明文檔頭部的相關信息，一般包括：標題信息、元信息、css樣式、腳本代碼l 內容不會在網頁上直接顯示頭標記頭標記head之之title標記標記l 放在head標記之間l 網頁的標題l 顯示在瀏覽器的標題欄中l 頁面的標題只有一個頭標記頭標記head之之meta元信息標記元信息標記l 放在head標記之間l 提供頁面相關的元信息，比如：針對搜索引擎和更新頻度的描述和關鍵詞。字符集字符集charsetcharset屬性屬性搜索引擎的關鍵詞搜索引擎的關鍵詞頁面描述頁面描述頁面定時

3、跳轉頁面定時跳轉meta標記的屬性及取值標記的屬性及取值屬性值描述charsetcharacter encoding定義文檔的字符編碼contentsome_text定義與http-equiv或name屬性相關的元信息http-equivcontent-type把 content 屬性關聯到 HTTP 頭部。expiresrefreshset-cookienameauthor把 content 屬性關聯到一個名稱。descriptionkeywordsgeneratorrevisedothers主體標記主體標記bodyl 網頁索要顯示的內容都要放在網頁的主體標記內l 它是HTML文件的重點所在

4、l 不僅僅是一個形式上的標記，它本身也可以控制網頁的背景顏色或背景圖像l 在構建HTML結構時，標記不允許交錯出現，否則會造成錯誤頁面注釋標記頁面注釋標記!-l 注釋只出現在代碼中，瀏覽器對注釋代碼不進行解釋l 注釋內容在瀏覽器的頁面中不顯示l 是一種非常好的編碼習慣l 有助于代碼日后的修改和維護工作課堂動手實踐一課堂動手實踐一動手寫一個完整的動手寫一個完整的htmlhtml文件，要求：文件，要求：1 1、文件完整，有標題、有內容；、文件完整，有標題、有內容；2 2、有、有2 2個以上的注釋；個以上的注釋；3 3、有一條元信息、有一條元信息標題標記標題標記l 在瀏覽網頁時，常看到一些標題文字，

5、用于對文本中的章節進行劃分，他們以固定的字號顯示。l HTML提供了六級標題，最大，最小，用戶只需把文字放入這些標記內，瀏覽器負責顯示。這是一級標題這是二級標題這是三級標題這是四級標題這是五級標題這是六級標題l 要注意的是，每個標題獨占一行，也就是說一行文字里只能有一種標題。段落標記段落標記l 標記對用來創建一個段落，此標記對之間加入的文本將按照段落的格式顯示在瀏覽器上。l 標記格式：內容l 其align用來說明對齊方式，屬性值有3種 left（左對齊） center（居中對齊） right（右對齊）換行標記換行標記l 換行標記是個單標記，它沒有結束標記。l 一個標記代表一個換行，連續的多個標

6、記可以實現多次換行。l 使用換行標記時，在需要換行的位置添加標記即可。文本格式化標記文本格式化標記l 該文本將以粗體顯示l 該文本將以斜體顯示l 帶下劃線的文本l 文字上標l 文字下標特殊字符特殊字符 某些字符在HTML中有特殊的含義，例如“”等，如果我們想在網頁上顯示這些符號，不能很簡單的就些“”，因為它們會被解釋為標簽的開始和結束。這時候我們就要使用他們的轉義碼l 例如要在網頁中顯示，則用<來表示“)>或>小于()<或<&s;&引號(“)"空格 元(￥)¥版權()©注冊商標()®課堂動手實踐二課堂動

7、手實踐二動手寫一個完整的動手寫一個完整的htmlhtml文件，要求用到以下標記：文件，要求用到以下標記：1 1、 n n表示表示1-61-62 2、3 3、4 4、列表列表列表用于按邏輯方式對數據分組。常用的列表有三種： 無序列表 有序列表 自定義列表無序列表無序列表 ul : unordered list 相當于word中的項目符號 條列間并無順序關系，純粹只是利用條列方式來呈現資料而已，此種無序標簽，在各條列前面均有一符號以示區隔 無序列表使用標簽來創建，用表示列表中每一項例： 咖啡 茶 牛奶無序列表無序列表 無序列表的前面一定要是圓形的嗎？不，我們也可以加入type=“形狀名稱”屬性來改

8、變其符號形狀，共有三個選擇： disc(實心圓) square(小正方形) circle（空心圓）例： 咖啡 茶 牛奶有序列表有序列表 ol : ordered list 有序列表就是指各條列之間是有順序的，從1，2，3一直延伸下去。 使用來標記有序列表，每一項用來標記。 可以用不同的符號來顯示順序，一樣是用type屬性來作更改，一共有5種符號： 1（數字） A（大寫英文字母） a（小寫英文字母） I（大寫羅馬字母） i（小寫羅馬字母）例：例： 咖啡 茶 牛奶有序列表有序列表也可以改變第一行的編號值，需要添加start屬性。一個有序列表： 咖啡 茶 牛奶自定義列表自定義列表 dl : defi

9、nition list 自定義列表用于對列表條目進行簡短說明的場合 用開始，列表條目用引導，說明用引導例：WWWworld wide web,萬維網URLuniform resourse locations,統一資源定位符課堂動手實踐三課堂動手實踐三動手寫一個完整的動手寫一個完整的htmlhtml文件，要求用到以下標記：文件，要求用到以下標記：1 1、無序列表：、無序列表：2 2、有序列表：、有序列表：3 3、自定義列表：、自定義列表：網頁中的圖象網頁中的圖象 圖象標記是單標記 網頁中圖象格式GIF/JPEG/BMP/PNG等，使用最廣泛主要是GIF/JPEG 標簽的屬性，簡單表示如下： 圖象

10、來源可以是本地文件也可以是網上圖片 本地圖片 百度logo圖片圖象標記屬性圖象標記屬性名稱名稱說明說明srcsrc指出要加入圖片的文件名，即“圖片文件的路徑圖片文件名”。altalt在瀏覽器尚未完全讀入圖片時，在圖片位置顯示的文字。widthwidth寬度（像素數或百分數）。通常只設為圖片的真實大小以免失真，若需要改變圖片大小最好事先使用圖片編輯工具。heightheight設定圖片的高度（像素數或百分數）。hspacehspace設定圖片邊沿空白，以免文字或其它圖片過于貼近。設定圖片左右的空間水平方向空白像素數。vspacevspace設定圖片上下的空間，空白高度采用像素作單位。AlignAlign圖片在頁面中的對齊/布局方式，或圖片與文字的對齊方式。titletitle圖片標題，當鼠標移動到圖片區域時會顯示。圖片的布局圖片的布局值值說明說明left圖片居左，文本在圖片的右邊right圖片居右，文本在圖片的左邊top圖片的頂部與文本對齊middle圖片的中央與文本對齊bottom圖片的底部與文本對齊所謂布局，就是圖片放在網頁中的位置，以及圖片與文本的排放關系。實現這種功能，可以使用標記的align屬性。課堂動手實踐四課堂動手實踐四動手寫一個完整的動手寫一個完整的htmlhtml文件，要求用到以下標記：文件，要求用到以下