《網(wǎng)頁制作與設(shè)計(jì)》立體化電子課件 第2章-HTML_第1頁
《網(wǎng)頁制作與設(shè)計(jì)》立體化電子課件 第2章-HTML_第2頁
《網(wǎng)頁制作與設(shè)計(jì)》立體化電子課件 第2章-HTML_第3頁
《網(wǎng)頁制作與設(shè)計(jì)》立體化電子課件 第2章-HTML_第4頁
《網(wǎng)頁制作與設(shè)計(jì)》立體化電子課件 第2章-HTML_第5頁
已閱讀5頁，還剩121頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

HTML

HTML概述列表與表格常用標(biāo)簽HTML文檔表單與控件第2章框架布局

總結(jié)與習(xí)題HTML概述2.1Html是英文HyperTextMarkupLanguage的縮寫，中文意思是“超文本標(biāo)記語言”HTML是一種專門用于創(chuàng)建Web超文本文檔的結(jié)構(gòu)語言，它能告訴Web瀏覽程序如何顯示W(wǎng)eb文檔(即網(wǎng)頁)的信息，如何鏈接各種信息HTML概述-發(fā)展歷史2.11990年，HTML語言同WWW一起誕生于瑞士的GERN實(shí)驗(yàn)室TimBerners-Lee及其開發(fā)小組研究建立了超文本傳輸協(xié)議HTTP，該協(xié)議使用的語言為HTML每個(gè)瀏覽器開發(fā)公司都在為HTML加入更多的特征。目前已經(jīng)發(fā)展到HTML5.X版本，擴(kuò)展了DHTML和XML等子集。不過較為流行的仍然是1999年12月發(fā)布的HTML4.01版本HTML概述-標(biāo)簽2.1HTML標(biāo)簽(Tag)是影響網(wǎng)頁內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)簽決定網(wǎng)頁的顯示效果在HTML中，所有的標(biāo)簽都用尖括號括起來絕大多數(shù)標(biāo)記符都是成對出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符HTML標(biāo)簽是不區(qū)分大小寫的，但通常約定用大寫字母，這有利于HTML文檔的維護(hù)HTML概述-屬性2.1HTML屬性(Attribute)是標(biāo)簽的功能選項(xiàng)，用來修飾、擴(kuò)展或補(bǔ)充標(biāo)簽指令的功能。多數(shù)標(biāo)簽都包含自己專有的一些屬性屬性要放置在起始標(biāo)簽中，一般放置于標(biāo)簽關(guān)鍵字之后屬性的順序無關(guān)緊要，但標(biāo)簽關(guān)鍵字與屬性、屬性與屬性之間必須包含至少一個(gè)空格屬性通常也不區(qū)分大小寫HTML概述-屬性2.1帶有兩個(gè)屬性的<FONT>標(biāo)簽結(jié)構(gòu)

帶有屬性的標(biāo)簽的語法格式如下：<標(biāo)簽關(guān)鍵字屬性1屬性2……屬性n>

控制的網(wǎng)頁內(nèi)容</標(biāo)簽關(guān)鍵字>HTML文檔

2.2用HTML編寫的超文本文件稱為HTML文檔(HTMLDocument)，每個(gè)HTML文檔又稱為一個(gè)Web頁面HTML文檔被客戶端的Web瀏覽器讀取，并被解析成包含文本、圖形、音頻、視頻等多種媒體元素的Web頁面，顯示給用戶因特網(wǎng)上的Web站點(diǎn)就是由一系列相關(guān)的Web頁面構(gòu)成，頁面之間通過超鏈接關(guān)聯(lián)HTML文檔-基本結(jié)構(gòu)2.2HTML文檔的基本框架

HTML文檔-基本結(jié)構(gòu)

