商務網站設計與開發（HTML5、ASP.NET版）課件全套 溫浩宇 第01-18章 Web技術概述- 進一步的學習_第1頁
商務網站設計與開發（HTML5、ASP.NET版）課件全套 溫浩宇 第01-18章 Web技術概述- 進一步的學習_第2頁
商務網站設計與開發（HTML5、ASP.NET版）課件全套 溫浩宇 第01-18章 Web技術概述- 進一步的學習_第3頁
商務網站設計與開發（HTML5、ASP.NET版）課件全套 溫浩宇 第01-18章 Web技術概述- 進一步的學習_第4頁
商務網站設計與開發（HTML5、ASP.NET版）課件全套 溫浩宇 第01-18章 Web技術概述- 進一步的學習_第5頁
已閱讀5頁，還剩509頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

《商務網站設計與開發》第1章Web技術概述內容1.1Web系統簡介1.2B/S結構和Web應用程序1.3HTML簡介1.4HTML文檔結構1.5思考題1.1Web系統簡介HTML的產生瑞士日內瓦的歐洲核子研究中心的軟件工程師TimBerners-Lee編寫一個軟件程序，利用一系列標簽描述出信息的內容和表現形式，再通過鏈接把這些文件串起來，讓世界各地的人能夠輕松共享信息。TimBerners-Lee給這種系統命名為“WorldWideWeb”，1990年11月，第一個Web服務器nxoc01.cern.ch開始運行。瀏覽器的產生1993年美國伊利諾州的伊利諾大學的MarcAndreessen及其同事開發出了第一個支持圖文并茂展示網頁的Web瀏覽器——Mosaic瀏覽器，并成立了網景公司（NetscapeCommunicationCorp.）。W3C組織1994年10月TimBerners-Lee聯合CERN、DARPA和歐盟成立了Web的核心技術機構——W3C（WorldWideWebConsortium，萬維網聯盟）。1.1Web系統簡介HTMLWeb通過超文本標記語言（HyperTextMarkupLanguage，簡稱HTML）實現信息與信息的連接；URI通過統一資源標識符（UniformResourceIdentifier,簡稱URI）實現全球信息的精確定位；HTTP通過超文本傳輸協議（HyperTextTransferProtocol，簡稱HTTP）實現信息在互聯網中的傳輸。1.2B/S結構和Web應用程序1.2B/S結構和Web應用程序B/S的系統結構圖1.2B/S結構和Web應用程序（1）硬件環境不同傳統的C/S建立在小范圍里的網絡環境；B/S適合建立在廣域網之上的。（2）對安全要求不同傳統的C/S一般面向相對固定的用戶群，對信息安全的控制能力很強；B/S通常建立在廣域網之上，對安全的控制能力相對弱。（3）系統架構不同傳統的C/S結構可以更加注重流程，可以對權限多層次校驗；B/S系統所依托的HTTP協議缺少對流程、狀態等方面的管理。（4）系統維護不同傳統的C/S結構意味著在用戶的計算機中必須安裝特定的客戶端軟件；B/S結構的維護和升級都發生在服務器端。（5）處理問題不同傳統的C/S結構適合對大量數據進行批量的增、刪、改操作；B/S結構適合面向不同的用戶群。（6）用戶接口不同傳統的C/S結構客戶端軟件對操作系統有特定的要求，跨平臺性較差；B/S的前臺建立在瀏覽器上。（7）投入成本構成不同傳統的C/S結構的軟件隨著應用范圍的擴大，投資會連綿不絕；B/S結構軟件一般只有初期一次性投入成本，系統總擁有成本（TCO）較低。（8）系統規模的擴展性不同傳統的C/S結構軟件來講無法適應企業快速擴張的特點；而B/S結構軟件通過一次安裝，以后只需設立賬號、培訓即可。1.3HTML簡介與SGML的關系HTML是使用SGML定義的一個描述性語言，或可說HTML是SGML的一個應用。HTML的語法簡單HTML的格式和語法非常簡單，只是由文字及標簽組合而成，任何文字編輯器都可以編輯HTML文件，只要能將文件另存成ASCII純文字格式即可。XHTML與DHTML在開發技術的選型中，通常會選擇傳統HTML的擴展技術，包括可擴展超文本標記語言（eXtensibleHyperTextMarkupLanguage，簡稱為XHTML）和動態HTML（DynamicHTML，簡稱為DHTML）。廣義的HTML技術一是HTML（或XHTML），其中定義了各種頁面元素對象；二是CSS，CSS中的屬性也可被動態操縱從而獲得動態的效果；三是客戶端腳本（包括JavaScript等），用以編寫程序操縱Web頁上的HTML對象和CSS。1.4HTML文檔結構<html><head><title>網頁制作教學</title></head><body>HelloWorld!</body></html>1.4HTML文檔結構在HTML中任何標簽皆由”<”及”>”所圍住，如<P>，標簽名與小于號之間不能留有空白字符。在起始標簽之標簽名前加上符號”/”便是其終結標簽，如</font>。標簽字母大小寫皆可。由開始標簽和終結標簽所構成的對象可以稱為HTML元素（或HTML對象）。元素帶有參數，也稱為元素的屬性。參數只可加于起始標簽中。熟悉面向對象程序設計的開發人員更習慣將它們稱為“HTML對象和屬性”。通常在一個完整的HTML文件中，html元素是HTML文檔的根元素，其中包含二個部份：頭部元素和體部元素，它們分別被包含在<head>標簽和<body>標簽中。1.5思考題（1）HTML與W3C組織分別是如何產生的？（2）C/S體系結構和B/S體系結構有何不同之處？《商務網站設計與開發》溫浩宇西安電子科技大學第2章HTML元素內容2.1文本元素2.2群組元素2.3超鏈接元素2.4表格元素2.5內嵌元素2.6結構元素2.7編輯元素2.8表單元素2.9頭部元素2.10HTML中的顏色設置2.11絕對路徑與相對路徑2.12思考題2.1文本元素在HTML中，文本元素（Text-levelsemantics）用來定義網頁中文本內容和語義，增加文字的易讀性。文本元素主要包括<a>、<em>、<strong>、<small>、<s>、<cite>、<q>、<dfn>、<abbr>、<time>、<code>、<var>、<samp>、<kbd>、<sub>、<sup>、<i>、<b>、<u>、<mark>、<ruby>、<rb>、<rt>、<rtc>、<rp>、<bdi>、<bdo>、<span>、<br>、<wbr>等。雖然文本的顯示樣式通常是由CSS來定義，但文本元素的語義也會影響文本的顯示風格，比如上標（sup）、下標（sub）等文本。2.1文本元素<html><body><em>em定義強調文本，顯示為斜體字</em><br><strong>strong定義強調文本，顯示為粗體</strong><br><small>small定義小號文本</small><br><s>s定義加刪除線的文本</s><br>sub定義下標文本，比如a<sub>2</sub><br>sup定義上標文本，比如a<sup>2</sup><br><i>i定義斜體文本</i><br><b>b定義粗體文本</b><br><u>u定義下劃線文本</u><br><mark>mark定義有加亮記號的文本</mark></body></html>2.1文本元素<html><body><ruby>中<rt>zhong</rt>文<rt>wen</rt></ruby></body></html>2.2群組元素在HTML中，群組元素（Groupingcontent）用來定義網頁中具有關聯性的內容和語義。群組元素主要包括<p>、<hr>、<pre>、<blockquote>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<figure>、<figcaption>、<div>、<main>等。與文本元素一樣，群組元素的語義也會影響顯示風格，比如多個列表項元素在顯示時通常會在前面加上數字序號或圖形符號。2.2群組元素<html><body><p>這是段落。</p><p>hr標簽定義水平線：</p><hr/><p>pre標簽很適合顯示計算機代碼：</p><pre>fori=1to10printinexti</pre><blockquote>段落前面有縮進……</blockquote></body></html>2.2群組元素<html><body><ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ul><li>咖啡</li><li>茶<ul><li>紅茶</li><li>綠茶</li></ul></li><li>牛奶</li></ul></body></html>2.2群組元素<html><body><h2>一個定義列表：</h2><dl><dt>計算機</dt><dd>用來計算的儀器......</dd><dt>顯示器</dt><dd>以視覺方式顯示信息的裝置......</dd></dl></body></html>2.2群組元素div元素<div>元素用來將頁面內容分割成各個獨立的部分。在每個<div>元素中，不僅可以包含文本內容，也可以包含圖片、表單等其他內容。在默認的情況下，<div>元素所包含的內容，將在新的一行顯示。屬性描述dir設置文本顯示方向lang設置語言class類屬性style設置級聯樣式title標題屬性nowrap取消自動換行id標記屬性2.2群組元素<divclass=”定義的類的名稱”>……</div><divid=”定義的名稱”>……</div><divstyle=”定義的樣式”>……</div><divnowrap=”nowrap”>……</div><divtitle=”標題內容”>……</div><divid="header">...</div><divid="footer">...</div>2.3超鏈接元素網頁之間的鏈接（Links）能使瀏覽者從一個頁面跳轉到另一個頁面，實現文檔互聯、網站互聯。超鏈接就像整個網站的神經細胞，把各種信息有機地結合在一起。在HTML中，超鏈接可以通過<a>元素和嵌套在<map>元素內部的<area>元素來實現。關于<area>元素將在嵌入式元素中展開描述，本節將主要討論<a>元素。2.3超鏈接元素屬性描述href鏈接的目標URL。hreflang規定目標URL的基準語言。僅在href屬性存在時使用。media規定目標URL的媒介類型。默認值：all。僅在href屬性存在時使用。rel規定當前文檔與目標URL之間的關系。僅在href屬性存在時使用。target在何處打開目標URL。僅在href屬性存在時使用。type規定目標URL的MIME類型。僅在href屬性存在時使用。注：MIME=MultipurposeInternetMailExtensions。2.3超鏈接元素文本鏈接是最常見的一種超鏈接，它通過網頁中的文件和其他文件進行鏈接，語法如下：<ahref="鏈接的URL地址"target=目標窗口的打開方式>鏈接元素</a> 鏈接元素可以是文字，也可以是圖片或其他頁面元素。href屬性是<a>元素最常用的屬性，用來指定鏈接目標的URL地址。鏈接地址可以是絕對地址，也可以是相對地址。例如鏈接到W3C官方網站，并打開新的瀏覽器顯示該網站，實現代碼如下：<ahref=”/”target=_blank>W3C</a>2.3超鏈接元素target屬性的取值及功能說明target值目標窗口的打開方式_parent在上一級窗口打開，常在分幀的框架頁面中使用。_blank新建一個窗口打開。_self在同一窗口打開，與默認設置相同。_top在瀏覽器的整個窗口打開，將會忽略所有的框架結構。2.3超鏈接元素書簽鏈接也是常用的一種超鏈接，用來在創建的網頁內容特別多時對內容進行鏈接。書簽可以與所鏈接文字在同一頁面，也可以在不同的頁面。建立書簽的語法如下：<aname=”書簽名稱”>文字</a>在代碼的前面增加鏈接文字和鏈接地址就能夠實現同頁面的書簽鏈接。語法如下：<ahref=”#書簽的名稱”>鏈接的文字</a>其中，#代表這是書簽的鏈接地址，書簽的名稱則是上面定義的書簽名。如果想鏈接到不同的頁面需要在鏈接的地址前增加文件所在的位置。語法如下：<ahref=”鏈接的URL地址#書簽名稱”>鏈接的文字</a>2.4表格元素在HTML5中使用<table>、<caption>、<tr>、<td>、<th>、<colgroup>、<col>、<tbody>、<thead>、<tfoot>等表格元素構建和展示表格式數據（Tabulardata）。<table>元素可以用來定義表格，包括表格的標題、表頭及單元格內容等。作為<table>元素的子元素，表格行用<tr>定義，表頭元素用<th>元素定義（表頭通常顯示成黑體），單元格內容用<td>元素定義。一個<table>元素可包含一個或多個<tr>元素，一個<tr>元素又可以包含一個或多個<th>、<td>元素。2.4表格元素標簽語義table定義表格caption定義表格標題tr定義表格中的行td定義表格中的單元th定義表格中的表頭單元格colgroup定義表格列的組。通過此標簽，您可以對列進行組合，以便格式化。col為表格中的一個或多個列定義屬性值。tbody定義表格主體。thead定義表格的表頭。tfoot定義表格的頁腳。2.4表格元素<html><body><tableborder="2"style="width:200px"><tr><td>a1</td><td>b1</td><td>c1</td></tr><tr><td>a2</td><td>b2</td><td>c2</td></tr></table></body></html>2.4表格元素<tableborder="1"><caption>跨兩列的單元格</caption><tr><th>姓名</th><thcolspan="2">電話</th></tr><tr><td>張小明</td><td>lt;/td><td>325330425</td></tr></table>……2.5內嵌元素除了文字信息，網頁中還可以呈現圖形、圖像、音頻、視頻等多媒體信息。為了豐富網頁的表現方式，HTML5允許以內嵌元素(Embeddedcontent)的方式在網頁中嵌入圖形、圖像、視頻、音頻以及其他可操作的對象。相關的元素包括<img>、<iframe>、<embed>、<object>、<param>、<video>、<audio>、<source>、<track>、<map>、<area>、<MathML>系列和<SVG>系列。2.5內嵌元素元素語義img定義HTML頁面中的圖像。iframe定義包含另一個文檔的行內框架。embed定義嵌入的內容，比如插件，元素必須有src屬性。object定義一個嵌入的對象。param為包含它的object元素提供參數。video定義視頻，如電影片段或其他視頻流。audio定義聲音，如音樂或其他音頻流。source為媒介元素（如<video>和<audio>）定義媒介資源。track為video等媒介指定外部字幕。map定義客戶端的圖像映射，圖像映射是帶有可點擊區域的圖像。area定義圖像映射內部的區域。MathML在文檔內使用<math>...</math>標簽應用各種MathML元素。SVG在文檔中定義可縮放矢量圖形。2.5內嵌元素HTML提供了<img>元素用來描述圖像信息的內容和表現形式，但圖像的數據并不會直接插入HTML文檔中，<img>元素的作用是讓HTML文檔在展示時給圖像留出一個位置。圖像文件的地址由<img>元素的src屬性指定，當瀏覽器無法下載圖像文件時，則在相應的位置顯示一些文字，文字的內容由alt屬性指定。<imgsrc="url"alt="some_text"/>圖像的大小可以在元素中使用width和height屬性給出，如果不設置這兩個屬性，則將默認為按照圖像的實際尺寸顯示。<imgsrc="pulpit.jpg"alt="Pulpitrock"width="304"height="228"/>2.5內嵌元素GIF支持最多256色的圖像。雖然GIF的顏色不夠豐富，但它支持動畫和透明色，在網頁中常常被用來設計按鈕、菜單等較小的圖像。JPG可以支持高分辨率、顏色豐富的圖像。由于JPG具有很好的壓縮比，非常適合在網頁中展現照片。當然，在使用JPG格式處理圖像時，壓縮比越大，圖片的質量就越差。PNG可以支持顏色豐富的圖像，同時還可支持alpha濾鏡的透明方式。雖然PNG不支持動畫效果，但與GIF一樣適合作為較小的圖像的顯示方式。2.5內嵌元素<img>元素的usemap屬性可以指定可點擊區域的圖像映射元素，而圖像映射元素本身的設置是在<map>元素中，其中的<area>元素則給出了具體的區域和超鏈接的位置，功能類似于<a>元素。下列代碼給出了圖像映射的方式，即在一個圖像中設置了三個不同形狀的區域，當用戶點擊這些區域時會產生如同超鏈接的效果。2.5內嵌元素<html><body><imgsrc="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"/><mapname="planetmap"><areashape="rect"coords="0,0,82,126"href="sun.htm"alt="Sun"/><areashape="circle"coords="90,58,3"href="mercur.htm"alt="Mercury"/><areashape="circle"coords="124,58,8"href="venus.htm"alt="Venus"/></map></body></html>2.5內嵌元素在早期的網頁設計中，開發者經常使用<frameset>框架標記把瀏覽器窗口劃分成幾個大小不同的子窗口，每個子窗口顯示不同的頁面，也可以在同一時間瀏覽不同的頁面。定義子窗口使用元素<frame>。HTML5已經不再支持<frameset>與<frame>元素，但仍然支持創建包含文檔的內聯框架的<iframe>元素。元素語義HTML支持版本<frameset>定義框架集4<frame>定義框架集的子窗口4<iframe>創建包含另一個文檔的內聯（inline）框架4、52.5內嵌元素<iframe>元素可以構成“浮動”的框架，可以在一個HTML文檔的一個特定區域中展示另一個HTML文檔。屬性功能height定義內聯框架的高度name定義內聯框架的名稱sandbox使內聯框架可以包含其他的一些內容，例如表格，腳本等seamless布爾型屬性，使內聯框架看起來像包含它的文件的一部分（沒有邊框和滾動條等）src設置內聯框架所引用的地址srcdoc定義在內聯框架中顯示的HTML內容，與sandbox和seamless一起使用width定義內聯框架的寬度2.5內嵌元素<html><body><iframesrc="/"name="iframe_a"style="width:618px"></iframe><p><ahref=""target="iframe_a">百度</a></p><p><b>注意：</b>因為超鏈接的目標表明為iframe，因此當點擊超鏈接時會在iframe中顯示百度頁面</p></body></html>2.5內嵌元素根據HTML5的規范，在網頁上呈現的視頻和音頻需要符合一定的標準，否則就通過插件（如activeX）來呈現。<audio>元素用來定義聲音，如音樂或其他音頻流。<audio>與</audio>之間插入的內容是供不支持audio元素的瀏覽器顯示的。屬性值描述autoplayautoplay如果出現該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現該屬性，則每當音頻結束時重新開始播放。preloadpreload如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。2.5內嵌元素<html><body><audiosrc="music.mp3"controls="controls">

