WebCh02A(HaoXW)標記語言與網頁制作分析_第1頁
WebCh02A(HaoXW)標記語言與網頁制作分析_第2頁
WebCh02A(HaoXW)標記語言與網頁制作分析_第3頁
WebCh02A(HaoXW)標記語言與網頁制作分析_第4頁
WebCh02A(HaoXW)標記語言與網頁制作分析_第5頁
已閱讀5頁，還剩88頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

計算機網絡原理、技術及應用

第1章Web技術基礎

第2章標記語言與網頁制作第3章圖像處理技術第4章音頻與視頻處理第5章Flash動畫設計第6章客戶端開發(fā)第7章服務端編程目錄計算機網絡原理、技術及應用第2章標記語言與網頁制作

2.1標記語言及其發(fā)展2.2超文本標記語言HTML2.3網頁設計基礎2.4使用FrontPage計算機網絡原理、技術及應用2.1標記語言及其發(fā)展標準通用標記語言SGML超文本標記語言HTML可擴展HTML規(guī)范XHTML可擴展標記語言XMLDHTML和SHTML技術計算機網絡原理、技術及應用標準通用標記語言SGML標記語言的概念廣義上，標記語言可以理解為對內容進行描述的規(guī)范或標準。例如，在出版印刷行業(yè)，編輯人員在進行文檔內容編輯時對內容所做的標記標準通用標記語言SGMLSGML（StandardGeneralizedMarkupLanguage，SGML）是一個用來定義在電子表格中如何對文件的結構和內容進行描述的國際標準（ISO-8879），1969年，IBMSGML設計的非常復雜，SGML的正式規(guī)范達500多頁意義SGML定義了標記語言的基本概念，奠定了標記語言的技術基礎計算機網絡原理、技術及應用超文本標記語言HTMLHTML的誕生超文本標記語言HTML起源于通用標準標記語言SGML由世界上最大的粒子物理研究實驗室歐洲核子研究中心CERN（theEuropeanOrganizationforNuclearResearch）于1991年首先提出。HTML規(guī)范標記HTML主要版本和發(fā)布時間HTML2.0，Internet工程任務組中的HTML工作組開發(fā)完成了HTML2.0，于1996年發(fā)布HTML3.2，W3C于1997年1月14日將其列為推薦版本，在HTML2.0標準中添加了諸如：字體、表格、Java程序、浮動、上標、下標等特征HTML4.0，W3C于1997年12月18日將其列為推薦版本，第二個稍作修正的HTML4.0版本與1998年12月24日發(fā)布。HTML4.0中最重要的特征是引入了樣式表CSS技術。HTML4.01，W3C于1999年12月24日將其列為推薦版本，是HTML4.0的升級版本，它對原版本做出了部分修正。計算機網絡原理、技術及應用可擴展HTML規(guī)范XHTMLHTML的缺陷HTML的標記固定，HTML只是一種表現技術，不能表達語義不能適應現在越來越多的網絡設備和應用的需要，比如手機、PDA、信息家電都不能直接顯示HTML。由于HTML代碼不規(guī)范、臃腫，瀏覽器需要足夠智能和龐大才能夠正確顯示HTML數據與表現混雜，頁面要改變顯示，就必須重新制作HTMLW3C不再繼續(xù)開發(fā)HTML可擴展HTMLW3C制定，2000年1月20日發(fā)布XHTML1.0。HTML向XML過度的一個橋梁2002年8月5日，發(fā)布XHTML2.0的第一個工作草案。計算機網絡原理、技術及應用可擴展標記語言XML可擴展標記語言XMLXML（eXtensibleMarkupLanguage），1998年2月10日，XML工作組正式向W3C提交了XML的最終推薦標準，這就是XML1.0標準。核心思想實現數據和顯示的分離XML地構成DTD、XML架構等基本要素元規(guī)范相應規(guī)范可擴展樣式語言XSLXML路徑語言XPathXML查詢語言Xquery可擴展連接語言XLL及XML文檔對象模型DOM簡單應用程序接口SAX等計算機網絡原理、技術及應用DHTML和SHTML技術DHTML技術與Web開發(fā)相關的技術或者說開發(fā)模式，不是規(guī)范涉及的內容HTML

4.0

規(guī)范客戶端腳本語言CSSL（Clent-Side

Scripting

Language）文檔對象模型DOM（Document

Object

Model），它將網頁中的內容抽象成對象，每個對象擁有各自的屬性(Properties)、方法(Method)和事件(Events)，可以通過上面的客戶端腳本語言編程控制層疊樣式表單CSS

