第章HTML基礎(chǔ)(共58張)課件

1、第1章 HTML基礎(chǔ) 第一頁，共58頁。第1章 HTML基礎(chǔ) 第一頁，共58頁。第1章 HTML基礎(chǔ)1 HTML文檔結(jié)構(gòu)2 HTML基本標記的使用3 超鏈接標記4 HTML表格5 HTML表單第二頁，共58頁。第1章 HTML基礎(chǔ)1 HTML文檔結(jié)構(gòu)第二頁，共58頁。1 HTML文檔結(jié)構(gòu) 在互聯(lián)網(wǎng)中傳送的文檔，絕大部分使用超文本標記語言編寫，這些文檔稱為HTML文檔。 在基本HTML文檔中，只允許兩種元素存在：一種是HTML標記，另一種則是普通文本。 第三頁，共58頁。1 HTML文檔結(jié)構(gòu) 在互聯(lián)網(wǎng)中傳送的文檔1 HTML文檔結(jié)構(gòu)HTML文檔的組成結(jié)構(gòu)如下：第四頁，共58頁。1 HTML文檔結(jié)

2、構(gòu)HTML文檔的組成結(jié)構(gòu)如下：第四頁，共1 HTML文檔結(jié)構(gòu)一個完整的HTML文檔通常由以下三部分組成：1HTML標記 格式： 2頭部信息 格式： 3文本主體 格式： 第五頁，共58頁。1 HTML文檔結(jié)構(gòu)一個完整的HTML文檔通常由以下三部分1 HTML文檔結(jié)構(gòu)1HTML標記 這是定義HTML文檔開始與結(jié)束的標記，也是HTML文檔中最先出現(xiàn)的標識，表明這個文件的內(nèi)容是用HTML語言來實現(xiàn)的。它必須成對出現(xiàn)，分別表示HTML文件的起始和結(jié)束。在容器標記中又包括以下和兩個部分。第六頁，共58頁。1 HTML文檔結(jié)構(gòu)第六頁，共58頁。1 HTML文檔結(jié)構(gòu)2頭部信息 這一部分用來說明文檔標題以及該頁

3、面的其他信息，它構(gòu)成HTML文檔的開頭部分，在此標記對之間可以使用、等標記，這些標記都是描述HTML文檔相關(guān)信息的標志，標志對之間的內(nèi)容是不會在瀏覽器的框內(nèi)顯示出來的，但是其內(nèi)容應(yīng)該盡量簡短。第七頁，共58頁。1 HTML文檔結(jié)構(gòu)第七頁，共58頁。1 HTML文檔結(jié)構(gòu)3文本主體 這部分說明HTML文件的主體內(nèi)容，在瀏覽器的客戶區(qū)中顯示，這是頁面開發(fā)者的編寫HTML文檔的主要部分。第八頁，共58頁。1 HTML文檔結(jié)構(gòu)第八頁，共58頁。1 HTML文檔結(jié)構(gòu) 對于HTML標記的約定：超文本標記是用一對尖括號“”括起來的文本串，例如第一行的。超文本標記一般成對出現(xiàn)，用帶“/”的標記結(jié)束，如。成對出現(xiàn)

4、的超文本標記也稱容器元素。有些標記只有起始標記而沒有結(jié)束標記稱空元素，如。超文本標記可以忽略字母的大小寫。構(gòu)成容器元素的一對標記可以寫在不同行，標記屬性的相對位置不受限制，但屬性必須出現(xiàn)在起始標記里。 第九頁，共58頁。1 HTML文檔結(jié)構(gòu) 對于HTML標記的約定：第九頁編寫HTML文檔的方法:HTML文檔是一個純文本文件，可以使用任何文本編輯器編寫保存。例：新建一個html文件第十頁，共58頁。編寫HTML文檔的方法:第十頁，共58頁。2 HTML基本標記的使用2.1 head容器的標記2.2 body容器的標記第十一頁，共58頁。2 HTML基本標記的使用2.1 head容器的標記第2.1

5、 head容器的標記標記主要用來提供網(wǎng)頁文件的整體信息。包括標題欄名稱、文件的網(wǎng)址、所采用的文檔編碼等。標記用來告知瀏覽器這是文件標題的開頭，最后使用標記告知瀏覽器這是文件標題的結(jié)束點。 第十二頁，共58頁。2.1 head容器的標記標記主要用來提供網(wǎng)頁2.1 head容器的標記HTML文檔的head是一個容器元素，在head容器元素中允許出現(xiàn)以下元素：1title元素2link元素3meta元素4base元素5script元素第十三頁，共58頁。2.1 head容器的標記HTML文檔的head是一個容器2.1 head容器的標記1. title元素格式： 標題文字 title元素包含文檔的標