2.2HTML標(biāo)簽<HTML>處于文檔的最前端，表示文檔的開始</HTML>位于文檔最后一行標(biāo)簽間的內(nèi)容都是HTML語法的文檔文件頭標(biāo)記符，用來描述HTML首部內(nèi)容，說明文檔的整體信息首部信息并不出現(xiàn)在瀏覽器窗體中通常與某些標(biāo)簽一起使用文檔標(biāo)題標(biāo)簽描述文檔的特色或主題標(biāo)題所在的位置可依照瀏覽器的不同而不同，但通常位于瀏覽器的最上方定義文檔的體部，位于HTML首部下面BODY標(biāo)簽內(nèi)的文字、圖像、鏈接、表格、音頻、視頻等對象，都可顯示在瀏覽器窗體中BODY標(biāo)簽HEAD標(biāo)簽TITLE標(biāo)簽HTML文檔-輔助標(biāo)簽2.21注釋標(biāo)簽<!--注釋的內(nèi)容-->為網(wǎng)頁文檔添加注釋注釋的內(nèi)容不會被瀏覽器所解析，也不會顯示在網(wǎng)頁中2標(biāo)題標(biāo)簽<title>與</title>用來指定網(wǎng)頁的標(biāo)題3樣式標(biāo)簽<style>與</style>用來定義文檔的內(nèi)置樣式表或定義某個(gè)元素的內(nèi)聯(lián)樣式HTML文檔-體元素2.2由<body>與</body>標(biāo)簽界定的部分稱為body元素，此元素定義了HTML的文檔體，是整個(gè)網(wǎng)頁內(nèi)容的核心<body>標(biāo)簽支持一些重要屬性，這些屬性用來設(shè)置網(wǎng)頁內(nèi)容要素的顏色、背景圖案等項(xiàng)目，以美化網(wǎng)頁的外觀效果，被稱為修飾屬性HTML文檔-體元素2.2屬性關(guān)鍵字屬性取值功能描述text顏色標(biāo)識符16進(jìn)制顏色值(#rrggbb)RGB(r,g,b)函數(shù)設(shè)置網(wǎng)頁的文字顏色bgcolor設(shè)置網(wǎng)頁的背景顏色link設(shè)置當(dāng)前文檔超鏈接文本的顏色alink設(shè)置正使用的活動超鏈接文本的顏色vlink設(shè)置已訪問過的超鏈接文本的顏色background圖片文件名稱(可帶路徑)設(shè)置網(wǎng)頁的背景圖片leftmargin以像素為單位的整數(shù)值設(shè)置網(wǎng)頁主體內(nèi)容距離瀏覽器窗口左端的距離topmargin設(shè)置網(wǎng)頁主體內(nèi)容距離瀏覽器窗口頂端的距離body元素常用的修飾屬性

HTML文檔-顏色表示2.21顏色標(biāo)識符法以顏色名稱的英文單詞來代表對應(yīng)的顏色值如以red標(biāo)識符代表紅色等2RGB(r,g,b)函數(shù)法r、g、b參數(shù)代表紅、綠、藍(lán)三元色的比例值可為[0,255]范圍內(nèi)的整數(shù)值也可為[0%,100%]范圍內(nèi)的百分比值

316進(jìn)制顏色值法用#rrggbb形式表示顏色值rr、gg與bb分別是兩位16進(jìn)制數(shù)值，代表紅、綠、藍(lán)三原色的取值

body標(biāo)簽中可以包含<p></p>、<h1></h1>、<br>、<hr>等眾多版面格式標(biāo)簽，用來定義在瀏覽器窗口中顯示的文本信息格式常用標(biāo)簽-版面格式2.3常用標(biāo)簽-版面格式

2.3基準(zhǔn)字體標(biāo)簽基準(zhǔn)字體標(biāo)簽<basefont>為網(wǎng)頁的文本指定默認(rèn)的字體、字號與顏色特性重要屬性包括：face、size、colorbasefont元素常用的屬性屬性屬性取值功能描述face字體名稱列表指定網(wǎng)頁文本的字體size字號1到7(1號字體最小，7號字體最大，默認(rèn)值為3)指定文本字體的大小color顏色標(biāo)識符、RGB(r,g,b)函數(shù)或16進(jìn)制顏色值指定文本字體的顏色常用標(biāo)簽-版面格式

2.3字體標(biāo)簽字體標(biāo)簽<font></font>為網(wǎng)頁的文本指定字體、字號與顏色特性該標(biāo)簽的重要屬性同<basefont>標(biāo)簽不同的是font元素的size屬性除取1到7標(biāo)準(zhǔn)字號外，還可以取相對字號-6到6，表示在默認(rèn)字號基礎(chǔ)上的偏移值默認(rèn)字號由<font>標(biāo)簽設(shè)置

常用標(biāo)簽-版面格式

2.3文本樣式控制與修飾標(biāo)簽組HTML設(shè)置了許多文本樣式控制與修飾的標(biāo)簽，這類標(biāo)簽?zāi)軌蛟诓桓淖冏煮w與字號的前提下，對文本的字型、樣式與效果進(jìn)行修改這些標(biāo)簽一般不支持屬性常用標(biāo)簽-版面格式

2.3文本樣式控制與修飾標(biāo)簽集合表標(biāo)簽功能描述字體樣式控制標(biāo)簽<b></b>設(shè)定標(biāo)簽之間的文本為加粗字體<i></i>設(shè)定標(biāo)簽之間的文本為傾斜字體<tt></tt>設(shè)定標(biāo)簽之間的文本為固定寬度的字體<big></big>標(biāo)簽之間的文本字體加大一號<small></small>標(biāo)簽之間的文本字體減小一號字體效果控制標(biāo)簽<u></u>為標(biāo)簽之間的文本添加下劃線<s></s>為標(biāo)簽之間的文本添加刪除線<strike></strike>為標(biāo)簽之間的文本添加刪除線，效果同<s></s><sup></sup>設(shè)定標(biāo)簽之間的文本為上標(biāo)<sub></sub>設(shè)定標(biāo)簽之間的文本為下標(biāo)常用標(biāo)簽-版面格式

