網(wǎng)頁(yè)設(shè)計(jì)知識(shí)_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)知識(shí)_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)知識(shí)_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)知識(shí)_第4頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)知識(shí)這就試寫一個(gè)HTML文件吧！打開你的Notepad，新建一個(gè)文件，然后拷貝以下代碼到這個(gè)新文件，然后將這個(gè)文件存成first.html。<html><head><title>Titleofpage</title></head><body>Thisismyfirsthomepage.<b>Thistextisbold</b></body></html>要瀏覽這個(gè)first.html文件，雙擊它?；蛘叽蜷_瀏覽器，在File菜單選擇Open，然后選擇這個(gè)文件就行了。示例解釋這個(gè)文件的第一個(gè)Tag是<html>，這個(gè)Tag告訴你的瀏覽器這是HTML文件的頭。文件的最后一個(gè)Tag是</html>，表示HTML文件到此結(jié)束。在<head>和</head>之間的內(nèi)容，是Head信息。Head信息是不顯示出來的，你在瀏覽器里看不到。但是這并不表示這些信息沒有用處。比如你可以在Head信息里加上一些關(guān)鍵詞，有助于搜索引擎能夠搜索到你的網(wǎng)頁(yè)。在<title>和</title>之間的內(nèi)容，是這個(gè)文件的標(biāo)題。你可以在瀏覽器最頂端的標(biāo)題欄看到這個(gè)標(biāo)題。在<body>和</body>之間的信息，是正文。在<b>和</b>之間的文字，用粗體表示。<b>顧名思義，就是bold的意思。HTML文件看上去和一般文本類似，但是它比一般文本多了Tag，比如<html>，<b>等，通過這些Tag，可以告訴瀏覽器如何顯示這個(gè)文件。HTML元素(HTMLElements)HTML元素(HTMLElement)用來標(biāo)記文本，表示文本的內(nèi)容。比如body,

p,title就是HTML元素。

HTML元素用Tag表示，Tag以<開始，以>結(jié)束。Tag通常是成對(duì)出現(xiàn)的，比如<body></body>。起始的叫做OpeningTag，結(jié)尾的就叫做ClosingTag。目前HTML的Tag不區(qū)分大小寫的。比如，<HTML>和<html>其實(shí)是相同的。HTML元素(HTMLElements)的屬性HTML元素可以擁有屬性。屬性可以擴(kuò)展HTML元素的能力。比如你可以使用一個(gè)bgcolor屬性，使得頁(yè)面的背景色成為紅色，就像這樣：<bodybgcolor="red">網(wǎng)頁(yè)設(shè)計(jì)知識(shí)全文共4頁(yè)，當(dāng)前為第1頁(yè)。再比如，你可以使用border這個(gè)屬性，將一個(gè)表格設(shè)成一個(gè)無邊框的表格。如下：網(wǎng)頁(yè)設(shè)計(jì)知識(shí)全文共4頁(yè)，當(dāng)前為第1頁(yè)。<tableborder="0">