技術SHTML技術SHTML不是一種HTML規(guī)范，而是一種網站設計、開發(fā)與維護技術是一種Web服務器

API，其指令可以在Web服務端運行，以產生動態(tài)的html，是一種類似于ASP的基于服務器的網頁制作技術計算機網絡原理、技術及應用2.2超文本標記語言HTMLHTML標記語法和文檔結構文件頭標記及子標記文件體標記及其屬性文檔內容常用標記表格（table）表單（form）層次塊標記對象和腳本程序標記層疊樣式表CSS技術幀（frame）計算機網絡原理、技術及應用HTML標記語法HTML標記語法標記（Tag）標記由封裝在小于號（<）和大于號（>）構成的一對尖括號之中一般形式：<標記>文檔內容</標記>例如：<a>linktext</a>標記類型與標記屬性單標記雙標記標記屬性<標記屬性1="屬性值"屬性2="屬性值"屬性3="屬性值"…>例如：<hrsize="3"align="center"width="50%">計算機網絡原理、技術及應用HTML文檔結構<html><head> 頭部信息</head><body> 文檔主體（語句部分）</body></html>計算機網絡原理、技術及應用文件頭標記及子標記文件頭<head>…</head>標記對之間的部分稱為文件頭子標記<title></title>標記<meta>標記<base>標記<link>標記背景音樂標記<bgsound>計算機網絡原理、技術及應用<title></title>標記<title></title>標記用于標識網頁主題，其中的內容將在瀏覽器的標題欄中顯示，不出現在頁面內舉例<title>計算機基礎網絡教學平臺GSL3.0</title>計算機網絡原理、技術及應用<meta>標記<meta>標記為單標記，沒有尾標記。為單標記，沒有尾標記。<meta>標記屬性http-equiv屬性name屬性計算機網絡原理、技術及應用<meta>標記--http-equiv屬性http-equiv屬性http-equiv相當于HTTP的文件頭，向瀏覽器傳回信息，以正確顯示網頁內容<metahttp-equiv="參數"content="參數變量值">http-equiv屬性參數值content-type（顯示字符集的設定），設定頁面使用的字符集。<metahttp-equiv="content-type"content="text/html;charset=gb2312">expires（期限），用于設定網頁的到期時間<metahttp-equiv="expires"content="Thur,8May200818:18:18GMT">pragma（Cache模式），禁止瀏覽器從本地計算機的緩存中訪問頁面內容<metahttp-equiv=“pragma”content=“no-cache”>，該種設定訪問者將無法使用脫機瀏覽功能refresh（刷新），自動刷新并指向新頁面。<metahttp-equiv="refresh"content="60;url=new.htm">window-target（顯示窗口的設定），強制頁面在當前窗口以獨立頁面顯示<metahttp-equiv="window-target"content="_top">，可以用來防止別人在框架里調用自己的頁面計算機網絡原理、技術及應用<meta>標記--name屬性name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎查找信息和分類信息用的。<metaname="參數"content="具體的參數值">name屬性參數值keywords（關鍵字），keywords用來告訴搜索引擎該網頁的關鍵字是什么。<metaname="keywords"content="E-learning,ontology">description（網站內容描述），description用來告訴搜索引擎網站的主要內容<metaname="description"content="ThispageisaboutE-learningetc.">author（作者），標注網頁的作者<metaname="author"content="brion@">robots（機器人向導），robots用來告訴搜索機器人需要索引的頁面有哪些。<metaname="robots"content="none">計算機網絡原理、技術及應用<base>標記<base>標記<base>標記定義了文檔的基礎URL地址，在文檔中所有的相對地址形式的URL都是相對于這里定義的URL而言的。文檔中的<base>標記不能多于一個，必須放于頭部，并且應該在任何包含URL地址的語句之前<base>標記屬性href屬性，指定了文檔的基礎URL地址，該屬性在<base>標記中是必須存在的。<basehref="">target屬性target屬性同框架一起使用，它定義了當文檔中的鏈接被點擊后，在哪一個框架中展開頁面。常用的target的屬性值有：_blank，_self，_parent，_top<basetarget="_blank">表明頁面上所有的鏈接都在新窗口打開計算機網絡原理、技術及應用<link>標記<link>標記<link>標記定義了文檔之間的包含。在HTML的頭部可以包含任意數量的<link>標記<link>標記屬性type，用于指定被包含的文件類型。例如，text/css是指包含一個層疊樣式表文件。href，指向被包含資源的url地址。title，一個字符串，用于描述該鏈接關系。rel，定義HTML文檔和所要包含資源之間的鏈接關系例如：<linktype="text/css"rel="stylesheet"href="mystyle.css">計算機網絡原理、技術及應用文件體標記<body></body><body>標記在<body>…</body>標記對之間的部分稱為html文檔的文件體。文件體中描述的是瀏覽器中顯示的內容。在<body>…</body>標記對之間可包含<p>…</p>、<img>、<a>…</a>等標記，它們所定義的文本、圖像以及超鏈接等將會在瀏覽器中顯示。<body>標記屬性一般屬性事件屬性計算機網絡原理、技術及應用<body>標記屬性-1<body>標記一般屬性計算機網絡原理、技術及應用<body>標記屬性-2<body>標記事件屬性計算機網絡原理、技術及應用一個簡單HTML文檔示例文本編輯器計算機網絡原理、技術及應用一個簡單HTML文檔示例（Cont1）使用FrontPage編輯計算機網絡原理、技術及應用一個簡單HTML文檔示例（Cont2）在瀏覽器中打開計算機網絡原理、技術及應用文檔內容常用標記標題、段落標記

