HTML簡介及使用技巧_第1頁
HTML簡介及使用技巧_第2頁
HTML簡介及使用技巧_第3頁
HTML簡介及使用技巧_第4頁
HTML簡介及使用技巧_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章HTML介紹及使用技巧HTML簡介及使用技巧第1頁HTML（HyperTextMarkupLanguage），即超文本標識語言,是一個用來制作超文本文檔簡單標簽語言。超文本傳輸協議HTTP要求了瀏覽器在運行HTML文檔時所遵照規(guī)則和標準。用HTML編寫超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺，自1990年以來，HTML就一直被用作萬維網信息表示語言，使用HTML語言描述文件，需要經過WEB瀏覽器顯示出效果。所以，HTML語言是一個標簽語言,不需要編譯,直接由瀏覽器執(zhí)行。HTML簡介及使用技巧第2頁2.1HTML文檔基本結構標簽所謂超文本，是因為文本中能夠加入圖片、聲音、動畫、影視等內容。實際上，每一個HTML文檔都是一個靜態(tài)網頁文件，這個文件中包含了HTML指令代碼，這些指令代碼并不是一個程序語言，它只是一個排版網頁中資料顯示位置標簽結構語言，易學易懂，非常簡單。經過HTML能夠表現出豐富多彩設計格調、實現頁面之間跳轉、展現多媒體效果。2.1.1制作一個基本網頁HTML簡介及使用技巧第3頁HTML文檔是一個標準純文本文件,其擴展名為.html或.htm。創(chuàng)建一個HTML文檔，只需要兩個工具，一個是HTML編輯器，一個WEB瀏覽器。HTML編輯器是用于生成和保留HTML文檔應用程序。大多數通用編輯器，如Word、Windows系統自帶記事本和寫字板等，都能夠用來創(chuàng)建或修改HTML文檔。當然，使用更專業(yè)網頁編輯工具（如FrontPage和Dreamweaver等）來編輯HTML文檔是一個更加好選擇。HTML簡介及使用技巧第4頁2.1.2HTML文件基本結構

１.基本結構一個完整HTML文件由標題、段落、表格和文本等各種嵌入對象組成，這些對象統稱為元素，整個HTML文件就是由元素和標簽組成。HTML文件基本結構為：<HTML>文件開始標簽<HEAD>文件頭開始標簽……文件頭內容</HEAD>文件頭結束標簽<BODY>文件主體開始標簽……文件主體內容</BODY>文件主體結束標簽</HTML>文件結束標簽HTML簡介及使用技巧第5頁從以上結構能夠看出，HTML代碼分為三部分，各部分含義以下：<HTML>…</HTML>：HTML文件開始和結束標簽，HTML文件中全部內容包含<HEAD>和<BODY>標簽都應該在這對標簽之間，一個HTML文件總是以<HTML>開始，以</HTML>結束。<HEAD>…</HEAD>：HTML文件頭部標簽，主要用來放置頁面標題以及文件信息等內容，通常將這兩個標簽之間內容統稱為HTML頭部。<BODY>…</BODY>：用來指明文件主體區(qū)域，網頁所要顯示內容都放在這個標簽內，頁面內容包含文字、圖片、動畫及超鏈接等。其結束標簽</BODY>指明主體區(qū)域結束。HTML簡介及使用技巧第6頁2.文件中標簽和元素

HTML主要語法是元素和標簽。HTML以標簽符來標識、排列各對象。標簽也叫做標識（Tag），是用來要求元素屬性和它在文檔中位置。標簽符以”<“和”>“表示。標簽符里內容稱為元素（element），元素代表了標簽符意義。元素是符合文檔類型定義文檔組成部分，如TITLE（文檔標題）、IMG（圖像）、TABLE（表格）等。元素名不區(qū)分大小寫。比如，<title>網頁設計教程</title>其中，title是元素名，<title>與</title>之間內容都屬于元素title，<title>是標簽，用來說明元素title。HTML簡介及使用技巧第7頁3.標簽劃分