2.3標(biāo)簽功能描述文本樣式控制標(biāo)簽<em></em>文本強(qiáng)調(diào)標(biāo)簽<strong></strong>文本加強(qiáng)標(biāo)簽<dfn></dfn>術(shù)語定義標(biāo)簽<code></code>計(jì)算機(jī)程序代碼定義標(biāo)簽<samp></samp>代碼范例定義標(biāo)簽<kbd></kbd>鍵盤字符定義標(biāo)簽<var></var>變量定義標(biāo)簽<cite></cite>引用定義標(biāo)簽文本樣式控制與修飾標(biāo)簽集合表(續(xù))常用標(biāo)簽-版面格式

2.3居中標(biāo)簽居中標(biāo)簽<center></center>控制網(wǎng)頁文本、圖片、表格等內(nèi)容在瀏覽器窗口中居中顯示常用標(biāo)簽-版面格式

2.3標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽<hn></hn>包含六個(gè)級別：從<h1>到<h6><hn>中，n值越小，標(biāo)題的字體越大，n值越大，標(biāo)題的字體越小標(biāo)題標(biāo)簽自動控制標(biāo)題文本占用一行顯示，不須使用換行標(biāo)簽常用標(biāo)簽-版面格式

2.3分塊標(biāo)簽分塊標(biāo)簽<div></div>用來整合HTML文檔中的代碼段，并將其做為一個(gè)整體部分進(jìn)行格式的設(shè)置塊標(biāo)簽支持align屬性常用標(biāo)簽-版面格式

2.3分段標(biāo)簽分段標(biāo)簽<p></p>將標(biāo)簽之間的文本做為一個(gè)獨(dú)立的段落顯示在瀏覽器中HTML文檔不支持網(wǎng)頁文本的自動分段與換行，需要使用分段標(biāo)簽與換行標(biāo)簽來達(dá)到目的分段標(biāo)簽支持align屬性常用標(biāo)簽-版面格式

2.3換行標(biāo)簽換行標(biāo)簽<br>換行標(biāo)簽為單標(biāo)簽，其功能是為當(dāng)前行插入分行符，將后續(xù)內(nèi)容移至下一行顯示常用標(biāo)簽-版面格式

2.3水平線標(biāo)簽水平線標(biāo)簽<hr>為單標(biāo)簽功能是為當(dāng)前網(wǎng)頁添加一條水平分隔線水平線標(biāo)簽支持多種屬性常用標(biāo)簽-版面格式

2.3屬性屬性取值功能描述color任一種顏色表示指定水平線的顏色alignleft、center、right指定水平線在網(wǎng)頁中的對齊方式noshadenoshade設(shè)置陰影效果，屬性只能取值”noshade”，表示畫無陰影的實(shí)線size整數(shù)值n指定水平線的厚/高度值(單位為像素)width整數(shù)值n或n%指定水平線的長度值(單位為像素)或占據(jù)網(wǎng)頁寬度的百分比

<hr>標(biāo)簽常用的屬性常用標(biāo)簽-版面格式

2.3原樣顯示標(biāo)簽原樣顯示標(biāo)簽<pre></pre>的功能是用來顯示帶有較多格式控制符號的文字段落，標(biāo)簽間的文本內(nèi)容將按照原有格式，使用固定寬度的字體顯示在瀏覽器中文本中可以包含空格、回車等特殊符號原樣顯示標(biāo)簽對文本進(jìn)行預(yù)處理操作常用標(biāo)簽-版面格式

2.3特殊符號、轉(zhuǎn)義字符及數(shù)字編碼對照表特殊符號符號描述轉(zhuǎn)義字符數(shù)字編碼“&”英文的”and”符號&&“<”小于符號<<“>”大于符號>>“?”注冊符號®®“”不換行空格符號

 “§”章節(jié)符號§§“?”版權(quán)符號©©常用標(biāo)簽-版面格式

2.3常用標(biāo)簽-多媒體2.3圖像標(biāo)簽圖像標(biāo)簽<img>為單一標(biāo)簽，用來在網(wǎng)頁中插入圖像或視頻該標(biāo)簽支持gif、jpg、png等圖像文件格式，及avi、rm等視頻文件格式<img>標(biāo)簽常用的屬性表常用標(biāo)簽-多媒體2.3屬性屬性取值功能描述src圖像文件的URL指定圖像資源的位置alt文字說明或提示信息圖像無法顯示或鼠標(biāo)懸停在圖像上時(shí)的文字提示title圖像的文字標(biāo)題鼠標(biāo)懸停在圖像上時(shí)的文字提示，優(yōu)先于alt屬性alignleft、right、top、bottom、middle圖文混排時(shí)圖像相對于周邊文字對齊的方式border整數(shù)值n指定圖像邊框的厚/寬度值(單位為像素)width整數(shù)值n或n%指定圖像的寬度值或占據(jù)網(wǎng)頁寬度的百分比值height整數(shù)值n或n%指定圖像的高度值或相對網(wǎng)頁高度的百分比值hspace整數(shù)值n指定圖像的左右邊距值(單位為像素)vspace整數(shù)值n指定圖像的上下邊距值(單位為像素)usemap圖像地圖文件的URL定義客戶端圖像地圖的URL常用標(biāo)簽-多媒體2.3嵌入標(biāo)簽嵌入標(biāo)簽<embed></embed>>用來在網(wǎng)頁中插入音頻、視頻、flash等多媒體文件支持的媒體文件格式包括mp3、mid、wma、wav、avi、rm、swf等多種有時(shí)需要安裝相應(yīng)的插件

