第01講 超文本標(biāo)記語言-HTML

《第01講 超文本標(biāo)記語言-HTML》由會員分享，可在線閱讀，更多相關(guān)《第01講 超文本標(biāo)記語言-HTML（46頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、Softeem Consultancy Service超文本標(biāo)記語言超文本標(biāo)記語言-HTMLID:SCSC007-HTML,CSS,JSSofteem Consultancy Service超文本標(biāo)記語言超文本標(biāo)記語言-HTMLHTML概念HTML頁面的基本框架HTML常用格式標(biāo)簽圖像標(biāo)簽列表標(biāo)簽表格標(biāo)簽HTML超鏈接框架表單4/27/20232超文本標(biāo)記語言-HTMLSofteem Consultancy Service統(tǒng)一資源定位器統(tǒng)一資源定位器URLURL（UniformResourceLocation）即統(tǒng)一資源定位器，它指出了文件在Internet中的位置。URL由協(xié)議名、Web服務(wù)

2、器地址、文件在服務(wù)器中的路徑（即目錄）和文件名四部分構(gòu)成。例如，http：/ Consultancy Service超文本標(biāo)語語言超文本標(biāo)語語言HTMLHTML（HypertextMarkupLanguage）即超文本標(biāo)記語言，它是一種用于編寫超文本文檔的標(biāo)記語言。自從1990年首次應(yīng)用于網(wǎng)頁編輯后，HTML迅速崛起成為網(wǎng)頁編輯的主流語言。幾乎所有的網(wǎng)頁都是由HTML或以其他程序語言嵌套在HTML中編寫的。HTML并不是一種程序語言而是一種結(jié)構(gòu)語言，它具有平臺無關(guān)性。無論用戶使用何種操作系統(tǒng)（Windows、Dos、Unix等等），只要有相應(yīng)的瀏覽器程序，就可以運行HTML文檔。4/27/20

3、234超文本標(biāo)記語言-HTMLSofteem Consultancy Service超文本傳輸協(xié)議超文本傳輸協(xié)議HTTP超文本傳輸協(xié)議規(guī)定了瀏覽器在運行HTML文檔時所遵循的規(guī)則和要進行的操作。HTTP協(xié)議的制定使測覽器在運行超文本文檔時有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)，從而大大增強了網(wǎng)頁的適用性。4/27/20235超文本標(biāo)記語言-HTMLSofteem Consultancy ServiceClient/Server架構(gòu)架構(gòu)ClientServer清求響應(yīng)4/27/20236超文本標(biāo)記語言-HTMLSofteem Consultancy ServiceHTML頁面的基本框架頁面的基本框架標(biāo)題內(nèi)容4/2

4、7/20237超文本標(biāo)記語言-HTMLSofteem Consultancy ServiceHTML頁面的基本框架頁面的基本框架必須位于head內(nèi)，設(shè)置背景音樂Src 位置Loop 循環(huán)次數(shù)，如果不設(shè)置，則一直播放4/27/20238超文本標(biāo)記語言-HTMLSofteem Consultancy Service標(biāo)簽標(biāo)簽“BGCOLOR”。指定HTML文檔的背景色?！癟EXT”。指定HTML文檔中文字的顏色。“LINK”。指定HTML文檔中待連接超鏈接對象的顏色?！癆LINK”。指定HTML文檔中連接中超鏈接對象的顏色?！癡LINK”。指定HTML文檔中已連接超鏈接對象的顏色?！癇ACKGROU

5、ND”。指定HTML文檔的背景文件。4/27/20239超文本標(biāo)記語言-HTMLSofteem Consultancy Service常用標(biāo)簽常用標(biāo)簽-換行-文檔中的標(biāo)題-創(chuàng)建一個段落-固定格式文本塊-粗體-斜體-下劃線-設(shè)置字體及大小-文本塊容器-水平分隔線4/27/202310超文本標(biāo)記語言-HTMLSofteem Consultancy Service圖像標(biāo)簽圖像標(biāo)簽-鏈接一個圖像文件常用屬性：SRC=被鏈接文件的URLWIDTH=圖像的寬度HEIGHT=“圖像的高度BORDER=“圖像的邊框ALT=“圖像說明文字ALGN=與圖像相鄰的文字相對位置VSPACE=垂直方向與圖像相鄰的對象之

6、間距離VHPACE=水平方向與圖像相鄰的對象之間距離BORDER=圖像過框的寬度4/27/202311超文本標(biāo)記語言-HTMLSofteem Consultancy Service常用的圖像文件格式常用的圖像文件格式網(wǎng)頁中常用的圖像文件格式：GIF顏色數(shù)不超過256色，可用于動畫或透明背景的圖像。JPG適用于顏色豐富或漸變色較多的圖像文件，但不可以做成動畫。4/27/202312超文本標(biāo)記語言-HTMLSofteem Consultancy Service列表標(biāo)簽列表標(biāo)簽創(chuàng)建一個標(biāo)有數(shù)字的列表創(chuàng)建一個標(biāo)有圓點的列表放在每個列表項之前,若在之間則每個列表項加上一個數(shù)字,若在之間則每個列表項加上一

