html基礎(chǔ)知識(shí)學(xué)習(xí)總結(jié)_第1頁(yè)
html基礎(chǔ)知識(shí)學(xué)習(xí)總結(jié)_第2頁(yè)
html基礎(chǔ)知識(shí)學(xué)習(xí)總結(jié)_第3頁(yè)
html基礎(chǔ)知識(shí)學(xué)習(xí)總結(jié)_第4頁(yè)
html基礎(chǔ)知識(shí)學(xué)習(xí)總結(jié)_第5頁(yè)
已閱讀5頁(yè)，還剩11頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

目錄HYPERLINK\o"一：HTML元素"HTML元素HYPERLINK基本HTML標(biāo)簽HTML屬性文本格式化字符實(shí)體（特殊字符）HTML鏈接框架HYPERLINK表格HTML列表HTML表單和輸入HTML圖片HTML背景HTML顏色HTML基本知識(shí)總結(jié)一:HTML元素HTML文檔是由HTML元素構(gòu)成的文本文件。HTML元素是通過(guò)使用HTML標(biāo)簽進(jìn)行定義的。HTML標(biāo)簽1.HTML標(biāo)簽是用來(lái)標(biāo)記HTML元素的。2.HTML標(biāo)簽被<和>符號(hào)包圍。3.這些包圍的符號(hào)叫作尖括號(hào)。4.HTML標(biāo)簽是成對(duì)出現(xiàn)的。例如<b>和</b>。5.位于起始標(biāo)簽和終止標(biāo)簽之間的文本是元素的內(nèi)容。6.HTML標(biāo)簽對(duì)大小寫不敏感，<b>和<B>的作用的相同的<html><head><title>頁(yè)面的標(biāo)題</title></head><body><p>這是我的第一個(gè)頁(yè)面。</p><b>此文本是粗體的。</b></body></html>這就是一個(gè)HTML元素：<b>此文本是粗體的。</b>這個(gè)HTML元素由起始標(biāo)簽<b>開始。這個(gè)元素的內(nèi)容是：“此文本是粗體的。”。這個(gè)HTML元素由終止標(biāo)簽</b>結(jié)尾。<b>標(biāo)簽的作用是定義一個(gè)顯示為粗體的HTML元素。這也是一個(gè)HTML元素：<body><p>這是我的第一個(gè)頁(yè)面。</p><b>此文本是粗體的。</b></body>這個(gè)HTML元素開始于<body>標(biāo)簽，結(jié)束于</body>標(biāo)簽。<body>標(biāo)簽的作用是定義HTML文件中的容納body的HTML元素。二:基本HTML標(biāo)簽1.標(biāo)題標(biāo)題使用<h1>至<h6>標(biāo)簽進(jìn)行定義。<h1>定義最大的標(biāo)題。<h6>定義最小的標(biāo)題。<h1>標(biāo)題一</h1><h2>標(biāo)題二</h2>*HTML會(huì)自動(dòng)在標(biāo)題前后添加一個(gè)額外的折行。2.段落 段落使用<p>標(biāo)簽進(jìn)行定義。 <p>Thisisaparagraph</p> *HTML會(huì)自動(dòng)在段落前后添加一個(gè)額外的空行。3.換行符 <p>This<br>isapara<br>graphwithlinebreaks</p><br>標(biāo)簽是空白標(biāo)簽，由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有類似</br>的終止標(biāo)簽。4.HTML注釋 格式:<!--注釋內(nèi)容-->注意:當(dāng)您寫HTML文本的時(shí)候，你永遠(yuǎn)也沒法確定這些文本在另一臺(tái)顯示器上是如何顯示的。一些人使用大顯示器，而另一些使用小的。當(dāng)用戶調(diào)整視窗的分辨率時(shí)，這些文本就會(huì)被重新格式化。所以不要通過(guò)在文本中添加空行和空格的辦法在你的編輯器中格式化文本。HTML會(huì)裁掉文本中所有的空格。任何數(shù)量的空格都被按一個(gè)空格計(jì)數(shù)。另外，在HTML中，一個(gè)空行也被當(dāng)作一個(gè)空格。使用空的段落標(biāo)記<p>去插入一個(gè)空行是個(gè)壞習(xí)慣。用<br>標(biāo)簽代替它?。ǖ遣灰?lt;br>標(biāo)簽去創(chuàng)建列表。不要著急，您將在稍后的篇幅學(xué)習(xí)到HTML列表。）您也許已經(jīng)注意到了，在沒有結(jié)束標(biāo)簽</p>的情況下，<p>標(biāo)簽依然可以正常工作。不過(guò)不要這樣做！下一個(gè)版本的HTML將不允許忽略任何的結(jié)束標(biāo)簽。HTML會(huì)自動(dòng)地在某些元素前后添加一個(gè)額外的空行，比如段落、標(biāo)題元素前后。使用水平線(<hr>標(biāo)簽)來(lái)分隔文章中的小節(jié)是一個(gè)辦法（但并不是唯一的辦法）。三.HTML屬性作用:屬性為HTML元素提供附加信息。1.HTML標(biāo)簽的屬性屬性總是以名稱/值對(duì)(類似于java中的鍵值對(duì))的形式出現(xiàn)，比如：name="value"*屬性總是在HTML元素的開始標(biāo)簽中規(guī)定。例:(紅字部分為屬性)<h1>定義標(biāo)題的開始。</h1><h1align="center">擁有關(guān)于對(duì)齊方式的附加信息</h1>2.使用小寫屬性屬性和屬性值對(duì)大小寫不敏感。不過(guò)，萬(wàn)維網(wǎng)聯(lián)盟在其HTML4推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值，而XHTML要求使用小寫屬性/屬性值。3.始終為屬性值加引號(hào)屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的，不過(guò)使用單引號(hào)也沒有問(wèn)題。在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么您必須使用單引號(hào)，例如：name='John"ShotGun"Nelson'四:文本格式化五:字符實(shí)體字符實(shí)體一些字符在HTML中擁有特殊的含義，比如小于號(hào)(<)用于定義HTML標(biāo)簽的開始。如果我們希望瀏覽器正確地顯示這些字符，我們必須在HTML源碼中插入字符實(shí)體。字符實(shí)體有三部分：一個(gè)和號(hào)(&)，一個(gè)實(shí)體名稱，或者#和一個(gè)實(shí)體編號(hào)，以及一個(gè)分號(hào)(;)。要在HTML文檔中顯示小于號(hào)，我們需要這樣寫：<或者<注意：實(shí)體對(duì)大小寫敏感。六:HTML鏈接關(guān)鍵標(biāo)簽:<a></a>1.錨標(biāo)簽和Href屬性HTML使用<a>（錨）標(biāo)簽來(lái)創(chuàng)建連接另一個(gè)文檔的鏈接。錨可以指向網(wǎng)絡(luò)上的任何資源：一張HTML頁(yè)面，一幅圖像，一個(gè)聲音或視頻文件等等。創(chuàng)建錨的語(yǔ)法：<ahref="url">Texttobedisplayed</a><a>用來(lái)創(chuàng)建錨(錨的開始)。href屬性用于定位(注意格式)需要鏈接的文檔，錨的開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。下面這個(gè)錨定義了指向w3school的鏈接：<ahref="/">VisitW3School!</a>上面的這行在瀏覽器中顯示為這樣：VisitW3School!2.Target屬性使用Target屬性，你可以定義被鏈接的文檔在何處顯示。下面的這行會(huì)在新窗口打開文檔：<ahref="/"target="_blank">VisitW3School!</a>3.錨標(biāo)簽和Name屬性Name屬性用于創(chuàng)建被命名的錨（namedanchors）。當(dāng)使用命名錨（namedanchors）時(shí)，我們可以創(chuàng)建直接跳至頁(yè)面中某個(gè)節(jié)的鏈接，這樣使用者就無(wú)需不停的滾動(dòng)頁(yè)面來(lái)尋找他們需要的信息。以下是命名錨的語(yǔ)法：<aname="label">Texttobedisplayed</a>name屬性用于創(chuàng)建命名錨。錨的名稱可以是任何你喜歡的名字。下面這行定義了命名錨：<aname="tips">UsefulTipsSection</a>你會(huì)注意到，命名錨會(huì)以特殊的方式來(lái)顯示。將#符號(hào)和錨名稱添加到URL的末端，就可以直接鏈接到tips這個(gè)節(jié)，就像這樣：<ahref="/html/html_links.asp#tips">JumptotheUsefulTipsSection</a>*跳轉(zhuǎn)當(dāng)前頁(yè)面的部分關(guān)鍵符號(hào)#詳解見文件”標(biāo)簽列表01.html”創(chuàng)建沒有下劃線的鏈接：關(guān)鍵字text-decoration:none<ahref="../example/html/lastpage.html"style="text-decoration:none">這是一個(gè)鏈接！</a>七:框架關(guān)鍵字:frame簡(jiǎn)介:通過(guò)使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。每份HTML文檔稱為一個(gè)框架，并且每個(gè)框架都獨(dú)立于其他的框架。使用框架的壞處：開發(fā)人員必須同時(shí)跟蹤更多的HTML文檔很難打印整張頁(yè)面框架結(jié)構(gòu)標(biāo)簽（<frameset>）框架結(jié)構(gòu)標(biāo)簽（<frameset>）定義如何將窗口分割為框架每個(gè)frameset定義了一系列行或列rows/columns的值規(guī)定了每行或每列占據(jù)屏幕的面積框架標(biāo)簽（Frame）Frame標(biāo)簽定義了放置在每個(gè)框架中的HTML文檔。例:(注意格式)<framesetcols="25%,75%">