常用標(biāo)簽-多媒體2.3<embed>標(biāo)簽常用的屬性表屬性屬性取值功能描述src多媒體文件的URL指定多媒體文件的資源位置或網(wǎng)絡(luò)地址looptrue/false或整數(shù)值n決定是否循環(huán)播放，或指定播放的循環(huán)次數(shù)autostarttrue/false控制在音樂文件下載后是否自動播放controlsconsole、volumelever等設(shè)定控制面板的外觀hiddentrue/false決定是否完全隱藏控制畫面title提示字符串信息鼠標(biāo)在播放區(qū)懸停時(shí)顯示的標(biāo)題信息volume[0,100]區(qū)間的整數(shù)值設(shè)定播放音量的大小值qualitylow、medium、high、best等設(shè)定播放的質(zhì)量級別常用標(biāo)簽-多媒體2.3背景音樂標(biāo)簽背景音樂標(biāo)簽<rgsound>為單一標(biāo)簽用來插入背景音樂，由微軟擴(kuò)展而來，適用于IE瀏覽器支持mid、mp3、wma等音頻文件格式常用標(biāo)簽-多媒體2.3<rgsound>標(biāo)簽常用的屬性表屬性屬性取值功能描述src背景音樂文件的URL指定音樂文件的資源位置或網(wǎng)絡(luò)地址volume[-10000,0]區(qū)間的整數(shù)值設(shè)定播放音量的大小值loop整數(shù)值n指定播放的循環(huán)次數(shù)，n=-1表示不斷循環(huán)播放autostarttrue/false控制在音樂文件下載后是否自動播放常用標(biāo)簽-多媒體2.3移動字幕標(biāo)簽移動字幕標(biāo)簽<marquee></marquee>用來顯示循環(huán)移動的文本(移動字幕)常用標(biāo)簽-多媒體2.3<marquee>標(biāo)簽常用的屬性表屬性屬性取值功能描述directionleft、right、up、down設(shè)定字幕滾動的方向aligntop、bottom、middle設(shè)定字幕相對于周邊文字對齊的方式bgcolor顏色標(biāo)識設(shè)定字幕的背景顏色behaviorscroll、slide、alternate設(shè)定字幕滾動樣式(循環(huán)滾動、滑動、來回交替移動)loop整數(shù)值n設(shè)定字幕循環(huán)滾動的次數(shù)(若未指定則不停循環(huán))scrollamount整數(shù)值n設(shè)定字幕文本滾動的速度scrolldelay整數(shù)值n設(shè)定字幕循環(huán)滾動時(shí)相鄰輪次間的延遲時(shí)間(單位為毫秒)width整數(shù)值n或n%指定字幕的寬度值或相對網(wǎng)頁寬度的百分比值height整數(shù)值n或n%指定字幕的高度值或相對網(wǎng)頁高度的百分比值hspace整數(shù)值n指定字幕的左右邊距值(單位為像素)vspace整數(shù)值n指定字幕的上下邊距值(單位為像素)常用標(biāo)簽-超鏈接2.3超鏈接標(biāo)簽超鏈接為用戶提供了通過點(diǎn)擊文字標(biāo)識、圖片、URL地址等Web元素，便可在不同的網(wǎng)頁之間或不同類型的數(shù)據(jù)之間進(jìn)行跳轉(zhuǎn)或轉(zhuǎn)換的功能

超鏈接是HTML最重要的特色之一超鏈接的類型URL超鏈接本地超鏈接內(nèi)部超鏈接常用標(biāo)簽-超鏈接2.3超鏈接的基本格式如下：<AHREF="資源地址">鏈接文本</A>[語法說明]標(biāo)簽<A>表示一個(gè)超鏈接的開始，</A>表示鏈接的結(jié)束屬性“HREF”定義了超鏈接所指的地點(diǎn)通過點(diǎn)擊“鏈接文字”可以到達(dá)指定的文件常用標(biāo)簽-超鏈接2.3常用標(biāo)簽-超鏈接2.3錨點(diǎn)標(biāo)簽錨點(diǎn)標(biāo)簽<a></a>用來定義一種稱為錨點(diǎn)的對象錨點(diǎn)是網(wǎng)頁中被命名的一個(gè)特定位置，通過訪問指向超鏈接的錨點(diǎn)，能夠?qū)崿F(xiàn)不同位置間的快速轉(zhuǎn)移

常用標(biāo)簽-超鏈接2.3

