HTML第二講(文字段落超級鏈接圖片).ppt

《HTML第二講(文字段落超級鏈接圖片).ppt》由會員分享，可在線閱讀，更多相關(guān)《HTML第二講(文字段落超級鏈接圖片).ppt（37頁珍藏版）》請在裝配圖網(wǎng)上搜索。

HTML第二講 文字標(biāo)簽屬性 1 文字屬性標(biāo)記1 文字顏色指定顏色 RRGGBB16進制數(shù)碼例 01 htm 文字標(biāo)簽屬性 2 文字屬性標(biāo)記2 文字字體 客戶端可獲得的字體02 htm 文字標(biāo)簽屬性 3 文字屬性標(biāo)記3 文字大小 1 2 3 4 5 6 7or 例 03 htm 文字標(biāo)簽屬性 4 文字屬性標(biāo)記4 文字標(biāo)題 1 2 3 4 5 6例 04 htm 文字布局 行的控制段 Paragraph 可以看作是空行 空白占位符例 05 htm 文字布局 行的控制HTML的段落與段落之間有一定的空隔 如果不希望出現(xiàn)空隔而只想換行的話 就要用到另一個元素 即元素 元素可以使所在的位置出現(xiàn)換行 這種換行和瀏覽器的自動換行的效果類似 元素不是成對出現(xiàn)的 例 06 htm不換行07 htm HTML文字與段落格式控制 傾斜文本粗體文本下劃線文本刪除線文本 例 08 htm 09 htm 10 htm 11 htm 綜合練習(xí) 基本組成部分 HTML注釋 HTML文檔可以插入注釋 注釋內(nèi)容不會在瀏覽器窗口顯示HTML注釋的格式為 例 12 htm 文字的對齊 n 1 2 3 4 5 6 left center right 例 13 htm 文字的分區(qū)顯示 left center right 例 14 htm 3 HTML段落與分行控制 居中 元素元素是一個獨立的使所標(biāo)記的字符居中的元素 它的作用與使用元素里的align center 類似例如 居中段落15 htm 3 HTML段落與分行控制 標(biāo)尺線 設(shè)定線寬 設(shè)定線長 設(shè)定對齊方式 left right 設(shè)定線的顏色例 16 htm 3 HTML的段落與分行控制 無序列表元素 1列表在HTML的文檔里有重要的地位 HTML規(guī)定了多種列表元素 列表所起的主要作用是使特定的文本有序化 3 HTML的段落與分行控制 無序列表元素 2無序列表是由和元素定義的 sportsfooddrinkfriends例 17 htm 3 HTML的段落與分行控制 無序列表元素 3無序列表的默認(rèn)符號是圓點 元素有type屬性 通過定義不同的type屬性可以改變列表的項目符號 目前 type屬性的屬性值有 disc 圓 circle 圓圈 square 方塊 例 18 htm 3 HTML的段落與分行控制 有序列表元素 1有序列表由和定義 sportsdrinkfriends例 17 htm 3 HTML的段落與分行控制 有序列表元素 2元素也有自己的type屬性 type屬性的屬性值有1 A a I i等 例如 我們以A B C 作為列表的編號例 19 htm元素還可以定義列表的起始編號 如我們希望列表的第一個編號為5 而不是1 則需要定義元素的start屬性例 20 htm 4 超級鏈接 普通超級鏈接1 超級鏈接是整個WWW應(yīng)用的核心和基礎(chǔ) 如果沒有超級鏈接的概念 那么 我們現(xiàn)在所有的WWW的應(yīng)用將不復(fù)存在 所以 對超級鏈接的掌握具有特殊重要的意義 4 超級鏈接 普通超級鏈接2 超級鏈接是用錨元素定義的在元素下 有元素屬性href href的屬性值為一個URL地址如 指向?qū)W院的超級鏈接如 普通超級鏈接例 21 htm 4 超級鏈接 E mail超級鏈接 超級鏈接可以指向E mail地址如 指向E mail地址的超級鏈接例 22 htm 4 超級鏈接 新開鏈接窗口 開一個新的 瀏覽器 窗口 TargetWindow 例 26 htm 4 超級鏈接 去除下劃線 去掉超級連接的下劃線 style text decoration none 例 25 htm 4 超級鏈接 其他超級鏈接 WWW應(yīng)用僅僅是Internet應(yīng)用的一種 Internet還有其他很多應(yīng)用 如 Ftp等 實際上mailto也屬于非WWW應(yīng)用 我們可以類似的創(chuàng)建指向Ftp等的超級鏈接 指向其他Internet應(yīng)用的超級鏈接不是我們掌握的重點 4 超級鏈接 錨點 書簽 1 指向本頁面錨點aa的超級鏈接例 23 htm指向23頁面的錨點top的超級鏈接例 24 htm 練習(xí) 手寫代碼實現(xiàn) 鏈接 新開窗口與Email 背景 文字顏色 字體 換行 頁面標(biāo)題 練習(xí) 27 htm HTML對圖片的控制 1 基本語法 引用圖片必須用元素標(biāo)志 元素下的基本元素屬性是src屬性 src的屬性值為所引用的圖片的URL地址 src屬性是必須的 Src的URL可以是絕對地址 也可以是相對地址例 28 htm HTML對圖片的控制 2 所謂圖片的替代文本 指圖片不能顯示時在圖片所在位置顯示的一段文本或當(dāng)鼠標(biāo)移到圖片上時也會顯示替代文本 定義圖片替代文本的方法是 例 28 htm HTML對圖片的控制 3 圖片的顯示大小我們可以指定一幅圖片在瀏覽器窗口里的顯示大小 定義圖片的顯示大小的方法是 width指定圖片的寬度 height指定高度 它們的屬性值可以是象素 也可以是 例 29 htm HTML對圖片的控制 4 圖片的邊框我們可以為一幅圖片加一個邊框以突出顯示 border的屬性值為象素數(shù)例 30 htm HTML對圖片的控制 5 圖片的對齊方式圖片可以相對于頁面或單元格有一個對齊方式 定義水平對齊方式的方法是 例 31 htm HTML對圖片的控制 6 圖片的對齊方式定義圖片的垂直對齊方式 對于圖片的對齊方式不僅是以上幾種 但是以上的幾種是最常用的 例 32 htm HTML對圖片的控制 7 定義圖片與左 右的文本之間的間距圖片在顯示時 與左右的文本之間可以有一定的間距Hspace horizontal 定義水平間距 Vspace vertical 定義垂直間距 單位都是象素數(shù) 例 33 htm HTML對圖片的控制 8 圖象的超級鏈接圖象的超級鏈接是指整個圖象的超級鏈接 當(dāng)點擊圖象的任何部分時 都會打開這個超級鏈接 定義默認(rèn)超級鏈接的方法是 所以 所謂超級鏈接實際上就是用元素標(biāo)志一個圖象的引用 例 34 htm HTML對圖片的控制 9 圖象映射所謂圖象映射是指一個圖片上的不同位置被指定了不同的超級鏈接 點擊圖片的不同位置會打開不同的超級鏈接目標(biāo) 這與前面的默認(rèn)超級鏈把整個圖片作為超級鏈接的元素是很不一樣的 HTML對圖片的控制 10 圖象映射 只要求理解標(biāo)記含義 圖象映射由定義 有一個基本屬性是name Name給圖象映射命名 這個命名將會被元素用usemap屬性引用 所以 圖象上的圖象映射實際上是對定義的映射的一個引用 在定義圖象映射時 可以定義三種形狀的映射 circle 圓形 rect 矩形rectangle poly 多邊形 HTML對圖片的控制 11 圖象映射實例 35 htm