自整計算機web制作ps復習提綱_第1頁
自整計算機web制作ps復習提綱_第2頁
自整計算機web制作ps復習提綱_第3頁
自整計算機web制作ps復習提綱_第4頁
自整計算機web制作ps復習提綱_第5頁
已閱讀5頁，還剩17頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、 10英政第 1 章 Web技術基礎一、 萬維網1、Internet的發展（1）Internet的產生l 阿帕網（ARPANet），萌芽u 一個沒有中央控制節點的計算機網絡，1969u TCP/IP協議研究成功 ，計算機互聯的主要障礙被解決 ，1974l 互聯網的誕生u ARPANet被分成兩部分，一部分作為軍用，稱為MILnet，另一部分作為民用，ARPANet開始從一個實驗型網絡向實用型網絡轉變，從而成為全球Internet正式誕生的標志。1982（2）發展階段l Internet的提出、研究和試驗階段 ，19691984 l Internet的實用發展階段 ， 19841992l 商業化

2、發展階段 ，19922003 l Web2.0，2003以后u 用戶參與，如：論壇，博客。留住客戶，信息消費到信息制造2、什么是萬維網l WWW是環球信息網（World Wide Web ）的縮寫，也可以簡稱為Web，中文名字為“萬維網”。l 在互聯網中，存在各種服務器和客戶機，WWW =Web服務器+Web客戶機，即Web由Internet中稱為Web信息服務器的計算機組成，由那些希望通過Internet發布信息的機構提供并管理。二、 Web的工作原理1、Web的構成（1）Web服務器l 網絡操作系統l Web服務組件，如Apache/Tomcat，IIS（2）Web客戶機l Web瀏覽器，

3、如IE，Mahton，Firefox2、Web的工作原理（1）在瀏覽器地址欄中，用戶輸入要訪問的網頁網址URL （2）Web服務器根據URL中指定的網址、路徑和網頁文件，調出相應的HTML、XML文檔或Jsp、Asp文件（3）根據文檔類型，Web服務器決定是否執行文檔中的服務器腳本程序，還是直接將網頁文件傳送到客戶端。（4）瀏覽器顯示下載的文檔，即網頁 3、瀏覽器的功能從本質上講，瀏覽器是一種特定格式，即HTML或XML的文檔閱讀器，它能夠根據網頁內容，對網頁中的各種標記進行解釋顯示。瀏覽器是一種程序解釋機，內置腳本程序引擎，如果網頁中包含客戶端腳本程序，瀏覽器將解釋執行這些客戶端腳本代碼，從

4、而增強網頁的交互性和動態效果。三、 概念及術語1、網站的概念及構成（1）概念：網站又稱Web站點，是Internet中提供信息服務的機構，這些機構的計算機連接到Internet中，向用戶提供Web服務。（2）構成：一個Web站點是由一個主目錄和主目錄下的文件夾和大量的網頁文件構成的，這些網頁文件通過超鏈接連接在一起，形成特定的應用邏輯，構成一個特定的Web應用。2、超文本概念、超級鏈接的概念（1）超文本（Hypertext）超文本是一種文本顯示與連接技術，可以對文本中的有關詞匯或句子建立鏈接（即超鏈接），使其指向其他段落、文本或鏈接到其他文檔。 當超文本顯示時，建立了鏈接的文本、圖片通常以下劃

5、線、高亮等不同的方式顯示，來表明這些文本或圖片對應一個超鏈接。 （2）超級鏈接（Hyperlink）：Web頁中當用戶單擊它時可以轉到其他Web頁或當前頁面的其他地方的文字、圖片等對象3、Web頁的概念、主頁的概念（1）Web頁（Web page）：Web頁是指Web服務器上的一個個超文本文件，或者是它們在瀏覽器上的顯示屏幕。 （2）主頁（Home page）：用戶在Web服務器上看到的第一個Web頁 首頁中往往列出了網站的信息目錄，或指向其他站點的超鏈接，主頁是一個網站的入口。 4、統一資源定位器URL、端口（1）統一資源定位器URL統一資源定位器URL可以唯一標識一個Web頁或Intern

