版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
1、 使用HTML標簽語言完成基本的頁面顯示、實現表單的編寫。 編寫簡單的JavaScript腳本完成客戶端行為的控制。 通過CSS層疊樣式表實現對頁面的美化。 HTML(超文本標記語言)HTML是Hypertext Marked Language(超文本標記語言)的縮寫,是一種用來描述超文本文檔的標記語言。用HTML編寫的超文本文檔稱為HTML文檔,它能獨立于各種操作系統(tǒng)平臺(如UNIX,Windows等)。所謂超文本文檔,是指在其中可以加入圖片、聲音、動畫、影視等內容,并且它可以利用超鏈接非常方便地從一個文件跳轉到網絡上其他主機的另一個文件。HTML文檔在普通文件中文本上加上標簽,使其達到預期
2、的顯示效果。當一個瀏覽器打開一個HTML文檔時,會根據標簽的含義顯示HTML文檔中的文本。標簽是由“”來表示。例如:This is my first html file. 元素 其中表示標簽的結束,標簽的作用范圍到為止。 元素 其中屬性往往表示標簽的一些附加信息,一個標簽可以包含多個屬性,各屬性之間無先后次序用空格分開。 指標簽單獨出現,只有開始標簽,沒有結束標簽。也稱為空標簽。超文本文檔分文檔頭和文檔體兩部分,在文檔頭里,對這個文檔進行了一些必要的定義,文檔體中才是要顯示的各種文檔信息。頭 部 信 息,如標題正 文 部 分 其中在最外層, 表示這對標記間的內容是HTML文檔。一些HTML文檔
3、省略了標記,因為.html 或.htm 文件被Web瀏覽器默認為是HTML文檔。 之間包括文檔的頭部信息,如文檔的標題等,若不需頭部信息則可省略此標記。 標記一般不省略, 表示正文內容的開始。 【功能】 通知瀏覽器該文件是html文件 【說明】標簽任意刪去一個或全部,不會影響顯示效果。和標簽的前后任意加一些字符是錯誤的。 【例3-1】 html.html (1)text屬性(設定文字顏色) 【例3-2】bodytext.html (2)bgcolor屬性(設定背景色) 【例3-3】bodybgcolor.htm 【說明】在HTML中顏色可以用“#RRGGBB”形式的16進制數碼,或者是下列預定
4、義色彩:Black黑色,Olive橄欖色 ,Teal黑綠色 ,Red紅色,Blue藍色,Maroon絳紫色 ,Navy藏藍色 ,Gray灰色,Lime草綠色 ,Fuchsia紫紅色 ,White白色,Green綠色,Purple紫色,Silver銀灰色,Yellow黃色,Aqua海藍色。 一般文章都有標題、副標題、章和節(jié)等結構,HTML中也提供了相應的標題標簽,其中n為標題的等HTML總共提供六個等級的標題,n越小,標題字號就越大,以下列出所有等級的標題: 第一級標題 第二級標題 第三級標題 第四級標題 第五級標題 第六級標題 【例3-4】hn.html (1)標簽 為了排列的整齊、清晰,文字
5、段落之間,我們常用來做標記。文件段落的開始由來標記,段落的結束由來標記,是可以省略的,因為下一個的開始就意味著上一個的結束。 標簽還有一個屬性align,它用來設置段落中的文本的對齊方式,一般對齊方式有center(居中)、left(居左)、right(居右)三種。 【例3-5】p.html (2)標簽標簽的作用 超文本中的鏈接是其最重要的特性之一,利用它使用者可以從一個頁面直接跳轉到其他的頁面、圖象或者服務器。一個鏈接的基本格式如下:【格式】文本 【說明】(1)標簽表示一個鏈接的開始,表示鏈接的結束;(2)屬性“href”定義了這個鏈接所指的地方;(3)通過點擊“文本”可以到達指定的文件?!?/p>
6、示例】建議或意見瀏覽器讀到這個標簽時,會用藍色顯示文本“建議或意見”,單擊這行文本,頁面會跳轉到URL為http:/ 表格是HTML中最重要的標志之一。表格就是由行和列構成的柵格,這些行和列構成一個個單元格,每個單元格可以放文本或是圖形等。 表格最基本的作用就是讓復雜的數據變得更條理,讓人容易看懂。在網頁中,表格還可以用來進行圖形的拼接和頁面元素的定位等巧妙的應用。 一個表由開始,結束,表的內容由,和定義。說明表的一個行,表有多少行就有多少個;說明表的列數和相應欄目的名稱,有多少個欄就有多少個;意義和差不多,它主要起標題的作用。. - 定義表格 - 定義表行 - 定義表頭 - 定義表元(表格的
7、具體數據)【例3-8】simpletable.html 一般情況下,表格的總長度和總寬度是根據各行和各列的總和自動調整的,如果我們要直接固定表格的大小,可以使用下列方式: width和height屬性分別指定表格一個固定的寬度和長度,w和h可以用像素來表示,也可以用百分比(與整個屏幕相比的大小比例)來表示。 這是一個長為300像素,高為100像素的表格。 這是一個長為屏幕的50%,寬為屏幕的10%的表格。 使用表單可以實現頁面的數據傳送,當用戶在頁面內填寫好了信息之后可以單擊【提交】按鈕來實現數據的發(fā)送,當我們想和用戶交互時可以使用表單來實現。表單通常都和程序連接實現數據的處理,比如JSP程序
8、。 1、表單控件 單行文本編輯框 【功能】 內容本身比較短只有一行,需要用戶的輸入?!臼纠?密碼框 【功能】 輸入的內容看不到,但是可以被發(fā)送到服務器?!臼纠?【功能】 系統(tǒng)給出幾種選擇,用戶從中選擇一項【示例】 工人 農民 軍人 學生 【功能】 在給出的選項中可以選擇多個?!臼纠空堖x擇你的愛好:音樂 旅游 讀書 多行文本編輯框【功能】 能夠進行多行的文本輸入?!臼纠空堓斎肽愕牧粞裕?下拉列表框select和option【功能】用戶在給出的較多選項中選擇一個。【示例】163 263 sina 【示例】【說明】(1)method = ”post
9、”說明我們使用的提交方式是post。Action屬性的值為”form.jsp”說明了處理我們的請求的文件是form.jsp。(2)提交的信息:是位于開始標志和結束標志之內的表單元素的有用信息。所有的表單元素都應該在和之內。(3)一個頁面可以有多個表單Form;兩個表單不可以嵌套或者重疊。 【功能】 完成表單的提交【示例】其中:type=”submit”是提交按鈕的標識Value是提交按鈕的值,同時也是按鈕上面顯示的內容;Name是按鈕的名字,可以根據這個名字獲取按鈕的值。【說明】(1)每個表單中都應該有至少一個提交按鈕submit用來完成提交動作;一個表單中可以使用多個提交按鈕來完成不同的提交
10、工作。(2)多個按鈕可以使用相同的名字,多個按鈕使用同樣的名字,但是值不一樣,(3)根據值區(qū)分不同的按鈕;也可是使用不同的名字,根據按鈕的名字區(qū)分不同的按鈕。 提交按鈕submit 單元項目1-簡單html表單的開發(fā) P24 單元項目2-圖書管理系統(tǒng)的靜態(tài)頁面 p25 JavaScript是一種基于對象和事件驅動的腳本語言, JavaScript與HTML超文本標識語言一起實現網頁與網絡客戶的交互,從而可以開發(fā)客戶端的應用程序。它是通過嵌入在標準的HTML語言中實現的。JavaScript一個重要功能就是用來實現客戶端輸入的驗證。 (1)簡單:JavaScript是一種腳本編寫語言,它的基本語
11、法與C、C+十分類似。(2)動態(tài):JavaScript是動態(tài)的,它可以直接對用戶或客戶輸入做出響應,無須經過Web服務器。(3)跨平臺性:JavaScript只依賴瀏覽器,與系統(tǒng)環(huán)境無關,只要能運行支持JavaScript瀏覽器就可以正確執(zhí)行。(4)基于事件:JavaScript對用戶的反映響應,是采用事件驅動的方式進行的。JavaScript與Java之間的主要區(qū)別:(1)基于對象和面向對象。JavaScript語言是基于對象和事件驅動的腳本語言;Java語言是面向對象的語言,可以設計獨立的程序(2)解釋執(zhí)行和編譯執(zhí)行 JavaScript是一種解釋性的語言,是將文本格式的代碼發(fā)送到客戶端由
12、瀏覽器負責解釋執(zhí)行。Java代碼在執(zhí)行之前必須編譯成字節(jié)碼文件,由虛擬機負責執(zhí)行。(3)弱類型和強類型。JavaScript是弱類型變量,即變量在使用前不需要聲明,由解釋器負責確定變量的數據類型,而Java是一種強類型語言,所有的變量在使用之前必須聲明,并且只能存放聲明類型的數據。 Javascript是基于對象(object-based)的語言,而基于對象的基本特征,就是采用事件驅動(event-driven)。事件是指某個對象發(fā)出事件是指某個對象發(fā)出的消息,標志著某個特定行為的發(fā)生或某個特定的條件成立的消息,標志著某個特定行為的發(fā)生或某個特定的條件成立。JavaScript事件驅動中的事件
13、是通過鼠標或熱鍵的動作引發(fā)的。它主要有以下幾個事件:(1)單擊事件onClick當用戶單擊鼠標按鈕時當用戶單擊鼠標按鈕時,產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執(zhí)行。(2)onChange改變事件當利用當利用text或或textarea元素輸入字符值改變時元素輸入字符值改變時發(fā)該事件,同時當在select表格項中一個選項狀態(tài)改變后也會引發(fā)該事件。(3)選中事件onSelect當當Text或或Textarea對象中的文字被加亮后對象中的文字被加亮后,引發(fā)該事件。(4)獲得焦點事件onFocus當用戶單擊當用戶單擊text或或textarea以及以及select
14、對象時對象時,產生該事件。此時該對象成為前臺對象。 JavaScript中對象事件的處理通常由函數實現,其基本格式如下:Function 函數名(參數1,參數2)函數執(zhí)行部分;函數返回部分 JavaScript語言是基于對象的(Object-Based),而不是面向對象的(Objected-oriented)。JavaScript沒有提供抽象、繼承、重載等有關面向對象的許多功能,而是把其他語句所創(chuàng)建的復雜對象統(tǒng)一起來,形成一個強大的對象系統(tǒng)。但是,JavaScript語言還是具有面向對象的基本特征,可以根據需要創(chuàng)建自己的對象,擴大JavaScript的應用范圍。 JavaScript支持的對象
15、(1)瀏覽器環(huán)境中提供的對象,提供反映當前加載的Web頁面及其內容以及瀏覽器當前會話信息,如常用的window、document、history、location等等。(2)JavaScript的內置對象,是若干與當前窗口或加載的文件無關的對象,如String、Date、Math等;(3)用戶自己定義的對象。 在JavaScript中,一個字符串是一個對象。String對象,為 特定的字符串提供完成各種處理的屬性和方法,如搜索字符串、提取字符串等。 String對象的創(chuàng)建 創(chuàng)建一個字符串對象可以有兩種方式: Str1=“hello”;Str2=new string(“hello”); Stri
16、ng對象的屬性 該對象只有一個屬性length,表示字符串的長度。 MyStr=“hello JavaScript World”; length=MyStr.length; String對象的常用方法 charAt():返回指定位置上的字符(長度為1的字符串)。 indexOf():返回某個指定的字符串值在字符串中首次出現的位置。 document對象反映JavaScript中HTML文檔的特性。 常用屬性: forms: form對象數組,每一個元素對應于文檔中的一個HTML標記。 links:link對象數組,每一個元素對應于文檔中的一個HTML標記。 常用方法: 該對象包含了與文檔元素(
17、elements)一起工作的對象,它將這些元素封裝起來供編程人員使用。 alert()方法能創(chuàng)建一個具有OK按鈕的對話框。 confirm()方法提供給一個具有兩個按鈕的對話框。 prompt()方法運行用戶在對話框中輸入信息,并可使用默認值,基本格式: prompt(“提示信息”,默認值) document.write()方法和document.writeln()方法用于將文本信息直接輸出到瀏覽器窗口中。 window對象是每個窗口或者對話框的頂層對象,是document、location及history對象的父對象。 常用屬性: closed:窗口是否關閉。 document:docume
18、nt對象。 history:history對象。 location:location對象。 常用方法: Alert(message):顯示帶有警告信息的窗口,并有“確定”按鈕。 confirm(Message):顯示帶有確認信息的窗口,并有“確定”和“取消”按鈕。 focus():使本窗口獲得焦點。 open():打開新窗口,顯示指定的頁面。 prompt(message,defaultValue):顯示提示對話框,帶有提示信息和默認值。 close():關閉當前窗口。 使用標簽將JavaScript代碼加入HTML文件中。格式如下: JavaScript代碼; language屬性:腳本語言
19、的類型。 src屬性:包含JavaScript源代碼的文件,以“.js”為擴展名,可以是JavaScript代碼以文件的形式加載到HTML文件中。 P29 項目構思 驗證名字是否為空,郵箱是否為空及郵箱地址是否格式正確,確認密碼與密碼是否一致。 項目設計(1)在“提交按鈕”標簽加入onclick=check()”,當單擊提交按鈕調用Javascript的check()方法。(2)check()方法檢查表單各元素。(3)如果沒有錯誤,調用方法submit()提交表單。 CSS(Cascading Style Sheets)中文翻譯為層疊樣式表單。為網站添加布局效果,進一步美化頁面。 CSS是一組
20、樣式,樣式中的屬性在HTML元素中依次出現,并顯示在瀏覽器中。 樣式可以定義在樣式可以定義在HTML文檔的標志里,也可以在文檔的標志里,也可以在外部附加文檔作為外加文檔外部附加文檔作為外加文檔。 CSS可以用來精確的控制頁面里每一個元素的字體樣式、背景、排列方式、區(qū)域尺寸、邊框等。 使用CSS能夠簡化網頁的格式代碼,加快下載顯示的速度,外部鏈接樣式可以同時定義多個頁面,大大減少了重復勞動的工作量。 CSS的主要優(yōu)點包括: (1)通過單個樣式表控制多個文檔的布局; (2)更精確的布局控制; (3)為不同的媒體類型(屏幕、打印等)采取不同的布局。 P31 例3-13 html1.html一個完全使
21、用HTML書寫的頁面。 例3-14 css.html一個使用HTML+CSS書寫的頁面。 CSS 語法由三部分構成:選擇符、屬性和值,格式如下: 選擇符屬性:值 選擇符通常是用戶希望定義的選擇符通常是用戶希望定義的 HTML 元素元素或標簽,屬性是用戶希望改變的屬性,并或標簽,屬性是用戶希望改變的屬性,并且每個屬性都有一個值。且每個屬性都有一個值。屬性和值被冒號分開,并由花括號包圍,這樣就組成了一個完整的樣式聲明,例如: a color:green (1)當屬性的值是多個單詞組成時,必須在值上加引號,例如: h1 font-family: Courier New (2)如果需要對一個選擇符指定
22、多個屬性時,使用分號隔開。 p font-size:15;color:red (3)樣式中的注釋:/* 注釋內容*/ 注意:不能嵌套。 (4)樣式的繼承:所有嵌套在某個html標簽中的html標簽都會自動繼承外層標簽設置的樣式規(guī)則。 P32例3-15 extend.html繼承了外層標簽的樣式 CSS選擇符主要包括以下三種:html選擇符、選擇符、class選擇符、選擇符、ID選擇符選擇符。他們的優(yōu)先級是ID選擇符CLASS選擇符HTML標簽選擇符。 html選擇符選擇符 html選擇符就是以就是以html標簽作為選擇符的情況標簽作為選擇符的情況。例如:p font-size:15;color
23、:redh1 text-align: center; color: red其作用域為html頁面中所有符合條件的html標簽。 包含選擇符是指用空格隔開的兩個或多個單一選擇符組成的字符串。例如: div pcolor:red;font-size:12; /*為div標簽中的p標簽規(guī)定樣式*/ 包含選擇符主要用來對某些具有包含關系的元素來單獨定義樣式,比如元素1里包含元素2,使用包含選擇符定義的樣式就只能對在元素1里的元素2起作用,而對單獨的元素和元素不起作用。這種方式允許用戶根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇符,我們可以使 HTML 代碼變得更加整潔?!纠?-16
24、】 contain.htm (CSS中的包含選擇符) 使用html標簽的class屬性設置值的選擇符就是class選擇符,class選擇符以一個點號定義。class選擇符包含兩種:關聯class選擇符和獨立class選擇符。(1)關聯class 選擇符 關聯class 選擇符可以為同一個元素(html標簽)定義不同的樣式,例如下面例子中就通過關聯class 選擇符為p元素定義了不同的樣式。 這是stop的樣式 這是warning的樣式 這是normal的樣式 p.stopcolor:red p.warningcolor:yellow p.normalcolor:green (2)獨立class
25、 選擇符 獨立class選擇符可以為多個不同的元素(html標簽)定義相同的樣式,例如:藍色的段落藍色的標題 .titletext-align:center;color:blue 上面例子中p元素和h1元素都使用了樣式.title。 ID屬性用來定義某一特定html標簽,一個網頁文件只能有一個標簽使用某一ID屬性值,ID 選擇符就是用來設置這樣具有ID屬性html標簽的樣式。 ID選擇符可以為標有特定 id屬性 的 HTML 元素指定特定的樣式。id 選擇符以 “#” 來定義。 例如: welcome to neusoft #titletext-align:center;color:blue 樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的樣式可以規(guī)定在單個的 HTML 元素中,也可以定義在元素中,也可以定義在 HTML 頁的頭元素中,或在一個外頁的頭元素中,或在一個外部的部的 CSS 文件中。
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五版寵物用品經銷代理合同范本3篇
- 2025版苗木種植基地土地租賃與農業(yè)廢棄物資源化利用合同4篇
- 2025年度大門改造工程安全風險評估與應急預案合同3篇
- 2025版抹灰工程施工進度與結算合同范本4篇
- 2025年度個人二手房購房合同范本及裝修質量監(jiān)督協議2篇
- 2025年度新型建筑材料分銷合作協議4篇
- 2025年度個人汽車貸款擔保資產保全合同模板4篇
- 2024鑰匙托管協議二手房
- 2025年度農產品加工設備庫存質押借款協議3篇
- 二零二五年度海上風電班組勞務分包合同示范2篇
- 神經外科進修匯報課件
- 2024老年人靜脈血栓栓塞癥防治中國專家共識(完整版)
- 騰訊營銷師認證考試題庫(附答案)
- 鄰近鐵路營業(yè)線施工安全監(jiān)測技術規(guī)程 (TB 10314-2021)
- 四年級上冊脫式計算100題及答案
- 資本市場與財務管理
- 河南近10年中考真題數學含答案(2023-2014)
- 八年級上學期期末家長會課件
- 2024年大學試題(宗教學)-佛教文化歷年考試高頻考點試題附帶答案
- HGE系列電梯安裝調試手冊(ELS05系統(tǒng)SW00004269,A.4 )
- 尤文肉瘤的護理查房
評論
0/150
提交評論