<a>標(biāo)簽的主要屬性屬性屬性取值功能描述hrefURL指定作為超鏈接目標(biāo)對象的URLname錨點(diǎn)的標(biāo)識符定義一個(gè)錨點(diǎn)作為超鏈接的書簽title標(biāo)題文字指定超鏈接顯示的標(biāo)題文字shaperect、rectangle、circle、poly、polygon指定圖像映射超鏈接熱點(diǎn)的圖形類型targetblank、_parent、_self、_top、框架名稱指定打開超鏈接的目標(biāo)窗口類型常用標(biāo)簽-超鏈接2.3圖像超鏈接圖像超鏈接是指設(shè)定整個(gè)圖像為超鏈接的標(biāo)識，當(dāng)點(diǎn)擊圖像的任一區(qū)域時(shí)，瀏覽器將自動打開超鏈接指向的目標(biāo)對象實(shí)現(xiàn)圖像超鏈接的方法：只須將<img>標(biāo)簽鑲嵌到帶有href屬性的<a>標(biāo)簽內(nèi)即可圖像超鏈接的方法為：<ahref=超鏈接的URL><imgsrc=圖像的URL></a>常用標(biāo)簽-超鏈接2.3列表與表格2.4有時(shí)為使網(wǎng)頁的某些結(jié)構(gòu)化的信息更有條理性，需使用列表方式來顯示它們列表命令可以起到提綱挈領(lǐng)的作用表格是由行列交叉而成的單元格組成的二維網(wǎng)格用于組織與表達(dá)結(jié)構(gòu)化的信息或用于規(guī)劃網(wǎng)頁布局列表與表格-列表2.4列表有序列表自定義列表無序列表有序列表定義<OL><LI>表項(xiàng)1</LI><LI>表項(xiàng)2</LI>……<LI>表項(xiàng)n</LI></OL>列表與表格-列表2.4無序列表定義<UL><LI>表項(xiàng)1</LI><LI>表項(xiàng)2</LI>……<LI>表項(xiàng)n</LI></UL>列表與表格-列表2.4自定義列表定義<DL><DT>表項(xiàng)1</DT>

<DD>表項(xiàng)1的描述１</DD>

<DD>表項(xiàng)1的描述2</DD>

……<DT>表項(xiàng)２</DT>……</DL>列表與表格-列表2.4表格一般由表格標(biāo)題、表格題頭、表格主體及腳注等要素組成標(biāo)題一般為一行文字說明，用來指定表格的名稱一個(gè)表格中至少要包含一個(gè)表格主體，每個(gè)表格主體可包含多個(gè)表行表格主體包含由表頭單元格定義的表格結(jié)構(gòu)及由數(shù)據(jù)單元格定義的表格內(nèi)容兩部分表頭包含表格結(jié)構(gòu)的各個(gè)字段名稱表格數(shù)據(jù)包含表格的數(shù)據(jù)項(xiàng)內(nèi)容列表與表格-表格2.4列表與表格-表格2.4列表與表格-表格2.4表格的構(gòu)成標(biāo)簽<tr>標(biāo)簽<caption>標(biāo)簽<table>標(biāo)簽<th>標(biāo)簽<td>標(biāo)簽

表格標(biāo)簽表格標(biāo)簽<table></table>為定義表格的引導(dǎo)標(biāo)簽列表與表格-表格2.4表格標(biāo)題標(biāo)簽表格標(biāo)題標(biāo)簽<caption></caption>通常位于表格上方的居中位置，由<caption>標(biāo)簽定義該標(biāo)簽必須緊跟在<table>標(biāo)簽之后每個(gè)表格最多只能定義一個(gè)標(biāo)題

列表與表格-表格2.4表格題頭標(biāo)簽表格題頭標(biāo)簽<thead></thead>用以將表頭的一行或多行內(nèi)容組合在一起，形成表格題頭當(dāng)在瀏覽器中卷動表格時(shí)，題頭的內(nèi)容將不動，始終保持在表格頂部

列表與表格-表格2.4表格主體標(biāo)簽表格主體標(biāo)簽<tbody></tbody>用以定義多行表格數(shù)據(jù)的組合體一般位于<thead>標(biāo)簽與<tfoot>標(biāo)簽之間若表格定義中僅包含一個(gè)tbody元素，而無thead元素與tfoot元素，則可省略<tbody>與</tbody>標(biāo)簽列表與表格-表格2.4表格腳注標(biāo)簽表格腳注標(biāo)簽<tfoot></tfoot>用以將表尾的一行或多行內(nèi)容組合在一起，形成表格腳注當(dāng)在瀏覽器中卷動表格時(shí)，腳注的內(nèi)容將保持在表格底部不動列表與表格-表格2.4表格行標(biāo)簽表格行標(biāo)簽<tr></tr>用來定義一個(gè)表格行的完整信息由一列或多列表頭字段或表格數(shù)據(jù)項(xiàng)信息構(gòu)成列表與表格-表格2.4表頭標(biāo)簽表頭標(biāo)簽<th></th>用來定義表頭的各個(gè)單元格內(nèi)容

列表與表格-表格2.4單元格標(biāo)簽表格單元格標(biāo)簽<td></td>用來定義表格的一個(gè)數(shù)據(jù)單元格內(nèi)容