6、et上其他資源的一個地址，它將Internet提供的各類服務統一編址，以便用戶通過Web客戶瀏覽程序進行信息查詢。URL的一般形式為：信息資源類型：/網址：端口號/文件路徑/文件名？參數表（2）端口含義：端口是服務器使用的一個通道，在OSI參考模型的數據封裝中使用，它可以使具有相同IP地址的服務器同時提供多種服務，運行在服務器上的各個服務程序將根據收到的數據段中的端口號來判斷是否為自己的數據。分類：按協議類型劃分，端口可以分為TCP、UDP、IP和ICMP（Internet控制消息協議）等。其中TCP端口和UDP端口是最常見端口類型。按照端口號分布劃分，端口分為知名端口（Well-Known

7、Ports）和動態端口（Dynamic Ports）兩部分。四、 Web相關技術1、C/S結構即客戶/服務器計算模式構成：兩層結構（Client/Server，C/S） 20世紀80年代流行 客戶機安裝客戶端軟件：客戶機完成與用戶的交互任務，具有強壯的數據操縱和事務處理能力 服務器安裝服務器程序：服務器負責數據管理，提供數據庫的查詢和管理、大規模的計算等服務 它依賴于計算機局域網。優點通過異種平臺集成，能夠協調現有的各種IT基礎結構；分布式管理；能充分發揮客戶端PC的處理能力，安全、穩定、速度快，且可脫機操作 不足它必須在客戶端安裝大量的應用程序（客戶端軟件），開發成本較高，移植困難，用戶界面

8、風格不統一，使用繁雜，不利于推廣使用，維護復雜，升級麻煩，信息內容和形式單一，新技術不能輕易應用用戶必須在局域網中，對90年代蓬勃發展的互聯網新技術不能適應2、B/S結構即瀏覽器/服務器計算模式構成：是一種三層架構瘦客戶機/服務器計算模式第一層是客戶端表示層：客戶端Web瀏覽器第二層是應用服務器層：Web服務器第三層是數據中心層：數據庫服務器它適用于互聯網。優點：具有良好的開放性，利用單一的訪問點，用戶可以在任何地點使用系統；用戶可以跨平臺以相同的瀏覽器界面訪問系統；因為在客戶端只需要安裝瀏覽器，基本上取消了客戶端的維護工作，有效的減少了整個系統的運行和維護成本。跨越了局域網的限制，將應用分布

9、到互聯網 第 2 章 標記語言與網頁制作一、HTML標記語法和文檔結構（一） HTML標記語法1.標記（Tag）標記由封裝在小于號（<）和大于號（>）構成的一對尖括號之中 一般形式：<標記>文檔內容</標記> <標記> 起始標記 （首標記） </標記>結束標記（尾標記） 例如：<a>link text</a> -一個HTML元素(1)標記類型：單標記<br><hr>雙標記<head></head><body></body> (2)標記屬性：

10、在起始標記可包含HTML屬性(3)標記語法：<標記 屬性1="屬性值“ 屬性2="屬性值" 屬性3="屬性值"> 每個元素可含多個屬性，屬性間無順序之分，屬性值可用單引號、雙引號為界符，也可不加界符。例如：<hr size="3" align="center" width="50%"> 常用的共同標記屬性（二）HTML文檔結構1.文檔結構：<html><head> 頭部信息</head><body> 文檔主體 （語

11、句部分）</body></html>2. 修改默認顯示的方法：當一個用戶自定義的樣式要應用到文檔中的所有元素（標記）時，應該在文檔的頭部使用<style></style>標記對重新定義這些標記的樣式。<style>標記放置在HTML文檔的<head></head>內，用于定義樣式。使用<style>標記可以為網頁設置不同的樣式屬性，一般形式為：<style type="text/css"> 標記屬性名：屬性值；屬性名：屬性值；</style>例如：要設置整

12、個文檔的字體顏色和背景色，可以定義下面的樣式。 <style type="text/css"> Bodycolor:black;background:white;</style> 二、應用 （一）文件頭標記及子標記<head></head>標記對之間的部分稱為文件頭 （二）文件體標記及其屬性 1.<title></title>標記:文檔標題標記 作用：用于標識網頁主題，其中的內容將在瀏覽器的標題欄中顯示，不出現在頁面內。 每個頁面只允許有一個<title>標記舉例：<title>