文本格式標記字體標記<font>…</font>粗體、斜體和下劃線標記圖像標記<img>超鏈接標記<a>…</a>影像地圖標記<map></map>走馬燈標記<marquee>…</marquee>注釋標記計算機網絡原理、技術及應用標題標記標題標記<h1></h1>…<h6></h6>標記屬性Align…使用IntelliSense技術查看標記屬性計算機網絡原理、技術及應用段落標記、換行標記段落標記<p>…</p>，標記一個段落，輸出位置轉到下一行開始，并增加一個空行。標記屬性計算機網絡原理、技術及應用水平線標記<hr>段落標記水平線標記<hr>，插入一條水平線。單標記。標記屬性width代碼：<hrwidth="200"align="center">計算機網絡原理、技術及應用文本格式標記字體標記<font>…</font>常用的屬性有face、size和color，分別設置字體、文字大小和顏色。粗體、斜體和下劃線標記<b>…</b>、<i>…</i>、<u>…</u>字體放大、縮小、上標和下標顯示標記<big>…</big>、<small>…</small>、<sub>…</sub>、<sup>…</sup><strong></strong>、<em></em>、<tt></tt>、<cite></cite><strong>…</strong>標記和<b>…</b>標記類似，都是字體加粗標記。<em>…</em>標記和<i>…</i>標記類似，是斜體強調標記。<tt>…</tt>為打字字體Courier字體，字母等寬標記。<cite>…</cite>為傳記引述斜體效果標記。計算機網絡原理、技術及應用文本格式標記（舉例）標記的聯合使用舉例計算機網絡原理、技術及應用圖像標記<img>圖像標記<img>單標記，用以插入圖像<img>標記屬性align：設置圖像的對齊方式id：指定的圖片id號，用于對圖像的程序訪問class：指定圖像所屬的類型（樣式類）name：用于設定圖像的名稱，用于對圖像的程序訪問。src：設置插入圖像的url地址，即插入圖像的路徑和文件名。title：屬性值為一字符串，鼠標指向圖片時，鼠標右下角顯示標題文本。alt：設置圖像替代文字，主要用于在瀏覽器還沒有裝入圖像（或關閉圖像顯示）的時候，此圖像的顯示信息。border：設置圖片邊框。height和width：分別用于設置圖像的高度和寬度hspace和vspace：分別用于設置圖像的左右邊框大小和上下邊框大小。ismp和usemap：在應用圖像地圖（map）時使用。事件屬性計算機網絡原理、技術及應用圖像標記<img>（Exa）Title屬性如果在提示信息中，需要換行，可以使用“ ”或“ ”來完成換行輸出例如：title="提示： 泰山日出"計算機網絡原理、技術及應用例2-2圖像標記的應用示例<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>TaishanIntroduction</title></head><body><imgsrc="images/tai01.jpg"width="200"height="150"border="1"align="left"name="tai"

title=“提示： 泰山風光"alt=“泰山風光"vspace="10"hspace="10"onmouseover="tai.src='images/tai02.gif'"onmouseout="tai.src='image/tai01.jpg'"></body></html>計算機網絡原理、技術及應用例2-2圖像標記的應用示例（顯示結果）在瀏覽器中的顯示計算機網絡原理、技術及應用超鏈接標記<a>…</a>

超鏈接的分類