你的瀏覽器不支持音頻元素。</audio></body></html>2.5內嵌元素<video>元素用來定義視頻，如電影片段或其他視頻流。<video>與</video>之間插入的內容是供不支持video元素的瀏覽器顯示的。屬性值描述autoplayautoplay如果出現該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現該屬性，則向用戶顯示控件，比如播放按鈕。heightpixels設置視頻播放器的高度。looploop如果出現該屬性，則當媒介文件完成播放后再次開始播放。preloadpreload如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的視頻的URL。widthpixels設置視頻播放器的寬度。2.5內嵌元素<html><body><videowidth="320"height="240"src="video.mp4"controls="controls">

你的瀏覽器不支持視頻元素。</video></body></html>2.5內嵌元素<math><mrow><mi>A</mi><mo>=</mo><mfencedopen="["close="]"><mtable><mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd></mtr>……

</mtable></mfenced></mrow></math>MathML中的一系列元素可以幫助在HTML文檔內顯示數學公式，并且這些元素本身也具有相應的語義。注意：并不是所有的瀏覽器都能顯示MathML標簽，因此在網站中使用這個系列的元素時需要告知所支持的瀏覽器及版本情況。2.5內嵌元素根據HTML5的規范，<svg>和<canvas>元素都可以完成在網頁中的繪圖功能。與<canvas>元素不同的是，SVG是一種使用XML描述2D圖形的語言，SVG中所描述的2D圖形元素是以矢量圖形對象的方式存在，不依賴分辨率，可以附加JavaScript事件處理器。可以通過JavaScript來修改圖形對象的屬性，瀏覽器會自動重繪圖形。注意，一些瀏覽器需要插件才能支持SVG。2.5內嵌元素<html><body><svgxmlns="/2000/svg"version="1.1"height="190"><polygonpoints="100,1040,180190,6010,60160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg></body></html>2.5內嵌元素HTML本身的元素是有限的，特別是在HTML5之前的版本，開發者為了在HTML頁面中實現多媒體應用和更復雜的客戶端操作，就需要在HTML文檔中增加各種插件對象以擴展文檔的表現能力。自從1996年NetscapeNavigator2.0引入了對QuickTime插件的支持，插件這種開發方式為其它廠商擴展Web客戶端的信息展現方式開辟了一條自由之路。微軟公司迅速在IE3.0瀏覽器中增加了對ActiveX的插件對象支持，RealNetworks公司的Realplayer插件也很快在Netscape和IE瀏覽器中取得了成功。然而，隨著HTML5標準的制定與應用，通過使用新技術（包括音頻元素、視頻元素、矢量圖形元素、應用緩存）讓瀏覽器直接支持相關的多媒體或交互應用，這種技術趨勢必然導致Flash等很多傳統的插件技術被新的技術標準取代。2.5內嵌元素Java小應用程序Java小應用程序（JavaApplet）憑借Java本身的跨平臺性、安全性等優點，可以實現圖形繪制、字體和顏色控制、動畫和聲音的播放、人機交互及遠程數據訪問等功能。ActiveXActiveX是Microsoft對于一系列面向對象程序技術和工具的稱呼，其中主要的技術是組件對象模型（ComponentObjectModel，簡稱為COM）。ActiveX只能在Windows環境下運行。FlashFlash是一種基于矢量圖像的交互式多媒體技術。矢量圖像也稱為面向對象的圖像，它使用稱為矢量的直線和曲線來描述圖像。2.6結構元素HTML5中支持的多種結構元素來呈現文檔中的各節（Sections）內容，包括HTML4中已經定義的<body>、<address>、<h1>、<h2>、<h3>、<h4>、<h5>和<h6>元素，以及HTML5中新定義的<article>、<section>、<nav>、<aside>、<header>和<footer>元素。元素語義body定義文檔的主體。h1到h6定義標題1到標題6。address定義文檔作者或擁有者的聯系信息。article定義外部的內容。section定義文檔中的節。如章節、頁眉、頁腳或文檔中的其他部分。nav定義導航鏈接的部分。aside定義article以外的內容，且與article的內容相關。header定義文檔的頁眉。footer定義文檔的頁腳。2.6結構元素<html><body><h1>這是標題1</h1><h2>這是標題2</h2><h3>這是標題3</h3><h4>這是標題4</h4><h5>這是標題5</h5><h6>這是標題6</h6></body></html>2.6結構元素在HTML5中新增了<article>、<section>、<nav>、<aside>、<header>、<footer>等新元素，而這些元素的作用主要體現在語義上，主要目的是增加文檔的可讀性和搜索引擎優化，在內容展示方面并沒有特別的改變。為了方便理解，這里將這些結構元素和word文檔結構進行類比：<header>相當于頁眉，<footer>相當于頁腳，<article>相當于正文，<section>是正文中包含的各個部分（可以理解為段落或章節），<aside>是正文的注解，而<nav>則是網站中經常使用的導航欄。2.7編輯元素HTML5中的編輯元素（Edits）包括<ins>和<del>，它們配合可以描述對文檔的更新和修正。元素語義HTML支持版本ins定義文檔的其余部分之外的插入文本。4、5del定義文檔中已刪除的文本。4、52.7編輯元素<html><body><insdatetime="2016-03-1600:00Z"><p>我喜歡吃蘋果。</p></ins><deldatetime="2015-10-11T01:25-07:00"><p>我喜歡吃梨。</p></del></body></html>2.8表單元素<form>元素在頁面中產生表單，表單提供了用戶與Web服務器的信息交互功能，是Web技術的要素之一。表單接受用戶信息后，把信息提供給服務器，然后由服務器端的應用程序處理信息，把處理結果返給用戶并向用戶顯示。表單的定義元素是<form>。表單中可以包含<form>、<input>、<label>、<button>、<select>、<datalist>、<optgroup>、<option>、<textarea>、<keygen>、<output>、<progress>、<meter>、<fieldset>、<legend>等子元素。2.8表單元素元素語義HTML支持版本form定義供用戶輸入的HTML表單。4、5input定義輸入控件4、5label為input元素定義元素，響應鼠標點擊。5button定義按鈕。4、5select定義選擇列表（下拉列表）。4、5datalist與input元素配合使用，定義input可能的值。5optgroup定義選擇列表中相關選項的組合4、5option定義選擇列表中的選項4、5textarea定義多行的文本輸入控件4、5keygen定義用于表單的密鑰對生成器字段。5output定義不同類型的輸出，比如腳本的輸出。5progress定義運行中的進度。5meter定義度量衡。5fieldset將表單內的相關元素分組。4、5legend定義fieldset元素的其余內容的標題。4、52.8表單元素<form>元素的4個主要屬性分別是action、method、enctype、target。例如下面的代碼：<formmethod="post"action="URL"enctype="text/plain"target="_self"><form>action屬性該屬性值指定了提交表單時對應的服務器程序地址。method屬性method屬性指定表單中的輸入數據的傳輸方法，它的取值是get或post。enctype屬性enctype屬性指定表單中輸入數據的編碼方法。target屬性target屬性用來指定目標窗口的打開方式。2.8表單元素input元素定義輸入控件，用來搜集用戶信息。屬性功能name定義輸入控件的名稱type指定控件的類型，默認值是textmaxlength規定控件允許輸入的字符的最大長度minlength規定控件允許輸入的字符的最小長度size規定控件輸入域的大小readonly規定用戶是否可以修改其中的值。required規定是否是必填信息multiple規定是否可以填寫多個值pattern定義用戶輸入的字符串模板max規定可填寫的最大值min規定可填寫的最小值step規定數據的步長list列出輸入的選項placeholder給出文本框的占位字符串，可實現文本框水印效果checked提供復選框和單選按鈕的初始狀態value提供控件輸入域的初始值src定義以提交按鈕形式顯示的圖像的URL2.8表單元素<input>元素的屬性type的取值及意義值功能hidden隱藏的輸入字段，把表單中的一個或多個組件隱藏起來text單行的輸入文本框，接受任何形式的輸入，默認寬度為20個字符tel電話號碼輸入url網絡地址URL輸入email電子郵件地址輸入password密碼字段，該字段中的字符用*替代date日期輸入time時間輸入number數字輸入range范圍輸入color顏色輸入checkbox復選框，提供多項選擇radio單選按鈕，提供單項選擇file文件上傳submit提交按鈕，單擊提交按鈕會把表單數據發送到服務器image圖像形式的提交按鈕，單擊圖像，發送表單信息提交服務器reset重置按鈕，把表單中的所有數據恢復為默認值button可點擊按鈕，可用于創建提交按鈕、復位按鈕和普通按鈕2.8表單元素<formmethod="post"action="travel.jsp">