13、計算機基礎網絡教學平臺GSL3.0</title>2.<meta>標記 作用：提供文檔的元信息，包括網頁作者、制作日期、口令、關鍵字等等 <meta>為單標記，沒有尾標記 (1)http-equiv屬性：http-equiv相當于HTTP的文件頭，向瀏覽器傳回信息，以正確顯示網頁內容<meta http-equiv="參數" content="參數變量值"> http-equiv屬性參數值：content-type（顯示字符集的設定），設定頁面使用的字符集，描述網頁的類型和編碼信息。 <meta ht

14、tp-equiv="content-type" content="text/html; charset=gb2312"> expires（期限），用于設定網頁的到期時間 <meta http-equiv="expires" content="Thur, 8 May 2008 18:18:18 GMT"> pragma（Cache模式），禁止瀏覽器從本地計算機的緩存中訪問頁面內容 <meta http-equiv=“pragma” content=“no-cache”> ，該種設定訪問者

15、將無法使用脫機瀏覽功能 refresh（刷新），自動刷新并指向新頁面。 <meta http-equiv="refresh" content="60; url=new.htm"> window-target（顯示窗口的設定），強制頁面在當前窗口以獨立頁面顯示 <meta http-equiv="window-target" content="_top">，可以用來防止別人在框架里調用自己的頁面。 (2)name屬性主要提供作者、版權、或其他描述信息，與之對應的屬性值為content，cont

16、ent中的內容主要是便于搜索引擎查找信息和分類信息用的。 <meta name="參數" content="具體的參數值"> name屬性參數值:keywords（關鍵字），keywords用來告訴搜索引擎該網頁的關鍵字是什么 。 <meta name="keywords" content="E-learning,ontology"> description（網站內容描述），description用來告訴搜索引擎網站的主要內容 <meta name="description&

17、quot; content="This page is about E-learning etc."> author（作者），標注網頁的作者 <meta name="author" content="brion"> robots（機器人向導），robots用來告訴搜索機器人需要索引的頁面有哪些。 <meta name="robots" content="none"> （3） <base>標記<base>標記<base>標記定義了文

18、檔的基礎URL地址，在文檔中所有的相對地址形式的URL都是相對于這里定義的URL而言的 。 文檔中的<base>標記不能多于一個，必須放于頭部，并且應該在任何包含URL地址的語句之前 <base>標記屬性:href屬性 ，指定了文檔的基礎URL地址，該屬性在<base>標記中是必須存在的 。 <base href = "">target屬性 target屬性同框架一起使用，它定義了當文檔中的鏈接被點擊后，在哪一個框架中展開頁面。常用的target的屬性值有：_blank ，_self ，_parent ，_top _blank

19、: 表明在新窗口打開頁面_self： 表明在當前文檔的框架中打開頁面_parent：表明在當前文檔的父窗口中打開頁面_top ：在鏈接所在的完整窗口打開頁面<base target="_blank"> 表明頁面上所有的鏈接都在新窗口打開（4） <link>標記 <link>標記<link>標記定義了文檔之間的包含 。 在HTML的頭部可以包含任意數量的<link>標記 <link>標記屬性:type，用于指定被包含的文件類型。例如，text/css是指包含一個層疊樣式表文件。 href，指向被包含資源的

20、url地址 。 title，一個字符串，用于描述該鏈接關系。 rel，定義HTML文檔和所要包含資源之間的鏈接關系 例如：<link type="text/css" rel="stylesheet" href="mystyle.css">(5) 背景音樂標記<bgsound> 在文檔頭內，還可以定義背景音樂，標記為<bgsound>，用以插入背景音樂。<bgsound>標記為單標記，一般形式是：<bgsound src="" autostart="&q

21、uot; loop="">標記的屬性：Src屬性，給出音樂文件的URL。Autostart屬性，設置音樂文件播送結束后的處理，如果為true，則自動播放音樂，為false則結束不播放，默認值為false。Loop屬性，設置是否自動反復播放，loop=2表示重復兩次，infinite表示重復多次。 （三）文檔內容常用標記1、 標題、段落標記 （1）標題標記<h1></h1><h6></h6> 從最大的h1到最小的h6，6個級別的標題標記屬性：Align<h1 align=left>第一級標題</h1>