6、題。它不顯示在瀏覽器窗口中，只顯示在瀏覽器標題欄中。在起始標志（）和結(jié)束標志()間，可以放入簡述文檔內(nèi)容的標題。如果沒有title元素，瀏覽器的標題欄將顯示網(wǎng)頁的文件名。 第十四頁，共58頁。2.1 head容器的標記1. title元素第十四頁，共2.1 head容器的標記2link元素格式： link元素在當前文檔和另一文檔之間建立鏈接關(guān)系。href屬性指向相關(guān)的文檔; rel屬性描述了當前文檔與被連接文檔的關(guān)系;type屬性描述被連接文檔的類型。表示鏈接一個外部CSS文件如下: 第十五頁，共58頁。2.1 head容器的標記2link元素第十五頁，共582.1 head容器的標記3met

7、a元素格式： meta元素用來描述當前網(wǎng)頁的元信息。通常用來為搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設(shè)定頁面格式，標注內(nèi)容提要和關(guān)鍵字；還可以設(shè)置頁面的自動刷新時間間隔（秒）等。 第十六頁，共58頁。2.1 head容器的標記3meta元素第十六頁，共58一些有關(guān)metal元素的例子1. 設(shè)置搜索引擎關(guān)鍵字2. 設(shè)置網(wǎng)頁編碼3. 刷新頁面第十七頁，共58頁。一些有關(guān)metal元素的例子1. 設(shè)置搜索引擎關(guān)鍵字第十七頁2.1 head容器的標記4base元素格式：base元素指定一個顯式 URL 用于解析對于外部源的鏈接和引用，如圖像和樣式表

8、。當用戶使用相對URL請求文檔時，超鏈接也會正確地執(zhí)行。Target指定文檔中所有鏈接的默認窗口，該屬性主要用在使用框架結(jié)構(gòu)的網(wǎng)頁中，使用框架結(jié)構(gòu)，同一瀏覽器窗口中可以容納多個網(wǎng)頁，同時在若干不同的框架窗口中顯示。 第十八頁，共58頁。2.1 head容器的標記4base元素第十八頁，共582.1 head容器的標記5script元素格式：腳本語言代碼段script元素在文檔中放置一個腳本。這個元素可以在HTML文檔的head或body中出現(xiàn)。腳本可以在script元素中或外部文件中被定義。第十九頁，共58頁。2.1 head容器的標記5script元素第十九頁，共2.2 body容器的標記標

9、記是HTML文件最重要的部分，它是一個容器元素，包含在其中的內(nèi)容將顯示在瀏覽器的主窗口中。第二十頁，共58頁。2.2 body容器的標記標記是HTML文件最容器元素中可以包含下表中的常用元素:text定義標題, 其中:n=1,6。定義了最大字號的標題, 定義了最小字號的標題text段落標記，文檔主體中兩個段落之間插入換行把圖像插入到文檔中，其中src屬性給出圖像地址 text 定義超文本鏈接屬性，并將結(jié)果返回給用戶瀏覽器放置一個橫穿瀏覽器窗口的水平線在文本中強制換行注釋結(jié)束。注釋中不能包含注釋區(qū)塊容器元素，可容納段落、標題、表格、圖片等各種HTML元素第二十一頁，共58頁。容器元素中可以包含下

10、表中的常用元素:te2.2 body容器的標記在HTML中，需要使用元素的屬性對頁面進行一個整體的規(guī)劃和設(shè)置，例如頁面的背景顏色、背景圖案、頁面留白以及大部分文字的顏色等等。例如在百度搜索引擎的主頁中，其元素的定義如下： 第二十二頁，共58頁。2.2 body容器的標記在HTML中，需要使用bodybody元素本身的屬性可以分為3類，如下表所示: 背景屬性bgColor背景色background背景圖案文字屬性text正文文字顏色link鏈接文字顏色alink活動鏈接文字顏色vlink已訪問鏈接文字顏色邊距屬性leftmargin頁面左側(cè)的左邊距topmargin頁面頂部的上邊距第二十三頁，共

11、58頁。body元素本身的屬性可以分為3類，如下表所示: 背景屬性b2-2.html這是我的第一個html程序，我很高興哦。這個程序簡單了點學(xué)習嘛，要一步一步地來，不著急。第二十四頁，共58頁。第二十四頁，共58頁。3 超鏈接標記HTML用來表示超鏈接，英文叫anchor，一個鏈接的基本格式如下： 鏈接文字 表示一個鏈接的開始;表示鏈接的結(jié)束；可指向任何一個文件源：網(wǎng)頁、圖片、影視文件等;href屬性則表示這個鏈接文件的路徑；鏈接分為本地鏈接、URL鏈接和目錄鏈接。第二十五頁，共58頁。3 超鏈接標記HTML用來表示超鏈接，英文叫anch3 超鏈接標記超鏈接標記的幾個常用屬性：1target屬

