1、第2章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言基礎(chǔ),網(wǎng)頁(yè)設(shè)計(jì)者，必須具備HTML語(yǔ)言的基本知識(shí)。,學(xué) 習(xí) 目 標(biāo),本章涉及的程序代碼比較多，但是HTML語(yǔ)言是網(wǎng)頁(yè)設(shè)計(jì)人員必須掌握的基本知識(shí)，也是網(wǎng)頁(yè)設(shè)計(jì)和制作的基礎(chǔ)，所以希望大家能夠熟練地掌握本章的知識(shí)點(diǎn)，至少要熟悉常用的HTML語(yǔ)言。,本 章 重 點(diǎn),HTML語(yǔ)言的結(jié)構(gòu) HTML常用標(biāo)簽的用法和意義 學(xué)會(huì)使用HTML語(yǔ)言制作簡(jiǎn)單的網(wǎng)頁(yè),HTML概念,HTML:Hypertext Marked Language,即超文本標(biāo)記語(yǔ)言,是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言. 用HTML編寫(xiě)的超文本文檔稱(chēng)為HTML文檔,它能獨(dú)立于各種操作系統(tǒng)平臺(tái).,HTML文檔結(jié)構(gòu),Titl

2、e of pageThis is my first homepage. This text is bold,例子解釋,HTML文檔中，第一個(gè)標(biāo)簽是。這個(gè)標(biāo)簽告訴瀏覽器這是HTML文檔的開(kāi)始。HTML文檔的最后一個(gè)標(biāo)簽是，這個(gè)標(biāo)簽告訴瀏覽器這是HTML文檔的終止。,例子解釋,在和標(biāo)簽之間文本的是頭信息。在瀏覽器窗口中，頭信息是不被顯示的。頭信息中包含.和等標(biāo)簽對(duì)。在和標(biāo)簽之間的文本是文檔標(biāo)題，它被顯示在瀏覽器窗口的標(biāo)題欄。,例子解釋,在和標(biāo)簽之間的文本是正文，會(huì)被顯示在瀏覽器中。 在和標(biāo)簽之間的文本會(huì)以加粗字體顯示。,HTML標(biāo)簽,HTML標(biāo)簽用來(lái)組成HTML元素。HTML標(biāo)簽兩端有兩個(gè)包括字符

3、：“”,這兩個(gè)包括字符被稱(chēng)為角括號(hào)。HTML標(biāo)簽通常成對(duì)出現(xiàn)，比如和。一對(duì)標(biāo)簽的前面一個(gè)是開(kāi)始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽,在開(kāi)始和結(jié)束標(biāo)簽之間的文本是元素內(nèi)容。HTML標(biāo)簽是大小寫(xiě)無(wú)關(guān)的，跟表示的意思是一樣的。,HTML元素,下面是一個(gè)HTML元素：This text is bold 此HTML元素以開(kāi)始標(biāo)簽起始， 內(nèi)容是：This text is bold，以結(jié)束標(biāo)簽中止。標(biāo)簽的目的是定義一個(gè)需要被顯示成粗體的HTML元素。,下面也是一個(gè)HTML元素：This is my first homepage. This text is bold 此HTML標(biāo)簽以開(kāi)始標(biāo)簽起始，終止于結(jié)束標(biāo)簽。標(biāo)簽的目的

4、是定義一個(gè)HTML元素，使其包含HTML文檔的主體。,標(biāo)簽屬性,標(biāo)簽可以擁有屬性。屬性能夠?yàn)轫?yè)面上的HTML元素提供附加信息。標(biāo)簽定義了HTML頁(yè)面的主體元素。使用一個(gè)附加的bgcolor屬性，你可以告訴瀏覽器：你頁(yè)面的背景色是紅色的，就像這樣： ,HTML基本標(biāo)簽,HTML中最重要的標(biāo)簽是定義標(biāo)題元素，段落和換行的標(biāo)簽。 標(biāo)題元素標(biāo)題元素由標(biāo)簽到定義。定義了最大的標(biāo)題元素，定義了最小的。This is a headingThis is a headingThis is a headingThis is a headingThis is a headingThis is a heading H