請輸入姓名：<inputtype="text"name="textname"size="12"maxlength="6"/><br/>

請輸入密碼：<inputtype="password"name="passname"size="12"maxlength="6"/><br/>

上傳的文件：<inputtype="file"name="filename"size="12"maxlength="6"/><br/>

請選擇旅游城市，可多選<inputtype="checkbox"name="復選框1">北京……

請選擇付款方式

<inputtype="radio"name="支付方式"id="card“

checked="checked"><labelfor="card">信用卡</label>……<br/>

出發日期<inputtype="date"/>

出發時間<inputtype="time"/>

<br/><inputtype="reset"name="復位按鈕"value="復位"><inputtype="submit"name="提交按鈕"value="確定">

<inputtype="button"name="close"value="關閉當前窗口"onclick="window.close()"></form>2.8表單元素<select>元素定義下拉式列表框和滾動式列表框。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表。在將<select>表單數據提交給服務器時，同時還包括了<select>元素的name屬性值。屬性功能disabled規定禁用該下拉列表，被禁用的下拉列表既不可用，也不可點擊。可以使用JavaScript來清除disabled屬性，以使下拉列表變為可用狀態multiple規定可選擇多個選項name規定下拉列表的名稱size規定下拉列表中可見選項的數目2.8表單元素<select>元素的語法如下所示:<selectname="下拉列表名稱"size="下拉列表顯示的條數"><optionvalue="控件的初始值"selected="selected">選項描述</option> <optionvalue="控件的初始值">選項描述</option></select>使用<select>元素定義下拉列表框時，由<option>元素定義列表框的各個選項。<option>元素位于<select>元素內部。一個<select>元素可以包含多個<option>元素。<option>元素要與<select>元素一起使用，否則元素是無意的。2.8表單元素<html><body><formmethod="post"action="travel.jsp"><inputlist="cars"/><datalistid="cars"><optionvalue="BMW"label="BMW"><optionvalue="Ford"label="Ford"><optionvalue="Volvo"label="Volvo"></datalist></form></body></html>2.8表單元素<progress>和<meter>是在HTML5中新增的元素。<progress>元素可以用來顯示正在執行的狀態或進度情況，配合JavaScript程序，可以控制<progress>元素中的value屬性，以精確地顯示進展情況。<meter>元素可以以直方圖的形式顯示值的大小。為了實現直方圖的顯示，除了需要通過value屬性給出具體的數值，還需要通過min和max屬性給出該直方圖的最小和最大值，以便可以按比例進行顯示。min和max屬性的缺省值為0和1。2.8表單元素<html><body>