12、性：網(wǎng)易首頁2title屬性：網(wǎng)易首頁3name屬性：第一章第二章4鏈接到email地址：聯(lián)系網(wǎng)易第二十六頁，共58頁。3 超鏈接標記超鏈接標記的幾個常用屬性：第二十六頁，共583.1 本地鏈接 對同一臺機器上的不同文件進行的連接稱為本地鏈接，它使用UNIX或DOS系統(tǒng)中文件路徑的表示方法，采用絕對路徑或相對路徑來指示一個文件。 （1）以絕對路徑表示：文件的鏈接（2）以相對路徑表示：文件的鏈接/a（3）鏈接上一目錄中的文件：IP地址 第二十七頁，共58頁。3.1 本地鏈接 對同一臺機器上的不同文件進行的連接稱為3.2 URL鏈接 URL是英文Uniform Resource Locators（

13、統(tǒng)一資源定位器）的縮寫，是專為標識Internet網(wǎng)上資源位置而設(shè)的一種編址方式，通過它可以以多種通訊協(xié)議與外界溝通來存取信息。URL地址一般由三部分組成，例如：協(xié)議名 主機名 路徑及文件名 第二十八頁，共58頁。3.2 URL鏈接 URL是英文Uniform ResoInternet上的通訊協(xié)議通常包括以下幾種： 協(xié)議名功能說明file本地系統(tǒng)文件httpWWW服務(wù)器ftpftp服務(wù)器telnet基于TELNET的協(xié)議mailto電子郵件newsUsenet新聞組第二十九頁，共58頁。Internet上的通訊協(xié)議通常包括以下幾種： 協(xié)議名功能說3.3 目錄鏈接 目錄鏈接可以直接指到某一個文件

14、的上部、下部或中央部分。其制作方法是：在各種鏈接的各個要素中，首先把某段落設(shè)置為鏈接位置，使用name屬性，它可以跳轉(zhuǎn)到一個文件的指定位置。格式1： 然后，設(shè)定一個href指向此鏈接部分的文件；格式2： 鏈接文字 第三十頁，共58頁。3.3 目錄鏈接 目錄鏈接可以直接指到某一個文件的上部、 使用本地鏈接 互聯(lián)網(wǎng) HTML簡介 多樣化和統(tǒng)一性 互聯(lián)網(wǎng) 互聯(lián)網(wǎng)是網(wǎng)絡(luò)的網(wǎng)絡(luò)。也就是說，計算機網(wǎng)絡(luò)可以跨越國家甚至全球的范圍連接到其他網(wǎng)絡(luò)。世界上所有的計算機都可以通過TCP/IP傳輸協(xié)議綁定在一起。 HTML簡介 超文本標記語言是Web用來創(chuàng)建和識別文檔的標準語言。雖然它不是標準通用標記語言 (SGML

15、) 的子集，但與它有著某種程度上的關(guān)聯(lián)。SGML是一種文檔格式語言表示方法。 多樣性和統(tǒng)一性 萬事萬物都離不開多樣性和統(tǒng)一性這樣一條基本準則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設(shè)計元素應(yīng)在站點的每個部分都保持一致。 關(guān)于我們 聯(lián)系我們 第三十一頁，共58頁。第三十一頁，共58頁。4 HTML表格表格中所有行和列及單元格中的內(nèi)容必須被包含在一對和標記中，其基本結(jié)構(gòu)如下：. . . . . 第三十二頁，共58頁。4 HTML表格表格中所有行和列及單元格中的內(nèi)容必須被包含 row 1, cel

16、l 1row 1, cell 2row 2, cell 1row 2, cell 2 第三十三頁，共58頁。 第三十三頁，共58頁4.1 表格定義標記1表格的標題 表格標題的位置，可由align屬性來設(shè)置，其位置分別由表格上方和表格下方。設(shè)置標題位于表格上方： . 設(shè)置標題位于表格下方： . 第三十四頁，共58頁。4.1 表格定義標記1表格的標題 第三十四頁，共58頁。4.1 表格定義標記2元素元素表示表格中的行標記，表格中的每一行都必須包含在一對標記中。行標記的一般形式是： . 在標記中有兩個屬性：align指定該行中單元格的對齊方式，如左對齊，居中以及右對齊；bgcolor指定該行的背景顏

17、色第三十五頁，共58頁。4.1 表格定義標記2元素第三十五頁，共58頁。4.1 表格定義標記3.元素單元格是表格的基本組成元素，一個td 元素表示表格中的一個單元格，包含在元素內(nèi)的多個元素構(gòu)成表格的一行。單元格的一般形式是： . 第三十六頁，共58頁。4.1 表格定義標記3.元素第三十六頁，共58頁。4.1 表格定義標記3.元素在標記中的屬性如下：width 指定單元格的寬度；height 指定單元格的高度；align 指定單元格水平對齊方式；valign 指定單元格垂直對齊方式；bgcolor 指定單元格的背景顏色background 指定單元格的背景圖案rowspan 指定單元格的行跨度c