文本超鏈接<ahref="url#name">字符串</a>圖片超鏈接<ahref="url#name"><imgsrc="imgeurl"></a>定義書簽<aname="bookmarkname">書簽文本</a><a>標記其它常用屬性target屬性，定義超鏈接打開的目標窗口。_self（相同框架），_blank（新建窗口），_top（整頁），_parent（父窗口）。title屬性，屬性值為一字符串，鼠標指向超鏈接時，鼠標右下角顯示標題文本。onclick事件屬性計算機網絡原理、技術及應用例2-3超鏈接標記使用示例<html><head><metahttp-equiv="Content-Language"content="zh-cn"><title>ShandongTravel</title></head><body><h1align="center">美麗的山東</h1><atarget="_self"href="#jinan">濟南</a><atarget="_self"href="#qingdao">青島</a>曲阜泰山煙臺威海日照<p><aname="jinan">濟南</a></p><p></p><aname="qingdao">青島</a><palign=center><ahref="/"title="中國旅游網"target="_blank">主要旅游網</a></p><p><ahref='#'onclick="history.go(-1)">返回</a><ahref='#'onclick="window.opener=null;window.close();">關閉窗口</a></p></body></html>計算機網絡原理、技術及應用例2-3顯示網頁在瀏覽器中的顯示計算機網絡原理、技術及應用影像地圖標記<map></map>