下載進度：<progressvalue="22"max="100"></progress><p><progress/></p><p>顯示度量值：</p><metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter></body></html>2.8表單元素<fieldset>元素可以將表單中的一部分內容組合起來，生成一組相關表單的字段。當一組表單元素作為子元素放到<fieldset>元素內時，瀏覽器通常會以加上邊框的方式進行顯示。作為<fieldset>元素的第一個子元素，<legend>元素可以為<fieldset>元素加上標題。2.8表單元素<html><body><fieldset><legend>健康信息：</legend><form><label>身高：<inputtype="text"/></label><label>體重：<inputtype="text"/></label></form></fieldset></body></html>2.8表單元素<script>元素中可以嵌入腳本程序，HTML5中腳本程序默認是用JavaScript語言書寫；當瀏覽器不支持腳本程序的執行，則會顯示<noscript>元素中的內容。<template>元素中可以定義前端模板，可以通過JavaScript代碼進行調用；<canvas>元素用來繪制2D圖形，這與SVG的作用相似。不同的是，<canvas>元素的繪圖機制依賴于分辨率、不支持事件處理器，但可以按照像素重新生成。<canvas>元素也需要JavaScript代碼的支持。2.8表單元素元素語義HTML支持版本script定義客戶端腳本。4、5noscript定義在腳本未被執行時的替代內容（文本）。4、5template定義模板元素。5canvas定義圖形。52.9頭部元素頭部元素<head>中可以包含多個元素用來描述腳本、鏈接樣式表、提供元信息等，這些信息雖然不能直接在頁面上展示，但對于文檔的說明、可讀性和搜索引擎優化等方面至關重要。<head>元素的子元素包括<title>、<base>、<link>、<meta>和<style>等。2.9頭部元素元素語義HTML支持版本head所有頭部元素的容器。4、5title定義了HTML文檔的標題4、5base描述了頁面中所有超鏈接的默認超鏈接基地址（用href屬性指定）和默認目標（用target屬性指定）4、5link定義HTML文檔和外部資源的關系4、5meta給出HTML文檔的元數據4、5style定義樣式定義4、52.9頭部元素<html><head><title>Titleofthedocument</title><basehref="/htm/"/><basetarget="_blank"/></head><body>Thecontentofthedocument</body></html>2.9頭部元素<link>元素用來定義HTML文檔和外部資源的關系，通常用來聲明HTML所引用的CSS文檔。例如下面的代碼中鏈接了一個名為mystyle.css的文檔：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>除了鏈接，在HTML中還可以直接嵌入CSS樣式代碼。下例中使用<style>元素來完成這一任務：<head><styletype="text/css">body{background-color:yellow;}p{color:blue;}</style></head>2.9頭部元素<meta>元素可以給出HTML文檔的元數據（metadata）。元數據不會在網頁中顯示，但會被瀏覽器、搜索引擎等程序解析和應用。在下面的代碼中，通過元數據給出了頁面的簡述、關鍵詞、作者、字符集等信息：<head><metaname="description"content="FreeWebtutorials"/><metaname="keywords"content="HTML,CSS,XML,JavaScript"/><metaname="author"content="HegeRefsnes"/></head><meta>元素所給出的網頁元數據對于搜索引擎判斷網頁類型、內容都很有幫助。2.10HTML中的顏色設置HTML中的顏色是由紅（Red）、綠（Green）、藍（Blue）三種顏色組合而成的RGB值來表示。RGB中三個顏色的值分別都可以從0（十六進制記作#00）到255（十六進制記作#FF），所以可以組合出16777216（256x256x256）種顏色。比如，紅色為#FF0000，黃色為#FFFF00，黑色為#000000，白色為#FFFFFF。在HTML標準中，有許多種顏色還可以直接用顏色名稱表示，比如aqua、black、blue、gray、green、purple、red、white和yellow等。2.10HTML中的顏色設置<html><body><pstyle="background-color:#FFFF00">Colorsetbyusinghexvalue</p><pstyle="background-color:rgb(255,255,0)">Colorsetbyusingrgbvalue</p><pstyle="background-color:yellow">Colorsetbyusingcolorname</p></body></html>2.11絕對路徑與相對路徑絕對路徑來說明文件的位置<linkrel="stylesheet"type="text/css"href="/css/mystyle.css"/><imgsrc="/img/pulpit.jpg"alt="Pulpitrock"/><ahref="/htm/sample/hello.htm">Hello!</a>上述的代碼語法正確，也能達到預定的效果，但卻不符合軟件工程的要求。網站在設計開發和運行維護的過程中需要不斷進行適當修改，甚至可能會整體遷移（從一個域名變為另外一個域名）。在這類情況下，絕對路徑的缺點會非常明顯，不便于系統的開發和維護。2.11絕對路徑與相對路徑相對路徑的描述方式如果該HTML文檔和被引用的文檔在同一個目錄下，則直接寫引用文件名即可。如果被引用的文檔是在該HTML文檔的下一級目錄，則使用在之前加入子目錄的名稱即可。例如“img/abc.jpg”。如果被引用的文檔是在該HTML文檔的上一級目錄，則可使用“..”來說明。例如“../abc.htm”。前面列舉的幾個絕對路徑的描述可改為如下相對路徑：<linkrel="stylesheet"type="text/css"href="../css/mystyle.css"/><imgsrc="../img/pulpit.jpg"alt="Pulpitrock"/><ahref="sample/hello.htm">Hello!</a>或以“/”開頭來描述：<linkrel="stylesheet"type="text/css"href="/css/mystyle.css"/><imgsrc="/img/pulpit.jpg"alt="Pulpitrock"/><ahref="/htm/sample/hello.htm">Hello!</a>這種方式的好處在于，文件的引用不受該HTML文件本身路徑的影響，便于開發和維護。2.12思考題（1）HTML是一種計算機語言，它與同樣也是計算機語言的C語言等都什么本質的不同？（2）相對之前的標準，HTML5的主要變化包括哪些？（3）表格元素在頁面設計中非常重要，特別是在商業系統中的數據展示方面尤為常用。請說明<table>、<tr>、<td>元素分別具有什么功能。（4）超鏈接元素中可以設置target屬性，請分別描述target屬性的不同取值及功能。（5）HTML中支持插入的圖像文件格式主要有哪些，它們各有什么特點？2.12思考題（6）請在不同的瀏覽器中測試它們對HTML5頻、視頻元素的支持情況，測試音頻和視頻的編碼要求。（7）試用<iframe>元素在網頁中嵌入你所在地區的天氣情況。提示：可以在互聯網中先找到可以正常顯示的小型天氣頁面，然后將其嵌入。（8）請思考在什么樣的情況下會使用<select>元素，編寫代碼完成單選和多選的功能。（9）<div>元素常常用來進行頁面的布局設計，試應用<div>元素模仿設計一個門戶網站（比如新浪或網易等）的頁面布局。（10）請分別應用絕對路徑和相對路徑方式的超鏈接設計兩個頁面，并讓它們相互指向。《商務網站設計與開發》溫浩宇西安電子科技大學第3章層疊樣式表內容3.1CSS簡介3.2選擇符3.3CSS的層疊性與優先次序3.4常用屬性及其應用實例3.5CSS盒子模型和網頁布局方式3.6思考題3.1CSS簡介層疊樣式表（CascaingStyleSheet，簡稱為CSS）是W3C組織所擬定出的一套標準的樣式語言規范。隨著CSS技術技術的使用，HTML頁面真正“活動”了起來。而在HTML5中，一些純粹用作顯示效果的元素將取消，因為它們顯示效果的工作更適合由CSS來擔當。作為一種用于網頁展示的樣式語言，CSS增加了更多的樣式定義方式來輔助HTML語言。通過CSS樣式表的定義，只要設定某種元素（如：表格、背景、連結、文字、按鈕、滾動條等）的樣式，則各網頁相同種類的元素將會呈現出相同的風格。這種方式不僅加快了網站開發的進度，而且便于建立一個風格統一的網站。3.1CSS簡介CSS的定義可以直接放在HTML元素中，稱為內聯樣式。形式如下：<pstyle="color:sienna;margin-left:20px">Thisisaparagraph.</p>CSS的定義可以放在HTML文件的<style>元素中，稱為內部樣式表。形式如下：<head><style>body{background-color:yellow;}</style></head>CSS的定義也可以獨立保存在一個擴展名為.css的文件中，通過鏈接的方式包含入網頁中，稱為外部樣式表。形式如下：<head><linkrel="stylesheet"type="”text/css”"href="”foo.css”"></head>3.2選擇符一條CSS規則中包括兩個部分：一個選擇符（selector）和一個或多個描述（declaration），描述之間用分號隔開。每一個描述中又包含屬性名（property）和屬性值（value）。語法如下：selector{property:value;property:value;}下面的CSS規則中聲明了段落元素<p>的顯式方式，包括文本居中、黑色、arial字體。CSS中的注釋在“/*”和“*/”之間。p{text-align:center;color:black;font-family:arial;}在這個例子中，p是選擇符，text-align、color和font-family是屬性，并為這些屬性設置了相應的屬性值。3.2選擇符（1）類選擇符選擇符可以是一種HTML元素，例如“p”、“table”等，這些可以看作是HTML預定義的類。例如下面的CSS規則：body{background:#fff;margin:0;padding:0;}p{color:#ff0000;}應用了上述CSS的HTML文檔中所有的<body>元素（雖然只可能有一個）和所有的<p>元素都將無需聲明而自動遵守上述的CSS規則。3.2選擇符（2）子類選擇符選擇符可以是一種HTML元素的一部分實例，可以理解為基于該類元素（基類）的一個子類。例如下面的CSS規則：td.fancy{background:#666;}p.rchild{text-align:right}在HTML應用上述CSS規則時，必須聲明元素的class為某個子類。例如下面代碼：<tdclass="fancy">ABC<td><pclass="rchild">p標記中的內容</p>如果在定義子類時沒有給出基類的名稱，則可認為它是任何基類的子類。例如下面的CSS規則：.cchild{text-align:center}3.2選擇符（3）嵌套類選擇符選擇符可以是根據元素之間的嵌套關系而確定的類，嵌套關系也可以理解為上下文關系。例如下面的CSS規則和相應的HTML代碼：tda{text-align:center;}<tableborder="1"><tr><td><ahref="a.htm">FileA</a></td><td><ahref="b.htm">FileB</a></td></tr></table><ahref="c.htm">FileC</a>上述CSS規則意味著：只有在單元格中的超鏈接才會應用文字居中的樣式，而其它的超鏈接則會忽略這一規則。3.2選擇符（4）id選擇符選擇符可以是HTML文檔中的一個特定元素，例如用“id”屬性標識的某一個段落。這些可以看作是HTML元素類的實例對象。例如下面的CSS規則和相應的HTML代碼：#red{color:red;}#green{color:green;}<pid="red">這個段落是紅色。</p><pid="green">這個段落是綠色。</p>id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。3.2選擇符（5）偽類與偽元素選擇符CSS偽類（Pseudo-class）用于向某些選擇器添加特殊的效果。使用偽類選擇符的語法如下：selector:pseudo-class{property:value;}偽類描述:active向被激活的元素添加樣式。:hover當鼠標懸浮在元素上方時，向元素添加樣式。:link向未被訪問的鏈接添加樣式。:visited向已被訪問的鏈接添加樣式。3.2選擇符下面代碼給出了偽類用于超鏈接的顯式效果，在不同的狀態下超鏈接的顏色不同：<html><head><styletype="text/css">a:link{color:#FF0000;}/*未訪問的超鏈接*/a:visited{color:#00FF00;}/*已訪問的超鏈接*/a:hover{color:#FF00FF;}/*鼠標位于超鏈接之上*/a:active{color:#0000FF;}/*鼠標在超鏈接上按鍵*/</style></head><body><ahref="default.jsp">這是一個由偽類裝飾的超鏈接</a></body></html>3.2選擇符（6）選擇符分組如果需要將多個類或id設置成相同的樣式，我們可以對多個選擇符進行分組設置。被分組的選擇符用逗號隔開，共享相同的聲明。下面的例子中所有的標題元素都會以綠色進行顯示，而段落和表格中的字體也被一起設定為9pt大小。h1,h2,h3,h4,h5,h6{color:green;}p,table{font-size:9pt}3.3CSS的層疊性與優先次序CSS允許以多種方式規定樣式信息，包括內聯樣式、內部樣式表、外部樣式表等。如果在同一個HTML文檔內部以不同的方式應用了多個CSS的定義，且對同一個HTML元素存在不止一次樣式定義時，瀏覽器會使用哪個樣式呢？通常，這些來源不同的樣式將根據一定的優先規則層疊于一個虛擬樣式表中，且其優先順序從高到低為：內聯樣式（在HTML元素內部定義樣式）內部樣式表（在HTML文檔頭部<style>元素中定義樣式）外部樣式表（在HTML文檔頭部<link>元素中鏈接CSS文件）瀏覽器默認設置（每個瀏覽器都對各種元素有默認的顯示樣式）3.3CSS的層疊性與優先次序CSS文本屬性在CSS中，文本屬性可定義文本的外觀，如，改變文本的顏色、對齊文本、裝飾文本、對文本進行縮進等。屬性描述color設置文本的顏色text-indent規定文本塊首行的縮進text-align對齊元素中的文本word-spacing設置字間距letter-spacing設置字符間距text-transform控制元素中的字母text-decoration向文本添加修飾white-space設置元素中空白的處理方式direction設置文本方向3.4常用屬性及其應用實例<styletype="text/css">p{line-height:0.5;text-indent:1cm;}h1{text-decoration:overline;}h2{text-decoration:line-through;}h3{text-decoration:underline;}h4{text-decoration:blink;}h5{letter-spacing:20px;}</style>……