屬性通常由屬性名和值成對(duì)出現(xiàn)，就像這樣：name="value"。上面例子中的bgcolor,border就是name，red和0就是value。屬性值一般用雙引號(hào)標(biāo)記起來。屬性通常是附加給HTML的OpeningTag，而不是ClosingTag。常用文本格式TagTagTag說明<b>粗體bold<i>斜體italic<del>文字當(dāng)中劃線表示刪除<ins>文字下劃線表示插入<sub>下標(biāo)<sup>上標(biāo)<blockquote>縮進(jìn)表示引用<pre>保留空格和換行<code>表示計(jì)算機(jī)代碼，等寬字體<html><body><p><b>粗體用b表示。</b></p><p><i>斜體用i表示。</i></p><p><del>芙蓉姐姐</del>這個(gè)詞當(dāng)中劃線表示刪除。</p><p><ins>想唱就唱</ins>這個(gè)詞下劃線插入。</p><p>X<sub>2</sub>其中的2是下標(biāo)</p><p>X<sup>2</sup>其中的2是上標(biāo)</p><p><blockquote>好好學(xué)習(xí)，天天向上。這句話縮進(jìn)表示引用</blockquote></p><pre>這是預(yù)設(shè)(preformatted)文本.在pre這個(gè)tag里的文本保留空格和分行。</pre><code>callgetOrders</code><p>用code顯示計(jì)算機(jī)代碼，code里顯示的字符是等寬字符。</p></body>網(wǎng)頁(yè)設(shè)計(jì)知識(shí)全文共4頁(yè)，當(dāng)前為第2頁(yè)。</html>網(wǎng)頁(yè)設(shè)計(jì)知識(shí)全文共4頁(yè)，當(dāng)前為第2頁(yè)。HTML字符實(shí)體(CharacterEntities)有些字符在HTML里有特別的含義，比如小于號(hào)<就表示HTMLTag的開始，這個(gè)小于號(hào)是不顯示在我們最終看到的網(wǎng)頁(yè)里的。那如果我們希望在網(wǎng)頁(yè)中顯示一個(gè)小于號(hào)，該怎么辦呢？這就要說到HTML字符實(shí)體(HTMLCharacterEntities)了。一個(gè)字符實(shí)體(CharacterEntity)分成三部分：第一部分是一個(gè)&符號(hào)，英文叫ampersand；第二部分是實(shí)體(Entity)名字或者是#加上實(shí)體(Entity)編號(hào)；第三部分是一個(gè)分號(hào)。比如，要顯示小于號(hào)，就可以寫<或者<。用實(shí)體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是lessthan的意思，但是其劣勢(shì)在于并不是所有的瀏覽器都支持最新的Entity名字。而實(shí)體(Entity)編號(hào)，各種瀏覽器都能處理。注意：Entity是區(qū)分大小寫的。如何顯示空格通常情況下，HTML會(huì)自動(dòng)截去多余的空格。不管你加多少空格，都被看做一個(gè)空格。比如你在兩個(gè)字之間加了10個(gè)空格，HTML會(huì)截去9個(gè)空格，只保留一個(gè)。為了在網(wǎng)頁(yè)中增加空格，你可以使用 表示空格。最常用的字符實(shí)體(CharacterEntities)顯示結(jié)果說明EntityNameEntityNumber顯示一個(gè)空格  <小于<<>大于>>&&符號(hào)&&"雙引號(hào)""HTML里，比較基礎(chǔ)的Tag主要用于標(biāo)題，段落和分行。學(xué)習(xí)HTML最好的方法，就是跟著示例學(xué)。為了各位學(xué)習(xí)的方便，我們準(zhǔn)備了一個(gè)簡(jiǎn)單的HTML編輯器，你可以在左邊寫HTML代碼，然后點(diǎn)擊上面的按鈕，查看HTML的顯示結(jié)果。試試看吧！示例：一個(gè)非常簡(jiǎn)單的HTML文件這個(gè)示例算是一個(gè)最簡(jiǎn)單的HTML文件，只包含了最基本的能構(gòu)成一個(gè)HTML文件的Tag。通過這個(gè)例子，你可以看到瀏覽器是如何顯示這個(gè)文件的，以此對(duì)HTML文件有個(gè)最初的認(rèn)識(shí)。示例：簡(jiǎn)單的段落這個(gè)示例顯示在HTML文件里如何分段。正文標(biāo)題網(wǎng)頁(yè)設(shè)計(jì)知識(shí)全文共4頁(yè)，當(dāng)前為第3頁(yè)。這個(gè)示例告訴你如何在HTML文件里定義正文標(biāo)題。網(wǎng)頁(yè)設(shè)計(jì)知識(shí)全文共4頁(yè)，當(dāng)前為第3頁(yè)。HTML用<h1>到<h6>這幾個(gè)Tag來定義正文標(biāo)題，從大到小。每個(gè)正文標(biāo)題自成一段。<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3><h4>Thisisaheading</h4><h5>Thisisaheading</h5><h6>Thisisaheading</h6>段落劃分在HTML里用<p>和</p>劃分段落。<p>Thisisaparagraph</p><p>Thisisanotherparagraph</p>換行通過使用<br>這個(gè)Tag，可以在不新建段落的情況下?lián)Q行。<br>沒有ClosingTag。用<p>換行是個(gè)壞習(xí)慣，正確的是使用<br>。<p>This<br>isapara<br>graphwithlinebreaks</p

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝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)論