22、;<h2 align=left>第二級標題</h2><h3 align=left>第三級標題</h3><h4 align=left>第四級標題</h4><h5 align=left>第五級標題</h5><h6 align=left>第六級標題</h6>（2）段落標記<p></p>，標記一個段落，輸出位置轉到下一行開始，并增加一個空行。標記屬性： Align<p align=left>段落內容</p>（3）換行與空行標記 <

23、br>換行標記，單標記，可以使用它增加一個空行。（4）水平線標記水平線標記<hr> ，插入一條水平線， 單標記。標記屬性：width；size；Color（5） 預格式化段落標記<pre>. </pre>是文本以錄入的原樣顯示一、 文本格式標記（1）字體標記<font></font>常用的屬性：face：設置字體size：設置文字大小，取值17，可用+n、n表示比當前字體增大、減小color：設置文字顏色（2）粗體、斜體和下劃線標記 <b></b> 粗體標記<i> </i> 斜體標

24、記<u></u> 下劃線標記（3）字體放大、縮小、上標和下標顯示標記 < big></big>放大< small></small>縮小<sub></sub>上標<sup></sup>下標 （4） 邏輯格式化文本標記 <strong></strong>標記和<b></b>標記類似，都是字體加粗標記。 <em></em>標記和<i></i>標記類似，是斜體強調標記。 <tt>

25、;</tt>為打字字體 Courier字體，字母等寬標記。<cite></cite>為傳記引述斜體效果標記。 1. 圖像標記<img> （1）作用：單標記，用以插入圖像 <img scr=“#”> 例：<img src=“asd.jpg" alt="風景" width="400px" height="300px">（2）<img>標記屬性src：設置插入圖像的url地址，即插入圖像的路徑和文件名。 title：屬性值為一字符串，鼠標指向圖片時

26、，鼠標右下角顯示標題文本。 alt：設置圖像替代文字，主要用于在瀏覽器還沒有裝入圖像（或關閉圖像顯示）的時候，此圖像的顯示信息。id:制定圖片id號，用于對圖像的程序訪問。class：指定圖像所屬的類型<img src=“asd.jpg" alt="風景" width="400px" height="300px">（3）<img>標記的外觀屬性align：設置圖像的對齊方式 top：圖片頂端與文字頂端對齊middle：圖片垂直中線與文字基線對齊bottom：圖片底端與文字基線對齊left：圖片在當前窗

27、口的左側，文字在右側right：圖片在當前窗口的右側，文字在左側border：設置圖片邊框寬度。 height：用于設置圖像的高度width：用于設置圖像的寬度 hspace和vspace：分別用于設置圖像周圍的空白大小 （4） 事件屬性如onLock、onClick、onDbClick、onMouseOver、onKeyDown、onKeyPress等2. 超鏈接標記<a></a> （1）文本超鏈接 <a href=“鏈接地址">字符串</a> （2）圖片超鏈接<a href=“鏈接地址”> <img src=“圖片

28、文件"> </a>可使用圖片鏈接實現縮略圖<a href=“路徑/大圖文件名”> <img src=“路徑/小圖文件名"> </a>（3）書簽定義書簽：<a name=“#書簽名">書簽文本</a>書簽鏈接引用：<a ahref=“#書簽名”>鏈接文本</a>（4）郵箱地址鏈接<a href=“mailto：郵箱地址">郵箱地址字符串</a>（5）<a>標記其它常用屬性target屬性，定義超鏈接打開的目標窗口。 屬性

29、值：_self（相同框架）_blank（新建窗口）_top（整頁）_parent（父窗口）title屬性：鏈接注釋，屬性值為一字符串，鼠標指向超鏈接時，鼠標右下角顯示標題文本。 onclick事件屬性 3. 影像地圖標記<map> </map> 所謂影像地圖，就是在一個圖片上定義一系列區域，每個區域對應一個超鏈接。 （1）標記形式<img src=“ ” usemap=“#mapname” width=" " height=" "><map name="mapname"><area

30、 href=“url1“ target=“_blank” title=“提示文字 “ shape=”circle” coords=“圓心x, 圓心y, 半徑” ><area href=“url2” target=“_blank” title=“提示文字 “ shape=”rect” coords=“左上角x，左上角y，右下角x，右下角y" ><area href=“url3” target=“_blank” title=“提示文字 ”shape=“poly” coords=“頂點坐標序列" ></map> （2）熱點標記（<m

