[電腦基礎(chǔ)知識(shí)]第3章HTML語法.ppt

第三章HTML語法 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 2 本章內(nèi)容 3 1HTML文件的基本結(jié)構(gòu)3 2HTML頭部標(biāo)記3 3HTML主體標(biāo)記3 4文字和段落標(biāo)記3 5圖像標(biāo)記3 6超級(jí)鏈接標(biāo)記3 7列表標(biāo)記3 8表格標(biāo)記3 9層標(biāo)記3 10表單控件3 11標(biāo)簽選擇器3 12本章小結(jié) 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 3 3 1HTML文件的基本結(jié)構(gòu) HTML文件的基本結(jié)構(gòu) 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 4 3 1HTML文件的基本結(jié)構(gòu) 從上面的代碼可以看出 HTML代碼主要分為3部分 其中各部分含義如下 告訴瀏覽器HTML文件開始和結(jié)束的位置 HTML文檔一般由頭部標(biāo)記和主體標(biāo)記兩部分組成 所以其中包括和標(biāo)記 HTML文檔中所有的內(nèi)容都應(yīng)該在這兩個(gè)標(biāo)記之間 一個(gè)HTML文檔總是以開始 以結(jié)束 HTML文件的頭部標(biāo)記 在其中可以放置頁面的標(biāo)題以及文件信息等內(nèi)容 通常將這兩個(gè)標(biāo)記之間的內(nèi)容統(tǒng)稱為HTML的頭部 通常不會(huì)顯示在頁面上 只起控制作用 用來指明文檔的主體區(qū)域 網(wǎng)頁在瀏覽器文檔區(qū)所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi) 其結(jié)束標(biāo)記指明主體區(qū)域的結(jié)束 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 5 3 2HTML頭部標(biāo)記 HTML頭部標(biāo)記里包含關(guān)于所在網(wǎng)頁的信息 如網(wǎng)頁標(biāo)題 頁面描述和頁面關(guān)鍵字等等 頭部標(biāo)記里的內(nèi)容 主要是被瀏覽器所用 一般不會(huì)顯示在網(wǎng)頁的正文內(nèi)容里 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 6 3 2HTML頭部標(biāo)記 3 2 1標(biāo)題標(biāo)記3 2 2基底網(wǎng)址標(biāo)記3 2 3標(biāo)記3 2 4元信息標(biāo)記 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 7 3 2 1標(biāo)題標(biāo)記 TITLE標(biāo)記的語法格式 在HTML文件里 用來表示文檔的標(biāo)題 TITLE元素只能在元素內(nèi)使用 標(biāo)題內(nèi)容會(huì)顯示在瀏覽器的標(biāo)題欄和Windows的任務(wù)欄的圖標(biāo)上 另外 收藏頁面時(shí)顯示在的書簽名稱 搜索引擎結(jié)果的標(biāo)題行 寫標(biāo)題時(shí)要注意要反映頁面的內(nèi)容 讓人容易讀懂 TITLE里的內(nèi)容不要過長(zhǎng) 瀏覽器標(biāo)題欄如果沒有足夠空間 多于的文字就不會(huì)顯示出來 一般來說其字?jǐn)?shù)上限為50 60個(gè)字符 例如 HTML頭部標(biāo)記 則設(shè)定頁面的標(biāo)題為 HTML頭部標(biāo)記 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 8 3 2 2基底網(wǎng)址標(biāo)記 BASE標(biāo)記的語法格式 這個(gè)元素指定了一個(gè)基準(zhǔn)URL 文檔內(nèi)的所有相對(duì)URL都是相對(duì)它而言的 可以把此元素的href屬性設(shè)置為一個(gè)完全的URL 這樣 所有其他的相對(duì)URL都在它的基礎(chǔ)上定義 Href這個(gè)屬性指定了一個(gè)基準(zhǔn)URL 文檔內(nèi)的所有相對(duì)URL都是相對(duì)它而言的 Target在何處打開頁面中所有的鏈接 可通過在每個(gè)鏈接中使用target屬性來覆蓋此屬性 blank 在一個(gè)新的未命名的窗口載入文檔 self 在相同的框架或窗口中載入目標(biāo)文檔 parent 把文檔載入父窗口或包含了超鏈接引用的框架的框架集 top 把文檔載入包含該超鏈接的窗口 取代任何當(dāng)前正在窗口中顯示的框架 指定名稱 和框架配合使用例如 則頁面所有未定義target屬性的鏈接默認(rèn)打開窗口都是新窗口 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 9 3 2 3標(biāo)記 此元素定義了當(dāng)前文檔與Web集合中其他文檔的關(guān)系 最常用的是用來引入外部的CSS樣式表文件 示例如下 常用屬性和取值如下 href URL目標(biāo)文檔或資源的URL rel 定義當(dāng)前文檔與目標(biāo)文檔之間的關(guān)系 常用值 stylesheet prev等等 type 規(guī)定目標(biāo)URL的MIME類型 常用值如下 text csstext javascriptimage gif charset 定義目標(biāo)URL的字符編碼方式 默認(rèn)值是 ISO 8859 1 hreflang 定義目標(biāo)URL的基準(zhǔn)語言 media 規(guī)定文檔將顯示在什么設(shè)備上 常用值 screen all等等 title 為要鏈接的文檔指定標(biāo)題 在引用不帶有標(biāo)題的源 例如圖像或非HTML文檔 時(shí) 該屬性非常有用 在這種情況下 瀏覽器會(huì)在顯示被引用的文檔時(shí)使用標(biāo)題 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 10 3 2 4元信息標(biāo)記 表3 2標(biāo)記屬性 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 11 3 3HTML主體標(biāo)記 表3 3元素的屬性 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 12 3 3HTML主體標(biāo)記 測(cè)試頁面zbody標(biāo)簽的屬性 示例代碼和預(yù)覽效果如圖3 1所示 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 13 3 4文字和段落標(biāo)記 3 4 1注釋語句3 4 2標(biāo)題文字3 4 3設(shè)定文字格式3 4 4水平線標(biāo)記3 4 5段落修飾標(biāo)記 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 14 3 4 1注釋語句 在HTML代碼 CSS代碼以及腳本代碼中支持不同的注釋標(biāo)記 1 在HTML代碼中注釋標(biāo)記如下 被注釋的語句注 這兩種寫法瀏覽器都能正確的理解 但推薦使用第一種 2 在CSS代碼中的注釋語句示例如下 定義body的顯示樣式 可連續(xù)注釋多行文本3 在腳本代碼中的注釋語句示例如下 Javascript代碼注釋 Javascript代碼注釋 其中 前者只能注釋一行 后者可連續(xù)注釋多行 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 15 3 4 2標(biāo)題文字 表3 4HTML標(biāo)題標(biāo)記 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 16 3 4 2標(biāo)題文字 下面是示例代碼 顯示效果 測(cè)試頁面一級(jí)標(biāo)題 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 17 3 4 3設(shè)定文字格式 FONT標(biāo)記的語法格式 并通過face size和color屬性來設(shè)置文字的字體 字號(hào)和顏色 各屬性意義如下 1 字體屬性FACE示例 設(shè)定字體用來指定一種字體 或者給出一個(gè)字體列表 字體名之間用逗號(hào)來分隔 瀏覽器將按順序在系統(tǒng)中查找已安裝的字體 如果都沒找到 就按本身默認(rèn)字體來顯示 2 字號(hào)屬性SIZE示例 設(shè)定字號(hào)指定字體的大小 即字號(hào) 其取值可以從1到7 默認(rèn)值為3 相對(duì)于基本字體 Basefont 的大小 也可使用 或 號(hào)來指定相對(duì)字號(hào) 還可以指定以像素為單位的數(shù)值 如 size 28px 3 文本顏色COLOR示例 設(shè)定文字格式指定文本的顏色 接受任意合法的顏色值 可以是十六進(jìn)制 RRGGBB格式的顏色值 也可以是瀏覽器支持的英文顏色名稱 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 18 3 4 3設(shè)定文字格式 另外 通過使用一些HTML標(biāo)記可以方便地修飾小部分文字 例如粗體 斜體 下劃線 刪除線 上標(biāo) 下標(biāo)等 常用標(biāo)記如表3 5 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 19 3 4 3設(shè)定文字格式 綜合示例代碼如下 宋體隸書字顏色為gray字顏色為 6666664號(hào)字7號(hào)字28像素字體隸書 66666628px 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 20 3 4 3設(shè)定文字格式 圖3 3文字格式屬性示例 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 21 3 4 4水平線標(biāo)記 水平線可以在視覺上將文檔分隔成各個(gè)部分 使文檔結(jié)構(gòu)清晰明了 水平線自身具有若干屬性 如寬度 高度 顏色 對(duì)齊等 合理使用水平線可以獲得良好的效果 水平線標(biāo)記的寫法可以是或 其屬性如下 1 水平線寬度屬性width規(guī)定了水平線的寬度 取值可以是相對(duì)寬度的百分?jǐn)?shù) 也可以是以像素為單位的數(shù)值 例如 2 高度屬性size規(guī)定水平線的高度 取值可以是相對(duì)寬度的百分?jǐn)?shù) 也可以是以像素為單位的數(shù)值 例如 3 去掉陰影noshade當(dāng)設(shè)置為true時(shí) 水平線呈現(xiàn)為純色 2D效果 當(dāng)設(shè)置為false時(shí) 水平線顯示為雙色凹槽 3D效果 例如 4 顏色屬性COLOR設(shè)置水平線的顏色 可以是任意瀏覽器支持的顏色值 例如 5 水平線的排列align在水平方向 可以設(shè)置水平線居左 居中和居右對(duì)齊 取值 left center right 例如 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 22 3 4 4水平線標(biāo)記 綜合示例代碼如下 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 23 3 4 4水平線標(biāo)記 頁面預(yù)覽效果如圖3 4所示 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 24 3 4 5段落修飾標(biāo)記 1 段落編輯用來標(biāo)記段落 所謂段落 就是一段內(nèi)容上統(tǒng)一的文本 在Dreamweaver設(shè)計(jì)視圖中 按下Enter鍵 就自動(dòng)生成段落 段落的起始標(biāo)記是 結(jié)束標(biāo)記是 示例如下 這是一個(gè)很短的段落段落標(biāo)記使用align屬性定義段落的對(duì)齊方式 取值可以使為 left center right 分別代表左對(duì)齊 中對(duì)齊和右對(duì)齊 示例如下 這是一個(gè)很短的段落這是一個(gè)很短的段落這是一個(gè)很短的段落2 換行標(biāo)記段落與段落之間是隔行換行的 文字的行間距離太大 可以使用換行標(biāo)記來實(shí)現(xiàn)文字的緊湊換行顯示 示例代碼 在Dreamweaver中輸入換行標(biāo)記可使用組合鍵 Shift Enber 3 不換行標(biāo)記在瀏覽器中 如果單行文字過長(zhǎng) 瀏覽器會(huì)自動(dòng)折行顯示 如果希望禁止瀏覽器自動(dòng)折行 可以使用該標(biāo)記 示例如下 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 25 3 4 5段落修飾標(biāo)記 4 預(yù)格式化標(biāo)記該標(biāo)記的作用是保留標(biāo)記內(nèi)的格式 在瀏覽器中原樣顯示 瀏覽器顯示標(biāo)記內(nèi)的內(nèi)容時(shí) 會(huì)原封不動(dòng)地保留文檔中的空白 如空格 制表符 換行符等等 預(yù)格式化的開始標(biāo)記為 結(jié)束標(biāo)記為 該標(biāo)記最適合來表示程序源代碼 示例如下 顯示程序代碼 fori 1to10printinexti 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 26 3 4 5段落修飾標(biāo)記 5 居中對(duì)齊標(biāo)記在現(xiàn)在的HTML版本中 有一個(gè)專門設(shè)置居中的標(biāo)記 示例如下 則位于居中對(duì)齊標(biāo)記內(nèi)的所有文本 圖像以及HTML都居中對(duì)齊 6 縮排標(biāo)記應(yīng)該說這個(gè)標(biāo)記稱為塊引用標(biāo)記更確切 與之間的所有文本都會(huì)從常規(guī)文本中分離出來 經(jīng)常會(huì)在左 右兩邊進(jìn)行縮進(jìn) 而且有時(shí)會(huì)使用斜體 但因?yàn)樵摌?biāo)記一般會(huì)使得文本產(chǎn)生縮進(jìn) 稱為縮排標(biāo)記更形象化 示例如下 正常段落縮排段落嵌套縮排段落 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 27 3 5圖像標(biāo)記 3 5 1圖像源文件屬性src3 5 2圖像提示文字屬性alt3 5 3圖像的寬度和高度3 5 4圖像的邊框border3 5 5圖像的垂直間距vspace3 5 6圖像的水平間距hspace3 5 7圖像的排列屬性align 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 28 3 5圖像標(biāo)記 圖片是在頁面中的重要程度僅次于文本 是網(wǎng)站上使用最多的元素之一 在頁面中插入圖片的HTML標(biāo)記是 該標(biāo)記的屬性如表3 6所示 表3 6圖片標(biāo)記的屬性 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 29 3 5 1圖像源文件屬性src src屬性指定了圖像源文件的URL 是圖像標(biāo)記必然用到的屬性 示例如下 則指定與頁面在相同目錄下的圖像logo jpg被引入到頁面文件中 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 30 3 5 2圖像提示文字屬性alt 提示文字的作用有兩個(gè) 一個(gè)作用是當(dāng)瀏覽該頁面時(shí) 如果圖像下載完成 則當(dāng)鼠標(biāo)移到圖像上時(shí) 稍停片刻 鼠標(biāo)旁邊會(huì)出現(xiàn)提示文字 用于說明或描述圖像 第二個(gè)作用是如果圖像還沒下載完成 或源文件故障無法下載 則在圖像的位置上會(huì)顯示為提示文字 示例如下 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 31 3 5 3圖像的寬度和高度 默認(rèn)情況下 頁面中的圖像會(huì)以源圖像的寬度和高度顯示 也可以使用width和height參數(shù)指定圖像顯示的寬度和高度 如果不是為了實(shí)現(xiàn)特殊的功能 建議還是先用圖像處理軟件對(duì)圖像進(jìn)行寬度和高度的調(diào)整 寬度和高度通常以像素為單位的數(shù)值 示例代碼如下 頁面預(yù)覽效果如圖3 7所示 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 32 3 5 4圖像的邊框border 網(wǎng)頁中的圖像默認(rèn)是沒有邊框的 使用border屬性可以為圖像添加邊框線 可以設(shè)置邊框的寬度 但沒有屬性來指定邊框的顏色 如果圖像未設(shè)置鏈接 則邊框?yàn)楹谏?設(shè)置鏈接后邊框的顏色和鏈接文字的顏色一致 默認(rèn)為深藍(lán)色 寬度單位一般為像素 如果需要控制邊框的顏色 就要使用style進(jìn)行樣式定義了 示例代碼如下 頁面預(yù)覽效果如圖3 8所示 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 33 3 5 5圖像的垂直間距vspace 圖像和文字之間的距離是可以調(diào)整的 這個(gè)屬性用來調(diào)整圖像與文字之間上下的距離 此功能可以防止圖像與文本間的距離不合適而影響頁面的美觀 示例如下 垂直間距的取值是以像素為單位的數(shù)值 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 34 3 5 6圖像的水平間距hspace 這個(gè)屬性用來調(diào)整圖像與文字之間左右的距離 此功能可以防止圖像與文本間的距離不合適而影響頁面的美觀 示例如下 垂直間距的取值是以像素為單位的數(shù)值 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 35 3 5 7圖像的排列屬性align 圖像和文字之間的排列通過align屬性來指定 align屬性的取值如表3 6所示 表3 6圖像排列屬性Align的屬性值 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 36 3 5 7圖像的排列屬性align 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 37 3 6超級(jí)鏈接標(biāo)記 超級(jí)鏈接標(biāo)記在網(wǎng)站設(shè)計(jì)制作中有著不可替代的地位 其屬性如表所示 表3 7超級(jí)鏈接標(biāo)記的屬性 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 38 3 6超級(jí)鏈接標(biāo)記 1 普通鏈接普通鏈接 在原窗口打開普通鏈接 在新窗口打開2 在框架內(nèi)使用在框架窗口打開鏈接在原瀏覽器窗口內(nèi)打開 忽略任何框架在指定框架窗口打開鏈接3 錨點(diǎn)鏈接指向錨點(diǎn)4 統(tǒng)一資源定位進(jìn)入萬維網(wǎng)站點(diǎn)進(jìn)入ftp文件傳輸服務(wù)器啟動(dòng)新聞?dòng)懻摻M進(jìn)入遠(yuǎn)程登陸服務(wù)進(jìn)入gopher信息查找系統(tǒng)啟動(dòng)本機(jī)郵件系統(tǒng)5 下載文件文件下載指向的文件不是頁面 也不是圖像或flash動(dòng)畫 則瀏覽器自動(dòng)下載文件 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 39 3 7列表標(biāo)記 3 7 1有序列表3 7 2無序列表3 7 3定義列表 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 40 3 7 1有序列表 有序列表自動(dòng)對(duì)列表中的項(xiàng)目進(jìn)行編號(hào) 而不是使用項(xiàng)目符號(hào) 列表編號(hào)采用數(shù)字或英文字母開頭 項(xiàng)目間有先后順序 在有序列表中 主要使用 兩個(gè)標(biāo)記和type start兩個(gè)屬性 語法格式如下 列表項(xiàng)1列表項(xiàng)2 類型屬性type 取值如下 1 數(shù)字格式編號(hào) 1 2 3 a 小寫字母編號(hào) a b c A 大寫字母編號(hào) A B C I 大寫羅馬數(shù)字 i 小寫羅馬數(shù)字 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 41 3 7 1有序列表 圖3 10有序列表標(biāo)記示例 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 42 3 7 2無序列表 在無序列表中 各列表項(xiàng)之間沒有順序級(jí)別之分 通常使用一個(gè)項(xiàng)目符號(hào)作為每個(gè)列表項(xiàng)的前綴 在無序列表中 主要使用 兩個(gè)標(biāo)記和type屬性 語法格式如下 列表項(xiàng)1列表項(xiàng)2 類型屬性type 取值如下 disc 圓點(diǎn)符號(hào) 系統(tǒng)默認(rèn)值 顯示為 circle 空心圓點(diǎn) 顯示為 square 方塊樣式 顯示為 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 43 3 7 2無序列表 圖3 11無序列表標(biāo)記示例 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 44 3 7 3定義列表 相對(duì)于其他兩種列表 定義列表顯得復(fù)雜一些 可使用的標(biāo)簽有 定義列表最適合用于術(shù)語的定義 其中 表示定義列表的開始 用來修飾術(shù)語 用來修飾術(shù)語的解釋 標(biāo)簽用在里也能顯示應(yīng)有的樣式 但顯得有些不倫不類 基本格式如下 術(shù)語術(shù)語解釋 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 45 3 7 3定義列表 圖3 12定義列表示例 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 46 3 8表格標(biāo)記 表格可以有效的組織頁面內(nèi)容 可以有效的進(jìn)行頁面布局 是網(wǎng)頁設(shè)計(jì)中使用最多的元素之一 標(biāo)記描述 表格起始標(biāo)記和結(jié)束標(biāo)記 表示表格的一行定義表頭單元格 表示表格的一個(gè)單元格 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 47 3 9層標(biāo)記 層標(biāo)記可以把文檔分割為獨(dú)立的 不同的部分 這是一個(gè)塊兒級(jí)元素 這意味著在默認(rèn)的情況下 層元素將開始新的一行 可以這樣來理解 就是瀏覽器會(huì)自動(dòng)在層元素的前后各放置一個(gè)換行符 層元素的的標(biāo)記是 可選屬性為align 取值如下 left 設(shè)定層內(nèi)的文本左對(duì)齊right 設(shè)定層內(nèi)的元素右對(duì)齊center 設(shè)定層內(nèi)的元素居中對(duì)齊justify 允許瀏覽器自動(dòng)調(diào)整字間距 實(shí)現(xiàn)兩端對(duì)齊 有自動(dòng)排版的效果 為了便于查看比較對(duì)齊效果 我們?yōu)閷釉囟x了一個(gè)樣式 在HTML代碼的頭部標(biāo)記內(nèi)輸入以下代碼 div border 9999991pxsolid background CCCCCC 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 48 3 10表單控件 3 10 1表單標(biāo)記3 10 2表單輸入標(biāo)記3 10 3下拉列表標(biāo)記3 10 4選項(xiàng)標(biāo)記3 10 5多行文本控件標(biāo)記3 10 6實(shí)現(xiàn)登陸界面3 10 7實(shí)現(xiàn)留言板界面 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 49 3 10 1表單標(biāo)記 表3 11表單標(biāo)記屬性 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 50 3 10 2表單輸入標(biāo)記 此標(biāo)記在表單中使用頻繁 絕大部分表單內(nèi)容需要用到此標(biāo)記 其屬性如表3 12所示 表3 12標(biāo)記的屬性 2020 2 7 網(wǎng)頁設(shè)計(jì)與制作 51 3 10 3下拉列表標(biāo)記 標(biāo)記可以在表間中插入一個(gè)下拉菜單 下拉列表的每個(gè)選項(xiàng)用標(biāo)記來定