什么是影像地圖所謂影像地圖，就是在一個圖片上定義一系列區(qū)域，每個區(qū)域對應一個超鏈接。標記形式<imgsrc=""usemap="#mapname"ismapwidth=""height=""><mapname="mapname"><areahref="1.htm"shape="circle"coords="379,1212,79"target="_blank"title=""><areahref="2.htm"shape="rect"coords="224,159,274,180"target="_blank"title="">…</map>熱點標記（<map>）屬性href屬性，用于設定該熱點所鏈接的url地址。shape和coods屬性，shape和coords是兩個主要的參數，用于設定熱點的形狀和大小。shape=“rect”，shape=“circle”，shape="poligon"計算機網絡原理、技術及應用在Frontpage2003中設置影像地圖標記首先插入一幅圖片，然后在圖片上右單擊，執(zhí)行“顯示圖片工具欄”命令，即可定義熱點區(qū)域。計算機網絡原理、技術及應用走馬燈標記<marquee>…</marquee>“走馬燈”標記<marquee>…</marquee>用于標記一行或多行滾動的文本，也可以將文本帶有超鏈接，以增加網頁的動態(tài)效果。<marquee>標記常用屬性align屬性，設定活動字幕的位置，取值可以是left、center、right、top或bottom。bgcolor屬性，設定活動字幕的背景顏色，一般是十六進制數。direction屬性，設定活動字幕的滾動方向，取值可以是left、right、up或down。behavior屬性，設定滾動的方式，主要有三種方式：behavior=“scroll”表示由一端滾動到另一端；behavior=“slide”表示由一端快速滑動到另一端，且不再重復；behavior=“alternate”表示在兩端之間來回滾動。height和width屬性，設定滾動字幕的高度和寬度。hspace和vspace屬性，設定滾動字幕的左右邊框和上下邊框的寬度。scrollamount屬性，設定活動字幕的滾動距離。scrolldelay屬性，用于設定滾動兩次之間的延遲時間。loop屬性，用于設定滾動的次數，當loop=-1表示一直滾動下去，直到頁面更新。計算機網絡原理、技術及應用走馬燈標記舉例例1<marqueeonmouseover=this.stop()onmouseout=this.start()scrollAmount=1scrollDelay=60direction=upwidth=150height=200>活動字幕內容第一行<br>活動字幕內容第二行<br>活動字幕內容第三行<br></marquee>例2<marquee><imgsrc="image/logo.gif"width="20"height="20">歡迎光臨</marquee>例3滾動的內容帶有超鏈接，可以將內容用<a>…</a>標記，即：<marqee><ahref="0">活動字幕內容</a></marqee>計算機網絡原理、技術及應用走馬燈標記顯示效果顯示計算機網絡原理、技術及應用走馬燈標記舉例（代碼）<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><body><marqueeonmouseover=this.stop()onmouseout=this.start()scrollAmount=1scrollDelay=60direction=upwidth=150height=200>活動字幕內容第一行<br>活動字幕內容第二行<br>活動字幕內容第三行<br><ahref="">站點更新...</a><br></marquee><marquee><imgborder="0"src="images/tai01.jpg"width="50"height="30">泰山歡迎您</marquee></body></html>計算機網絡原理、技術及應用表格（Table）什么是表格？表格是由行、列構成的。每一行可以分成若干列，每一列成為一個單元格，相鄰的單元格可以合并。應用頁面布局相關標記表格標記<table>…</table>行標記<tr>…</tr>列標記<td>…</td>計算機網絡原理、技術及應用表格相關標記屬性標記屬性一般屬性事件屬性計算機網絡原理、技術及應用例2-4使用表格示例HTML表格計算機網絡原理、技術及應用例2-4使用表格示例（代碼）<tableborder="1"cellpadding="0"bgcolor="#C0C0C0"width="400"height="75"><caption><pstyle="margin-right:16"><fontsize="5"color="#0000FF">學生成績等記表</font></caption><tr><tdalign="center"valign="middle"width="40%"height="30">學 號</td><tdalign="center"valign="middle"width="20%"height="22">姓 名</td><tdalign="center"valign="middle"width="20%"height="22">高等數學</td><tdalign="center"valign="middle"width="20%"height="22">英 語</td></tr><tr><tdalign="center"valign="middle"width="40%">2008000001</td><tdalign="center"valign="middle"width="20%">張三</td><tdalign="center"valign="middle"width="20%">95</td><tdalign="center"valign="middle"width="20%">90</td></tr><tr><tdalign="center"valign="middle"width="40%"rowspan="2">說明</td><tdvalign="middle"width="60%"colspan="3">成績=平時*20%+期末*80%</td></tr><tr><tdvalign="middle"width="60%"colspan="3">2006年1月</td></tr></table>計算機網絡原理、技術及應用表格的復雜設計表格嵌套單元格內定義表格立體表格設計設置表格單元格屬性表格居中計算機網絡原理、技術及應用表單（form）用戶交互表單表單標記<form>…</form>表單元素單行文本框輸入密碼文本框輸入多行文本框輸入button按鈕輸入radio單選鈕輸入復選框輸入復選列表框輸入hidden隱藏元素文件上傳表單提交按鈕標記submit/reset計算機網絡原理、技術及應用表單標記<form>…</form>一般形式<form>表單元素</form><form>標記屬性name屬性，給出表單的名稱，用于腳本編程method屬性，method屬性用來定義服務器表單處理程序從表單中獲得信息的方式get方法將數據打包放置在環(huán)境變量QUERY_STRING中作為URL整體的一部分傳遞給服務器。post方法分離地傳遞數據給服務器表單處理程序，不需要設置QUERY_STRING環(huán)境變量，因此POST有更好的安全性，表單中數據的多少是任意的，因為這些數據從來也不分配到一個變量里。action屬性，設置表單處理程序的網絡路徑和程序名，當用戶提交表單時，服務器將執(zhí)行action屬性所設置的程序。計算機網絡原理、技術及應用輸入類型標記<inputtype="">一般形式輸入類型標記<inputtype=""name=""value=""…><input>標記屬性type屬性，給出輸入控件的類型，常用的控件類型有：text，textarea，radio，checkbox，button，image，hidden，password，file，submit/resetname屬性，設置輸入控件的名字，程序需要通過控件名稱處理用戶輸入數據，同時，設置控件名稱可以增加HTML代碼的可讀性。value屬性，保存用戶的輸入和選擇，服務器通過調用輸入區(qū)域的value屬性值來獲得輸入控件的數據。另外，用戶可以通過value屬性來指定輸入區(qū)域的缺省值。計算機網絡原理、技術及應用單行文本框輸入標記單行文本框輸入<inputtype="text"name=""value=""…>主要屬性name屬性，文本框名稱，便于程序獲取用戶輸入。value屬性，存儲文本框的取值，可以設一個初始值。size屬性，設置表示文本框的顯示長度。maxlength屬性，maxlength是文本框中輸入的有效數據長度。例如：<formname="myForm"method="POST"action="/custom/feedback.jsp">用戶賬戶：<inputtype="text"name=“myaccount"size="10"value="guest"maxlength="8"></form>計算機網絡原理、技術及應用密碼文本框輸入標記密碼文本框輸入使用輸入密碼文本框控件，當用戶輸入密碼時，區(qū)域內將會顯示"*"號<inputtype="password"…>主要屬性name屬性，文本框名稱，便于程序獲取用戶輸入。value屬性，存儲文本框的取值，可以設一個初始值。size屬性，設置表示文本框的顯示長度。maxlength屬性，maxlength是文本框中輸入的有效數據長度。例如：<formname="myForm"method="POST"action="/progs/feedback.jsp">密碼：<inputtype="password"name="myPassword"size="10"maxlength="8"></form>計算機網絡原理、技術及應用多行文本框輸入標記多行文本框輸入多行文本框，又稱滾動文本框。和其它的輸入類型不同，它不是通過<inputtype=""…>來指定的，它是一個雙標記<textareaname=""rows=""cols="">inputtext</textarea>主要屬性name屬性，多行文本框的名稱，便于程序獲取用戶輸入。rows屬性和cols屬性，分別用來設置文本框的列數和行數，列與行以字符數為單位。標記對之間的文本inputtext為顯示的初始文本內容。例如：<formname="myForm"method="POST"action="--WEBBOT-SELF--"><textareaname="brief"rows="5"cols="30">請輸入簡要說明</textarea></form>計算機網絡原理、技術及應用