7、個圓點4/27/202313超文本標(biāo)記語言-HTMLSofteem Consultancy Service列表嵌套的范例程序列表嵌套的范例程序一些常見的水果：蘋果和桔子香蕉和草萄西瓜和桃子這是列表的第二項一些常見的肉類豬肉和牛肉羊肉和兔肉4/27/202314超文本標(biāo)記語言-HTMLSofteem Consultancy Service表格標(biāo)簽表格標(biāo)簽border邊框?qū)挾葁idth表格的寬度height表格的高度align表格與其相鄰的文字的相對位置cellpadding單元格內(nèi)的邊距cellspacing單元格間的空白4/27/202315超文本標(biāo)記語言-HTMLSofteem Consul

8、tancy Service行列標(biāo)簽行列標(biāo)簽定義行定義表頭定義列colspan單元格所跨的列數(shù)rowspan單元格所跨的行數(shù)nowrap是否自動進行文字環(huán)繞4/27/202316超文本標(biāo)記語言-HTMLSofteem Consultancy Service共有的常用屬性共有的常用屬性bgcolor背景顏色align水平對齊方式（left、right、center）valign垂直對齊方式（top、middle、bottom）bordercolor邊框顏色width、height寬度、高度4/27/202317超文本標(biāo)記語言-HTMLSofteem Consultancy Service表格示例表

9、格示例4/27/202318超文本標(biāo)記語言-HTMLSofteem Consultancy Service超鏈接超鏈接HTML是通過鏈接標(biāo)簽來實現(xiàn)超鏈接的。鏈按標(biāo)簽是成對標(biāo)簽，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是錨標(biāo)。標(biāo)簽有一個不可缺省的屬性href，用于指定鏈接目標(biāo)點的位置。文檔之間的跳轉(zhuǎn)、跳轉(zhuǎn)到標(biāo)記位置、鏈接地圖。外部鏈接4/27/202319超文本標(biāo)記語言-HTMLSofteem Consultancy Service文檔鏈接文檔鏈接用戶可以通過點擊錨標(biāo)從當(dāng)前文檔直接跳轉(zhuǎn)至目標(biāo)文檔。如前所述，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是錨標(biāo)，一般是對目標(biāo)文檔的簡要說明。此時，href屬性的參數(shù)值是目標(biāo)文檔的UR

10、L。路徑表示方式：text1.htm在當(dāng)前的目錄中text1.htm在名為docs的子目錄中text1.htm在當(dāng)前目錄的上一層目錄中屬性：target=“_blank“_self 當(dāng)前窗口中打開 4/27/202320超文本標(biāo)記語言-HTMLSofteem Consultancy Service文檔鏈接范例程序文檔鏈接范例程序文檔鏈接范例程序有關(guān)蘋果的說明下面是相應(yīng)的圖像錨標(biāo)：4/27/202321超文本標(biāo)記語言-HTMLSofteem Consultancy Service文檔鏈接范例程序文檔鏈接范例程序如果用戶點擊文字錨標(biāo)“有關(guān)蘋果的說明”或點擊蘋果圖像，瀏覽器就會載入目標(biāo)文檔aPPle

11、html。錨標(biāo)文字和普通文字在外觀上有很大的不同，一般來說，它被顯示為帶下劃線的亮藍(lán)色文字。4/27/202322超文本標(biāo)記語言-HTMLSofteem Consultancy Service跳轉(zhuǎn)到標(biāo)記位置跳轉(zhuǎn)到標(biāo)記位置瀏覽器程序在載入目標(biāo)文檔后將自動從文檔的開頭部分開始顯示。然而，用戶需要的部分往往并不在文檔的開頭。如果不加以記號標(biāo)記，用戶將花費大量的時間和精力在文檔（特別是一些長文檔）中進行查找。為了方便用戶，我們可以利用標(biāo)簽的NAME屬性在目標(biāo)位置添加記號，然后在錨標(biāo)中進行引用。HTML中標(biāo)識記號的格式為：目標(biāo)點；引用記號的格式為錨標(biāo)內(nèi)容。4/27/202323超文本標(biāo)記語言-HTMLS

