商務(wù)網(wǎng)頁第3課課件

1、第3章 HTML網(wǎng)頁制作技術(shù)3.1 網(wǎng)頁基礎(chǔ)知識(shí)3.1.1 網(wǎng)頁源文件1網(wǎng)頁源文件的概念網(wǎng)頁源文件是一個(gè)什么樣的文件？網(wǎng)頁源文件其實(shí)是一個(gè)純文本文件，是按照超文本標(biāo)記語言的規(guī)范定義和顯示網(wǎng)頁內(nèi)容（包括多媒體、動(dòng)態(tài)數(shù)據(jù)）的文本文件。2網(wǎng)頁源文件的存儲(chǔ)格式文件擴(kuò)展名通常為.html或.htm，動(dòng)態(tài)網(wǎng)頁通常采用.jsp/.asp等格式。如果一個(gè)網(wǎng)頁含有圖片，則網(wǎng)頁源文件中一定有標(biāo)記該圖片存儲(chǔ)位置、以及以如何顯示的語句。3網(wǎng)頁源文件的運(yùn)行方式瀏覽器就是“翻譯官”，HTML就是“世界語”3.1.2 網(wǎng)頁解釋代碼1網(wǎng)頁解釋代碼的產(chǎn)生2網(wǎng)頁解釋代碼的查看與保3.1.3 網(wǎng)頁制作語言介紹1HTML語言（1）H

2、TML定義HTML是超文本標(biāo)記語言，是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，是一種標(biāo)準(zhǔn)規(guī)范，它通過標(biāo)記符號(hào)（即標(biāo)簽）標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分，是最基礎(chǔ)的網(wǎng)頁制作語言。（2）HTML發(fā)展（3）HTML與XML、XHTML的關(guān)系 HTML與XML的關(guān)系XML（EXtensible Markup Language，可擴(kuò)展標(biāo)記語言）是標(biāo)準(zhǔn)通用標(biāo)記語言的子集，是一種用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言。兩者的設(shè)計(jì)目的不同。XML被設(shè)計(jì)用來傳輸和存儲(chǔ)數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的內(nèi)容；HTML被設(shè)計(jì)用來顯示數(shù)據(jù)，其焦點(diǎn)是數(shù)據(jù)的外觀。聯(lián)系是：兩者都是標(biāo)記語言，XML雖然是后來出現(xiàn)的，但不是HTML的替代，而是對(duì)HTM

3、L的補(bǔ)充。 HTML與XHTML的關(guān)系XHTML（Extensible HyperText Markup Language，可擴(kuò)展超文本標(biāo)記語言），其目的就是取代HTML，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡(jiǎn)單特性。其表現(xiàn)方式與HTML類似，不過語法上更加嚴(yán)格。2CSS語言CSS是一種用來表現(xiàn)HTML或XML等文件樣式的文本通用標(biāo)記語言，其主要作用就是增強(qiáng)HTML網(wǎng)頁的顯示效果。CSS的本質(zhì)是一系列式樣格式的設(shè)置規(guī)則，用來設(shè)置網(wǎng)頁的外觀。CSS源文件與HTML源文件一樣也是純文本文件。3.1.4 HTML基礎(chǔ)知識(shí)1網(wǎng)頁元素在HTML語言規(guī)范里，網(wǎng)頁元素是指文本、圖像、聲音、視頻、動(dòng)畫

4、、超鏈接、菜單、表單和程序等網(wǎng)頁基礎(chǔ)單元。網(wǎng)頁元素可以是一個(gè)最基礎(chǔ)的單元素，也可以是由多個(gè)元素組合而成的組合元素。網(wǎng)頁組合元素有時(shí)也稱為網(wǎng)頁構(gòu)件。2HTML標(biāo)簽的作用和特點(diǎn)（1）HTML標(biāo)簽的概念HTML標(biāo)簽就是標(biāo)記符號(hào)，是專門定義網(wǎng)頁元素用的，通常由元素的英文名稱或者縮寫來標(biāo)識(shí)，并用尖括號(hào)“”括起來。尖括號(hào)連同擴(kuò)起來的文本字符的組合就是一個(gè)標(biāo)簽，形式為“”（如“”），也可以把標(biāo)簽理解為用尖括號(hào)包圍的關(guān)鍵字，其定義了后續(xù)的元素是什么。標(biāo)簽通常成對(duì)出現(xiàn)，有開始標(biāo)簽和結(jié)束標(biāo)簽，分別采用“”“”形式表示。如“” “”。（2）HTML標(biāo)簽的作用識(shí)別網(wǎng)頁元素是什么類型的。無標(biāo)簽的網(wǎng)頁源代碼：包含標(biāo)簽的網(wǎng)