button按鈕輸入按鈕輸入<inputtype="button"主要屬性name屬性，name為按鈕名稱，便于程序對按鈕的操作。value屬性，value為按鈕的顯示名稱。button按鈕除了具有若干的一般屬性外，同時還可以接受各種鼠標事件，具有不同的鼠標和鍵盤事件屬性。例如：<formname="myForm"method="POST"action="/progs/feedback.jsp"><inputtype="button"value="回前一頁"onclick="history.go(-1);returntrue;"><inputtype="button"value="關閉窗口"onclick="window.close();returntrue;"></form>計算機網絡原理、技術及應用radio單選鈕輸入標記

radio單選鈕輸入<inputtype="radio">單選鈕主要用于從多個可選項中，選擇其中之一。往往是若干個radio為一組，他們具有相同的name，但不同的value，從而選擇其中之一。主要屬性name屬性，單選扭的名稱，一般是若干個radio一組，取相同的name。checked屬性，用來設置該單選框缺省時是否被選中，相同name的多個radio中只能有一個選擇，或都不使用該參數。value屬性，存儲單旋鈕的取值，多個具有相同name的單旋鈕應該具有不同的value。計算機網絡原理、技術及應用radio單選鈕舉例

例如：<formname="myForm"method="POST"action="/custom/feedback.jsp">性別：<inputtype="radio"name="gender"value="Female">女性<inputtype="radio"name="gender"value="Male"checked>男性<br><br>學歷：<inputtype="radio"name="degree"value="Bachelor"checked>學士<inputtype="radio"name="degree"value="Master">碩士<inputtype="radio"name="degree"value="Doctor">博士</form>顯示計算機網絡原理、技術及應用復選框輸入標記復選框輸入復選框是對某種輸入做出“是”或“否”的選擇<inputtype="checkbox"…>常用屬性name屬性，name為復選框的名稱，便于程序獲取用戶輸入value屬性，每一個checkbox必須有一個value，當復選框選中時，value值便會傳到表單的action屬性指定的程序中。checked屬性，用來設置該復選框缺省時是否被選中。計算機網絡原理、技術及應用復選框輸入標記（舉例）例如<formname="myForm"method="POST"action="/progs/feedback.jsp">興趣愛好：<br><br><inputtype="checkbox"name="intrests01"value="Sports"checked>體育<inputtype="checkbox"name="intrests02"value="Music">音樂<inputtype="checkbox"name="intrests03"value="Arts">文學<inputtype="checkbox"name="intrests04"value="Others"checked>其它</form>計算機網絡原理、技術及應用復選列表框輸入標記復選列表框創(chuàng)建一個下拉列表框或可以復選的列表框，定義復選列表框不需要在<inputtype=“”>中指定輸入類型<selectname=""size=""><optionvalue="">…</option><optionvalue="">…</option>……</select><select>標記屬性name屬性，name為下拉式列表控件名稱，便于程序獲取用戶輸入。size屬性，下拉式列表的高度，缺省時值為1，若沒有設置（加入）multiple屬性，顯示的將是一個彈出式的列表框。若使用此參數則不會有PopUp效果。如果小于可選的項目數量，則出現垂直滾動條。multiple屬性，指定是否可以多選。multiple屬性不用賦值，直接加入<select>標記中即可使用，加入了此屬性后列表框就成了可多選的了。計算機網絡原理、技術及應用復選列表框輸入標記（舉例）舉例<formname="myForm"method="POST"action="/custom/feedback.jsp">城市：<selectname="city"><optionvalue="beijing">北京</option><optionvalue="jinan"selected>濟南</option><optionvalue="qingdao">青島</option></select></form>計算機網絡原理、技術及應用hidden隱藏元素標記hidden隱藏元素在一個表單中，可以定義隱藏表單元素，它在網頁上并不顯示，不需要用戶輸入，主要目的是隨表單一起傳給表單處理程序一個特定的值，用于為網頁處理程序傳送數據。<inputtype="hidden"name=""value=""…>例如<inputtype="hidden"name="myID"value="730118">計算機網絡原理、技術及應用文件上傳標記文件上傳標記<inputtype="file"name=""size=""accept="">一般屬性name屬性為控件名稱，size屬性顯示文本框長度。Accept屬性設置上載文件過濾，即點擊“瀏覽”按鈕時，只顯示指定文件類型的文件列表。例如<formname="myForm"method="POST"action="/custom/feedback.jsp"enctype="multipart/form-data">提交論文：<inputtype="file"name="F1"size="20"></form>計算機網絡原理、技術及應用表單提交與重填按鈕表單提交當表單填寫完畢后，需要選擇的submit/reset按鈕，它結束表單輸入，將表單數據傳送到服務器端，由表單<form>標記中的action屬性指定的服務器上的程序處理用戶輸入數據。<inputtype=“submit”…>重填按鈕表單清除就是要將表單中已做的輸入和選擇全部清除，重新填寫。<inputtype="reset"…>一般屬性name屬性，這和其它控件的屬性不同，在提交表單中，name可以指定一個函數，需要和form標記中action屬性的程序配合。一般情況下，不需要name屬性。value屬性，提交按鈕的顯示名字，一般為“確定”、“提交”等易于理解的名字。Onclick事件屬性。例如<formmethod="POST"action="--WEBBOT-SELF--"><!--webbotbot="SaveResults"U-File="fpweb:///_private/form_results.txt"S-Format="TEXT/CSV"S-Label-Fields="TRUE"--><inputtype="submit"value="提交"name="B1"><inputtype="reset"value="重置"name="B2"></form>計算機網絡原理、技術及應用表單設計舉例（一）表單設計計算機網絡原理、技術及應用例2-5表單設計舉例一個利用form計算階乘的例子計算機網絡原理、技術及應用利用form計算階乘HTML代碼(Part1)<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>AsimpleexampleforForm</title><scriptlanguage="javascript">varcalcOnly=false;functionfact(n){if(n==0)return1;elsereturnn*fact(n-1);}functioncalcFact(n){varres;res=fact(n);document.myForm.result.value=res;calcOnly=true;document.myForm.n.focus();}</script></head>計算機網絡原理、技術及應用利用form計算階乘HTML代碼(Part2)<<body><palign="center"><fontsize="5">使用表單示例</font><hr><formname="myForm"><divalign="center"><tableborder="1"cellpadding="0"width="303"height="62"><tr><tdcolspan="3"height="26"width="292"bgcolor="#C0C0C0"><palign="center">計算n的階乘</td></tr><tr><td>輸入n<inputtype="text"name="n"size="6"onChange="calcFact(this.value)"></td><td><inputtype="button"value="階乘等于"name="equ"onClick="calcFact(n.value)"></td><td><inputtype="text"name="result"size="13"onChange="if(calcOnly){alert('Thisisacalculatedfield.');}"></td></tr></table></div></form></body></html>計算機網絡原理、技術及應用層次塊標記<div>層次塊標記div層次塊標記<div>…</div>用于定義網頁上的一個矩形塊，中間可以包含引起行中斷的標記，如<table>標記等。層次塊標記的一般形式是：<divid=""style=""></div><div>標記屬性Id，屬性，用于標記一個<div>塊，以便引用該塊。style屬性，<div>和<span>沒有默認的顯示樣式，必須使用style屬性和class樣式類定義圖層塊的位置、大小、顯示屬性等。例如：style="width:100px;height:100px;overflow-x