（1）單標簽只需單獨使用就能完整地表示意思標簽稱為”單標簽”語法格式：<標署名稱>比如，最慣用單標簽<br>,它表示換行。（2）雙標簽雙標簽由”始標簽”和”尾標簽”兩部分組成，必須成對使用，其中始標簽告訴Web瀏覽器從此處開始執(zhí)行該標簽所表示功效，而尾標簽告訴Web瀏覽器在這里結束該功效。語法格式：<標簽>被標簽內容</標簽>HTML簡介及使用技巧第8頁4.標簽屬性屬性是用來描述對象特征。在HTML中，全部標簽屬性都放置在始標簽符尖括號內，標簽符與屬性之間用空格分隔，屬性值放在對應屬性之后，用等號分隔，而不一樣屬性之間用空格分隔。格式：<標簽符屬性1=屬性值1屬性2=屬性值2…>被標簽內容<／標簽符>一個標簽能夠有多個屬性，各屬性之間無先后次序，屬性也可省略，當屬性省略時就取默認值。HTML簡介及使用技巧第9頁5.注釋語句為了使程序清楚、輕易了解，供用戶閱讀方便，應該在程序中添加注釋。注釋語句格式為：<!--注釋文-->或<!注釋文>注釋語句能夠放在程序任何地方，注釋內容不在瀏覽器中顯示。比如：<!--ASP.NET基礎-->或者<!

ASP.NET網站設計教程>

都可作為HTML代碼注釋。HTML簡介及使用技巧第10頁2.2文本和圖像標簽

頁面文本標簽是一組用來控制頁面文字顯示效果標簽,包含文字字型控制、段落控制、顯示方式控制等。這些格式化標簽都是用于<BODY></BODY>標簽對之間。慣用文本標簽以下表所表示。2.2.1慣用文本標簽HTML簡介及使用技巧第11頁標簽說明<address>地址標簽，普通放在文檔體首部或尾部。<address>和</address>之間內容通常是相關編程者信息，包含姓名、身份等。<b>成對出現。<b>和</b>之間內容將顯示為粗體文字<br><br>單獨出現，作用相當于插入回車符。假如沒有<br>換行標簽，Web瀏覽器窗口將依據瀏覽器窗口寬度盡可能長顯示文本。<Hi><Hi>標簽成對出現，夾在<Hi>和</Hi>之間文字是文檔中標題。標題文字都用粗體顯示，上級標題總比下面各級標題更大些、更粗些。<Hi>標簽共分六級，其中<H1>標簽括起文字是第一級標題，最大最粗，而<H6>標簽括起文字是最終一級標題，最小最細。<hr><hr>標簽單獨出現，作用是換行并在該行下面畫一條水平直線。它有三個屬性值：size、width和align，分別用以要求水平線高度、寬度和水平線在瀏覽器窗口中位置。<i><i>和</i>之間內容將顯示為斜體<p>p是paragraph意思，用于劃分段落，作用是換行并插入一個空白行，<p>標簽能夠單獨使用，也可成對使用。成對使用時，能夠添加align屬性，標出段落在瀏覽器中位置。<pre><pre>是預格式化標簽，HTML輸出是基于窗口，因而HTML文件在輸出時都要重新排版，對確實不需要重新排版內容，<pre>…</pre>。瀏覽器在輸出時，對<pre>…</pre>之間內容幾乎不做修改地輸出。<u><u>和</u>之間內容將顯示為帶下劃線文字HTML簡介及使用技巧第12頁１.正文標題（Heading）標簽HTML用<H1>到<H6>這幾個標簽來定義正文標題，字體從大到小。每個正文標題自成一段。語法格式：<Hi屬性1=屬性值1屬性2=屬性值2…>正文標題文字</Hi>(i=1,2,…,6)HTML簡介及使用技巧第13頁在網頁中為了增強頁面層次，其中文字能夠用不一樣大小、字體、字型和顏色，通常使用font標簽符來完成。font標簽符語法格式為：<fontsize=”數字”face=”字體名”color=”顏色”>被設置文字<／font>2.文字格式標簽HTML簡介及使用技巧第14頁3.字型設置標簽HTML定義了各種用于字體和字型修飾標簽。其功效是設置文字格調，如粗體、斜體、帶下劃線等。這些標簽能夠單獨使用，也能夠混合使用，產生復合修飾效果。慣用字型標簽以下表所表示。HTML簡介及使用技巧第15頁標簽說明<b><b></b>使文本以粗體字形式輸出。(bold)<i><i></i>使文本以斜體字形式輸出。(italic)<u><u></u>加下劃線形式輸出。(underline)<s><s></s>加刪除線形式輸出。(strikeout)<sub><sub></sub>作為下標顯示。(Subscript)<sup><sup></sup>作為上標顯示。(Superscript)<tt><tt></tt>輸出打字機格調字體文本（等寬體顯示西文字符）<small><small></small>使文字大小相對于前面文字減小一級<big><big></big>使文字大小相對于前面文字增大一級<cite><cite></cite>輸出引用方式字體，通常是斜體<em><em></em>輸出需要強調文本（通常是斜體加粗體）。(emphasis)<strong><strong></strong>輸出加重文本（通常是斜體加粗體）HTML簡介及使用技巧第16頁在HTML文檔中，無法用多個回車、空格、Tab鍵來調整文檔段落格式。要用HTML標簽符來強制換行、分段。<br>是一個很簡單標簽，它沒有結束標簽，因為它是用來創(chuàng)建一個回車換行。它不產生一個空行，但連續(xù)多個<br>標簽能夠產生多個空行效果。4.換行標簽<br>HTML簡介及使用技巧第17頁段落(Paragraph)標簽<p>用于將文檔劃分為段落，在此標簽對之間加入文本將按照段落格式顯示在瀏覽器上。設置段落標簽符格式為：<palign=“對齊方式”>文字<／p>align屬性用于設置段落對齊方式，其常見取值有3種：right（右對齊）、left（左對齊）、center（居中對齊）。5.段落標簽<p>HTML簡介及使用技巧第18頁6.文本居中排列標簽<center>文本居中排列標簽<center></center>使作用對象在屏幕中央顯示。HTML簡介及使用技巧第19頁