5、頁源代碼：（3）HTML標(biāo)簽的特點(diǎn)HTML標(biāo)簽具有以下顯著特點(diǎn)： 由尖括號(hào)包圍的關(guān)鍵詞，比如 。 通常是成對(duì)出現(xiàn)的，比如和。標(biāo)簽對(duì)中的第1個(gè)標(biāo)簽是開始標(biāo)簽，第2個(gè)標(biāo)簽是結(jié)束標(biāo)簽。開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。 也有單獨(dú)呈現(xiàn)的標(biāo)簽，如：等。 一般成對(duì)出現(xiàn)的標(biāo)簽，標(biāo)簽的內(nèi)容在兩個(gè)標(biāo)簽中間。而單獨(dú)呈現(xiàn)的標(biāo)簽，則在標(biāo)簽屬性中賦值。如：標(biāo)題 通常，網(wǎng)頁的標(biāo)題、字符格式、語言、兼容性、關(guān)鍵字、網(wǎng)頁整體描述等信息顯示在標(biāo)簽中，而網(wǎng)頁需展示的內(nèi)容需嵌套在標(biāo)簽中。這是一種規(guī)范的編寫習(xí)慣，雖然不按規(guī)范的編寫習(xí)慣書寫代碼也可以正常顯示，但是從職業(yè)素養(yǎng)的角度講，還是應(yīng)該養(yǎng)成規(guī)范的編寫習(xí)慣。3HTML標(biāo)簽的

6、種類HTML標(biāo)簽的種類很多，目前上沒有規(guī)范的分類方法。基于實(shí)用的角度，總體上可分為以下13個(gè)種類：基礎(chǔ)標(biāo)簽、格式標(biāo)簽、表單標(biāo)簽、框架標(biāo)簽、圖像標(biāo)簽、視音頻標(biāo)簽、鏈接標(biāo)簽、列表標(biāo)簽、表格標(biāo)簽、樣式標(biāo)簽、元信息標(biāo)簽、編程標(biāo)簽、全局標(biāo)簽表3.1 基礎(chǔ)標(biāo)簽標(biāo)簽 描述定義文檔類型 定義HTML文檔 定義網(wǎng)頁標(biāo)題 定義文檔的主體 定義 HTML文檔標(biāo)題 定義段落 定義簡(jiǎn)單的折行 定義水平線 定義注釋 表3.2 格式標(biāo)簽標(biāo)簽 描述 定義只取首字母的縮寫 定義縮寫 定義文檔作者或擁有者的聯(lián)系信息 定義粗體文本 定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置 定義文字方向 定義大號(hào)文本 定義長(zhǎng)的引用 定義居中

7、文本（不贊成使用） 定義引用（citation） 定義計(jì)算機(jī)代碼文本 定義被刪除文本 定義項(xiàng)目 定義強(qiáng)調(diào)文本 定義文本的字體、尺寸和顏色（不贊成使用） 定義斜體文本 定義被插入文本4.HTML標(biāo)簽屬性形象理解：標(biāo)簽是定義類別的，屬性是個(gè)性化描述的。標(biāo)簽屬性必須配合標(biāo)簽使用，進(jìn)一步描述該標(biāo)簽元素的顯示特性的。打個(gè)比方，魚是魚類的標(biāo)簽，魚的名稱、品種、大小、形狀、顏色、生活習(xí)性等就是某種魚（或者某個(gè)魚）的屬性，這些屬性的值決定了該魚具體是哪種魚（或哪條魚）。如：我們用標(biāo)簽定義“理解標(biāo)簽屬性”是“一級(jí)文檔標(biāo)題”，再采用標(biāo)簽屬性進(jìn)一步標(biāo)明這個(gè)標(biāo)題是黑體字、藍(lán)顏色、6號(hào)字大小（注：網(wǎng)頁中的字體標(biāo)簽中的字