<framesrc="frame_a.htm">

<framesrc="frame_b.htm"></frameset>基本的注意事項(xiàng)：假如一個(gè)框架有可見邊框，用戶可以拖動(dòng)邊框來(lái)改變它的大小。為了避免這種情況發(fā)生，可以在<frame>標(biāo)簽中加入：(屬性)noresize="noresize"。為不支持框架的瀏覽器添加<noframes>標(biāo)簽。例:<html><framesetcols="25%,50%,25%"> <framesrc="../example/html/frame_a.html"> <framesrc="../example/html/frame_b.html"> <framesrc="../example/html/frame_c.html"><noframes><body>您的瀏覽器無(wú)法處理框架！</body></noframes></frameset></html>例:<ahref="p1.html"target="right">現(xiàn)金收銀</a></li><!--target="right"是為了讓鏈接p1.html文件在name=right的地方顯示-->(文件:老師文件簡(jiǎn)單銀行界面中的menu.html文件)八:表格1.簡(jiǎn)介:表格由<table>標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 2.格式:<table><tr><td></td></tr></table>基本:<thead>,<tbody>和<tfoot>像上述沒有指名時(shí)一般默認(rèn)使用其<tbody>表格的表頭表格的表頭使用<th>標(biāo)簽進(jìn)行定義。表格中的空單元格在大多數(shù)瀏覽器中，沒有內(nèi)容的表格單元顯示得不太好。注意：這個(gè)空的單元格的邊框沒有被顯示出來(lái)。（不過(guò)Firefox(火狐瀏覽器)可以將整個(gè)邊框顯示出來(lái)。）為了避免這種情況，在空單元格中添加一個(gè)空格占位符，就可以將邊框顯示出來(lái)。常用屬性:跨行:rowspan=”n”n表示要跨行的具體數(shù)值跨列:colspan=”n”n表示要跨行的具體數(shù)值單元格邊距:cellpadding表示單元格內(nèi)容與其邊框之間的距離。單元格間距:cellspacing表示單元格之間的距離。bgColor:表示給單元格添加顏色(背景顏色)注意:這里背景顏色為bgColorbackground:單元格背景,可以是純色,也可是圖片例:<tdbgcolor="red">First</td>(純色)<tdbackground="../i/eg_bg_07.gif">Second</td>(圖片)單元格中內(nèi)容排列問(wèn)題:<html><body><tablewidth="400"border="1"><tr>//在第一行中<thalign="left">消費(fèi)項(xiàng)目</th>//消費(fèi)項(xiàng)目這一列左對(duì)齊<thalign="right">一月</th>//這一列右對(duì)齊<thalign="right">二月</th>//這一列右對(duì)齊(這三列前提是在第一行中)</tr><tr><tdalign="left">衣服</td><tdalign="right">$241.10</td><tdalign="right">$50.20</td></tr><tr><tdalign="left">化妝品</td><tdalign="right">$30.00</td><tdalign="right">$44.45</td></tr><tr><tdalign="left">食物</td><tdalign="right">$730.40</td><tdalign="right">$650.00</td></tr><tr><thalign="left">總計(jì)</th><thalign="right">$1001.50</th><thalign="right">$744.65</th></tr></table></body></html>關(guān)鍵字:align(對(duì)齊用)九:HTML列表1.無(wú)序列表無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無(wú)序列表始于<ul>標(biāo)簽。每個(gè)列表項(xiàng)始于<li>。例:<ul><li>Coffee</li><li>Milk</li></ul>2.有序列表有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于<ol>標(biāo)簽。每個(gè)列表項(xiàng)始于<li>標(biāo)簽。例:<ol> <li>Coffee</li> <li>Milk</li></ol>3.定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。例:<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>顯示結(jié)果:CoffeeBlackhotdrinkMilkWhitecolddrink不同類型的無(wú)序列表:(關(guān)鍵字:type指定類型)常見類型:disc:實(shí)心圓circle:空心圓squre:實(shí)心正方形<h4>Disc項(xiàng)目符號(hào)列表：</h4><ultype="disc"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ul><h4>Circle項(xiàng)目符號(hào)列表：</h4><ultype="circle"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ul><h4>Square項(xiàng)目符號(hào)列表：</h4><ultype="square"><li>蘋果</li><li>香蕉</li><li>檸檬</li><li>桔子</li></ul>不同類型的有序列表:同上指定不同類型的type默認(rèn):數(shù)字序號(hào)A:大寫字母序號(hào)a:小寫字母序號(hào)I:大寫羅馬數(shù)字序號(hào)(I,II,III,IV,V,VI,VII)I:小寫羅馬數(shù)字序號(hào)嵌套列表:<ul><li>茶<ul> <li>紅茶</li> <li>綠茶</li></ul></li></ul>十:HTML表單和輸入1.表單表單是一個(gè)包含表單元素的區(qū)域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。表單使用表單標(biāo)簽（<form>）定義。2.文本域（TextFields）當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。<form>Firstname:<inputtype="text"name="firstname"><br>Lastname:<inputtype="text"name="lastname"></form>3.單選按鈕（RadioButtons）當(dāng)用戶從若干給定的的選擇中選取其一時(shí)，就會(huì)用到單選框。<form><inputtype="radio"name="sex"value="male">Male<inputtype="radio"name="sex"value="female">Female</form>4.復(fù)選框（Checkboxes）當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)時(shí)，就會(huì)用到復(fù)選框。<form><inputtype="checkbox"name="bike">Ihaveabike<br><inputtype="checkbox"name="car">Ihaveacar</form>*5.表單的動(dòng)作屬性（Action）和確認(rèn)按鈕當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。<formname="input"action="html_form_action.asp"method="get">Username:<inputtype="text"name="user"><inputtype="submit"value="Submit"></form>假如您在上面的文本框內(nèi)鍵入幾個(gè)字母，并且點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會(huì)被傳送到名為"html_form_action.asp"的頁(yè)面。那一頁(yè)將顯示出輸入的結(jié)果。6.下拉列表 <select> <optionvalue="hn">湖南省</option> <optionvalue="hb">湖北省</option> <optionvalue="bj"selected>北京市</option>//加上selected:當(dāng)前選項(xiàng)默認(rèn)被選中 </select><br> 分組下拉列表: 分組下拉列表: <select> <optgrouplabel="湖北省"> <option>武漢</option> <option>黃岡</option> <option>荊州</option> <option>襄陽(yáng)</option> </optgroup> <optgrouplabel="湖南省">//optgroup:讓”湖南省出現(xiàn)在下拉列表中并加粗” <option>長(zhǎng)沙</option> <option>岳陽(yáng)</option> <option>湘潭</option> <option>張家界</option> </optgroup> </select><br><br>7.按鈕 <inputtype="button"value="普通按鈕"><br> <inputtype="reset"value="重置按鈕"><br> <inputtype="submit"value="提交按鈕"><br> *此處的圖片也可以當(dāng)作提交按鈕 <inputtype="image"src="001.PNG"><br>十一:HTML圖片1.圖像標(biāo)簽（<img>）和源屬性（Src）在HTML中，圖像由<img>標(biāo)簽定義。<img>是空標(biāo)簽，意思是說(shuō)，它只包含屬性，并且沒有閉合標(biāo)簽。要在頁(yè)面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。定義圖像的語(yǔ)法是：<imgsrc="url"/>URL指存儲(chǔ)圖像的位置。如果名為"boat.gif"的圖像位于的images目錄中，那么其URL為/images/boat.gif。瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。2.替換文本屬性（Alt）alt屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。<imgsrc="boat.gif"alt="BigBoat">在瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的?；镜淖⒁馐马?xiàng)：假如某個(gè)HTML文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁(yè)面，需要加載11個(gè)文件。加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片。3.實(shí)例:1.調(diào)整圖片大小<p><imgsrc="../i/eg_mouse.jpg"width="40"height="40"></p><p><imgsrc="../i/eg_mouse.jpg"width="80"height="80"></p>2.制作圖像鏈接<html><body><p>您也可以把圖像作為鏈接來(lái)使用：<ahref="../example/html/lastpage.html"><imgborder="0"src="../i/eg_buttonnext.gif"/></a></p></body></html>3.創(chuàng)建圖像映射（圖像地圖）創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個(gè)區(qū)域都是一個(gè)超鏈接。<html><body><p>請(qǐng)點(diǎn)擊圖像上的星球，把它們放大。</p><imgsrc="../i/eg_planets.jpg"border="0"usemap="#planetmap"alt="Planets"/><mapname="planetmap"id="planetmap"><areashape="circle"coords="180,139,14"href="../example/html/venus.html"target="_blank"alt="Venus"/>//定位<areashape="circle"coords="129,161,10"href="../example/html/mercur.html"target="_blank"alt="Mercury"/><areashape="rect"coords="0,0,110,260"href="../example/html/sun.html"target="_blank"alt="Sun"/></map><p><b>注釋：</b>img元素中的"usemap"屬性引用map元素中的"id"或"name"屬性（根據(jù)

溫馨提示

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

評(píng)論

0/150

提交評(píng)論