《html語言入門》PPT課件.ppt

1、HTML初步,WWW、HTTP與HTML,WWW：萬維網(wǎng)是由許多互相鏈接的超文本文件組成的一個(gè)資料系統(tǒng)，在因特網(wǎng)上向?yàn)g覽者提供信息檢索服務(wù)，又稱全球網(wǎng)，3W或3Web HTTP是用于從WWW服務(wù)器上傳輸超文本到本地瀏覽器的傳輸協(xié)議。 HTML（Hyper Text Markup Language 超文本標(biāo)識(shí)語言） 是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。 用HTML編寫的超文本文件稱為HTML文件，也稱Web文件。,HTML的發(fā)展歷程,1969年前后由托德尼爾遜提出超文本概念。 1996 W3C組織編寫了3.2版本的HTML,HTML標(biāo)記的語法及文件結(jié)構(gòu),HTML標(biāo)記總是封裝在由小于符號(hào)“”構(gòu)

2、成的一對(duì)尖括號(hào)內(nèi)，用于修飾、設(shè)置HTML文件的顯示內(nèi)容及格式 HTML標(biāo)記一般分為容器型標(biāo)記和非容器型標(biāo)記。 容器型標(biāo)記格式為內(nèi)容 非容器型標(biāo)記格式為 。,HTML文件的基本結(jié)構(gòu), 網(wǎng)頁(yè)標(biāo)題 文件主體 ,標(biāo)記的常用屬性,簡(jiǎn)單的例子5-1, 我的第一個(gè)網(wǎng)頁(yè) 大家好！歡迎訪問我的網(wǎng)頁(yè) 另存為擴(kuò)展名為.html 或.htm的文件,HTML中常用的標(biāo)記,1、注釋標(biāo)記 2、換行標(biāo)記 3、換段標(biāo)記、,可以使用ALIGN屬性：left center right 4、居中標(biāo)記：. 5、水平線標(biāo)記：在默認(rèn)情況下插入一條水平線：黑色，3D，粗細(xì)為2個(gè)像素。,HTML中常用的標(biāo)記2,標(biāo)記的常用屬性,HTML中常用的

3、標(biāo)記3,6、段落標(biāo)題標(biāo)記. 功能：在頁(yè)面中將標(biāo)記之間的文本設(shè)置為一個(gè)段落標(biāo)題，其中N的取值為.5.6六個(gè)級(jí)別。 7、字體標(biāo)記：. 功能：在頁(yè)面中對(duì)標(biāo)記之間的字體設(shè)置字體、字號(hào)、顏色，此標(biāo)記有三個(gè)屬性：FACE字體、 SIZE字體大小、COLOR字體顏色。,HTML中常用的標(biāo)記3,字體樣式標(biāo)記 .對(duì)標(biāo)記之間的字體設(shè)置加粗 .對(duì)標(biāo)記之間的字體設(shè)置傾斜 .對(duì)標(biāo)記之間的字體設(shè)置字體加下劃線 .對(duì)標(biāo)記之間的字體設(shè)置加刪除線,建立列表,有序列表功能：在頁(yè)面中建立一個(gè)具有多個(gè)列表的有序列表 列表項(xiàng)一 列表項(xiàng)二 列表項(xiàng)三 有序序列號(hào)用屬性標(biāo)記TYPE來設(shè)置： 有1.A.a.來表示,建立列表2,無

4、序列表. 功能：在頁(yè)面中建立多個(gè)無序列表，也稱符號(hào)列表 格式： 列表項(xiàng)一 .列表項(xiàng)二 無序列表屬性標(biāo)記是disc circle square 還是用TYPE= 來標(biāo)記,建立列表3,定義列表： . 一部份是概念部份.容器表示，一部份是定義的解釋部份用 例5-6,建立列表4,列表嵌套：是指多于一級(jí)層次的列表，一般不超過三級(jí)列表，例5-7,超鏈接,超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，

