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

《第01講 超文本標(biāo)記語言-HTML》由會(huì)員分享，可在線閱讀，更多相關(guān)《第01講 超文本標(biāo)記語言-HTML（46頁珍藏版）》請(qǐng)?jiān)谘b配圖網(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)語言，它具有平臺(tái)無關(guān)性。無論用戶使用何種操作系統(tǒng)（Windows、Dos、Unix等等），只要有相應(yīng)的瀏覽器程序，就可以運(yùn)行HTML文檔。4/27/20

3、234超文本標(biāo)記語言-HTMLSofteem Consultancy Service超文本傳輸協(xié)議超文本傳輸協(xié)議HTTP超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和要進(jìn)行的操作。HTTP協(xié)議的制定使測(cè)覽器在運(yùn)行超文本文檔時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)，從而大大增強(qiáng)了網(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文檔的背景色。“TEXT”。指定HTML文檔中文字的顏色?！癓INK”。指定HTML文檔中待連接超鏈接對(duì)象的顏色?！癆LINK”。指定HTML文檔中連接中超鏈接對(duì)象的顏色?！癡LINK”。指定HTML文檔中已連接超鏈接對(duì)象的顏色?！癇ACKGROU

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

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

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

8、tancy Service行列標(biāo)簽行列標(biāo)簽定義行定義表頭定義列colspan單元格所跨的列數(shù)rowspan單元格所跨的行數(shù)nowrap是否自動(dòng)進(jìn)行文字環(huán)繞4/27/202316超文本標(biāo)記語言-HTMLSofteem Consultancy Service共有的常用屬性共有的常用屬性bgcolor背景顏色align水平對(duì)齊方式（left、right、center）valign垂直對(duì)齊方式（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)簽來實(shí)現(xiàn)超鏈接的。鏈按標(biāo)簽是成對(duì)標(biāo)簽，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是錨標(biāo)。標(biāo)簽有一個(gè)不可缺省的屬性href，用于指定鏈接目標(biāo)點(diǎn)的位置。文檔之間的跳轉(zhuǎn)、跳轉(zhuǎn)到標(biāo)記位置、鏈接地圖。外部鏈接4/27/202319超文本標(biāo)記語言-HTMLSofteem Consultancy Service文檔鏈接文檔鏈接用戶可以通過點(diǎn)擊錨標(biāo)從當(dāng)前文檔直接跳轉(zhuǎn)至目標(biāo)文檔。如前所述，首標(biāo)簽和尾標(biāo)簽之間的內(nèi)容就是錨標(biāo)，一般是對(duì)目標(biāo)文檔的簡要說明。此時(shí)，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文檔鏈接范例程序文檔鏈接范例程序如果用戶點(diǎn)擊文字錨標(biāo)“有關(guān)蘋果的說明”或點(diǎn)擊蘋果圖像，瀏覽器就會(huì)載入目標(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)文檔后將自動(dòng)從文檔的開頭部分開始顯示。然而，用戶需要的部分往往并不在文檔的開頭。如果不加以記號(hào)標(biāo)記，用戶將花費(fèi)大量的時(shí)間和精力在文檔（特別是一些長文檔）中進(jìn)行查找。為了方便用戶，我們可以利用標(biāo)簽的NAME屬性在目標(biāo)位置添加記號(hào)，然后在錨標(biāo)中進(jìn)行引用。HTML中標(biāo)識(shí)記號(hào)的格式為：目標(biāo)點(diǎn)；引用記號(hào)的格式為錨標(biāo)內(nèi)容。4/27/202323超文本標(biāo)記語言-HTMLS

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

13、ml，并從標(biāo)記位置所在行開始顯示，而不像原來那樣從文檔的開頭部分開始顯示。4/27/202326超文本標(biāo)記語言-HTMLSofteem Consultancy Service鏈接地圖鏈接地圖鏈接地圖是一種很形象的超鏈接方式。它將鏈接源點(diǎn)的圖像劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域都對(duì)應(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)記，用來組織多個(gè)分框或嵌套的框架集常用屬性rows橫向分割,以及各個(gè)分框的高度cols縱向分割以及各個(gè)分框的寬度border-邊框的寬度bordercolor邊框的顏色注意此標(biāo)記不可與標(biāo)記共存,在head中4/27/202330超文本標(biāo)記語言-HTMLS

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

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

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

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

19、/值對(duì).用戶數(shù)據(jù)通過哪種方式送到服務(wù)器(method特性).為了處理這個(gè)表單字符編碼方式必須能夠被服務(wù)器接受(accept-charset特性).用戶代理器可以建議用戶的accept-charset特性值和/或有防止用戶輸入不認(rèn)識(shí)的字符的能力.4/27/202336超文本標(biāo)記語言-HTMLSofteem Consultancy Service-表單輸入標(biāo)記-下拉列表或列表控件標(biāo)記(由size屬性決定)-列表項(xiàng)標(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：是針對(duì)type=image的情況來說的，設(shè)定圖像文件的地址；checked：表示選擇框中，此項(xiàng)被默

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

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

23、ltancy Service多行文本輸入標(biāo)記多行文本輸入標(biāo)記這是一個(gè)建立多行文本輸入框的專用標(biāo)記，其語法如下：clos：寬度；rows：高度（行數(shù)）；wrap：換行控制，off：不自動(dòng)換行；hard：自動(dòng)硬回車換行，換行標(biāo)記一同被傳送到服務(wù)器中去；soft：自動(dòng)軟回車換行，換行標(biāo)記不會(huì)傳送到服務(wù)器中去。4/27/202343超文本標(biāo)記語言-HTMLSofteem Consultancy Service多行文本輸入標(biāo)記多行文本輸入標(biāo)記這是填寫的內(nèi)容了。要不你留下怎么聯(lián)系？我真的找你請(qǐng)我吃飯哦！呵呵填寫錯(cuò)誤，單擊這里清除重寫寫完了？按這兒確認(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è)計(jì)一張借書登記表單，內(nèi)容包括序號(hào)、書名、借書人、借書日期和備注。指定表格的背景色。要求表頭行部分的背景色為藍(lán)色，表格主體部分的背景色為綠色。4/27/202346超文本標(biāo)記語言-HTML