:hidden;overflow-y:hidden;">。計算機網絡原理、技術及應用例3-6定義div塊并進行平滑移動

要求在瀏覽器窗口定義一個div塊，雙擊鼠標左鍵，div塊從左向右平滑移動，單擊鼠標左鍵，停止移動。計算機網絡原理、技術及應用定義div塊并進行平滑移動（HTML代碼）

<html><head><title>MovingDivSample</title><scriptlanguage="javascript">varmovingID=null;varscrolling=false;functionstartMove(){varleft=eval(div1.style.left.replace("px",""));if(left<document.body.scrollWidth-150)div1.style.left=left+1;elsediv1.style.left=10;movingID=setTimeout("startMove()",10);}functionstopMove(){clearTimeout(movingID);}</script></head>計算機網絡原理、技術及應用定義div塊并進行平滑移動（HTML代碼）續(xù)

<bodyonDblClick="startMove()"onMouseDown="stopMove()"><divid="div1"style="visibility:visible;position:absolute;left:10;top:10;z-index:1;"><tablebgColor="#ffffcc"border="1"cellPadding="0"cellSpacing="0"><tr><td>Divmoving</td></tr></table></div><p>雙擊鼠標，塊開始從左向右移動</p><p>單擊鼠標，塊開始從左向右移動</p></body></html>計算機網絡原理、技術及應用span標記<span><span>在行內定義一個區(qū)域，也就是一行內可以被<span>劃分成好幾個區(qū)域，從而實現某種特定效果。和<div>標記相比，<span>在CSS定義中屬于一個行內元素，而<div>是塊級元素計算機網絡原理、技術及應用span標記舉例例如<html><script>functionsetspan(id){if(id==1)a.innerText="更新文本內容…";if(id==2)a.innerHTML="<fontcolor=redsize=7>更新html代碼</font>"}</script><body><ahref=javascript:setspan(1)>更新span內容</a></br><ahref=javascript:setspan(2)>更新html代碼</a></br><spanid=a></span></body></html>計算機網絡原理、技術及應用對象和腳本程序標記插入對象標記<object>…</object>腳本程序定義標記<script>…</script><scriptlanguage=""runat="">腳本程序代碼</script><script>標記屬性language，設置腳本程序語言，如：JavaScript,Jscript,etc.runat屬性，設置腳本是客戶端還是服務端腳本，默認為客戶端腳本。計算機網絡原理、技術及應用綜合舉例腳本程序+DIV+SPAN+Form表單輸入在客戶端的數據處理過程

