2020/5/27,1,電子商務(wù)網(wǎng)頁(yè)制作技術(shù),主講教師李興旺,第2章超文本標(biāo)記語(yǔ)言HTML,主講教師李興旺,本章要點(diǎn),HTML語(yǔ)言概述HTML語(yǔ)言的基本結(jié)構(gòu)用HTML代碼編寫網(wǎng)頁(yè)上的基本元素表格以及表格相關(guān)的代碼編寫方法用手寫代碼制作復(fù)雜框架結(jié)構(gòu)的頁(yè)面HTML語(yǔ)言的常用標(biāo)識(shí),2.1初識(shí)HTML,1HTML語(yǔ)言簡(jiǎn)介2HTML文件基本架構(gòu),1HTML語(yǔ)言簡(jiǎn)介,HTML超文本標(biāo)識(shí)語(yǔ)言HTML是一種建立網(wǎng)頁(yè)文件的語(yǔ)言，通過(guò)對(duì)各種標(biāo)記式的指令、元素、屬性、對(duì)象等的定義，將影像、聲音、圖片、文字等連接顯示出來(lái)。HTML標(biāo)記由所括住的指令，主要分為單標(biāo)記指令、雙標(biāo)記指令（由和所構(gòu)成)。,1HTML語(yǔ)言簡(jiǎn)介,HTML語(yǔ)言的三種形式，非封閉的類型。很少用，最常用的如換行標(biāo)記。對(duì)象，封閉類型。大多數(shù)標(biāo)記都是封閉類型的。封閉類型的標(biāo)記都是成對(duì)出現(xiàn)。對(duì)象，封閉類型的擴(kuò)展形式，后面的各種屬性參數(shù)可以進(jìn)一步設(shè)置對(duì)象在某方面的內(nèi)容。說(shuō)明幾乎所有的HTML代碼都是由上面三種形式組合而成的，標(biāo)記之間可以相互嵌套，形成更為復(fù)雜的語(yǔ)法。,1HTML語(yǔ)言簡(jiǎn)介,HTML文件組成一個(gè)完整的HTML文件由head和body兩部分組成。head部分包含標(biāo)題、網(wǎng)頁(yè)語(yǔ)言等基本信息，還可包含作者信息、網(wǎng)頁(yè)關(guān)鍵字、網(wǎng)頁(yè)說(shuō)明等；body部分其中的內(nèi)容是網(wǎng)頁(yè)顯示的主要內(nèi)容，由表格、圖片、表單等各種對(duì)象組成。,1HTML語(yǔ)言簡(jiǎn)介,說(shuō)明一可以使用任何文本編輯器打開、瀏覽、編輯HTML代碼，最簡(jiǎn)單的是Windows自帶的記事本。說(shuō)明二HTML文件編輯完成后以.htm或.html為文件后綴保存，可由瀏覽器打開顯示。說(shuō)明三習(xí)慣上一個(gè)網(wǎng)站的首頁(yè)名稱通常為index.htm或index.html。,2HTML文件基本架構(gòu),HTML文件的基本架構(gòu)：文件開始文件頭開始.標(biāo)題區(qū)文件頭結(jié)束文本區(qū)開始.文本區(qū)內(nèi)容文本區(qū)結(jié)束文件結(jié)束,網(wǎng)頁(yè)的頭部,網(wǎng)頁(yè)的主體內(nèi)容,HTML文件標(biāo)識(shí),2.2HTML的簡(jiǎn)單應(yīng)用,1編寫第一個(gè)網(wǎng)頁(yè)2注意事項(xiàng),1編寫第一個(gè)網(wǎng)頁(yè),使用記事本編寫第一個(gè)網(wǎng)頁(yè)，步驟如下：選擇【開始】/【所有程序】/【附件】/【記事本】”命令，打開記事本程序。在記事本中輸入HTML代碼。保存文件，在保存類型中選擇【所有文件】，在編碼中選擇ANSI，文件名設(shè)為“myfirst.htm”。關(guān)閉記事本，回到存盤的文件夾，雙擊myfirst.htm文件，在InternertExplore瀏覽器中瀏覽頁(yè)面。,第一個(gè)網(wǎng)頁(yè)的代碼及頁(yè)面效果,初識(shí)HTML語(yǔ)言我的第一個(gè)HTML文件,2注意事項(xiàng),“”是任何標(biāo)記的開始和結(jié)束。標(biāo)記與標(biāo)記之間可以嵌套。在源代碼中不區(qū)分大小寫。任何換行和空格在源代碼里面不起作用。HTML標(biāo)記中可以放置各種屬性?？梢栽谠创a中添加注釋，注釋以“”結(jié)束。,2.3添加各種網(wǎng)頁(yè)元素,2.3.1向頁(yè)面中添加文字2.3.2設(shè)置頁(yè)面中的標(biāo)題2.3.3設(shè)置頁(yè)面的背景顏色和背景圖片2.3.4在頁(yè)面中插入圖片2.3.5設(shè)置文字和圖片鏈接2.3.6給網(wǎng)頁(yè)加上聲音,2.3.1向頁(yè)面中添加文字,（1）將需要添加的文字輸入到與標(biāo)識(shí)之間。（2）是“原樣顯示文本”的標(biāo)識(shí)。（3）稱為行中斷標(biāo)識(shí)。標(biāo)識(shí)后面的內(nèi)容另起一行顯示。（4）段落標(biāo)識(shí)分別放在段首和段尾。比多一行空行，也就是空一行，再另起一行顯示文本內(nèi)容。,2.3.1向頁(yè)面中添加文字,（5）是字體標(biāo)識(shí)，對(duì)標(biāo)識(shí)中的文本字體起控制作用，有“size”和“color兩個(gè)屬性：“size”表示字體的大小。“color表示字體的顏色。（6）在文字前后加上標(biāo)識(shí)，可以使文字加粗顯示。為粗體顯示標(biāo)識(shí)；為斜體顯示標(biāo)識(shí)；為帶下劃線顯示標(biāo)識(shí)。（7）與是居中顯示標(biāo)識(shí)。,應(yīng)用上述標(biāo)識(shí)后的完整程序,西紅柿名稱西紅柿性味味酸甘、性微寒。歸經(jīng)入心、肺、胃經(jīng)。作用潤(rùn)肺生津、和胃止渴。用于暑熱煩渴、咽干、惡心欲吐、厭食、大便秘結(jié)、小便黃赤等。成分含大量維生素C、A、B1、B2、及磷、鐵、鈣等，還含有較多的蘋果酸、檸檬酸等有機(jī)酸。現(xiàn)代醫(yī)學(xué)研究證實(shí)，它有抗衰老、降壓、褪色素的作用。,2.3.2設(shè)置頁(yè)面中的標(biāo)題,在標(biāo)識(shí)中輸入網(wǎng)頁(yè)的標(biāo)題文字，并進(jìn)行相應(yīng)的設(shè)置。說(shuō)明在Dreamweaver中輸入的標(biāo)題文字實(shí)際就是被解析到了標(biāo)識(shí)中。,2.3.3設(shè)置頁(yè)面的背景顏色和背景圖片,通過(guò)bgcolor屬性可設(shè)置頁(yè)面的背景顏色。例如：輸入“bgcolor=red”或者“bgcolor=blue”，頁(yè)面的背景就能按照輸入顯示成紅色或者藍(lán)色。通過(guò)background屬性可設(shè)置頁(yè)面的背景圖片。例如：將光盤的“tomato.gif”圖片文件復(fù)制到用戶站點(diǎn)文件夾下的“img1”目錄中，進(jìn)行如下設(shè)置：background=img/1/tomato.gif,設(shè)置網(wǎng)頁(yè)背景圖片應(yīng)用舉例,源文件,頁(yè)面效果,2.3.4在頁(yè)面中插入圖片,在標(biāo)識(shí)之后，文字之前的位置輸入代碼,源文件,頁(yè)面效果,2.3.4在頁(yè)面中插入圖片,說(shuō)明“img”表示插入一張圖片；“src”屬性的值是圖片文件的路徑；“src=img/1/tomato1.jpg”表示插入的是與本文件在同目錄下的“img1tomato1.jpg”文件；“alt”后面是圖片的說(shuō)明文字，在瀏覽器中當(dāng)鼠標(biāo)移到圖片上時(shí)會(huì)顯示出圖片的說(shuō)明文字；“width”和“height”是圖片的寬度和高度信息，單位是像素。,（3）“align”是圖片的位置屬性，在標(biāo)識(shí)中加入“align=left”代碼可使圖片移到行的最左面，文字移到與圖片同一行。將“align”的值設(shè)為“right”可使圖片出現(xiàn)在行的最右側(cè)。,源文件,頁(yè)面效果,2.3.5設(shè)置文字和圖片鏈接,1設(shè)置文字鏈接2設(shè)置圖片鏈接,1設(shè)置文字鏈接,在HTML語(yǔ)言中，超級(jí)鏈接的標(biāo)識(shí)是鏈接文字。,源文件,頁(yè)面效果,1設(shè)置文字鏈接,設(shè)置一個(gè)“Target=_blank”屬性，可使鏈接文件在一個(gè)新彈出的窗口中打開。,2設(shè)置圖片鏈接,在HTML語(yǔ)言中，超級(jí)鏈接的標(biāo)識(shí)是鏈接圖片。,2設(shè)置圖片鏈接,通過(guò)“border”屬性可以設(shè)置超級(jí)鏈接圖片周圍的邊框。例如：設(shè)置“border=0”可以去掉圖片鏈接的邊框。,2設(shè)置圖片鏈接,添加“Target=_blank”可使鏈接的圖片在新窗口中打開。,2.3.6給網(wǎng)頁(yè)加上聲音,將音樂(lè)文件“music.mid”復(fù)制站點(diǎn)文件夾的相應(yīng)目錄下。在與之間任何位置加入代碼“”。,2.4表格的使用,2.4.1插入表格2.4.2合并單元格2.4.3拆分單元格,2.4.1插入表格,2.4.2合并單元格,列合并,2.4.2合并單元格,行合并,2.4.3拆分單元格,找到單元格的標(biāo)識(shí)，在里面插入如下所示的一個(gè)2行1列表格的代碼。,2.5框架結(jié)構(gòu)頁(yè)面的制作,2.5.1基本結(jié)構(gòu)2.5.2框架的各種屬性2.5.3框架結(jié)構(gòu)之間的鏈接,2.5.1基本結(jié)構(gòu),框架結(jié)構(gòu),2.5.1基本結(jié)構(gòu),在框架中再分框架,2.5.2框架的各種屬性,（1）在尖括號(hào)中加上“noresize”這個(gè)屬性可以使瀏覽者無(wú)法改變邊框的大小。（2）在標(biāo)識(shí)的尖括號(hào)中加上“frameborder=0”，可以隱藏這個(gè)框架中各個(gè)分框架的邊框線（3）改變邊框的粗細(xì)，需要先將“frameborder”屬性設(shè)為“yes”，再設(shè)置一個(gè)“border”屬性，將它的數(shù)值設(shè)為具體寬度數(shù)值即可。（4）在標(biāo)識(shí)的尖括號(hào)中加“bordercolor”屬性，可以改變邊框線的顏色。,2.5.3框架結(jié)構(gòu)之間的鏈接,HTML的代碼一般形式：“鏈接文字或圖片”說(shuō)明在框架結(jié)構(gòu)的頁(yè)面中做超級(jí)鏈接，和普通頁(yè)面中的超級(jí)鏈接類似，只是框架結(jié)構(gòu)頁(yè)面的超級(jí)鏈接可以在同一屏幕上的其他框架中打開，這時(shí)“target”屬性的值要設(shè)為目標(biāo)框架的“name”屬性的值。,2.6其他HTML標(biāo)記一覽,1Web頁(yè)面結(jié)構(gòu)綱要2鏈接標(biāo)識(shí)3列表標(biāo)識(shí)4格式化標(biāo)識(shí)5段落類標(biāo)識(shí)6位置類標(biāo)記7表格類標(biāo)識(shí)8表單類標(biāo)識(shí),1Web頁(yè)面結(jié)構(gòu)綱要,頁(yè)面標(biāo)題網(wǎng)頁(yè)主體內(nèi)容,2鏈接標(biāo)識(shí),外部鏈接鏈接文本錨點(diǎn)鏈接鏈接文本電子郵件鏈接文本,3列表標(biāo)識(shí),（1）編號(hào)列表第一項(xiàng)第二項(xiàng),（2）符合列表第一個(gè)符號(hào)第二個(gè)符號(hào),4格式化標(biāo)識(shí),粗體：要顯示為粗體的文本斜體：要顯示為斜體的文本下劃線：要顯示為帶下劃線的文本預(yù)格式化：定義好的文本上標(biāo)字：要顯示為上標(biāo)的文本下標(biāo)字：要顯示為下標(biāo)的文本,5段落類標(biāo)識(shí),新段落：水平線：換行符：,6位置類標(biāo)記,居中顯示要居中顯示的文本居左顯示要居左顯示的文本居右顯示要居右顯示的文本,7表格類標(biāo)識(shí),（1）基本表格標(biāo)識(shí)第一個(gè)單元格中的內(nèi)容第二個(gè)單元格中的內(nèi)容,（2）表格中的位置標(biāo)識(shí)水平對(duì)齊內(nèi)容垂直對(duì)齊內(nèi)容,8表單類標(biāo)識(shí),表單標(biāo)識(shí)：插入單行文本輸入欄：插入多行文本輸入欄：插入密碼輸入欄：插入單選按鈕：插入復(fù)選框：,8表單類標(biāo)識(shí),插入下拉列表框：ab插入文件選擇框：插入提交按鈕：插入清除按鈕：,2.7使用Dreamweaver編寫HTML代碼,2.7.1Dreamweaver中的HTML源碼編輯窗口2.7.2使用代碼窗口的快捷菜單2.7.3代碼片斷面板,2.7.1Dreamweaver中的HTML源碼編輯窗口,Dreamweaver8有兩種源代碼編輯窗口的顯示方式。單擊【代碼】按鈕，則在整個(gè)窗體顯示代碼窗口；單擊【拆分】按鈕，就會(huì)使窗體分為上下兩個(gè)界面，上部是代碼窗口，下部是設(shè)計(jì)窗口。啟動(dòng)Dreamweaver8后，單擊編輯狀態(tài)切換按鈕，即可啟動(dòng)源代碼的編輯窗口，如圖所示。,2.7.2使用代碼窗口的快捷菜單,1快捷菜單2顯示行號(hào)3自動(dòng)換行,1快捷菜單,在HTML源代碼編輯器的窗口中，單擊鼠標(biāo)右鍵，可以打開一個(gè)快捷菜單。該菜單允許用戶進(jìn)行文本的復(fù)制、粘貼、剪切以及查找、替換等操作，如圖所示。,2顯示行號(hào),在HTML源代碼編輯器窗口中，單擊【視圖選項(xiàng)】按鈕，在下拉列表中選中【行數(shù)】命令，則在源代碼檢視器窗口中對(duì)每個(gè)HTML語(yǔ)句自動(dòng)顯示行號(hào)，以便于定位。,3自動(dòng)換行,問(wèn)題的引出在HTML源代碼編輯器窗口中進(jìn)行代碼編輯時(shí)，常常會(huì)出現(xiàn)一行代碼過(guò)長(zhǎng)而不得不通過(guò)橫向滾動(dòng)才能完全看到的情況，非常麻煩。解決方法這時(shí)可以單擊【視圖選項(xiàng)】按鈕，在下拉列表中選中【自動(dòng)換行】命令，激活窗口的自動(dòng)換行特性。這時(shí)，如果一行代碼過(guò)長(zhǎng)，則會(huì)自動(dòng)在窗口的邊緣回行。,2.7.3代碼片斷面板,1用代碼片斷面板插入代碼片斷2創(chuàng)建自己的代碼片斷3編輯和刪除代碼片段,1用代碼片斷面板插入代碼片斷,打開如圖所示的代碼片斷面板。面板中可以存儲(chǔ)HTML，JavaScript，CFML，ASP，JSP的代碼片斷。選擇希望插入的代碼片斷，單擊面板上的【插入】按鈕，即可將代碼片斷插入至頁(yè)面。,2創(chuàng)建自己的代碼片斷,（1）在該面板中單擊【新建代碼片段文件夾】按鈕，創(chuàng)建一個(gè)名為user的文件夾，然后單擊面板下方的【新建代碼片段】按鈕，如圖所示。,2創(chuàng)建自己的代碼片斷,（2）在彈出的【代碼片段】對(duì)話框中填寫好各項(xiàng)內(nèi)容，然后單擊【確定】按鈕，就可以把自己的代碼片段添加到代碼片段面板，如圖所示。,3編輯和刪除代碼片段,操作方法：在代碼片段面板中，選擇要編輯和刪除的代碼片段，然后單擊該面板下方的【編輯代碼片段】或【刪除】按鈕；或在選定的代碼片段上右擊，從彈出的菜單中選擇【編輯】或【刪除】命令，如果選擇的是【編輯】命令，則接著會(huì)彈出【代碼片段】對(duì)話框，在此就可以編輯原來(lái)的代碼了。,HTML相對(duì)路徑(RelativePath)和絕對(duì)路徑(AbsolutePath),HTML相對(duì)路徑(RelativePath)同一個(gè)目錄的文件引用如果源文件和引用文件在同一個(gè)目錄里，直接寫引用文件名即可。我們現(xiàn)在建一個(gè)源文件info.html，在info.html里要引用index.html文件作為超鏈接。假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesblablaindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html,如何表示上級(jí)目錄./表示源文件所在目錄的上一級(jí)目錄，././表示源文件所在目錄的上上級(jí)目錄，以此類推。假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html,假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html,如何表示下級(jí)目錄引用下級(jí)目錄的文件，直接寫下級(jí)目錄文件的路徑即可。假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html假設(shè)index.html路徑是：c:Inetpubwwwrootsitesblablahtmlindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：index.html,假設(shè)info.html路徑是：c:Inetpubwwwr