5、一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁(yè)中用來超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。,建立超鏈接,超級(jí)鏈接是用錨元素.來定義的 在元素下，有元素屬性href, href的屬性值為一個(gè)URL地址 如：指向?qū)W校的超級(jí)鏈接 如：普通超級(jí)鏈接,超級(jí)鏈接E-mail超級(jí)鏈接,超級(jí)鏈接可以指向E-mail地址 如：指向E-mail地址的超級(jí)鏈接,建立簡(jiǎn)單的表格, 表格標(biāo)題 表頭單元格 表頭單元格 . 數(shù)據(jù)單元格 數(shù)據(jù)單元格 . ,表格的行列合并,表格行的合并：是指將表格中相同列內(nèi)的多行合

6、并成一行。在HTML中主要通過表頭單元格標(biāo)記數(shù)據(jù)單元格標(biāo)記的ROWSPAN來設(shè)置 格式或,表格的列合并,表格的列合并是指將表格中相同行內(nèi)的多列合并成一列。在HTML中主要通過表頭單元格的標(biāo)記和數(shù)據(jù)單元格標(biāo)記的COLSPAN來設(shè)置,表格修飾,標(biāo)記的常用屬性,標(biāo)記的常用屬性,和標(biāo)記的常用屬性,建立表單,表單是在網(wǎng)頁(yè)中向?yàn)g覽者提供的一種交互式操作界面。其作用是向?yàn)g覽者收集各種資料信息，并將這些信息提交給網(wǎng)絡(luò)服務(wù)器的CGI程序進(jìn)行處理。 表單的使用包括兩部份：一部份是交互式操作界面；一部份是處理程序，處理用戶提交的數(shù)據(jù)并返回結(jié)果。,表單標(biāo)記,格式：. action用于指定處理表單數(shù)據(jù)的URL地址，其值

7、通常是動(dòng)態(tài)網(wǎng)頁(yè)文件的路徑。,表單輸入控件標(biāo)記,格式： TYPE 類型有以下一些種類：text,password,file,radio,checkbox,submit,reset,buttom name: size,value,checked maxlength,表單的其他控件標(biāo)記,1多行文本框標(biāo)記 功能：在表單中建立一個(gè)指定的多行的文本框 格式: 2列表框標(biāo)記 格式： 列表項(xiàng)一 列表項(xiàng)二 列表項(xiàng)三 功能：在表單中建立一個(gè)列表框,HTML 文件結(jié)構(gòu)中的基本標(biāo)記,.標(biāo)記 .標(biāo)記 .標(biāo)記 .標(biāo)記 元素：是HTML語言的基本部分。元素總是成對(duì)出現(xiàn)，每一對(duì)元素一般都有一個(gè)開始的標(biāo)記（如），也有一個(gè)結(jié)束的

8、標(biāo)記（如）。元素的標(biāo)記要用一對(duì)尖括號(hào)括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個(gè)斜杠。,HTML文檔的編寫方法,手工直接編寫 記事本等，存成.htm .html格式 使用可視化HTML編 輯 器 Frontpage、Dreamweaver等 由Web 服務(wù)器（ 或稱HTTP 服務(wù)器） 一 方實(shí)時(shí)動(dòng)態(tài)地生成。,網(wǎng)頁(yè)文件命名,*.htm或*.html 無空格 無特殊符號(hào)（例如&符號(hào)），只可以有下劃線“_”，只可以為英文、數(shù)字 區(qū)分大小寫 首頁(yè)文件名默認(rèn)為：index.htm 或 index.html,HTML 文件結(jié)構(gòu),. . . 元素：是HTML語言的基本部分。元素總是成對(duì)出現(xiàn)，每一對(duì)元素一般

9、都有一個(gè)開始的標(biāo)記（如），也有一個(gè)結(jié)束的標(biāo)記（如）。元素的標(biāo)記要用一對(duì)尖括號(hào)括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個(gè)斜杠。,HTML 文件結(jié)構(gòu)(Document Structures), HTML 文件的正文 ,第一張網(wǎng)頁(yè)（01.htm）, 第一張網(wǎng)頁(yè) 歡迎光臨我的主頁(yè)！ ,基本組成部分HTML元素屬性,HTML元素可以有自己的相關(guān)屬性，每一個(gè)屬性還可以由我們網(wǎng)頁(yè)編制者賦一定的值。元素屬性出現(xiàn)在元素的內(nèi)，并且和元素名之間有一個(gè)空格分隔；屬性值用“”引起來。,第二張網(wǎng)頁(yè)（02.htm）, 第一張網(wǎng)頁(yè) 歡迎光臨我的主頁(yè)! ,HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性,HEAD元素1 元素出現(xiàn)在文檔