7.水平線標簽<hr>

水平線標簽<hr>能夠在Web頁面上插入一條水平線。其屬性有align、width、size和noshade。語法格式：<hr\[size=值align=值width=值noshade\]>align：表示水平線位置與前面類似，有right、center、left，默認時為居中。width：表示水平線長度，能夠用滿屏寬度百分數表示，也能夠用像素值指明，默認為100%。size：表示水平線寬度，能夠用像素值2、4、8、16、32等指明，默認為2，2也是最小值。noshade：表示水平線是一條實心線，默認為一條陰影線。HTML簡介及使用技巧第20頁2.2.2圖像標簽1.插入圖像標簽<img>插入圖像標簽是<img>，格式為：<imgsrc=“圖形文件地址”alt=“簡單說明”longdesc=“詳細說明”width=“寬度”height=“高度”border=“邊框長度”hspace=“水平空白”vspace=“垂直空白”align=“對齊方式”>HTML簡介及使用技巧第21頁2.圖像屬性賦值<img>標簽并不是真正地將圖像加入到HTML文檔中，而是對標簽SRC屬性賦值。該值是插入圖像文件文件名，包含路徑。路徑能夠是相對路徑，也能夠是網址。實際上就是經過路徑將圖形文件嵌入到文檔中。HTML簡介及使用技巧第22頁2.2.3超鏈接標簽從當前頁面鏈接到本機上Web頁面，用標簽<a>…</a>定義一個超鏈接，把文件名和路徑賦給href（hypertextreference）屬性即可。語法格式：<ahref=“filename.html”>文本內容</a>執(zhí)行后在瀏覽器中將看到”文本內容”變色并加下劃線，當鼠標移到上面時，箭頭變成手形光標，表示在此處單擊鼠標，會鏈接到同一機器同一路徑filename.html文件上。1.鏈接到本機另一個Web頁面HTML簡介及使用技巧第23頁2.鏈接到另一臺計算機上Web頁面鏈接到另外一臺計算機上Web頁面，只要把目標URL地址賦給href即可。語法格式：<ahref=”URL地址”>文本內容</a>HTML簡介及使用技巧第24頁3.鏈接到文檔內指定位置(錨點)什么是錨點？

