《Web網(wǎng)站設(shè)計與開發(fā)教程》課件-第02章 HTML元素_第1頁
《Web網(wǎng)站設(shè)計與開發(fā)教程》課件-第02章 HTML元素_第2頁
《Web網(wǎng)站設(shè)計與開發(fā)教程》課件-第02章 HTML元素_第3頁
《Web網(wǎng)站設(shè)計與開發(fā)教程》課件-第02章 HTML元素_第4頁
《Web網(wǎng)站設(shè)計與開發(fā)教程》課件-第02章 HTML元素_第5頁
已閱讀5頁，還剩74頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

內(nèi)容2.1文本元素2.2群組元素2.3超鏈接元素2.4表格元素2.5內(nèi)嵌元素2.6結(jié)構(gòu)元素2.7編輯元素2.8表單元素2.9頭部元素2.10HTML中的顏色設(shè)置2.11絕對路徑與相對路徑2.12思考題2.1文本元素在HTML中，文本元素（Text-levelsemantics）用來定義網(wǎng)頁中文本內(nèi)容和語義，增加文字的易讀性。文本元素主要包括<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來定義，但文本元素的語義也會影響文本的顯示風(fēng)格，比如上標(biāo)（sup）、下標(biāo)（sub）等文本。2.1文本元素<html><body><em>em定義強調(diào)文本，顯示為斜體字</em><br><strong>strong定義強調(diào)文本，顯示為粗體</strong><br><small>small定義小號文本</small><br><s>s定義加刪除線的文本</s><br>sub定義下標(biāo)文本，比如a<sub>2</sub><br>sup定義上標(biāo)文本，比如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>DEMO文本元素2.2群組元素在HTML中，群組元素（Groupingcontent）用來定義網(wǎng)頁中具有關(guān)聯(lián)性的內(nèi)容和語義。群組元素主要包括<p>、<hr>、<pre>、<blockquote>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<figure>、<figcaption>、<div>、<main>等。與文本元素一樣，群組元素的語義也會影響顯示風(fēng)格，比如多個列表項元素在顯示時通常會在前面加上數(shù)字序號或圖形符號。2.2群組元素<html><body><p>這是段落。</p><p>hr標(biāo)簽定義水平線：</p><hr/><p>pre標(biāo)簽很適合顯示計算機代碼：</p><pre>fori=1to10printinexti</pre><blockquote>段落前面有縮進……</blockquote></body></html>DEMO群組元素12.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>元素用來將頁面內(nèi)容分割成各個獨立的部分。在每個<div>元素中，不僅可以包含文本內(nèi)容，也可以包含圖片、表單等其他內(nèi)容。在默認(rèn)的情況下，<div>元素所包含的內(nèi)容，將在新的一行顯示。屬性描述dir設(shè)置文本顯示方向lang設(shè)置語言class類屬性style設(shè)置級聯(lián)樣式title標(biāo)題屬性nowrap取消自動換行id標(biāo)記屬性2.2群組元素<divclass=”定義的類的名稱”>……</div><divid=”定義的名稱”>……</div><divstyle=”定義的樣式”>……</div><divnowrap=”nowrap”>……</div><divtitle=”標(biāo)題內(nèi)容”>……</div><divid="header">...</div><divid="footer">...</div>DEMO群組元素22.3超鏈接元素網(wǎng)頁之間的鏈接（Links）能使瀏覽者從一個頁面跳轉(zhuǎn)到另一個頁面，實現(xiàn)文檔互聯(lián)、網(wǎng)站互聯(lián)。超鏈接就像整個網(wǎng)站的神經(jīng)細胞，把各種信息有機地結(jié)合在一起。在HTML中，超鏈接可以通過<a>元素和嵌套在<map>元素內(nèi)部的<area>元素來實現(xiàn)。關(guān)于<area>元素將在嵌入式元素中展開描述，本節(jié)將主要討論<a>元素。2.3超鏈接元素屬性描述href鏈接的目標(biāo)URL。hreflang規(guī)定目標(biāo)URL的基準(zhǔn)語言。僅在href屬性存在時使用。media規(guī)定目標(biāo)URL的媒介類型。默認(rèn)值：all。僅在href屬性存在時使用。rel規(guī)定當(dāng)前文檔與目標(biāo)URL之間的關(guān)系。僅在href屬性存在時使用。target在何處打開目標(biāo)URL。僅在href屬性存在時使用。type規(guī)定目標(biāo)URL的MIME類型。僅在href屬性存在時使用。注：MIME=MultipurposeInternetMailExtensions。2.3超鏈接元素文本鏈接是最常見的一種超鏈接，它通過網(wǎng)頁中的文件和其他文件進行鏈接，語法如下：<ahref="鏈接的URL地址"target=目標(biāo)窗口的打開方式>鏈接元素</a> 鏈接元素可以是文字，也可以是圖片或其他頁面元素。href屬性是<a>元素最常用的屬性，用來指定鏈接目標(biāo)的URL地址。鏈接地址可以是絕對地址，也可以是相對地址。例如鏈接到W3C官方網(wǎng)站，并打開新的瀏覽器顯示該網(wǎng)站，實現(xiàn)代碼如下：<ahref=”/”target=_blank>W3C</a>2.3超鏈接元素target屬性的取值及功能說明target值目標(biāo)窗口的打開方式_parent在上一級窗口打開，常在分幀的框架頁面中使用。_blank新建一個窗口打開。_self在同一窗口打開，與默認(rèn)設(shè)置相同。_top在瀏覽器的整個窗口打開，將會忽略所有的框架結(jié)構(gòu)。2.3超鏈接元素書簽鏈接也是常用的一種超鏈接，用來在創(chuàng)建的網(wǎng)頁內(nèi)容特別多時對內(nèi)容進行鏈接。書簽可以與所鏈接文字在同一頁面，也可以在不同的頁面。建立書簽的語法如下：<aname=”書簽名稱”>文字</a>在代碼的前面增加鏈接文字和鏈接地址就能夠?qū)崿F(xiàn)同頁面的書簽鏈接。語法如下：<ahref=”#書簽的名稱”>鏈接的文字</a>其中，#代表這是書簽的鏈接地址，書簽的名稱則是上面定義的書簽名。如果想鏈接到不同的頁面需要在鏈接的地址前增加文件所在的位置。語法如下：<ahref=”鏈接的URL地址#書簽名稱”>鏈接的文字</a>DEMO超鏈接元素2.4表格元素在HTML5中使用<table>、<caption>、<tr>、<td>、<th>、<colgroup>、<col>、<tbody>、<thead>、<tfoot>等表格元素構(gòu)建和展示表格式數(shù)據(jù)（Tabulardata）。<table>元素可以用來定義表格，包括表格的標(biāo)題、表頭及單元格內(nèi)容等。作為<table>元素的子元素，表格行用<tr>定義，表頭元素用<th>元素定義（表頭通常顯示成黑體），單元格內(nèi)容用<td>元素定義。一個<table>元素可包含一個或多個<tr>元素，一個<tr>元素又可以包含一個或多個<th>、<td>元素。2.4表格元素標(biāo)簽語義table定義表格caption定義表格標(biāo)題tr定義表格中的行td定義表格中的單元th定義表格中的表頭單元格colgroup定義表格列的組。通過此標(biāo)簽，您可以對列進行組合，以便格式化。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>……DEMO表格元素2.5內(nèi)嵌元素除了文字信息，網(wǎng)頁中還可以呈現(xiàn)圖形、圖像、音頻、視頻等多媒體信息。為了豐富網(wǎng)頁的表現(xiàn)方式，HTML5允許以內(nèi)嵌元素(Embeddedcontent)的方式在網(wǎng)頁中嵌入圖形、圖像、視頻、音頻以及其他可操作的對象。相關(guān)的元素包括<img>、<iframe>、<embed>、<object>、<param>、<video>、<audio>、<source>、<track>、<map>、<area>、<MathML>系列和<SVG>系列。2.5內(nèi)嵌元素元素語義img定義HTML頁面中的圖像。iframe定義包含另一個文檔的行內(nèi)框架。embed定義嵌入的內(nèi)容，比如插件，元素必須有src屬性。object定義一個嵌入的對象。param為包含它的object元素提供參數(shù)。video定義視頻，如電影片段或其他視頻流。audio定義聲音，如音樂或其他音頻流。source為媒介元素（如<video>和<audio>）定義媒介資源。track為video等媒介指定外部字幕。map定義客戶端的圖像映射，圖像映射是帶有可點擊區(qū)域的圖像。area定義圖像映射內(nèi)部的區(qū)域。MathML在文檔內(nèi)使用<math>...</math>標(biāo)簽應(yīng)用各種MathML元素。SVG在文檔中定義可縮放矢量圖形。2.5內(nèi)嵌元素HTML提供了<img>元素用來描述圖像信息的內(nèi)容和表現(xiàn)形式，但圖像的數(shù)據(jù)并不會直接插入HTML文檔中，<img>元素的作用是讓HTML文檔在展示時給圖像留出一個位置。圖像文件的地址由<img>元素的src屬性指定，當(dāng)瀏覽器無法下載圖像文件時，則在相應(yīng)的位置顯示一些文字，文字的內(nèi)容由alt屬性指定。<imgsrc="url"alt="some_text"/>圖像的大小可以在元素中使用width和height屬性給出，如果不設(shè)置這兩個屬性，則將默認(rèn)為按照圖像的實際尺寸顯示。<imgsrc="pulpit.jpg"alt="Pulpitrock"width="304"height="228"/>2.5內(nèi)嵌元素GIF支持最多256色的圖像。雖然GIF的顏色不夠豐富，但它支持動畫和透明色，在網(wǎng)頁中常常被用來設(shè)計按鈕、菜單等較小的圖像。JPG可以支持高分辨率、顏色豐富的圖像。由于JPG具有很好的壓縮比，非常適合在網(wǎng)頁中展現(xiàn)照片。當(dāng)然，在使用JPG格式處理圖像時，壓縮比越大，圖片的質(zhì)量就越差。PNG可以支持顏色豐富的圖像，同時還可支持alpha濾鏡的透明方式。雖然PNG不支持動畫效果，但與GIF一樣適合作為較小的圖像的顯示方式。2.5內(nèi)嵌元素<img>元素的usemap屬性可以指定可點擊區(qū)域的圖像映射元素，而圖像映射元素本身的設(shè)置是在<map>元素中，其中的<area>元素則給出了具體的區(qū)域和超鏈接的位置，功能類似于<a>元素。下列代碼給出了圖像映射的方式，即在一個圖像中設(shè)置了三個不同形狀的區(qū)域，當(dāng)用戶點擊這些區(qū)域時會產(chǎn)生如同超鏈接的效果。2.5內(nèi)嵌元素<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>DEMO嵌入圖片2.5內(nèi)嵌元素在早期的網(wǎng)頁設(shè)計中，開發(fā)者經(jīng)常使用<frameset>框架標(biāo)記把瀏覽器窗口劃分成幾個大小不同的子窗口，每個子窗口顯示不同的頁面，也可以在同一時間瀏覽不同的頁面。定義子窗口使用元素<frame>。HTML5已經(jīng)不再支持<frameset>與<frame>元素，但仍然支持創(chuàng)建包含文檔的內(nèi)聯(lián)框架的<iframe>元素。元素語義HTML支持版本<frameset>定義框架集4<frame>定義框架集的子窗口4<iframe>創(chuàng)建包含另一個文檔的內(nèi)聯(lián)（inline）框架4、52.5內(nèi)嵌元素<iframe>元素可以構(gòu)成“浮動”的框架，可以在一個HTML文檔的一個特定區(qū)域中展示另一個HTML文檔。屬性功能height定義內(nèi)聯(lián)框架的高度name定義內(nèi)聯(lián)框架的名稱sandbox使內(nèi)聯(lián)框架可以包含其他的一些內(nèi)容，例如表格，腳本等seamless布爾型屬性，使內(nèi)聯(lián)框架看起來像包含它的文件的一部分（沒有邊框和滾動條等）src設(shè)置內(nèi)聯(lián)框架所引用的地址srcdoc定義在內(nèi)聯(lián)框架中顯示的HTML內(nèi)容，與sandbox和seamless一起使用width定義內(nèi)聯(lián)框架的寬度2.5內(nèi)嵌元素<html><body><iframesrc="/"name="iframe_a"style="width:618px"></iframe><p><ahref=""target="iframe_a">百度</a></p><p><b>注意：</b>因為超鏈接的目標(biāo)表明為iframe，因此當(dāng)點擊超鏈接時會在iframe中顯示百度頁面</p></body></html>DEMO嵌入框架2.5內(nèi)嵌元素根據(jù)HTML5的規(guī)范，在網(wǎng)頁上呈現(xiàn)的視頻和音頻需要符合一定的標(biāo)準(zhǔn)，否則就通過插件（如activeX）來呈現(xiàn)。<audio>元素用來定義聲音，如音樂或其他音頻流。<audio>與</audio>之間插入的內(nèi)容是供不支持audio元素的瀏覽器顯示的。屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。2.5內(nèi)嵌元素<html><body><audiosrc="music.mp3"controls="controls">

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

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