8、的大小與Word中字的大小的概念不一樣，1號(hào)2號(hào)3號(hào)）等。具體代碼如下：5HTML事件屬于高級(jí)網(wǎng)頁設(shè)計(jì)的內(nèi)容，常見與腳本語言。6設(shè)置標(biāo)簽及標(biāo)簽屬性的方法 標(biāo)簽內(nèi)容 標(biāo)簽實(shí)例 7HTML基本結(jié)構(gòu) 標(biāo)記語言含義文檔頭部分html為標(biāo)記語言聲明的標(biāo)簽，告訴瀏覽器以下文件為超文本標(biāo)記語言是html文檔頭部的標(biāo)簽，網(wǎng)頁頭部及頭部以上的信息不在網(wǎng)頁中顯示，主要作用是描述整個(gè)網(wǎng)頁，定義或聲明CSS樣式等。如網(wǎng)頁標(biāo)題、字符格式、語言、兼容性、關(guān)鍵字等 網(wǎng)頁結(jié)構(gòu)介紹 為網(wǎng)頁標(biāo)題的標(biāo)簽。指明“網(wǎng)頁結(jié)構(gòu)介紹”標(biāo)題顯示在瀏覽器標(biāo)題欄中是文檔頭部結(jié)束的標(biāo)簽文檔體部分 這里是正文內(nèi)容是網(wǎng)頁文檔體正文開始的標(biāo)簽。所有網(wǎng)頁需

9、要顯示的內(nèi)容，均應(yīng)在此標(biāo)識(shí)后面處理。本例中的正文內(nèi)容是“這里是正文內(nèi)容”。是網(wǎng)頁文檔體結(jié)束的標(biāo)簽是超文本標(biāo)記語言結(jié)束的標(biāo)簽，也代表了網(wǎng)頁結(jié)束3.2 文本設(shè)置方法文本設(shè)置主要包括網(wǎng)頁標(biāo)題、文字、文檔標(biāo)題的設(shè)置。3.2.1 設(shè)置網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題是網(wǎng)頁的總標(biāo)題，相當(dāng)于一本書的書名，顯示在瀏覽器頂端的標(biāo)題欄中。設(shè)置網(wǎng)頁標(biāo)題的標(biāo)簽：設(shè)置方法：將標(biāo)題內(nèi)容放在、之間。即：網(wǎng)頁標(biāo)題實(shí)例完整的示例代碼如下： 網(wǎng)頁標(biāo)題介紹 網(wǎng)頁標(biāo)題是對(duì)一個(gè)網(wǎng)頁內(nèi)容的高度概括。網(wǎng)頁標(biāo)題命名沒有固定的要求，通常根據(jù)本網(wǎng)頁的主要內(nèi)容進(jìn)行高度歸納概括而成。一般來說，網(wǎng)站首頁的標(biāo)題就是網(wǎng)站的正式名稱，子頁面文章內(nèi)容的標(biāo)題就是該子頁面的網(wǎng)頁

10、標(biāo)題。當(dāng)然這種原則并不是固定不變的，在實(shí)際工作中會(huì)適當(dāng)調(diào)整。 3.2.2 設(shè)置文字屬性文字屬性主要包括字體、字號(hào)、顏色、粗體、斜體等。設(shè)置方式為：設(shè)置文字標(biāo)簽及其相關(guān)屬性。1.設(shè)置字體標(biāo)簽：,屬性 face；設(shè)置方法：文字實(shí)例其中，屬性值為“宋體”、“楷體”、“仿宋”、“黑體”等，為桌面計(jì)算機(jī)系統(tǒng)里面已經(jīng)安裝的字體。如果設(shè)置的字體系統(tǒng)中沒有，則按照默認(rèn)的字體顯示。示例代碼如下： 楷體字體 宋體字體 黑體字體 仿宋字體 幼圓字體 方正行楷/默認(rèn)字體 2設(shè)置字號(hào)設(shè)置字號(hào)需要使用標(biāo)簽的size屬性，設(shè)置方法為文字實(shí)例其中，屬性值是數(shù)字17中的任何一個(gè)數(shù)值。默認(rèn)值為系統(tǒng)默認(rèn)字號(hào)。示例代碼為： 設(shè)置文字