列表與表格-表格2.4應(yīng)用范例的示范運(yùn)行效果列表與表格-表格2.4應(yīng)用范例用表格列出你最喜愛的三部電影的名字、導(dǎo)演及上映時(shí)間信息，表格要求帶有表格框線，并用不同的背景顏色顯示表頭與表格數(shù)據(jù)

表單與控件-表單結(jié)構(gòu)2.5表單定義表單(form)是HTML語法的重要成分，是HTML實(shí)現(xiàn)人機(jī)交互的主要手段，用于采集用戶輸入的信息并提交給服務(wù)器，從而賦予網(wǎng)站以互動能力表單是實(shí)現(xiàn)動態(tài)網(wǎng)頁的主要外在形式，網(wǎng)站無論使用哪種語言來實(shí)現(xiàn)，表單都是其實(shí)現(xiàn)互動功能的統(tǒng)一外在形式表單在HTML頁面中起著重要作用，它是與用戶交互信息的主要手段一個(gè)表單至少應(yīng)該包括說明性文字、用戶填寫的表格、提交和重填按鈕等內(nèi)容用戶填寫了所需的資料之后，按下“提交資料”按鈕，這樣所填資料就會通專門的接口傳到Web服務(wù)器上網(wǎng)頁的設(shè)計(jì)者隨后就能在Web服務(wù)器上看到用戶填寫的資料，從而完成了從用戶到作者之間的反饋和交流表單與控件-表單結(jié)構(gòu)2.5HTML表單作為網(wǎng)頁上的一個(gè)特定區(qū)域，由標(biāo)簽對<form></form>限定其作用范圍，其它的表單控件必須插入在表單區(qū)域內(nèi)表單與控件-表單結(jié)構(gòu)2.5表單常用的控件對象控件對象功能說明控件對象功能說明text單行文本框selectmenu下拉式菜單textarea多行文本框fileselect文件選擇域button普通按鈕button一般命令按鈕radiobutton單選按鈕submit提交按鈕checkbox復(fù)選框reset重置按鈕表單與控件-表單結(jié)構(gòu)2.5表單標(biāo)簽表單標(biāo)簽<form>的主要內(nèi)容為可選的各類表單控件定義<form>標(biāo)簽的事件包括onsubmit與onreset兩類<form>標(biāo)簽的常用屬性如下表所示

表單與控件-表單結(jié)構(gòu)2.5<form>標(biāo)簽的常用屬性屬性屬性取值功能描述name表單的名稱為當(dāng)前表單指定唯一的名稱，以供腳本程序引用與操作methodget或post指定表單數(shù)據(jù)從瀏覽器傳送到服務(wù)器的方法，默認(rèn)為getactionURL定義表單處理程序的位置或表單提交的電子郵箱地址target_blank、_self、_parent、_top指定目標(biāo)信息的打開窗口類型enctype資源的媒體類型設(shè)置表單內(nèi)容的編碼方式表單與控件-表單結(jié)構(gòu)2.5表單定義形式

<form屬性關(guān)鍵字=屬性值……事件=事件處理程序>[selectmenu元素定義][text元素定義][input元素定義]……</form>表單與控件-表單結(jié)構(gòu)2.5輸入控件標(biāo)簽輸入控件標(biāo)簽<input>為單一標(biāo)簽該標(biāo)簽僅包含屬性，內(nèi)容一般為空該標(biāo)簽通過對type屬性賦以不同的值來創(chuàng)建命令按鈕、文本框、單選按鈕等多種輸入型表單控件，向用戶提供輸入數(shù)據(jù)的手段表單與控件-輸入控件

2.5input元素的定義格式為：<inputtype=表單控件類型其他屬性關(guān)鍵字=屬性值……事件=事件處理程序/>表單與控件-輸入控件

2.5表單與控件-輸入控件

2.5type屬性、控件類型及響應(yīng)事件對照表type屬性值表單控件能夠響應(yīng)的事件text單行文本框onclick、onchange、onfocus、onblur、onselectpassword密碼文本框onchange、onfocus、onblur、onselecthidden隱藏域onclick、onchange、onfocus、onblur、onselectbutton自定義按鈕onclicksubmit提交按鈕onclickreset重置按鈕onclickimage圖像按鈕onclickradio單選按鈕onclick、onfocus、onblurcheckbox復(fù)選框onclick、onfocus、onblurfile文件域onchange、onclick標(biāo)注標(biāo)簽標(biāo)注標(biāo)簽<label></label>用來為表單控件添加文字說明，描述控件的類型與功能，指導(dǎo)用戶如何正確使用這些控件該標(biāo)簽常常與輸入控件標(biāo)簽結(jié)合使用該標(biāo)簽之間的內(nèi)容為瀏覽器顯示的文字提示表單與控件-輸入控件

2.5表單與控件-輸入控件

2.5標(biāo)注元素的重要屬性屬性屬性取值功能描述for某一表單控件的id值指定要描述的是哪一個(gè)表單控件accesskey英文字母定義用來訪問表單控件的快捷鍵單行文本框單行文本框允許用戶輸入一行信息，是Input元素的默認(rèn)類型，也是使用頻率最高的一種表單控件表單與控件-輸入控件

