Java-Web應(yīng)用開發(fā)技術(shù)與案例教程課件第2章HTML結(jié)構(gòu)與基本語法

1、第2章 靜態(tài)網(wǎng)頁開發(fā)技術(shù) 靜態(tài)網(wǎng)頁是指可以由瀏覽器解釋執(zhí)行而生成的網(wǎng)頁，其開發(fā)技術(shù)主要有：HTML、JavaScript和CSS。HTML：一組標簽，負責網(wǎng)頁的表現(xiàn)形式（顯示信息的格式）。JavaScript：是在客戶端瀏覽器運行的語言，負責在客戶端與用戶的互動。CSS：是一個樣式表，起到美化整個頁面的功能。教學內(nèi)容與教學目標1、教學內(nèi)容 本章主要介紹HTML、JavaScript和CSS三種技術(shù)及其使用，并給出設(shè)計案例。2、教學目標（1）掌握靜態(tài)網(wǎng)頁的常用設(shè)計技術(shù)（2）利用這些設(shè)計技術(shù)，能夠根據(jù)所給出的設(shè)計要求，較熟練的設(shè)計靜態(tài)網(wǎng)頁。（3）三種設(shè)計技術(shù)（HTML+JavaScript+CSS

2、）的整合應(yīng)用，必須掌握。 引言1_靜態(tài)網(wǎng)頁設(shè)計的預備知識1、網(wǎng)頁 網(wǎng)頁就是按各種格式顯示或展示各類信息的。2、標簽 不同信息、不同的展示方式，要采用不同的標記來標識 這些標記稱為標簽。 例如： （1）畫一條線：如何繪制并展示。 源代碼 示例 （2）利用表格：顯示3個學生信息。源代碼 示例 （3）為了完成各類不同信息的展示， 就需要用HTML+JavaScript+CSS三種技術(shù)整合展示信息。 引言2_靜態(tài)網(wǎng)頁的有關(guān)預備知識 靜態(tài)網(wǎng)頁是指沒有后臺數(shù)據(jù)庫、不含程序的網(wǎng)頁，可以直接在瀏覽器上運行。靜態(tài)網(wǎng)頁是以htm或html結(jié)尾的html文件編寫的。在程序設(shè)計中一般又把html網(wǎng)頁稱為靜態(tài)網(wǎng)頁。HT

3、ML是Hypertext Markup Language的縮寫，中文也就是超文本鏈接標示語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。引言3_靜態(tài)網(wǎng)頁開發(fā)相關(guān)技術(shù)基礎(chǔ)知識 相關(guān)的一系列技術(shù)：HTML、JavaScript和CSS。 （1） HTML HTML是一組標簽，負責網(wǎng)頁的基本表現(xiàn)形式。 （2）JavaScript JavaScript是在客戶端瀏覽器運行的語言，負責在客戶端與用戶的互動。 （3）CSS CSS是一個樣式表，起到美化整個頁面的功能。引言4_靜態(tài)網(wǎng)頁的開發(fā)環(huán)境與運行環(huán)境1、開發(fā)環(huán)境（開發(fā)工具）（1）最簡單的開發(fā)

4、工具 利用記事本編寫靜態(tài)網(wǎng)頁代碼（2）利用集成開發(fā)環(huán)境（有很多種） 我們主要利用MyEclipse（或者Eclipse）2、運行環(huán)境 必須由瀏覽器解釋執(zhí)行。（1）第一種方式：直接利用瀏覽器解釋執(zhí)行 利用瀏覽器打開靜態(tài)網(wǎng)頁程序（*.html）（2）第二種方式：程序存放到服務(wù)器上，由瀏覽器請求服務(wù)器，然后服務(wù)器響應(yīng)返回信息，再有瀏覽器解釋執(zhí)行并顯示網(wǎng)頁。注意：所有的實際應(yīng)用程序，都是采用這種方式。引言5_HTML文件 用HTML編寫的超文本文檔稱為HTML文檔（文件），是一個放置了“標簽”的文本文件，以“.html”或“.htm”為擴展名，可供瀏覽器解釋執(zhí)行的網(wǎng)頁文件例2-1源代碼 網(wǎng)頁文件是利用

