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：一組標(biāo)簽，負(fù)責(zé)網(wǎng)頁的表現(xiàn)形式（顯示信息的格式）。JavaScript：是在客戶端瀏覽器運(yùn)行的語言，負(fù)責(zé)在客戶端與用戶的互動。CSS：是一個樣式表，起到美化整個頁面的功能。教學(xué)內(nèi)容與教學(xué)目標(biāo)1、教學(xué)內(nèi)容 本章主要介紹HTML、JavaScript和CSS三種技術(shù)及其使用，并給出設(shè)計案例。2、教學(xué)目標(biāo)（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è)計的預(yù)備知識1、網(wǎng)頁 網(wǎng)頁就是按各種格式顯示或展示各類信息的。2、標(biāo)簽 不同信息、不同的展示方式，要采用不同的標(biāo)記來標(biāo)識 這些標(biāo)記稱為標(biāo)簽。 例如： （1）畫一條線：如何繪制并展示。 源代碼 示例 （2）利用表格：顯示3個學(xué)生信息。源代碼 示例 （3）為了完成各類不同信息的展示， 就需要用HTML+JavaScript+CSS三種技術(shù)整合展示信息。 引言2_靜態(tài)網(wǎng)頁的有關(guān)預(yù)備知識 靜態(tài)網(wǎng)頁是指沒有后臺數(shù)據(jù)庫、不含程序的網(wǎng)頁，可以直接在瀏覽器上運(yùn)行。靜態(tài)網(wǎng)頁是以htm或html結(jié)尾的html文件編寫的。在程序設(shè)計中一般又把html網(wǎng)頁稱為靜態(tài)網(wǎng)頁。HT

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

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

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

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

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

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