31、ap>）屬性href屬性：用于設定該熱點所鏈接的url地址。Shape屬性：用于設定熱點的形狀。coods屬性：用于設定熱點的坐標。shape=“rect” ，shape=“circle” ，shape=“poly”<img src=“aaa.jpg ” usemap=“#mapna” width=“ 300 " height=“500 "><map name="mapna"><area href=“1.htm“ shape=”circle” coords=“379, 1212, 79” target=“_blank”

32、 title=“區域1"><area href="2.htm" shape="rect" coords="224,159,274,180" target="_blank" title="區域2" ><area href=“3.htm” shape=“poly” coords=“" target="_blank" title="區域3" ></map> 4. 走馬燈標記<marquee>

33、;</marquee>“走馬燈”標記<marquee></marquee>用于標記一行或多行滾動的文本，也可以將文本帶有超鏈接，以增加網頁的動態效果。 <marquee>標記常用屬性：align屬性，設定活動字幕的位置，取值可以是left、center、right、top或bottom。 bgcolor屬性，設定活動字幕的背景顏色，一般是十六進制數。 direction屬性，設定活動字幕的滾動方向，取值可以是left、right、up或down。 behavior屬性，設定滾動的方式，主要有三種方式：behavior=“scroll”表示由一端滾

34、動到另一端； behavior=“slide”表示由一端快速滑動到另一端，且不再重復； behavior=“alternate”表示在兩端之間來回滾動。 height和width屬性，設定滾動字幕的高度和寬度。 hspace和vspace屬性，設定滾動字幕的左右邊框和上下邊框的寬度。 scrollamount屬性，設定活動字幕的滾動距離。 scrolldelay屬性，用于設定滾動兩次之間的延遲時間。 loop屬性，用于設定滾動的次數，當loop=-1表示一直滾動下去，直到頁面更新。 5. 注釋標記注釋標記一般的形式是<!注釋文字>，用于在HTML文檔中書寫說明性文字，注釋文字可以多

35、行，內容在瀏覽器中不顯示。8.特殊字符不可分的空格 &nbsp；小于 &lt；大于 &gt；邏輯與& &amp； 雙引號 &quot； 版權符號 © &copy； 注冊商標 ® &reg；商標 大于 &#8482 （四）表格（table）表格是由行、列構成的。每一行可以分成若干列，每一列成為一個單元格，相鄰的單元格可以合并。1.應用：表格的用途很廣，可以用來顯示表格型數據、圖片等，也可以用來布局。表格單元格中可以放置文本、段落、圖片、鏈接、表單、HTML控件、表格等等。2.相關標記：（1）表格標記 &l

36、t;table></table> 表格是HTML常用的標簽，代表在網頁中插入一張表格。表格是用table標簽對表示的。 任何表格都是由<table>開始，由</table> 結束。（2）行標記<tr></tr> <tr></tr>是表格一行的標記，標記<table> 與</table>之間可以包含多個<tr>標記。（3）列標記<td></td><td></td>為表格的單元格標記，標記<tr> 與</tr

37、>之間可以包含多個<td>標記。（4）標記<th></th>用來設置表格的表頭。通過增減<td></td>標記，實現表格的行的增加、刪除。（5） 標題標記<caption></ caption >為表格設置標題，屬性align，指定位置，取值top、bottom。表格相關標記屬性（1）一般屬性bgcolor：設置背景色，可應用于<table>、 <tr>、<td>標記 ，分別設置表格、行、單元格的背景色。background：應用于<table>，設置表格的

38、背景圖片。border：應用于<table>，設置表格的邊框，默認為0，無邊框。bordercolor ：應用于<table>，設置表格的邊框顏色。bordercolorlight：應用于<table>，設置表格的邊框明亮部分的顏色。bordercolordark：應用于<table>，設置表格的邊框昏暗部分的顏色。width：設置寬度，可應用于<table>、<td>標記 ，分別設置表格、單元格的寬度。應用于<td>標記 時，常用%表示。height：設置高度，可應用于<table>、 <t