請選擇付款方式

<inputtype="radio"name="支付方式"id="card“checked="checked"><labelfor="card">信用卡</label>……<br/>

出發(fā)日期<inputtype="date"/>

出發(fā)時間<inputtype="time"/><br/><inputtype="reset"name="復(fù)位按鈕"value="復(fù)位"><inputtype="submit"name="提交按鈕"value="確定"><inputtype="button"name="close"value="關(guān)閉當(dāng)前窗口"onclick="window.close()"></form>DEMO表單元素12.8表單元素<fieldset>元素可以將表單中的一部分內(nèi)容組合起來，生成一組相關(guān)表單的字段。當(dāng)一組表單元素作為子元素放到<fieldset>元素內(nèi)時，瀏覽器通常會以加上邊框的方式進行顯示。作為<fieldset>元素的第一個子元素，<legend>元素可以為<fieldset>元素加上標(biāo)題。2.8表單元素<html><body><fieldset><legend>健康信息：</legend><form><label>身高：<inputtype="text"/></label><label>體重：<inputtype="text"/></label></form></fieldset></body></html>2.8表單元素<select>元素定義下拉式列表框和滾動式列表框。當(dāng)提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數(shù)列表。在將<select>表單數(shù)據(jù)提交給服務(wù)器時，同時還包括了<select>元素的name屬性值。屬性功能disabled規(guī)定禁用該下拉列表，被禁用的下拉列表既不可用，也不可點擊。可以使用JavaScript來清除disabled屬性，以使下拉列表變?yōu)榭捎脿顟B(tài)multiple規(guī)定可選擇多個選項name規(guī)定下拉列表的名稱size規(guī)定下拉列表中可見選項的數(shù)目2.8表單元素<select>元素的語法如下所示:<selectname="下拉列表名稱"size="下拉列表顯示的條數(shù)"><optionvalue="控件的初始值"selected="selected">選項描述</option> <optionvalue="控件的初始值">選項描述</option></select>使用<select>元素定義下拉列表框時，由<option>元素定義列表框的各個選項。<option>元素位于<select>元素內(nèi)部。一個<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>DEMO表單元素22.8表單元素<progress>和<meter>是在HTML5中新增的元素。<progress>元素可以用來顯示正在執(zhí)行的狀態(tài)或進度情況，配合JavaScript程序，可以控制<progress>元素中的value屬性，以精確地顯示進展情況。<meter>元素可以以直方圖的形式顯示值的大小。為了實現(xiàn)直方圖的顯示，除了需要通過value屬性給出具體的數(shù)值，還需要通過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>DEMO表單元素32.8表單元素<script>元素中可以嵌入腳本程序，HTML5中腳本程序默認(rèn)是用JavaScript語言書寫；當(dāng)瀏覽器不支持腳本程序的執(zhí)行，則會顯示<noscript>元素中的內(nèi)容。<template>元素中可以定義前端模板，可以通過JavaScript代碼進行調(diào)用；<canvas>元素用來繪制2D圖形，這與SVG的作用相似。不同的是，<canvas>元素的繪圖機制依賴于分辨率、不支持事件處理器，但可以按照像素重新生成。<canvas>元素也需要JavaScript代碼的支持。2.8表單元素元素語義HTML支持版本script定義客戶端腳本。4、5noscript定義在腳本未被執(zhí)行時的替代內(nèi)容（文本）。4、5template定義模板元素。5canvas定義圖形。52.9頭部元素頭部元素<head>中可以包含多個元素用來描述腳本、鏈接樣式表、提供元信息等，這些信息雖然不能直接在頁面上展示，但對于文檔的說明、可讀性和搜索引擎優(yōu)化等方面至關(guān)重要。<head>元素的子元素包括<title>、<base>、<link>、<meta>和<style>等。2.9頭部元素元素語義HTML支持版本head所有頭部元素的容器。4、5title定義了HTML文檔的標(biāo)題4、5base描述了頁面中所有超鏈接的默認(rèn)超鏈接基地址（用href屬性指定）和默認(rèn)目標(biāo)（用target屬性指定）4、5link定義HTML文檔和外部資源的關(guān)系4、5meta給出HTML文檔的元數(shù)據(jù)4、5style定義樣式定義4、52.9頭部元素<html><head><title>Titleofthedocument</title><basehref="/htm/"/><basetarget="_blank"/></head><body>Thecontentofthedocument......</body></html>2.9頭部元素<link>元素用來定義HTML文檔和外部資源的關(guān)系，通常用來聲明HTML所引用的CSS文檔。例如下面的代碼中鏈接了一個名為mystyle.css的文檔：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>除了鏈接，在HTML中還可以直接嵌入CSS樣式代碼。下例中使用<style>元素來完成這一任務(wù)：<head><styletype="text/css">body{background-color:yellow;}p{color:blue;}</style></head>2.9頭部元素<meta>元素可以給出HTML文檔的元數(shù)據(jù)（metadata）。元數(shù)據(jù)不會在網(wǎng)頁中顯示，但會被瀏覽器、搜索引擎等程序解析和應(yīng)用。在下面的代碼中，通過元數(shù)據(jù)給出了頁面的簡述、關(guān)鍵詞、作者、字符集等信息：<head><metaname="description"content="FreeWebtutorials"/><metaname="keywords"content="HTML,CSS,XML,JavaScript"/><metaname="author"content="HegeRefsnes"/></head><meta>元素所給出的網(wǎng)頁元數(shù)據(jù)對于搜索引擎判斷網(wǎng)頁類型、內(nèi)容都很有幫助。2.10HTML中的顏色設(shè)置HTML中的顏色是由紅（Red）、綠（Green）、藍（Blue）三種顏色組合而成的RGB值來表示。RGB中三個顏色的值分別都可以從0（十六進制記作#00）到255（十六進制記作#F

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論