12、ofteem Consultancy Service跳轉(zhuǎn)到標(biāo)記位置跳轉(zhuǎn)到標(biāo)記位置超鏈接的源文檔歡迎來到INDEX主頁，請選擇您想瀏覽的部分文件傳輸遠(yuǎn)程登錄電子郵件電子公告權(quán)系統(tǒng)4/27/202324超文本標(biāo)記語言-HTMLSofteem Consultancy Service跳轉(zhuǎn)到標(biāo)記位置跳轉(zhuǎn)到標(biāo)記位置超鏈接的源文檔歡迎來到INDEX主頁，請選擇您想瀏覽的部分文件傳輸遠(yuǎn)程登錄電子郵件電子公告權(quán)系統(tǒng)4/27/202325超文本標(biāo)記語言-HTMLSofteem Consultancy Service跳轉(zhuǎn)到標(biāo)記位置跳轉(zhuǎn)到標(biāo)記位置當(dāng)用戶點擊錨標(biāo)“文件傳輸”后，瀏覽器將載入目標(biāo)文檔intetnet.ht

13、ml，并從標(biāo)記位置所在行開始顯示，而不像原來那樣從文檔的開頭部分開始顯示。4/27/202326超文本標(biāo)記語言-HTMLSofteem Consultancy Service鏈接地圖鏈接地圖鏈接地圖是一種很形象的超鏈接方式。它將鏈接源點的圖像劃分為若干個區(qū)域，每個區(qū)域都對應(yīng)著自己的目標(biāo)文檔。鏈接地圖的語法與其它兩種超鏈接方式有很大的不同，4/27/202327超文本標(biāo)記語言-HTMLSofteem Consultancy Service鏈接地圖鏈接地圖4/27/202328超文本標(biāo)記語言-HTMLSofteem Consultancy Service外部鏈接網(wǎng)站鏈接好站電子郵件鏈接寫信給朋友f

14、tp鏈接下載檔案下載檔案news鏈接seednetnews服務(wù)seednetnews服務(wù)gopher鏈接seednetgopher服務(wù)seednetgopher服務(wù)bbs鏈接seednetgopher服務(wù)seednetbbs服務(wù)4/27/202329超文本標(biāo)記語言-HTMLSofteem Consultancy Service框架框架-框架集標(biāo)記，用來組織多個分框或嵌套的框架集常用屬性rows橫向分割,以及各個分框的高度cols縱向分割以及各個分框的寬度border-邊框的寬度bordercolor邊框的顏色注意此標(biāo)記不可與標(biāo)記共存,在head中4/27/202330超文本標(biāo)記語言-HTMLS

15、ofteem Consultancy Service框架框架-單個分框標(biāo)記常用屬性src頁而的URLscrolling是否顯示滾動條(auto、yes、no)-嵌入式頁面標(biāo)記常用標(biāo)記src頁而的URLscrolling是否顯示滾動條(auto、yes、no)width、height寬度、高度4/27/202331超文本標(biāo)記語言-HTMLSofteem Consultancy Service框架框架4/27/202332超文本標(biāo)記語言-HTMLSofteem Consultancy Service表單表單一個HTML表單是文檔中包含標(biāo)準(zhǔn)內(nèi)容,標(biāo)注和叫做控件的特殊元素的部分.控件響應(yīng)并接受用戶輸入

16、.用戶通常通過輸入文字,選擇菜單條目等來完成表單,然后提交表單以供處理.提交的表單可以通過電子郵件發(fā)送給別人也可以發(fā)送給程程序來處理.控件可以是復(fù)選框,單選框,標(biāo)簽,菜單等.每個控件可以分配一個名稱.當(dāng)表單被提交時,一些控件(取決于它們的狀態(tài))的名稱和當(dāng)前值隨表單一起發(fā)送.提交的值的自然屬性取決于控件(例如:文本框的值是輸入的文本).表單是用元素定義的。4/27/202333超文本標(biāo)記語言-HTMLSofteem Consultancy Service元素元素action=url這個特性指定一來處理提交表單的格式.它可以是一個HTTPURL(提交給程式)或一個電子郵件(MAILTO)URL(郵

17、遞這個表單).method=get|post這個特性指明哪種HTTP方法將被用來提交名稱/值對給表單處理者.可能的值為:post:使用HTTPPOST方法.POST方法在表單的主干包含名稱/值對，無需包含于action特性的URL中.get:.使用HTTPGET方法.GET方法把名稱/值對加在action的URL后面并且把新的URL送至服務(wù)器.這是往前兼容的缺省值.這個值由于國際化的原因不贊成.4/27/202334超文本標(biāo)記語言-HTMLSofteem Consultancy Service元素元素enctype這個特性指明用來把表單提交給服務(wù)器時(當(dāng)method值為post)的互聯(lián)網(wǎng)媒體形

18、式.這個特性的缺省值是application/x-www-form-urlencoded.值multipart/form-data應(yīng)當(dāng)被用于返回的文檔中包含提交文件時.name：用于設(shè)定表單的名稱。onrest和onsubmit是主要針對“reset”按鈕和“submit”按鈕來說的，分別設(shè)定了在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。4/27/202335超文本標(biāo)記語言-HTMLSofteem Consultancy Service元素元素FORM元素作為控件的容器.它指定了:表單的界面(通過元素內(nèi)容給出).將用來處理完成和提交表單的程式(action特性).為了使用它們收到的程式必須能夠剖析名稱