39、r>標記 ，分別設置表格、單元格的高度。align：設置水平對齊方式，可應用于<table>、 <tr>、<td>標記。align：設置水平對齊方式，可應用于<table>、 <tr>、<td>標記，取值center、left、right。valign：設置垂直對齊方式，可應用于<table>、 <tr>、<td>標記，取值top、middle、bottom、baseline。cellspacing：應用于<table>，設置表格的相鄰單元格間的間距。cellpaddi

40、ng：應用于<table>，設置表格的單元格邊框與內容的間距。rowspan：單元格的行合并。colspan：單元格的列合并。（2）事件屬性 （五）表單（form） 1.用戶交互使用表單，可以動態的收集用戶數據，完成用戶與網站間的交互。（1）表單標記<form></form> <form></form>可以看做是一個包含許多表單控件的容器。它的功能：排列各種表單控件的布局；把整個最終處理數據結果發送到目標程序上；定義一種數據發送到服務器的方法；用來解碼服務器所能接受和處理的數據。一般形式：<form > 表單元素</

41、form> <form>標記屬性name：給出表單的名稱，用于腳本編程 method：用來定義服務器表單處理程序從表單中獲得信息的方式get方法：將數據打包放置在環境變量QUERY_STRING中作為URL整體的一部分傳遞給服務器。 post方法：分離地傳遞數據給服務器表單處理程序，不需要設置QUERY_STRING環境變量，因此POST有更好的安全性，表單中數據的多少是任意的，因為這些數據從來也不分配到一個變量里。 action：設置表單處理程序的網絡路徑和程序名，當用戶提交表單時，服務器將執行action屬性所設置的程序。 （2）輸入類型標記 <input type

42、="" name = "" value="" >< input >標記屬性：type：給出輸入控件的類型，常用的控件類型有：text，textarea，radio，checkbox，button，image，hidden，password，file，submit/reset name：設置輸入控件的名字，程序需要通過控件名稱處理用戶輸入數據，同時，設置控件名稱可以增加HTML代碼的可讀性。 value：保存用戶的輸入和選擇，服務器通過調用輸入區域的value屬性值來獲得輸入控件的數據。另外，用戶可以通過value屬性

43、來指定輸入區域的缺省值 。 2.表單控件：單行文本框輸入密碼文本框輸入 多行文本框輸入 button按鈕輸入 radio單選鈕輸入 復選框輸入復選列表框輸入hidden隱藏元素 文件上傳 表單提交按鈕標記submit/reset （1）text：單行文本框輸入<input type="text" name = "" value="">主要屬性：name：文本框名稱，便于程序獲取用戶輸入。 value：存儲文本框的取值，可以設一個初始值。 size：設置表示文本框的顯示長度。 maxlength：文本框中輸入的有效數據長度。

44、 例如：<form name="myForm" method="POST" action="/custom/feedback.jsp">用戶賬戶：<input type="text" name=“myaccount" size="10" value="guest" maxlength="8"> </form> （2）password：密碼文本框輸入使用輸入密碼文本框控件，當用戶輸入密碼時，區域內將會顯示&quo

45、t;*"號 <input type=" password " >主要屬性：name：文本框名稱，便于程序獲取用戶輸入。 value：存儲文本框的取值，可以設一個初始值。 size：設置表示文本框的顯示長度。 maxlength：maxlength是文本框中輸入的有效數據長度。 例如：<form name="myForm" method="POST" action="/progs/feedback.jsp">密碼：<input type="password"

46、 name="myPassword" size="10" maxlength="8"> </form>（3）textarea：多行文本框輸入標記多行文本框，又稱滾動文本框。和其它的輸入類型不同，它不是通過<input type=" " >來指定的，它是一個雙標記 <textarea name=" " rows=" " cols=""> input text</textarea> 主要屬性：name：，多

47、行文本框的名稱，便于程序獲取用戶輸入。 rows、cols：分別用來設置文本框的列數和行數，列與行以字符數為單位。input text：顯示的初始文本內容，一般為提示。 例如：<form name="myForm" method="POST" action="-WEBBOT-SELF-"><textarea name="brief" rows="5" cols="30">請輸入簡要說明</textarea></form>（4）