10、的開頭部分。與之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 元素定義HTML文檔的標(biāo)題。與之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。,HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性,HEAD元素2 元素 元素下面可以插入很多很有用的元素屬性。下面介紹四種： 用來標(biāo)記搜索引擎在搜索你的頁(yè)面時(shí)所取出的關(guān)鍵詞。,HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性,HEAD元素3 元素 用來標(biāo)記文檔的作者。,HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性,HEAD元素4 元素 用來標(biāo)記你的頁(yè)面的解碼方式。,HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性,HEAD元素5 元素 用來自動(dòng)刷新網(wǎng)頁(yè),練習(xí)（03.htm）,編寫一個(gè)

11、網(wǎng)頁(yè)，要求3秒鐘后自動(dòng)跳轉(zhuǎn)到校網(wǎng)主頁(yè)。 my first page 三秒鐘后本網(wǎng)頁(yè)將自動(dòng)跳轉(zhuǎn)到華東理工大學(xué)首頁(yè) ,元素及元素屬性1,元素表明是HTML文檔的主體部分。在與之間，通常都會(huì)有很多其它元素；這些元素和元素屬性構(gòu)成HTML文檔的主體部分。,元素及元素屬性2,元素中有下列元素屬性： (1)bgcolor bgcolor屬性標(biāo)志HTML文檔的背景顏色。如：bgcolor=“#CCFFCC”。 例：04.htm,HTML對(duì)顏色的控制,HTML對(duì)顏色的控制也有自己的語法。HTML使用16進(jìn)制的RGB顏色值對(duì)顏色進(jìn)行控制。 16 進(jìn)制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c

12、,d,e,f.,常見顏色的代碼,元素及元素屬性3,元素中有下列元素屬性： (2)background background屬性標(biāo)志HTML文檔的背景圖片。如：background=“images/bg.gif。 可以使用的圖片格式為GIF，JPG 例：05.htm、06.htm,元素及元素屬性4,元素中有下列元素屬性： (3)bgproperties=fixed bgproperties=fixed使背景圖片成水印效果，即圖片不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)。 例：07.htm和08.htm對(duì)比,元素及元素屬性5,元素中有下列元素屬性： (4)text text屬性標(biāo)志HTML文檔的正文文字顏色。如：

13、text=“#FF6666”。Text元素定義的顏色將應(yīng)用于整篇文檔。 例：09.htm,文字標(biāo)簽屬性1,文字屬性標(biāo)記. 1.文字顏色 指定顏色 . #=RRGGBB 16 進(jìn)制數(shù)碼 例：010.htm,文字標(biāo)簽屬性2,文字屬性標(biāo)記 2.文字字體 . #=客戶端可獲得的字體 011.htm,文字標(biāo)簽屬性3,文字屬性標(biāo)記 3.文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例：012.htm,文字布局,行的控制 段(Paragraph) (可以看作是空行) 空白占位符 例：013.htm,文字布局,行的控制 HTML的段落與段落之間有一定的空隔。如果不希望出現(xiàn)空隔而