2.5單行文本框創(chuàng)建方法為：<Inputtype="text"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5密碼文本框密碼文本框是一種特殊的單行文本框，主要用于保密信息(如個(gè)人登錄密碼)的輸入與顯示當(dāng)在密碼文本框中輸入字符時(shí)，瀏覽器將以屏蔽字符(一般為星號或圓點(diǎn))來替換用戶輸入的內(nèi)容，從而達(dá)到保密的效果表單與控件-輸入控件

2.5創(chuàng)建密碼文本框的方法為：<Inputtype="password"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5隱藏域隱藏域是表單的特殊輸入控件，隱藏域在頁面中對用戶是不可見的，瀏覽器中無法看到隱藏域的信息隱藏域主要用于程序設(shè)計(jì)，程序員用它來保存數(shù)據(jù)，傳遞參數(shù)，向服務(wù)器提交不允許公開的重要信息當(dāng)瀏覽者提交表單時(shí)，隱藏域的內(nèi)容會隨著一起提交給服務(wù)器上的處理程序

表單與控件-輸入控件

2.5創(chuàng)建隱藏域的方法為：

<Inputtype="hidden"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5命令按鈕表單命令按鈕控件有相似的屬性：都具有name與value屬性表單命令按鈕控件有相似的行為：都能夠響應(yīng)鼠標(biāo)單擊事件(onclick)表單與控件-輸入控件

2.5表單與控件-輸入控件

2.5命令按鈕控件

自定義按鈕自定義按鈕為標(biāo)準(zhǔn)的windows風(fēng)格的按鈕

重置按鈕單擊重置按鈕時(shí)，將刪除任何已經(jīng)輸入到文本框中的信息并清除所做的任何選擇，并自動恢復(fù)表單各控件的默認(rèn)內(nèi)容

提交按鈕用以將表單中的信息(包括name與value屬性值)以ASCII編碼方式提交給服務(wù)器相應(yīng)的表單處理程序表單與控件-輸入控件

2.5各類命令按鈕的示例創(chuàng)建自定義按鈕的方法為：<Inputtype="button"屬性=屬性值……onclick=處理單擊事件的腳本代碼/>表單與控件-輸入控件

2.5提交按鈕的創(chuàng)建方法為：<Inputtype="submit"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5重置按鈕的創(chuàng)建方法為：<Inputtype="reset"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5圖像按鈕圖像按鈕以一幅圖片作為表單的提交按鈕圖像按鈕能夠響應(yīng)單擊事件，自動提交表單信息，功能與提交按鈕十分相似圖像按鈕用圖像來代替提交按鈕上的文本標(biāo)題，因此又被稱為圖像提交按鈕表單與控件-輸入控件

2.5創(chuàng)建圖像按鈕的方法為：<Inputtype="image"src=圖像的URL其他屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5表單與控件-輸入控件

2.5圖像按鈕的示例單選按鈕單選按鈕是一個(gè)小的空心圓環(huán)，用以提供在一組相互排斥的選項(xiàng)列表中一次只能選擇一項(xiàng)的機(jī)制表單與控件-輸入控件

2.5創(chuàng)建單選按鈕的方法為：<Inputtype="radio"其他屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5復(fù)選框復(fù)選框允許用戶在一組選項(xiàng)列表中同時(shí)選擇多個(gè)選項(xiàng)

表單與控件-輸入控件

2.5創(chuàng)建復(fù)選框的方法為：<Inputtype="checkbox"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5表單與控件-輸入控件

2.5單選按鈕、復(fù)選框的示例文件域文件域主要用于通過表單選擇并上傳文件文件域由一個(gè)文本框和一個(gè)【瀏覽…】按鈕組成，用戶既可將上傳文件的路徑與文件名直接輸入到文本框中，也可通過點(diǎn)擊【瀏覽…】按鈕，打開選擇文件對話框并從系統(tǒng)資源中查找要上傳的文件在Email中上傳附件、上傳圖片、發(fā)送文件等應(yīng)用中，經(jīng)常會見到文件域控件

表單與控件-輸入控件

2.5創(chuàng)建文件域的方法為：<Inputtype="file"屬性=屬性值……[事件=事件處理程序]/>表單與控件-輸入控件

2.5表單與控件-輸入控件

2.5文件域的示例文本域控件除了單行文本框，HTML表單還提供了能夠輸入多行文本的文本域控件定義文本域控件的標(biāo)簽對為<textarea>與</textarea>表單與控件-文本域2.5文本域控件定義格式如下：<form屬性關(guān)鍵字=屬性值……><textarea屬性關(guān)鍵字=屬性值……>……<!--文本域的初始內(nèi)容--></textarea></form>