18、olspan 指定單元格的列跨度第三十七頁，共58頁。4.1 表格定義標記3.元素第三十七頁，共58頁。4.2 表格屬性的設(shè)置 1表格的大小一般情況下，表格的總長度和總寬度是根據(jù)各行和各列的總和自動調(diào)整的，如果我們要直接固定表格的大小，可以使用下列方式：width和height屬性分別指定表格一個固定的寬度和長度，n1和n2可以用像素或百分比來表示。例如定義一個長為200像素，寬為100像素的表格： 第三十八頁，共58頁。4.2 表格屬性的設(shè)置 1表格的大小第三十八頁，共58頁4.2 表格屬性的設(shè)置 2表格的邊框邊框是用border屬性來設(shè)定的，它表示表格的邊框風格。將border設(shè)成不同的值

19、，有不同的效果。在作為布局使用時往往取默認值“0”，即不顯示表格的邊框，在=1時，表格邊框顯示成三維的狀態(tài)。書寫格式為：第三十九頁，共58頁。4.2 表格屬性的設(shè)置 2表格的邊框第三十九頁，共58頁4.2 表格屬性的設(shè)置 3單元格間距單元格與單元格之間的線為格間線，它的寬度可以使用中的cellspacing屬性加以調(diào)節(jié)。格式為： #表示要取用的像素值還可以在中設(shè)置cellpadding屬性，用來規(guī)定內(nèi)容與格線之間的寬度。格式為： #表示要取用的像素值第四十頁，共58頁。4.2 表格屬性的設(shè)置 3單元格間距第四十頁，共58頁。4.2 表格屬性的設(shè)置 4表格內(nèi)文字的對齊方式表格中數(shù)據(jù)的排列方式有左

20、右排列和上下排列兩種。左右排列由align屬性來設(shè)置，上下排列則由valign屬性來設(shè)置。格式參照 標記：#為left、center、right之一#為top、middle、bottom之一第四十一頁，共58頁。4.2 表格屬性的設(shè)置 4表格內(nèi)文字的對齊方式第四十一頁4.2 表格屬性的設(shè)置 5單元格的合并利用td的rowspan和colspan屬性可以把單元格合并rowspan=“n”：合并其下面n-1個單元格colspan=“n”：合并其右測n-1個單元格第四十二頁，共58頁。4.2 表格屬性的設(shè)置 5單元格的合并第四十二頁，共58第四十三頁，共58頁。第四十三頁，共58頁。5 HTML表單

21、5.1 表單標記結(jié)構(gòu)5.2 單行文本框和多行文本框5.3 命令按鈕5.4 單選按鈕5.5 復(fù)選框5.6 下拉列表框5.7 隱藏域第四十四頁，共58頁。5 HTML表單5.1 表單標記結(jié)構(gòu)第四十四頁，共58頁5.1 表單標記結(jié)構(gòu)HTML表單(Form)是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。表單在Web網(wǎng)頁中用來給訪問者填寫信息，從而能獲得用戶信息，使網(wǎng)頁具有交互的功能。HTML表單標記的基本結(jié)構(gòu)如下： 表單主體 第四十五頁，共58頁。5.1 表單標記結(jié)構(gòu)HTML表單(Form)是HTML的一5.2 單行文本框和多行文本框單行文本框允許用戶輸入一些簡短的單行信息，比如用戶姓名

22、、密碼等。格式如下：第四十六頁，共58頁。5.2 單行文本框和多行文本框單行文本框允許用戶輸入一些簡IP地址表示鏈接一個外部CSS文件如下:a href=“mailto:info163.邊框是用border屬性來設(shè)定的，它表示表格的邊框風格。鏈接文字 htm文件的鏈接格式： 2-2.align指定該行中單元格的對齊方式，如左對齊，居中以及右對齊；例：新建一個html文件2 表格屬性的設(shè)置html鏈接文字 成對出現(xiàn)的超文本標記也稱容器元素。請輸入你的姓名：第四十七頁，共58頁。form action=http:/www.form5.2 單行文本框和多行文本框多行文本框主要用于輸入較長的多行文本信息。格式如下： 第四十八頁，共58頁。5.2 單行文本框和多行文本框多行文本框主要用于輸入較長的請?zhí)釋氋F意見：第四十九頁，共58頁。form action=http:/www.aaa.c5.3 命令按鈕命令按鈕通常用于完成一定的操作，這由按鈕的type屬性值而確定