14、只想換行的話，就要用到另一個(gè)元素，即元素。元素可以使所在的位置出現(xiàn)換行。這種換行和瀏覽器的自動(dòng)換行的效果類似。元素不是成對(duì)出現(xiàn)的。 例：014.htm 不換行 015.htm,HTML文字與段落格式控制, 傾斜文本 粗體文本 下劃線文本 刪除線文本 例：016.htm,基本組成部分HTML注釋,HTML文檔可以插入注釋。注釋內(nèi)容不會(huì)在瀏覽器窗口顯示 HTML注釋的格式為： 例：017.htm,文字的對(duì)齊,. (n=1,2,3,4,5,6) . (#=left, center, right),3.HTML段落與分行控制,居中- 元素 元素是一個(gè)獨(dú)立的使所標(biāo)記的字符居中的元素。它的作用與使用元素里

15、的align=“center”類似 例如：居中段落 例：018.htm,3.HTML段落與分行控制,標(biāo)尺線 ：設(shè)定線寬 ：設(shè)定線長(zhǎng) ：設(shè)定對(duì)齊方式 #=left, right ：設(shè)定線的顏色 例：019.htm,3. HTML的段落與分行控制,無序列表元素1列表在HTML的文檔里有重要的地位,HTML規(guī)定了多種列表元素。列表所起的主要作用是使特定的文本有序化。,3. HTML的段落與分行控制,無序列表元素2 無序列表是由和元素定義的: sports food drink friends 例：020.htm,4.超級(jí)鏈接普通超級(jí)鏈接1,超級(jí)鏈接是整個(gè)WWW應(yīng)用的核心和基礎(chǔ)。如果沒有超級(jí)鏈接的概念

16、，那么，我們現(xiàn)在所有的WWW的應(yīng)用將不復(fù)存在。所以，對(duì)超級(jí)鏈接的掌握具有特殊重要的意義。,4.超級(jí)鏈接普通超級(jí)鏈接2,超級(jí)鏈接是用錨元素定義的 在元素下，有元素屬性href, href的屬性值為一個(gè)URL地址 如：指向?qū)W校的超級(jí)鏈接 如：普通超級(jí)鏈接 例：021.html,4.超級(jí)鏈接E-mail超級(jí)鏈接,超級(jí)鏈接可以指向E-mail地址 如：指向E-mail地址的超級(jí)鏈接 例：022.htm,4.超級(jí)鏈接新開鏈接窗口,開一個(gè)新的(瀏覽器)窗口 (Target Window) . 例：023.htm,HTML對(duì)圖片的控制-1,基本語法: 引用圖片必須用元素標(biāo)志。元素下的基本元素屬性是src屬性

17、，src的屬性值為所引用的圖片的URL地址。 src屬性是必須的。Src的URL可以是絕對(duì)地址，也可以是相對(duì)地址,HTML對(duì)圖片的控制-2,所謂圖片的替代文本，指圖片不能顯示時(shí)在圖片所在位置顯示的一段文本或當(dāng)鼠標(biāo)移到圖片上時(shí)也會(huì)顯示替代文本。 定義圖片替代文本的方法是： 例：024.htm,HTML對(duì)圖片的控制-3,圖片的顯示大小 我們可以指定一幅圖片在瀏覽器窗口里的顯示大小。 定義圖片的顯示大小的方法是： width指定圖片的寬度，height指定高度。它們的屬性值可以是象素，也可以是%。 例：025.htm,HTML對(duì)圖片的控制-4,圖片的邊框 我們可以為一幅圖片加一個(gè)邊框以突出顯示： b

18、order的屬性值為象素?cái)?shù) 例：026.htm,HTML對(duì)圖片的控制-5,圖片的對(duì)齊方式 圖片可以相對(duì)于頁(yè)面或單元格有一個(gè)對(duì)齊方式。 定義水平對(duì)齊方式的方法是： 例：027.htm,表格(TABLE)標(biāo)記-1, 元素：定義一個(gè)表格。每一個(gè)表格只有一對(duì)和，一張頁(yè)面中可以有多個(gè)表格。 元素：定義表格的行，一個(gè)表格可以有多行，所以對(duì)于一個(gè)表格來說不是唯一的。 元素：定義表格的一個(gè)單元格。每行可以有不同數(shù)量的單元格，在和之間是單元格的具體內(nèi)容。 需要注意的是：上述的三個(gè)元素必須、而且只能夠配對(duì)使用。缺少任何一個(gè)元素，都無法定義出一個(gè)表格。,表格(TABLE)標(biāo)記-2,表格的基本結(jié)構(gòu) 定義表格 定義表頭