錨點是指網頁內部超鏈接。錨點能更準確地控制訪問者在其單擊超鏈接之后要抵達位置。沒有引入錨點鏈接將把訪問者帶到目標網頁頂端，而訪問者單擊了一個引入錨點超鏈接時，將直接跳轉到這個錨點所在位置。

錨點使用

HTML簡介及使用技巧第25頁語法格式：<aname=“A”>…</a><!--設置錨點標簽--><ahref=“#A”>…</a><!--鏈接到錨點所在位置-->HTML簡介及使用技巧第26頁2.3表格表格是由行和列交叉而成單元格組成二維網格，用于組織和表示結構化信息，也用于規(guī)劃網頁布局，是HTML文檔中功效最為靈活元素。利用表格標簽各種屬性設計出多樣化表格，用來存放網頁上文本和圖像。HTML簡介及使用技巧第27頁2.3.1表格基本結構HTML表格結構與平時使用其它表格一樣，也是由若干行和列組成。在HTML中創(chuàng)建表格用到以下基本標簽：<table></table>：定義表格標簽<tr></tr>：定義行標簽<th></tr>：定義表頭標簽<td></td>：定義單元格標簽(表格詳細數據)

HTML簡介及使用技巧第28頁1.表格慣用標簽2.3.2表格慣用標簽及屬性標簽說明<table>定義表格，<table>表示表格開始，</table>表示表格結束<caption>定義表格標題。格式：<captionalign＝＃>表格標題</caption>，表示一個表格標，align值可選擇top（放在表格上方居中），bottom（放在表格下方居中），默認值為上方居中<th>定義表格表頭，即字段名標簽。格式：<th>字段名</ht>,在<th>與</th>中間寫字段名，有幾個字段就加入幾個字段名標簽<tr>定義表格行。格式：<tr>...</tr>，表示表格一行開始和結束<td>定義表格單元。格式：<td>數據</td>，在<td>與</td>之間寫入詳細數據<thead>定義表格頁眉<tbody>定義表格主體<tfoot>定義表格頁腳<col>定義用于表格列屬性<colgroup>定義表格列組HTML簡介及使用技巧第29頁2.表格標簽慣用屬性屬性說明align設定表格水平對齊方式，有l(wèi)eft、center、right三種值bgcolor設定表格背景色background圖像文件URL,設定表格背景圖片資源位置border設定表格邊框線寬度。默認值為0，不顯示邊框cellspacing設定單元格之間間隔寬度，取像素值，默認值為2cellpadding設定表格單元格邊框與數據間距離，取像素值，默認值為1colspan設定單元格可橫跨列數rowspan設定單元格可橫跨行數width設定表格寬度值或相對于頁面長度百分比值HTML簡介及使用技巧第30頁2.3.3表格應用1.使用表格排版網頁使用表格排版網頁，能夠使網頁更美觀，條理更清楚，更易于維護和更新。2.盡可能細化表格不要把整個網頁放在一個大表格里。提議將整個頁面劃分成若干部分，普通表格上方放置Logo、Banner、Menu等、中部放置頁面內容、下方放置版權信息等，每一部分又由單獨表格來實現，盡可能細化。

HTML簡介及使用技巧第31頁2.4表單表單（Form）是從HTML實現人機交互主要伎倆，用于采集用戶輸入信息并提交給服務器，從而賦予網站以互動能力。表單是實現動態(tài)網頁主要外在形式，網站不論使用哪種語言來實現，表單都是其實現互動功效統一外在形式。HTML簡介及使

溫馨提示

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

評論

0/150

提交評論