5、TML自動(dòng)在一個(gè)標(biāo)題元素前后各添加一個(gè)空行。,問(wèn)題： 如果要在瀏覽器中輸出含有的字符應(yīng)該怎么做？,答： 可以考慮使用轉(zhuǎn)移字符。 的轉(zhuǎn)移字符表示為>,段落段落是用標(biāo)簽定義的。This is another paragraph HTML自動(dòng)在一個(gè)段落前后各添加一個(gè)空行。,換行當(dāng)需要結(jié)束一行，并且不想開(kāi)始新段落時(shí)，使用標(biāo)簽。標(biāo)簽不管放在什么位置，都能夠強(qiáng)制換行。This is a paragraph with line breaks 標(biāo)簽是一個(gè)空標(biāo)簽，它沒(méi)有結(jié)束標(biāo)記。,HTML中的注釋 注釋標(biāo)簽用來(lái)在HTML源文件中插入注釋。注釋會(huì)被瀏覽器忽略。你可以使用注釋來(lái)解釋你的代碼，這可以在你以后編輯代

6、碼的時(shí)候幫助你。 注意：你需要在左括號(hào)“”后面跟一個(gè)感嘆號(hào)，右括號(hào)不用。,練習(xí) 完成以下網(wǎng)頁(yè)設(shè)計(jì)： 1、,3、,2、,其它HTML代碼,如超級(jí)鏈接: 騰迅網(wǎng) . 注意： 如果是鏈接到外部的網(wǎng)頁(yè)的話，一定要加上協(xié)議。 比如http:/，否則在上面中輸入 騰迅網(wǎng) 是打不開(kāi)網(wǎng)站的。,無(wú)序號(hào)列表,無(wú)序號(hào)列表使用的一對(duì)標(biāo)簽是，每一個(gè)列表項(xiàng)前使用。其結(jié)構(gòu)如下所示： 第一項(xiàng)第二項(xiàng)第三項(xiàng),無(wú)序號(hào)列表,如果要改變無(wú)序號(hào)列表的標(biāo)記為正方形的話，可以使用： 第一項(xiàng)第二項(xiàng)第三項(xiàng),例： 無(wú)序列表這是一個(gè)無(wú)序列表：國(guó)際互聯(lián)網(wǎng)提供的服務(wù)有：WWW服務(wù)文件傳輸服務(wù)電子郵件服務(wù)遠(yuǎn)程登錄服務(wù)其它服務(wù) ,無(wú)序號(hào)列表,序號(hào)列表,序號(hào)

7、列表和無(wú)序號(hào)列表的使用方法基本相同，它使用標(biāo)簽，每一個(gè)列表項(xiàng)前使用。每個(gè)項(xiàng)目都有前后順序之分，多數(shù)用數(shù)字表示。其結(jié)構(gòu)如下所示： 第一項(xiàng)第二項(xiàng)第三項(xiàng),序號(hào)列表,如果要改變序號(hào)列表的樣式，可以采用 的形式。 例如，以羅馬字符來(lái)進(jìn)行排序 第一項(xiàng)第二項(xiàng)第三項(xiàng),序號(hào)列表,例： 有序列表這是一個(gè)有序列表：國(guó)際互聯(lián)網(wǎng)提供的服務(wù)有：WWW服務(wù)文件傳輸服務(wù)電子郵件服務(wù)遠(yuǎn)程登錄服務(wù)其它服務(wù) ,表格,基本結(jié)構(gòu) . 定義表格 cellspacing 定義單元格的間距 border 定義表格的邊框.定義標(biāo)題 定義表行 定義表頭 定義表元(表格的具體數(shù)據(jù)),以下是一個(gè)簡(jiǎn)單的例子： 姓名性別年齡 王林男25 如果將分別替換

8、成： 和 會(huì)出現(xiàn)什么樣的效果？,插入圖形,超文本之所以在很短的時(shí)間內(nèi)如此廣泛的受到人們的青睞，很重要的一個(gè)原因時(shí)它能支持多媒體的特性，如圖象、聲音、動(dòng)畫(huà)等。這一部分，我們先來(lái)學(xué)習(xí)在一個(gè)頁(yè)面中如何插入圖象。,基本格式 插入圖象的標(biāo)簽是，其格式為： SRC屬性指明了所要鏈接的圖象文件地址，這個(gè)圖形文件可以是本地機(jī)器上的圖形，也可以是位于遠(yuǎn)端主機(jī)上的圖形。地址的表示方法可以沿用上一篇內(nèi)容“文件的鏈接”中URL地址表示方法。,例： IMG還有兩個(gè)屬性是HEIGHT和WIDTH，分別表示圖形的高和寬。通過(guò)這兩個(gè)屬性，可以改變圖形的大小，如果沒(méi)有設(shè)置，圖形按原大顯示： 例： ,查看源代碼,1. DW中,通過(guò)視圖中的,源代碼或拆分,可以查