48、radio：單選鈕輸入<input type=“ radio” value =“choice_id” > 單選鈕主要用于從多個可選項中，選擇其中之一。往往是若干個radio為一組，他們具有相同的name，但不同的value，從而選擇其中之一。主要屬性：name：單選扭的名稱，一般是若干個radio一組，取相同的name。 checked：用來設置該單選框缺省時是否被選中，相同name的多個radio中只能有一個選擇，或都不使用該參數。 value：存儲單旋鈕的取值，多個具有相同name的單旋鈕應該具有不同的value。（5）checkbox:復選框輸入復選框是對某種輸入做出“是”或

49、“否”的選擇<input type=" checkbox " >常用屬性：name: 設置復選框的名稱，便于程序獲取用戶輸入value：每一個checkbox 必須有一個value，當復選框選中時，value值便會傳到表單的action屬性指定的程序中。 checked：用來設置該復選框缺省時是否被選中。 （6） select：復選列表框創建一個下拉列表框或可以復選的列表框，定義復選列表框不需要在<input type=“ ”>中指定輸入類型<select name="" size=""> <

50、option value=""></option> <option value=""></option> </select> <select>標記 屬性：name：name為下拉式列表控件名稱，便于程序獲取用戶輸入。 size：下拉式列表的高度，缺省時值為1，若沒有設置（加入）multiple屬性，顯示的將是一個彈出式的列表框。若使用此參數則不會有PopUp效果。如果小于可選的項目數量，則出現垂直滾動條。 multiple：指定是否可以多選。multiple屬性不用賦值，直接加入<s

51、elect>標記中即可使用，加入了此屬性后列表框就成了可多選的了。 （7） hidden隱藏元素在一個表單中，可以定義隱藏表單元素，它在網頁上并不顯示，不需要用戶輸入，主要目的是隨表單一起傳給表單處理程序一個特定的值，用于為網頁處理程序傳送數據。<input type="hidden" name=" " value=" "> 例如：<input type="hidden" name="myID" value="730118">（8）file:文件

52、上傳<input type="file" name=" " size=" “ accept=" " > 一般屬性：name: 為控件名稱，size: 顯示文本框長度。accept: 設置上載文件過濾，即點擊“瀏覽”按鈕時，只顯示指定文件類型的文件列表。 例如：<form name="myForm" method="POST" action="/custom/feedback.jsp" enctype="multipart/form-dat

53、a">提交論文：<input type="file" name="F1" size="20"></form>（9）表單提交當表單填寫完畢后，需要選擇的submit/reset按鈕，它結束表單輸入，將表單數據傳送到服務器端，由表單<form>標記中的action屬性指定的服務器上的程序處理用戶輸入數據。<input type=“submit”> 重填按鈕 表單清除就是要將表單中已做的輸入和選擇全部清除，重新填寫。<input type="reset"

54、;> 一般屬性：Name: 這和其它控件的屬性不同，在提交表單中，name可以指定一個函數，需要和form標記中action屬性的程序配合。一般情況下，不需要name屬性。 value: 提交按鈕的顯示名字，一般為“確定”、“提交”等易于理解的名字。 Onclick: 事件屬性。 （10）表單button按鈕 在表單中除了使用有固定功能的提交、重置按鈕，還可以設置其他功能的按鈕，設置type的值為“button”，通過使用腳本確定按鈕的功能，此類按鈕無默認功能。<input type=“button” name=“” value=“” onclick=“script”> 常用

55、屬性：name: 設置復選框的名稱，便于程序獲取用戶輸入value：顯示在按鈕上的文本。onclick ：用來設置該按鈕被單擊時激活腳本的名稱。 例如：<input type="button" value="階乘等于" name="equ" onClick="calcFact(n.value)“><input type="button" value="回前一頁" onclick="history.go( -1 );return true;">

56、 <input type="button" value="關閉窗口" onclick="window.close();return true在表單中還可以使用 “button”標記，設置按鈕。<button type=“button|submit|reset” name=“” value=“” onclick=“script”> 按鈕顯示內容</button >使用<button >標記提供更為靈活的樣式定義。例如：<button name=“submit” value=“testbutton”&

