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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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