5、HTML所規(guī)定的標簽定義網(wǎng)頁中的各種元素的性質(zhì)和特點，從而完成網(wǎng)頁所要求的功能。例2-1運行界面 本小節(jié)總結(jié)回顧，所介紹的主要知識點內(nèi)容！ 實際上，本引言已經(jīng)介紹完成HTML的基本內(nèi)容。這些知識點理解了，我們的HTML也就學會了，后面的問題就是如何應(yīng)用HTML設(shè)計程序了。 后面的內(nèi)容： 介紹常見的標簽及其使用，有的介紹的詳細，有的不介紹。你們在以后，可以根據(jù)需要自學相關(guān)的標簽。第1節(jié) HTML網(wǎng)頁設(shè)計具體內(nèi)容 1 HTML文檔結(jié)構(gòu)與基本語法 2 HTML基本標記與使用 3 HTML表單標簽與表單設(shè)計 4 表單設(shè)計案例學生入校注冊頁面設(shè)計 5 HTML框架標簽與框架設(shè)計 6 框架設(shè)計案例多媒體播

6、放系統(tǒng)設(shè)計 7 HTML5語法與HTML5表單新特性 8 案例基于HTML5表單新特性實現(xiàn)客戶注冊輸入校驗 本節(jié)內(nèi)容實際上介紹各類標簽的使用方法，其實，我們可以不需要詳細介紹，在設(shè)計網(wǎng)頁時，根據(jù)需要直接查閱所需要的標簽即可。提示：HTML網(wǎng)頁設(shè)計的基本思想與方法（1）設(shè)計網(wǎng)頁，就是在顯示器上，按一定的格式展示所希望顯示的信息。（2）為了顯示不同的信息，采用不同的標簽及其相應(yīng)的屬性設(shè)置要顯示信息的格式和樣式。 例如： （1）要顯示一個表格，如何定義顯示方式呢？ （2）要顯示一個圖片，如何定義顯示方式呢？ （3）要顯示一個超鏈接，如何定義顯示方式呢？ . 源代碼顯示展示（3）所以，要了解和掌握HT

7、ML有關(guān)的標簽，然后，根據(jù)需要，選擇有關(guān)的標簽定義相關(guān)信息的顯示。我們學習內(nèi)容就是各種標簽的使用。 HTML文檔結(jié)構(gòu)與基本標記的使用 HTML表單標簽與表單設(shè)計 HTML框架標簽與框架設(shè)計 1 HTML文檔結(jié)構(gòu)與基本語法網(wǎng)頁結(jié)構(gòu)：設(shè)計完成該網(wǎng)頁的代碼：1.1 HTML標記(或標簽)HTML標簽是什么？（每個標簽就是定義一個顯示對象，需要指定對象屬性與屬性值） 網(wǎng)頁文件是利用HTML所規(guī)定的標簽定義網(wǎng)頁中的各種元素的性質(zhì)和特點，從而完成網(wǎng)頁所要求的功能。標簽的作用：標簽規(guī)定網(wǎng)頁中的各元素如何展示相關(guān)的信息。使用示例：在網(wǎng)頁中，繪制一條水平紅線， 關(guān)鍵術(shù)語：標簽名稱，標簽的屬性，標簽的屬性值（1）

8、標簽的分類（類型）按功能分類 在網(wǎng)頁上要展示的不同元素，需要采用不同的標簽給出定義和說明。 每種標記都有其標記名稱和對應(yīng)的標記屬性和屬性值，從而給出不同性質(zhì)、特點的展示。主要有：定義網(wǎng)頁結(jié)構(gòu)的標簽； 定義網(wǎng)頁頭部的標簽；定義網(wǎng)頁網(wǎng)體內(nèi)容的標簽，該類標簽中主要包含； 文字、行、 段落、列表標簽 表格、圖形 超鏈接、視頻、音頻 表單 （2）標簽的分類（類型）按標簽的結(jié)構(gòu)分類標簽有單標簽和雙標簽。單標簽： 例如，換行標記： 繪制橫線標簽：雙標簽: (有頭標記和尾標記) 例如，標題標記： 內(nèi)容 本小節(jié)結(jié)束回顧，所介紹的主要知識點內(nèi)容！（1）網(wǎng)頁結(jié)構(gòu)（2）標簽以及標簽屬性（3）標簽的分類1.2 標簽的標記及其屬性、屬性值標記的基本語法：單標記： 雙標記： 要標記顯示的內(nèi)容 語法說明： 屬性應(yīng)寫在首標記內(nèi)，并且和標記名之間有一個空格分隔。例如： 標記是在網(wǎng)頁中插入一條水平線，但是，要繪制什么類型（線的粗細、顏色等）的直線呢？對直線的粗細、顏色的限制，就需要標簽的屬性和屬性值。 其中：align為屬性， center為屬性值（表示居中）； color為顏色屬性，其屬性值為blue（藍色）； size為字體大小屬性，其屬性值為5px。再例如： 山東農(nóng)業(yè)大學1.3 注釋說明標