2020年5月23日,1,|海有|壁無|一切為了學生。|納容|立欲|為了學生一切。|百乃|千則|豈能事事如意，但求無愧于心。|川大|仞剛|把微笑留給世界，讓世界因你微笑！,2020年5月23日,2,溫故而知新！,2020年5月23日,3,第2章JSP常用開發環境介紹,IT知識講解JDKNetbeansEclipseMyEclipse服務器,2020年5月23日,4,第3章HTML與CSS簡介,3.1HTML頁面的基本構成3.2HTML常用標簽3.3CSS基礎知識3.4常見問題及解決方案,2020年5月23日,5,3.1HTML頁面的基本構成,HTML（HyperTextMarkupLanguage）即超文本標記語言或超文本鏈接標示語言，是一種用來制作超文本文檔的簡單標記語言，它不是一種真正的編程語言，只是一種標記符。通過一些約定的標簽符號對文件的內容進行標注，指出內容的輸出格式，如字體大小及顏色、背景顏色、表格形式、各部分之間邏輯關系等。當用戶瀏覽WWW信息時，瀏覽器會自動解釋這些標簽的含義，并按照一定的格式在屏幕上顯示這些被標記的信息。“.html”或“.htm”擴展名，是能獨立于各種操作系統平臺的可供瀏覽器解釋瀏覽的網頁文件。,2020年5月23日,6,2020年5月23日,7,【例3-1】第一個HTML頁面實例（firstHTML.html）第一個HTML頁面歡迎光臨本網站這是我的第一個HTML頁面，歡迎你的訪問!請欣賞唐詩客中行蘭陵美酒郁金香玉碗盛來琥珀光但使主人能醉客不知何處是他鄉,2020年5月23日,8,2020年5月23日,9,代碼中出現的幾種標簽,單標簽某些標簽只需單獨使用就能完整地表達意思，控制網頁效果，這類標簽的語法是：，它表示換行，？。雙標簽標簽成對使用，由一個開始標簽和一個結束標簽構成。開始標簽告訴Web瀏覽器從此處開始執行該標簽所代表的功能，而結束標簽告訴Web瀏覽器在這里結束該功能，結束標簽的形式是在開始標簽前加上一個斜杠。語法：內容,2020年5月23日,10,標簽屬性在單標簽和雙標簽的開始標簽里，還可以包含一些屬性，以達到個性化的效果。其語法格式是：各屬性之間無先后次序，屬性也可省略（即取默認值）。,2020年5月23日,11,注意,需要注意的是，HTML語言不區分大小寫。例如：和都表示換行。使用HTML標簽時，被使用標簽不可以交錯，否則將造成錯誤。例如：，應改為：，才能正常運行。Html標簽需要正確的進行嵌套！,2020年5月23日,12,HTML的基本標簽,1.頁面結構標簽HTML文檔分為文檔頭和文檔體兩部分。在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示在網頁中的各種正文信息。通常由3對標簽來構成一個HTML文檔的框架。（1）這個標簽對告訴瀏覽器這個文件是HTML文檔。標志用于HTML文檔的最前邊，用來標識HTML文檔的開始，放在HTML文檔的最后邊，用來標識HTML文檔的結束。（2）這個標簽對中的內容是文檔的頭部信息，說明一些文檔的基本情況，如文檔的標題等，其內容不會顯示在網頁中。在此標簽對之間可使用、等描述HTML文檔相關信息的標簽對。（3）這個標簽對中的內容是HTML文檔的主體部分，可包含、等標簽，它們所定義的文本、圖像等將會在網頁中顯示出來。,2020年5月23日,13,2.頁頭標簽標簽對用來設定網頁標題，瀏覽器通常會將標題顯示在瀏覽器窗口的標題欄左邊。標簽對只能放在標簽對之間。,2020年5月23日,14,3.標題標簽在HTML文檔中，標簽可以定義不同顯示效果的標題，X表示標題的級數，取值范圍為16，X越小，標題字號越大。可以使用屬性align，用于設置標題文字的對齊方式，其取值如下：left：左對齊。right：右對齊。center：居中對齊。未設置該屬性時，默認值是？,2020年5月23日,15,【例3-2】標題標簽實例(title.html)標題標簽實例一級標題二級標題三級標題四級標題五級標題六級標題,2020年5月23日,16,2020年5月23日,17,5.格式排版標簽（1）該標簽強制文本換行，但不會在行與行之間留下空行。如果把加在標簽對的外邊，將創建一個大的回車換行，即前邊和后邊的文本的行與行之間的距離比較大；若放在的里邊則前邊和后邊的文本的行與行之間的距離將比較小。,2020年5月23日,18,（2）該標簽在網頁中加入一條橫跨網頁的水平線，具有多種屬性用于設置水平線的寬度、長度及顯示效果等。size屬性：設置水平線的粗細，默認單位是像素。width屬性：設置水平線的寬度，默認單位是像素，也可以使用對屏幕的百分比表示。noshade屬性：該屬性不用賦值，而是直接加入標簽即可使用，它用來取消水平線的陰影（不加入此屬性水平線默認有陰影）。align屬性：設置水平線的對齊方式。color屬性：設置水平線的顏色。例如：,2020年5月23日,19,5.文字格式標簽標簽對通過設置屬性來控制文字的字體、大小、樣式和顏色，各屬性功能如下：face屬性：設置字體樣式。size屬性：設置字體大小，值為整數，分為7個級別，默認字體大小為3。color屬性：設置字體顏色。,2020年5月23日,20,6.段落標簽標簽用來創建一個新的段落，在此標簽對之間加入的文本將按照段落的格式顯示在瀏覽器上。標簽可以有多種屬性，例如align屬性控制其內容的對齊方式；clear屬性控制圖文混排方式，其取值如下：left：下一段顯示在左邊界處的空白區域。right：下一段顯示在右邊界處的空白區域。center：下一段的左右兩邊都不許有其它內容。為了防止文檔出錯，盡量不要省略結尾標記。,2020年5月23日,21,7.預定格式標簽在編輯文檔時，如果希望將來瀏覽網頁時仍能保留在編輯工具中已經排好的形式顯示內容，可以使用標簽對。使用該標簽對時，默認字體為10磅。,2020年5月23日,22,預定格式標簽使用床前明月光疑是地上霜舉頭望明月低頭思故鄉蘭陵美酒郁金香玉碗盛來琥珀光但使主人能醉客不知何處是他鄉,2020年5月23日,23,2020年5月23日,24,8.注釋標簽在編寫HTML文件時，為提高文件的可讀性，可以使用標簽對編寫注釋文字，其語法如下：注釋內容不會在瀏覽器中顯示，即不會在頁面中顯示。,2020年5月23日,25,第3章HTML與CSS簡介,3.1HTML頁面的基本構成3.2HTML常用標簽3.3CSS基礎知識3.4常見問題及解決方案,2020年5月23日,26,3.2HTML常用標簽,3.2.1列表標簽及其應用實例3.2.2多媒體和超鏈接標簽及其應用實例3.2.3表格標簽及其應用實例3.2.4表單標簽及其應用實例3.2.5框架標簽及其應用實例,2020年5月23日,27,3.2.1列表標簽及其應用實例,列表是一種規定格式的文字排列方式，用于列舉內容。常用的列表分為有序列表、無序列表和自定義列表。,2020年5月23日,28,1.有序列表有序列表是指各列表項按一定的編號順序顯示，列表用開始，以結束，每一個列表項用標簽定義，其語法如下：列表項1列表項2在中可以使用type、start屬性？。type屬性用于設置編號的種類，其取值如下：l：編號為數字，默認值。例如：1，2，3，A：編號為大寫英文字母。例如：A，B，C，a：編號為小寫英文字母。例如：a，b，c，I：編號為大寫羅馬字符。例如：，i：編號為小寫羅馬字符。例如：，,2020年5月23日,29,【例3-3】有序列表實例（olTag.html）有序列表實例Java方向核心專業課程：Java程序設計JSP程序設計JavaWeb框架技術（Struts、Spring、Hibernate）數據庫技術,2020年5月23日,30,2020年5月23日,31,2.無序列表無序列表指各列表項之間沒有順序關系，列表項顯示時前面有一個項目符號。無序列表用開始，以結束，每一個列表項同樣也用標簽定義，其語法如下：列表項1列表項2在、中都可以使用type屬性。type屬性取值如下：disc：實心圓點，默認值。circle：空心圓點。square：實心正方形。,2020年5月23日,32,【例3-4】無序列表實例（ulTag.html）無序列表實例Java方向其它專業課程：計算機網絡數據結構專業英語,2020年5月23日,33,2020年5月23日,34,3.自定義列表除了上述兩種列表外，在實際應用中還可以根據需要自定義列表，實現一種分兩層的項目清單，其語法如下：第一個列表項對第一個列表項的說明第二個列表項對第二個列表項的說明自定義列表用開始，以結束，給每一個列表項加上了一段說明性文字，說明性文字獨立于列表項另起一行顯示。其中，標簽用來定義列表項；標簽用來對列表項進行說明。,2020年5月23日,35,【例3-5】自定義列表實例（dlTag.html）自定義列表實例Java方向核心專業課程介紹：Java程序設計該課程主要講述.JSP程序設計該課程主要講述.JavaWeb框架技術（Struts、Spring、Hibernate）該課程主要講述.數據庫技術該課程主要講述.,2020年5月23日,36,2020年5月23日,37,3.2HTML常用標簽,3.2.1列表標簽及其應用實例3.2.2多媒體和超鏈接標簽及其應用實例3.2.3表格標簽及其應用實例3.2.4表單標簽及其應用實例3.2.5框架標簽及其應用實例,2020年5月23日,38,1.插入圖像使用標簽可以為網頁添加.gif、.jpg、.png等格式的圖像。語法格式：主要屬性如下：src：指定圖像的源文件路徑，可以使用相對路徑、絕對路徑或URL。width：指定圖像的寬度，單位為像素。height：指定圖像的高度，單位為像素。hspace：指定圖像水平方向的邊沿空白，以免文字或其他圖片過于貼近，單位為像素。vspace：指定圖像垂直方向的邊沿空白，單位為像素。border：指定圖像邊框厚度。align：當文字與圖像并排放置時，指定圖像與文本行的對齊方式，其屬性值可取top（與文本行頂部對齊）、center（水平居中對齊）、middle（垂直居中對齊）、bottom（底部對齊，默認值）、left（圖像左對齊）、right（圖像右對齊）。alt：這是用以描述該圖像的文字，圖像不能顯示時將顯示該屬性值；當鼠標移至圖像上時，將該屬性值作為提示信息顯示。,2020年5月23日,39,【例3-6】插入圖像實例（imgTag.html）插入圖像實例聽得見的微笑！,2020年5月23日,40,2020年5月23日,41,2.插入視頻語法格式：。標簽常用屬性如下：dynsrc：指定視頻的源文件路徑。loop：指定視頻循環播放次數。值為-1或infinite時，表示無限次循環播放。loopdelay：指定兩次播放的時間間隔。start：指定何時開始播放視頻。其屬性值可取fileopen（默認值，即在鏈接到含該標簽的頁面時開始播放）、mouseove（把鼠標移到播放區域之上時才開始播放）controls：指定在視頻窗口下附加播放控制條。該屬性直接添加，不用賦值。,2020年5月23日,42,【例3-7】插入視頻實例（imgTag1.html）插入視頻實例笨笨熊的故事！,2020年5月23日,43,2020年5月23日,44,3.插入背景音樂使用標簽可以在網頁中添加.wav、.mid、.mp3等格式的背景音樂。語法格式：主要屬性如下：balance：指定音樂的左右均衡。delay：指定播放延時。loop：指定音樂循環播放次數。值為-1或infinite時，表示無限次循環播放。src：指定音樂源文件的路徑。volume：指定音量。,2020年5月23日,45,【例3-8】插入背景音樂實例（soundTag.html）插入背景音樂實例傳奇,2020年5月23日,46,2020年5月23日,47,4.插入超鏈接創建超鏈接是在當前頁面與其它頁面間建立鏈接，使用戶可以從一個頁面直接跳轉到其它的頁面、圖像或服務器。基本格式為：超鏈接文本及圖像其中，標簽對用來創建超鏈接，的主要屬性有：href：指定鏈接地址。若是鏈接到網站外部，必須為URL地址；若是鏈接到網站內部頁面，只需指明該頁面的絕對路徑或相對路徑。target：指定顯示鏈接目標的窗口，其值可取_blank（瀏覽器總在一個新打開、未命名的窗口中載入目標文檔）、_parent（目標文檔載入當前窗口的父窗口中）、_self（默認值，目標文檔載入并顯示在當前窗口中）、_top（清除當前窗口所有被包含的框架并將目標文檔載入整個瀏覽器窗口。）,2020年5月23日,48,例如：學校網站清華大學出版社,2020年5月23日,49,2020年5月23日,50,3.2HTML常用標簽,3.2.1列表標簽及其應用實例3.2.2多媒體和超鏈接標簽及其應用實例3.2.3表格標簽及其應用實例3.2.4表單標簽及其應用實例3.2.5框架標簽及其應用實例,2020年5月23日,51,3.2.3表格標簽及其應用實例,表格是一種能夠有效地描述信息的組織方式，由行、列、單元格組成，可以很好地控制頁面布局，所以在網頁中應用非常廣泛。許多網站都用多重表格來構建網站的總體布局，固定文本或圖像的輸出，還可以任意進行背景和前景顏色的設置。,2020年5月23日,52,語法格式：,表格第一列的標題表格第二列的標題表格第一行的第一個單元格內容表格第一行的第二個單元格內容表格第二行的第一個單元格內容表格第二行的第二個單元格內容,2020年5月23日,53,常用屬性,border：設置表格邊框的寬度，若為0表示邊框不可見，單位為像素。cellspacing：設置單元格邊框到表格邊框的距離，單位為像素。cellpadding：設置單元格內文字到單元格邊框的距離，單位為像素。width：設置表格寬度。其值可為整數，單位為像素，如：100表示100像素；也可以是相對頁面寬度的相對值，如：20%表示表格寬度為整個頁面寬度的20%。height：設置表格高度，取值方式與width一致。bgcolor：設置表格背景色。可以是十六進制代碼，也可以是英文字母，bordercolor：設置表格邊框顏色。align：設置表格在水平方向的對齊方式，其值可為left、right、center。valign：設置表格在垂直方向的對齊方式，其值可為top、middle、baseline。,2020年5月23日,54,常用屬性,bordercolor：設置該行的外邊框顏色。bgcolor：設置該行單元格的背景顏色。height：設置該行的高度。align：設置該行各單元格的內容在水平方向的對齊方式，其值可為left、right、center。valin：設置該行各單元格的內容在垂直方向的對齊方式，其值可為top、middle、bottom。,2020年5月23日,55,常用屬性,colspan：設置單元格所占的列數，默認值為1。rowspan：設置單元格所占的行數，默認值為1。background：設置單元格背景圖像。width：設置單元格寬度。,2020年5月23日,56,定義的列標題的文字以粗體方式顯示，其屬性使用與一致，在表格的定義語法中，也可以不使用定義標題單元格。,2020年5月23日,57,【例3-9】表格實例（tabletag.html）表格實例Java方向軟測方向.NET方向,2020年5月23日,58,Java程序設計JSP程序設計Java程序設計JSP程序設計C#程序設計ASP.NET,2020年5月23日,59,JavaWeb框架技術數據庫技術軟件測試理論軟件測試技術.NETFramework技術數據庫技術,2020年5月23日,60,2020年5月23日,61,3.2HTML常用標簽,3.2.1列表標簽及其應用實例3.2.2多媒體和超鏈接標簽及其應用實例3.2.3表格標簽及其應用實例3.2.4表單標簽及其應用實例3.2.5框架標簽及其應用實例,2020年5月23日,62,3.2.4表單標簽及其應用實例,表單在網頁中用來供用戶填寫信息，以實現服務器獲得用戶信息，使網頁具有交互功能。,2020年5月23日,63,2020年5月23日,64,表單標簽,表單語法結構如下：,2020年5月23日,65,action屬性：,設置服務器上用來處理表單數據的處理程序地址，處理程序可以是JSP程序、CGI（CommonGatewayInterface，通用網關接口）程序、ASP.NET程序等，該屬性值可以是URL地址也可以是電子郵件地址。例如：action=http:/localhost/sample/ShopCart.jsp，表示當用戶提交表單后，將調用服務器上的JSP頁面ShopCart.jsp來處理用戶的輸入。另外，采用電子郵件地址的格式是：action=mailto:接收用戶輸入信息的郵件地址。例如：action=mailto:youremail，表示把用戶的輸入信息發送到電子郵件地址youremail。,2020年5月23日,66,method屬性,設置處理程序從表單中獲得信息的方式，取值可為get或post。get方法將表單中的輸入信息作為查詢字符串附加在action指定的地址后（中間用“？”隔開）傳送到服務器。查詢字符串使用key=value的形式定義，如果有多個域，中間用“color:blue,2020年5月23日,95,2.使用id定義樣式表,在HTML頁面中id選擇符用來對某個單一元素定義單獨的樣式，定義id選擇符要在id名稱前加上一個“#”號。使用id定義樣式表的基本語法如下：#id名稱標簽屬性:屬性值；標簽屬性:屬性值；標簽屬性:屬性值；例如：#samplefont-family:宋體;font-size:60pt，段落文本。,2020年5月23日,96,3.使用class定義樣式表,（1）標簽名.類名標簽屬性:屬性值；標簽屬性:屬性值；標簽屬性:屬性值；例如：h1.centertext-align:center，該center類的樣式只能用在標簽上。（2）.類名標簽屬性:屬性值；標簽屬性:屬性值；標簽屬性:屬性值；例如：.textfont-family:宋體;color:red;段落文本，,2020年5月23日,97,3.3CSS基礎知識,3.3.1CSS樣式表定義3.3.2HTML中加入CSS的方法及其應用實例3.3.3CSS的優先級及其應用實例3.3.4CSS基本屬性及其應用實例,2020年5月23日,98,3.3.2HTML中加入CSS的方法及其應用實例,在HTML中加入CSS的方法主要有三種：嵌入式樣式表內聯式樣式表外聯式樣式表,2020年5月23日,99,1.嵌入式樣式表,例如：我愛我的祖國這個樣式表只是讓當前的標簽對中的文字為紅色，字體大小為10pt。,2020年5月23日,100,2.內聯式樣式表,內聯式樣式表利用標簽對將樣式表定義在HTML文檔的標簽對之間，內聯式樣式表的作用范圍是本HTML文檔。,2020年5月23日,101,【例3-15】內聯式樣式表實例（style1.html）內聯樣式表實例內聯式樣式表，本標題字體大小為13磅，字體顏色為紅色本段文字字體大小為9磅，顏色為藍色,2020年5月23日,102,2020年5月23日,103,3.外聯式樣式表,外聯式樣式表是將定義好的CSS單獨放到一個以.css為擴展名的純文本文件中，再使用標簽鏈接到網頁中。,2020年5月23日,104,【例3-12】外聯式樣式表使用,（1）創建樣式表StyleSheet.css。pbackground-color:yellow;color:blue;font-style:italic.textfont-family:宋體;font-size:20pt;text-decoration:underline（2）在網頁上引用樣式表。外聯式樣式表實例本標題文字字體大小為20磅，有下劃線本段文字背景顏色黃色，字體顏色藍色，斜體,2020年5月23日,105,2020年5月23日,106