<p>

清明

<h5>作者：杜牧</h5><h1>清明時節雨紛紛，</h1><h2>路上行人欲斷魂。</h2><h3>借問酒家何處有，</h3><h4>牧童遙指杏花村。</h4></p>……3.4常用屬性及其應用實例CSS表格屬性CSS樣式表中允許設置表格的屬性，以確定表格的布局。屬性描述border-collapse設置是否把表格邊框合并為單一的邊框border-spacing設置分隔單元格邊框的距離caption-side設置表格標題的位置empty-cells設置是否現實表格中的空單元格table-layout設置顯示單元，行和列的算法3.5CSS盒子模型和網頁布局方式盒子模型對于CSS控制頁面起著舉足輕重的作用。熟練掌握盒子模型，以及盒子模型各個屬性的含義和應用方法后，就可以輕松地控制頁面中每個元素的位置。下面將介紹盒子模型的概念及其屬性的含義和使用方法。CSS中盒子模型用于描述一個為HTML元素形成的矩形盒子。盒子模型是由margin（邊界）、border（邊框）、padding（空白）和content（內容）4個屬性組成。3.5CSS盒子模型和網頁布局方式CSS的定位功能在網頁設計中，能否控制到各個模塊在頁面中的位置非常關鍵。這些模塊只有放置在正確的位置，網頁的布局看起來才夠美觀。網頁中的各種元素都必須有自己合理的位置，才能搭建出整個頁面的結構。使用CSS的定位功能，可以相對地、絕對地或者固定地對

溫馨提示

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

評論

0/150

提交評論