57、gt; <img src=“submit.ico” width=32 height=32 ><br>提交</button >（11）標簽<label>在表單中，有許多控件不帶顯示文本標簽，如文本框、選擇框，<lable>標記用來給這些控件添加標簽。<label for= " control-id " > 標簽文本</ label > 屬性for: 設置標簽與表示的標記關聯，其值為關聯標記的識別標志。例如：<form><input type=“checkbox" v

58、alue=“blue" name= " blue" checked id=“blue" >< label for= “ blue ” > 藍色</ label > <br><input type=“checkbox" value= " green" name= " green" id= " green" >< label for= “green ” > 綠色</ label > <br><i

59、nput type=“checkbox" value= " red" name= " red“ id= " red" >< label for= “ red ” > 紅色</ label ></form>（12）表單區域標記 在表單中，對多個控件進行分組，使頁面更具條理，<fieldset>標記、 <legend>標記用來實現表單的分區功能。<fieldset ><legend> 組標記名稱</legend> 控件標記</fie

60、ldset > 3.表單標記的訪問控制控制tab鍵的順序 在表單中，多個控件的瀏覽順序，默認的情況下是表單的書寫順序，若要更改默認順序，可使用tabindex屬性。 tabindex屬性加入到控件標記中，通過tabindex的屬性值的大小，改變默認順序。快捷鍵 accesskey屬性可以為控件提供定義快捷鍵，如accesskey=“n”，則用alt+n即可快捷訪問此控件表單控件的禁用和只讀 表單中，可以通過disable屬性將表單控件設為禁用，控件外觀為灰度顯示。disable屬性可用于<input> 、<select>、 <option>、 <

61、textarea>標記。表單提交時，被禁用的屬性對將不提交。 表單中，可以通過readonly屬性將表單控件設為只讀，控件的內容不能修改。例如：<input type=“text” name=“myaccount” size=“10” value=“guest” maxlength=“8” disable>控件提示 使用title屬性，可以給用戶提示，當鼠標指針移動到控件上時，顯示提示文字。例如：<input type=“text” name=“myaccount” size=“10” value=“guest” maxlength=“8” title=“請輸入你的用戶

62、賬號”>（6） 層次塊標記層次塊標記<div></div>用于定義網頁上的一個矩形塊，中間可以包含引起行中斷的標記，如<table>標記等。層次塊標記的一般形式是：<div id =" " style =" "></div> <div>標記屬性Id: 用于標記一個<div>塊，以便引用該塊。 style:<div>和<span>沒有默認的顯示樣式 ，必須使用style屬性和class樣式類定義圖層塊的位置、大小、顯示屬性等。例如：style=

63、"width:100px;height:100px;overflow-x :hidden;overflow-y:hidden;"> 。 <span><span>在行內定義一個區域，也就是一行內可以被<span>劃分成好幾個區域，從而實現某種特定效果。和<div>標記相比，<span>在CSS定義中屬于一個行內元素，而<div>是塊級元素。 三、層疊樣式表CSS技術 （一）Css的概念CSS是Cascading Style Sheets(層疊樣式表單)的簡稱。1.樣式表 規范瀏覽器如何顯示

64、HTML特定標記的一組規則。規則包括受樣式規則控制的標記名稱，標記的屬性兩部分。使用樣式表（1）內部樣式表：樣式定義在HTML文檔中。內聯樣式表：在應用的HTML標記中直接用style屬性插入樣式規則的方法。語法規則：<標記名稱 style=“樣式屬性：屬性值；樣式屬性：屬性值；”>內聯樣式的優先級最高。嵌入式樣式表：在應用的HTML內部，在<head> 和</head>之間用標記<style> 和</style>標記對實現。語法規則： <style> 標記名稱，標記名稱標記屬性：屬性值；樣式屬性：屬性值； </st

65、yle>（2）外部樣式表：將樣式定義存儲在獨立的樣式表文件中（擴展名為.CSS）。輸入外部樣式表： 在應用的HTML內部，在<head> 和</head>之間用標記<style> 和</style>標記引入外部樣式表。語法規則： <style> <!- import url(“ 外部樣式表文件地址 ”);-></style>鏈接外部樣式表：在應用的HTML內部，在<head> 和</head>之間用標記<link> 標記鏈接到外部樣式文件。語法規則： <link type=“text/css” rel=“stylesheet” href=“外部

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論