《第01講 超文本標記語言-HTML》由會員分享，可在線閱讀，更多相關《第01講 超文本標記語言-HTML（46頁珍藏版）》請在裝配圖網上搜索。
1、Softeem Consultancy Service超文本標記語言超文本標記語言-HTMLID:SCSC007-HTML,CSS,JSSofteem Consultancy Service超文本標記語言超文本標記語言-HTMLHTML概念HTML頁面的基本框架HTML常用格式標簽圖像標簽列表標簽表格標簽HTML超鏈接框架表單4/27/20232超文本標記語言-HTMLSofteem Consultancy Service統一資源定位器統一資源定位器URLURL（UniformResourceLocation）即統一資源定位器，它指出了文件在Internet中的位置。URL由協議名、Web服務
2、器地址、文件在服務器中的路徑（即目錄）和文件名四部分構成。例如，http：/ Consultancy Service超文本標語語言超文本標語語言HTMLHTML（HypertextMarkupLanguage）即超文本標記語言，它是一種用于編寫超文本文檔的標記語言。自從1990年首次應用于網頁編輯后，HTML迅速崛起成為網頁編輯的主流語言。幾乎所有的網頁都是由HTML或以其他程序語言嵌套在HTML中編寫的。HTML并不是一種程序語言而是一種結構語言，它具有平臺無關性。無論用戶使用何種操作系統（Windows、Dos、Unix等等），只要有相應的瀏覽器程序，就可以運行HTML文檔。4/27/20
3、234超文本標記語言-HTMLSofteem Consultancy Service超文本傳輸協議超文本傳輸協議HTTP超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和要進行的操作。HTTP協議的制定使測覽器在運行超文本文檔時有了統一的規則和標準，從而大大增強了網頁的適用性。4/27/20235超文本標記語言-HTMLSofteem Consultancy ServiceClient/Server架構架構ClientServer清求響應4/27/20236超文本標記語言-HTMLSofteem Consultancy ServiceHTML頁面的基本框架頁面的基本框架標題內容4/2
4、7/20237超文本標記語言-HTMLSofteem Consultancy ServiceHTML頁面的基本框架頁面的基本框架必須位于head內，設置背景音樂Src 位置Loop 循環次數，如果不設置，則一直播放4/27/20238超文本標記語言-HTMLSofteem Consultancy Service標簽標簽“BGCOLOR”。指定HTML文檔的背景色?！癟EXT”。指定HTML文檔中文字的顏色。“LINK”。指定HTML文檔中待連接超鏈接對象的顏色?！癆LINK”。指定HTML文檔中連接中超鏈接對象的顏色?！癡LINK”。指定HTML文檔中已連接超鏈接對象的顏色。“BACKGROU
5、ND”。指定HTML文檔的背景文件。4/27/20239超文本標記語言-HTMLSofteem Consultancy Service常用標簽常用標簽-換行-文檔中的標題-創建一個段落-固定格式文本塊-粗體-斜體-下劃線-設置字體及大小-文本塊容器-水平分隔線4/27/202310超文本標記語言-HTMLSofteem Consultancy Service圖像標簽圖像標簽-鏈接一個圖像文件常用屬性：SRC=被鏈接文件的URLWIDTH=圖像的寬度HEIGHT=“圖像的高度BORDER=“圖像的邊框ALT=“圖像說明文字ALGN=與圖像相鄰的文字相對位置VSPACE=垂直方向與圖像相鄰的對象之
6、間距離VHPACE=水平方向與圖像相鄰的對象之間距離BORDER=圖像過框的寬度4/27/202311超文本標記語言-HTMLSofteem Consultancy Service常用的圖像文件格式常用的圖像文件格式網頁中常用的圖像文件格式：GIF顏色數不超過256色，可用于動畫或透明背景的圖像。JPG適用于顏色豐富或漸變色較多的圖像文件，但不可以做成動畫。4/27/202312超文本標記語言-HTMLSofteem Consultancy Service列表標簽列表標簽創建一個標有數字的列表創建一個標有圓點的列表放在每個列表項之前,若在之間則每個列表項加上一個數字,若在之間則每個列表項加上一
7、個圓點4/27/202313超文本標記語言-HTMLSofteem Consultancy Service列表嵌套的范例程序列表嵌套的范例程序一些常見的水果：蘋果和桔子香蕉和草萄西瓜和桃子這是列表的第二項一些常見的肉類豬肉和牛肉羊肉和兔肉4/27/202314超文本標記語言-HTMLSofteem Consultancy Service表格標簽表格標簽border邊框寬度width表格的寬度height表格的高度align表格與其相鄰的文字的相對位置cellpadding單元格內的邊距cellspacing單元格間的空白4/27/202315超文本標記語言-HTMLSofteem Consul
8、tancy Service行列標簽行列標簽定義行定義表頭定義列colspan單元格所跨的列數rowspan單元格所跨的行數nowrap是否自動進行文字環繞4/27/202316超文本標記語言-HTMLSofteem Consultancy Service共有的常用屬性共有的常用屬性bgcolor背景顏色align水平對齊方式（left、right、center）valign垂直對齊方式（top、middle、bottom）bordercolor邊框顏色width、height寬度、高度4/27/202317超文本標記語言-HTMLSofteem Consultancy Service表格示例表
9、格示例4/27/202318超文本標記語言-HTMLSofteem Consultancy Service超鏈接超鏈接HTML是通過鏈接標簽來實現超鏈接的。鏈按標簽是成對標簽，首標簽和尾標簽之間的內容就是錨標。標簽有一個不可缺省的屬性href，用于指定鏈接目標點的位置。文檔之間的跳轉、跳轉到標記位置、鏈接地圖。外部鏈接4/27/202319超文本標記語言-HTMLSofteem Consultancy Service文檔鏈接文檔鏈接用戶可以通過點擊錨標從當前文檔直接跳轉至目標文檔。如前所述，首標簽和尾標簽之間的內容就是錨標，一般是對目標文檔的簡要說明。此時，href屬性的參數值是目標文檔的UR
10、L。路徑表示方式：text1.htm在當前的目錄中text1.htm在名為docs的子目錄中text1.htm在當前目錄的上一層目錄中屬性：target=“_blank“_self 當前窗口中打開 4/27/202320超文本標記語言-HTMLSofteem Consultancy Service文檔鏈接范例程序文檔鏈接范例程序文檔鏈接范例程序有關蘋果的說明下面是相應的圖像錨標：4/27/202321超文本標記語言-HTMLSofteem Consultancy Service文檔鏈接范例程序文檔鏈接范例程序如果用戶點擊文字錨標“有關蘋果的說明”或點擊蘋果圖像，瀏覽器就會載入目標文檔aPPle
11、html。錨標文字和普通文字在外觀上有很大的不同，一般來說，它被顯示為帶下劃線的亮藍色文字。4/27/202322超文本標記語言-HTMLSofteem Consultancy Service跳轉到標記位置跳轉到標記位置瀏覽器程序在載入目標文檔后將自動從文檔的開頭部分開始顯示。然而，用戶需要的部分往往并不在文檔的開頭。如果不加以記號標記，用戶將花費大量的時間和精力在文檔（特別是一些長文檔）中進行查找。為了方便用戶，我們可以利用標簽的NAME屬性在目標位置添加記號，然后在錨標中進行引用。HTML中標識記號的格式為：目標點；引用記號的格式為錨標內容。4/27/202323超文本標記語言-HTMLS
12、ofteem Consultancy Service跳轉到標記位置跳轉到標記位置超鏈接的源文檔歡迎來到INDEX主頁，請選擇您想瀏覽的部分文件傳輸遠程登錄電子郵件電子公告權系統4/27/202324超文本標記語言-HTMLSofteem Consultancy Service跳轉到標記位置跳轉到標記位置超鏈接的源文檔歡迎來到INDEX主頁，請選擇您想瀏覽的部分文件傳輸遠程登錄電子郵件電子公告權系統4/27/202325超文本標記語言-HTMLSofteem Consultancy Service跳轉到標記位置跳轉到標記位置當用戶點擊錨標“文件傳輸”后，瀏覽器將載入目標文檔intetnet.ht
13、ml，并從標記位置所在行開始顯示，而不像原來那樣從文檔的開頭部分開始顯示。4/27/202326超文本標記語言-HTMLSofteem Consultancy Service鏈接地圖鏈接地圖鏈接地圖是一種很形象的超鏈接方式。它將鏈接源點的圖像劃分為若干個區域，每個區域都對應著自己的目標文檔。鏈接地圖的語法與其它兩種超鏈接方式有很大的不同，4/27/202327超文本標記語言-HTMLSofteem Consultancy Service鏈接地圖鏈接地圖4/27/202328超文本標記語言-HTMLSofteem Consultancy Service外部鏈接網站鏈接好站電子郵件鏈接寫信給朋友f
14、tp鏈接下載檔案下載檔案news鏈接seednetnews服務seednetnews服務gopher鏈接seednetgopher服務seednetgopher服務bbs鏈接seednetgopher服務seednetbbs服務4/27/202329超文本標記語言-HTMLSofteem Consultancy Service框架框架-框架集標記，用來組織多個分框或嵌套的框架集常用屬性rows橫向分割,以及各個分框的高度cols縱向分割以及各個分框的寬度border-邊框的寬度bordercolor邊框的顏色注意此標記不可與標記共存,在head中4/27/202330超文本標記語言-HTMLS
15、ofteem Consultancy Service框架框架-單個分框標記常用屬性src頁而的URLscrolling是否顯示滾動條(auto、yes、no)-嵌入式頁面標記常用標記src頁而的URLscrolling是否顯示滾動條(auto、yes、no)width、height寬度、高度4/27/202331超文本標記語言-HTMLSofteem Consultancy Service框架框架4/27/202332超文本標記語言-HTMLSofteem Consultancy Service表單表單一個HTML表單是文檔中包含標準內容,標注和叫做控件的特殊元素的部分.控件響應并接受用戶輸入
16、.用戶通常通過輸入文字,選擇菜單條目等來完成表單,然后提交表單以供處理.提交的表單可以通過電子郵件發送給別人也可以發送給程程序來處理.控件可以是復選框,單選框,標簽,菜單等.每個控件可以分配一個名稱.當表單被提交時,一些控件(取決于它們的狀態)的名稱和當前值隨表單一起發送.提交的值的自然屬性取決于控件(例如:文本框的值是輸入的文本).表單是用元素定義的。4/27/202333超文本標記語言-HTMLSofteem Consultancy Service元素元素action=url這個特性指定一來處理提交表單的格式.它可以是一個HTTPURL(提交給程式)或一個電子郵件(MAILTO)URL(郵
17、遞這個表單).method=get|post這個特性指明哪種HTTP方法將被用來提交名稱/值對給表單處理者.可能的值為:post:使用HTTPPOST方法.POST方法在表單的主干包含名稱/值對，無需包含于action特性的URL中.get:.使用HTTPGET方法.GET方法把名稱/值對加在action的URL后面并且把新的URL送至服務器.這是往前兼容的缺省值.這個值由于國際化的原因不贊成.4/27/202334超文本標記語言-HTMLSofteem Consultancy Service元素元素enctype這個特性指明用來把表單提交給服務器時(當method值為post)的互聯網媒體形
18、式.這個特性的缺省值是application/x-www-form-urlencoded.值multipart/form-data應當被用于返回的文檔中包含提交文件時.name：用于設定表單的名稱。onrest和onsubmit是主要針對“reset”按鈕和“submit”按鈕來說的，分別設定了在按下相應的按鈕之后要執行的子程序。4/27/202335超文本標記語言-HTMLSofteem Consultancy Service元素元素FORM元素作為控件的容器.它指定了:表單的界面(通過元素內容給出).將用來處理完成和提交表單的程式(action特性).為了使用它們收到的程式必須能夠剖析名稱
19、/值對.用戶數據通過哪種方式送到服務器(method特性).為了處理這個表單字符編碼方式必須能夠被服務器接受(accept-charset特性).用戶代理器可以建議用戶的accept-charset特性值和/或有防止用戶輸入不認識的字符的能力.4/27/202336超文本標記語言-HTMLSofteem Consultancy Service-表單輸入標記-下拉列表或列表控件標記(由size屬性決定)-列表項標記-多行文本輸入標記表單控件表單控件4/27/202337超文本標記語言-HTMLSofteem Consultancy Service表單輸入標記表單輸入標記type=button普通
20、按鈕控件type=reset重置按鈕控件type=submit提交按鈕控件type=image圖像按鈕控件type=checkbox復選框控件type=radio單選框控件type=text文本輸入控件type=password密碼輸入控件type=file文件上載控件type=hidden隱藏字段4/27/202338超文本標記語言-HTMLSofteem Consultancy Service表單輸入標記表單輸入標記value：用于設定輸入默認值，即如果用戶不輸入的話，就采用此默認值；src：是針對type=image的情況來說的，設定圖像文件的地址；checked：表示選擇框中，此項被默
21、認選中；maxlength：表示在輸入單行文本的時候，最大輸入字符個數；size：用于設定在輸入多行文本時的最大輸入字符數，采用width，height方式；onclick：表示在按下輸入時調用指定的子程序；onselect：表示當前項被選擇時調用指定的子程序。4/27/202339超文本標記語言-HTMLSofteem Consultancy Service列表框標記列表框標記用標記可以在表間中插入一個下拉菜單，它需與標記聯用，因為下拉菜單中的每個選項要用標記來定義。標記的語法如下：name：設定下拉式菜單的名稱；size：設定菜單框的高度，也就是一次顯示幾個菜單項，一般取默認值（size=
22、1）；multiple：設定為可以進行多選。4/27/202340超文本標記語言-HTMLSofteem Consultancy Service列表框標記列表框標記請選擇您想去的商店:閃客百貨商店超級自選第一百貨第二百貨請在選擇完畢后單擊確認按鈕：4/27/202341超文本標記語言-HTMLSofteem Consultancy Service選項標記選項標記該標記為下拉菜單中一個選項，語法很簡單：其中selected：表示當前項被默認選中；value：表示該項對應的值，在該項被中之后，該項的值就會被送到服務器進行處理。4/27/202342超文本標記語言-HTMLSofteem Consu
23、ltancy Service多行文本輸入標記多行文本輸入標記這是一個建立多行文本輸入框的專用標記，其語法如下：clos：寬度；rows：高度（行數）；wrap：換行控制，off：不自動換行；hard：自動硬回車換行，換行標記一同被傳送到服務器中去；soft：自動軟回車換行，換行標記不會傳送到服務器中去。4/27/202343超文本標記語言-HTMLSofteem Consultancy Service多行文本輸入標記多行文本輸入標記這是填寫的內容了。要不你留下怎么聯系？我真的找你請我吃飯哦！呵呵填寫錯誤，單擊這里清除重寫寫完了？按這兒確認：4/27/202344超文本標記語言-HTMLSofteem Consultancy Service捕獲異常捕獲異常Name:非常滿意滿意尚可不滿意非常不滿意男女狗貓虎龍password:inputtype=resetvalue=清除4/27/202345超文本標記語言-HTMLSofteem Consultancy Service課后練習課后練習用HTML語言設計一張借書登記表單，內容包括序號、書名、借書人、借書日期和備注。指定表格的背景色。要求表頭行部分的背景色為藍色，表格主體部分的背景色為綠色。4/27/202346超文本標記語言-HTML
第01講 超文本標記語言-HTML