計算機網絡原理、技術及應用綜合舉例HTML代碼<html><head><scriptlanguage="javascript">functioncheck(){varchecked_num=0;varlength=document.form1.answer.length;for(i=0;i<length;i++){if(document.form1.answer[i].checked)checked_num++;}returnchecked_num;}functionshow(){varnum=check();result.innerHTML="你已經選擇了:"+"<fontcolor=red>"+num;+"</font>"}functionmysubmit(){varchecked_num=check();if(checked_num>3)alert("您選擇了超過三種興趣");elseform1.submit();}</script></head>計算機網絡原理、技術及應用綜合舉例HTML代碼續(xù)<body><formaction="myformsave.jsp"method="post"name="form1"><tablealign="center"><tr><td><inputtype="checkbox"name="answer"value="1"onclick="javascript:show();">興趣1<inputtype="checkbox"name="answer"value="2"onclick="javascript:show();">興趣2<inputtype="checkbox"name="answer"value="3"onclick="javascript:show();">興趣3<inputtype="checkbox"name="answer"value="4"onclick="javascript:show();">興趣4</td><tr><tdalign="center"><inputtype="button"value="提交"class="menu"onClick="mysubmit()"></td></tr></table></form><hr><divid="result"></div></body></html>計算機網絡原理、技術及應用層疊樣式表CSS技術修改標記默認樣式style屬性與內聯樣式標記的id屬性class屬性樣式屬性與樣式文件（.css）計算機網絡原理、技術及應用標記及顯示樣式標記的默認樣式除了<div>、<span>等少數標記外，幾乎所有的文檔體內的標記都有默認顯示樣式。修改標記默認顯示樣式修改標記默認樣式標記內聯樣式--style屬性使用標記id屬性使用標記class屬性計算機網絡原理、技術及應用修改標記默認樣式修改標記默認樣式在html文檔的<head>…</head>內<styletype="text/css">標記{屬性名:屬性值;屬性名:屬性值;}</style>例如：<styletype="text/css">body{color:black;background:white;}a:hover{color:#FF0000;text-decoration:none;font-weight:bold}a{color:#0000FF;text-decoration:none;font-size:14px}</style>計算機網絡原理、技術及應用使用內聯樣式—style屬性為什么使用Style屬性？我們看下面的文字格式化要求：仿宋體，6號字，藍色<fontsize="6"color="#0000FF"face="仿宋_GB2312">泰山</font>加粗<b><fontsize="6"color="#0000FF"face="仿宋_GB2312">泰山</font></b>斜體<i><b><fontsize="6"color="#0000FF"face="仿宋_GB2312">泰山</font></b></i>上述格式化使用了三種標記標記內聯樣式--style屬性設置內聯樣式Style="<CSS屬性列表>"例如：<tdalign=centerstyle="font-size:20;font-weight:bold;color:#000075">缺點內容和顯示混雜計算機網絡原理、技術及應用css屬性表為什么使用Style屬性？CSS對網頁的控制是通過

溫馨提示

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

評論

0/150

提交評論