19、 定義表行 定義單元格 ,表格(TABLE)標(biāo)記-3,表格的屬性 1 width屬性：指定表格或某一個(gè)表格單元格的寬度。單位可以是%或者象素。 height屬性：指定表格或某一個(gè)表格單元格的高度。單位可以是%或者象素。 border屬性：表格邊線粗細(xì),表格(TABLE)標(biāo)記-2,表格的屬性 1 bgcolor屬性：指定表格或某一個(gè)單元格的背景顏色。 background屬性：指定表格或某一個(gè)單元格的背景圖片。其屬性值為一個(gè)URL地址。 align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的對(duì)齊方式。,小小網(wǎng)上書屋 , ,讀者須知,聯(lián)系我們,網(wǎng)頁(yè)中的框架,制作框架頁(yè)面的步驟： 1.編寫

20、所有子框架頁(yè)面 2.編寫主框架頁(yè)面 3.在主框架頁(yè)面中設(shè)定子框架名稱 4.如果框架頁(yè)面之間存在鏈接，在子框架中設(shè)定鏈接。 注意：框架頁(yè)面是不含標(biāo)簽的,網(wǎng)頁(yè)中的框架,基本語法 您的瀏覽器不支持框架，請(qǐng)考慮升級(jí)您的瀏覽器！ ,網(wǎng)頁(yè)中的框架,定義框架的基本語法 框架由一對(duì)定義 有兩個(gè)屬性：rows和cols Rows定義上下分割的框架的大?。?cols定義左右分割的框架的大?。?在定義大小時(shí)，rows和cols可以使用相對(duì)大小或以百分比為單位。,網(wǎng)頁(yè)中的框架,各窗口的尺寸設(shè)置 橫排多個(gè)窗口 排列方式： A B C 例：041.htm,網(wǎng)頁(yè)中的框架,各窗口的尺寸設(shè)置 縱向排列多個(gè)窗口 排列方式：A B

21、 C 例：042.htm,網(wǎng)頁(yè)中的框架,COLS & ROWS：縱橫排列多個(gè)窗口 排列方式： B A C 例：053.htm,網(wǎng)頁(yè)中的框架,框架邊框的顏色 bordercolor=ff0000“ 例：043.htm 各窗口邊框的設(shè)置 frameborder=# #=yes, no / 1, 0 框架邊框的寬度 framespacing=10 例：044.htm,網(wǎng)頁(yè)中的框架,的屬性 name：定義該框架的名字。這個(gè)名字可以被一些網(wǎng)頁(yè)元素引用，如被元素引用。 Src：在本框架里顯示網(wǎng)頁(yè)的URL。 Target：目標(biāo)框架,引用的是目標(biāo)框架的名字。,網(wǎng)頁(yè)中的框架,在當(dāng)前框架中打開超鏈接頁(yè)面 默認(rèn)就是

22、在當(dāng)前框架頁(yè)中打開,也可以采用Target=“_self” 在指定框架中打開超級(jí)鏈接頁(yè)面 Target=“name” 新開窗口打開鏈接頁(yè)面 Target=“_blank” 跳出整個(gè)框架集 Target=“_parent”,網(wǎng)頁(yè)中的框架,的屬性 Scrolling：是否顯示滾動(dòng)條。yes, no, auto Noresize：框架在瀏覽器里不可以被調(diào)整大小。,會(huì)移動(dòng)的文字,基本語法 . 文字移動(dòng)屬性 (1)方向 ：direction=# #=left, right,up,down,會(huì)移動(dòng)的文字,2、文字移動(dòng)屬性 (2)方式： behavior=# #=scroll(循環(huán)), slide(只走一次

23、), alternate(來回走) (3)循環(huán): loop=# #=次數(shù)；若未指定則循環(huán)不止(infinite),會(huì)移動(dòng)的文字,2、文字移動(dòng)屬性 (4)速度: scrollamount=# (5)延時(shí): scrolldelay=#,會(huì)移動(dòng)的文字,3、其他屬性 (1)底色: bgcolor=# #=RRGGBB 16 進(jìn)制顏色代碼 (2)面積: height=# width=# (3)空白:hspace=# vspace=#,表單(FORM)標(biāo)記,HTML表單是HTML頁(yè)面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。 在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。,表單(FORM