19、/值對.用戶數(shù)據(jù)通過哪種方式送到服務(wù)器(method特性).為了處理這個表單字符編碼方式必須能夠被服務(wù)器接受(accept-charset特性).用戶代理器可以建議用戶的accept-charset特性值和/或有防止用戶輸入不認(rèn)識的字符的能力.4/27/202336超文本標(biāo)記語言-HTMLSofteem Consultancy Service-表單輸入標(biāo)記-下拉列表或列表控件標(biāo)記(由size屬性決定)-列表項標(biāo)記-多行文本輸入標(biāo)記表單控件表單控件4/27/202337超文本標(biāo)記語言-HTMLSofteem Consultancy Service表單輸入標(biāo)記表單輸入標(biāo)記type=button普通

20、按鈕控件type=reset重置按鈕控件type=submit提交按鈕控件type=image圖像按鈕控件type=checkbox復(fù)選框控件type=radio單選框控件type=text文本輸入控件type=password密碼輸入控件type=file文件上載控件type=hidden隱藏字段4/27/202338超文本標(biāo)記語言-HTMLSofteem Consultancy Service表單輸入標(biāo)記表單輸入標(biāo)記value：用于設(shè)定輸入默認(rèn)值，即如果用戶不輸入的話，就采用此默認(rèn)值；src：是針對type=image的情況來說的，設(shè)定圖像文件的地址；checked：表示選擇框中，此項被默

21、認(rèn)選中；maxlength：表示在輸入單行文本的時候，最大輸入字符個數(shù)；size：用于設(shè)定在輸入多行文本時的最大輸入字符數(shù)，采用width，height方式；onclick：表示在按下輸入時調(diào)用指定的子程序；onselect：表示當(dāng)前項被選擇時調(diào)用指定的子程序。4/27/202339超文本標(biāo)記語言-HTMLSofteem Consultancy Service列表框標(biāo)記列表框標(biāo)記用標(biāo)記可以在表間中插入一個下拉菜單，它需與標(biāo)記聯(lián)用，因為下拉菜單中的每個選項要用標(biāo)記來定義。標(biāo)記的語法如下：name：設(shè)定下拉式菜單的名稱；size：設(shè)定菜單框的高度，也就是一次顯示幾個菜單項，一般取默認(rèn)值（size=

22、1）；multiple：設(shè)定為可以進行多選。4/27/202340超文本標(biāo)記語言-HTMLSofteem Consultancy Service列表框標(biāo)記列表框標(biāo)記請選擇您想去的商店:閃客百貨商店超級自選第一百貨第二百貨請在選擇完畢后單擊確認(rèn)按鈕：4/27/202341超文本標(biāo)記語言-HTMLSofteem Consultancy Service選項標(biāo)記選項標(biāo)記該標(biāo)記為下拉菜單中一個選項，語法很簡單：其中selected：表示當(dāng)前項被默認(rèn)選中；value：表示該項對應(yīng)的值，在該項被中之后，該項的值就會被送到服務(wù)器進行處理。4/27/202342超文本標(biāo)記語言-HTMLSofteem Consu

23、ltancy Service多行文本輸入標(biāo)記多行文本輸入標(biāo)記這是一個建立多行文本輸入框的專用標(biāo)記，其語法如下：clos：寬度；rows：高度（行數(shù)）；wrap：換行控制，off：不自動換行；hard：自動硬回車換行，換行標(biāo)記一同被傳送到服務(wù)器中去；soft：自動軟回車換行，換行標(biāo)記不會傳送到服務(wù)器中去。4/27/202343超文本標(biāo)記語言-HTMLSofteem Consultancy Service多行文本輸入標(biāo)記多行文本輸入標(biāo)記這是填寫的內(nèi)容了。要不你留下怎么聯(lián)系？我真的找你請我吃飯哦！呵呵填寫錯誤，單擊這里清除重寫寫完了？按這兒確認(rèn)：4/27/202344超文本標(biāo)記語言-HTMLSofteem Consultancy Service捕獲異常捕獲異常Name:非常滿意滿意尚可不滿意非常不滿意男女狗貓虎龍password:inputtype=resetvalue=清除4/27/202345超文本標(biāo)記語言-HTMLSofteem Consultancy Service課后練習(xí)課后練習(xí)用HTML語言設(shè)計一張借書登記表單，內(nèi)容包括序號、書名、借書人、借書日期和備注。指定表格的背景色。要求表頭行部分的背景色為藍(lán)色，表格主體部分的背景色為綠色。4/27/202346超文本標(biāo)記語言-HTML