11、字號(hào)示例 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 注意字號(hào)大小與word中字號(hào)大小的不同。3設(shè)置文字顏色設(shè)置文字顏色需要使用標(biāo)簽的color屬性，設(shè)置方法為文字實(shí)例其中，“color”的屬性值（代表一種顏色）有3種表達(dá)形式：即顏色名稱（如red、green、blue、yellow等）；十六進(jìn)制顏色值（如“#FF00FF”“#0099CC”等比較常用）；rgb顏色代碼（如rgb(255,0,0)、rgb(0,255,255)等）。顏色的默認(rèn)值為黑色。有關(guān)“十六進(jìn)制的顏色”或者“rgb

12、代碼”需要閱讀有關(guān)資料，本書不做重點(diǎn)介紹。本書僅介紹通用的216種顏色及其對(duì)應(yīng)的十六進(jìn)制顏色值 設(shè)置文字顏色示例 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 4其他文字相關(guān)屬性與文字設(shè)置相關(guān)的常用標(biāo)簽還有以下這些。：粗體字標(biāo)簽。放在與標(biāo)簽之間的文本將以粗體方式顯示。 ：斜體字標(biāo)簽。放在與標(biāo)簽之間的文本將以斜體方式顯示。：下劃線標(biāo)簽。放在與標(biāo)簽之間的文本將以下劃線方式顯示。：刪除線標(biāo)簽。放在與標(biāo)簽之間的文本將以刪除線方式顯示。：水平線標(biāo)簽，用于美化界面。：小字體標(biāo)簽。放在與標(biāo)簽之間的文本將以小字體方式顯示。：換行標(biāo)簽。：注釋標(biāo)簽，用于注釋文檔內(nèi)容。注釋標(biāo)簽中的內(nèi)容不會(huì)顯示出

13、來。注釋標(biāo)簽是非常重要的，優(yōu)秀的HTML文檔必須有完善的注釋說明，方便其他程序員閱讀代碼及修改完善。3.2.3 設(shè)置文檔標(biāo)題為了美化網(wǎng)頁的界面，通常要設(shè)置網(wǎng)頁的文章標(biāo)題及章節(jié)標(biāo)題。我們把這些文章標(biāo)題和章節(jié)標(biāo)題統(tǒng)稱為標(biāo)題。為了區(qū)分于網(wǎng)頁標(biāo)題，本教材把這些標(biāo)題稱之為文檔標(biāo)題。如果把一本書的書名比作網(wǎng)頁標(biāo)題，那么書中各章節(jié)標(biāo)題就可比作文檔標(biāo)題。很多時(shí)候在網(wǎng)頁設(shè)計(jì)制作中提及的標(biāo)題均指文檔標(biāo)題。文檔標(biāo)題設(shè)置比網(wǎng)頁標(biāo)題設(shè)置要復(fù)雜一些，因?yàn)槲臋n標(biāo)題是文檔的構(gòu)成部分，在主頁面中顯示的，具有文本文字的一切屬性。文檔標(biāo)題一共分6級(jí)，分別用、這6個(gè)標(biāo)簽表示。標(biāo)題為最大的標(biāo)題標(biāo)簽，標(biāo)題為最小的標(biāo)題標(biāo)簽。 六級(jí)文檔標(biāo)題 這是標(biāo)題一 這是標(biāo)題二 這是標(biāo)題三 這是標(biāo)題四 這是標(biāo)題五 這是標(biāo)題六 1設(shè)置文檔標(biāo)題的水平位置設(shè)置文檔標(biāo)題位置需要使用標(biāo)題標(biāo)簽的對(duì)齊屬性（align屬性），下面我們以標(biāo)簽為例介紹其設(shè)置方法： 一級(jí)文檔標(biāo)題實(shí)例常用的屬性值有l(wèi)eft（左）、center（居中）、right（右）3個(gè)屬性值，默認(rèn)值是“l(fā)eft”。2設(shè)置文檔標(biāo)題的綜合范例要求采用文字屬性設(shè)置結(jié)合文檔標(biāo)題設(shè)置，采用不同的顯示風(fēng)格顯示文檔標(biāo)題。要求顯示的文檔標(biāo)題樣式如圖。從樣式中可以看出，標(biāo)題采用了一級(jí)、二級(jí)、三級(jí)、四級(jí)，而且，各級(jí)標(biāo)題