表單與控件-文本域2.5文本域的常用屬性屬性屬性取值功能描述name名稱字符串為文本域指定名稱rows整數(shù)值n指定文本域當(dāng)前顯示的高度(行數(shù))cols整數(shù)值n指定文本域當(dāng)前顯示的寬度(列數(shù))wrapoff、virtual、physical設(shè)定文本域內(nèi)容的折行方式disableddisabled設(shè)置文本域?yàn)椴豢捎脿顟B(tài)(文本域控件失去焦點(diǎn))readonlyreadonly設(shè)置文本域?yàn)橹蛔x類型(內(nèi)容不允許編輯與修改)表單與控件-文本域2.5文本域應(yīng)的示例表單與控件-文本域2.5選擇列表控件選擇列表控件又稱為下拉列表控件，它提供了從眾多候選項(xiàng)目中選擇一個(gè)或多個(gè)選項(xiàng)的機(jī)制選擇列表由<select></select>標(biāo)簽對創(chuàng)建select元素中包含多個(gè)<option>標(biāo)簽，每個(gè)option元素定義一個(gè)可用的選擇列表表項(xiàng)表單與控件-選擇列表2.5選擇列表的通用定義格式如下：<select屬性=屬性值……><optionvalue=選項(xiàng)值1>選項(xiàng)標(biāo)題1</option>……<optionvalue=選項(xiàng)值n>選項(xiàng)標(biāo)題n</option></select>表單與控件-選擇列表2.5<select>標(biāo)簽的常用屬性表單與控件-選擇列表2.5屬性屬性取值功能描述name名稱字符串為選擇列表控件指定名稱multiplemultiple設(shè)置選擇列表的選擇特性為允許多重選擇size整數(shù)值n指定選擇列表可用選項(xiàng)的最大數(shù)目(默認(rèn)值為1)disableddisabled設(shè)置選擇列表為不可用狀態(tài)(沒有焦點(diǎn))<option>標(biāo)簽的常用屬性表單與控件-選擇列表2.5屬性屬性取值功能描述label文本標(biāo)識為<optgroup>標(biāo)簽的使用設(shè)定一個(gè)標(biāo)識selectedselected或不賦值指定當(dāng)前選項(xiàng)的初始狀態(tài)為選中狀態(tài)value選項(xiàng)的返回值指定選項(xiàng)提交給服務(wù)器時(shí)的值disableddisabled設(shè)置當(dāng)前選項(xiàng)為不可用狀態(tài)(沒有焦點(diǎn))選擇列表示例表單與控件-選擇列表2.5帶有選項(xiàng)分組功能的選擇列表示例分組標(biāo)簽

<fieldset>標(biāo)簽與<legend>標(biāo)簽共同用來對表單中的信息進(jìn)行歸類分組表單與控件-分組標(biāo)簽2.5表單分組的定義格式為：<form><fieldset><legend>標(biāo)題</legend>……<!--分組內(nèi)的表單控件與元素--></fieldset>……<fieldset><legend>標(biāo)題</legend>……<!—分組內(nèi)的表單控件與元素--></fieldset><form>表單與控件-選擇列表2.5分組標(biāo)簽fieldset(字段集)標(biāo)簽用來對表單信息進(jìn)行分組，并在分組的文字與控件四周畫出一個(gè)矩形邊框，這與窗口框架極為類似一個(gè)表單可以定義多個(gè)字段集元素<fieldset>標(biāo)簽可以嵌套使用

表單與控件-分組標(biāo)簽2.5分組標(biāo)簽

Legend標(biāo)簽用來為

fieldset

元素定義文字標(biāo)題默認(rèn)情況下，標(biāo)題插入在fieldset邊框的左上角<legend>標(biāo)簽必需是<fieldset>標(biāo)簽的第一個(gè)標(biāo)簽

表單與控件-分組標(biāo)簽2.5表單分組示例表單與控件-選擇列表2.5框架定義框架(Frame)是用來分割瀏覽器窗口空間的工具，可以將一個(gè)瀏覽器窗口劃分為若干個(gè)小窗口，每個(gè)小窗口內(nèi)單獨(dú)打開一個(gè)網(wǎng)頁，各個(gè)框架中的網(wǎng)頁相互獨(dú)立，從而獲得在同一個(gè)瀏覽器窗口中同時(shí)顯示不同網(wǎng)頁的效果框架還可以非常方便的完成導(dǎo)航工作框架布局2.6框架布局2.6框架集定義框架集(Frameset)就是分布在瀏覽器窗口中的一組框架的集合框架集一般直接定義在<head>標(biāo)簽后框架集可以嵌套使用框架布局2.6框架文檔一般將定義框架集與框架的代碼放在一個(gè)獨(dú)立的HTML文檔內(nèi)，稱為框架文檔框架文檔不再包含<body>標(biāo)簽，而以frameset標(biāo)簽取代之，用來包含框架的結(jié)構(gòu)劃分信息，指示在每個(gè)框架中引用哪類網(wǎng)頁文檔框架布局2.6<html><head><title>HTML文檔標(biāo)題</title></head><frameset屬性=屬性值……><framesrc=URL其他屬性=屬性值……>……<framesrc=URL其他屬性=屬性值

溫馨提示

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

評論

0/150

提交評論