HTML 基礎知識_第1頁
HTML 基礎知識_第2頁
HTML 基礎知識_第3頁
HTML 基礎知識_第4頁
HTML 基礎知識_第5頁
已閱讀5頁，還剩10頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

1、HTML 基礎知識培訓一、 HTML入門HTML英語意思是：Hypertext Marked Language，即超文本標記語言,是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web 的信息表示語言，用于描述Homepage的格式設計和它與WWW上其它Homepage 的連結信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。所謂超文本，因為它可以加入圖片、聲音、動畫、影視等內容，因為它可以從一個文件跳轉到另一個文件，與世界各

2、地主機的文件連接。l 過HTML可以表現出豐富多彩的設計風格圖片調用：<img src="路徑/文件名">文字格式：<font size="+5 " color="00FFFF">文字</font>l 通過HTML可以實現頁面之間的跳轉頁面跳轉：<a href="" title="" target="_blank">超級鏈接</a>l 通過HTML可以展現多媒體的效果音頻、視頻、動畫上面我們在示例超文本特征的同時，采

3、用了一些我們在制作超文本文件時需要用到的一些標簽。所謂標簽，就是它采用了一系列的指令符號來控制輸出的效果，這些指令符號用“<標簽名屬性=”值”></標簽名>”來表示。二、 HTML的基本結構超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。<html><head>頭 部 信 息</head><body>文 檔 主 體， 正 文 部 分</body></html>其中<HTML>在最外層，表示這對標記間的內容是HTML文檔。我們

4、還會看到一些頁面省略<HTML>標記，因為.html 或.htm 文件被Web瀏覽器默認為是HTML文檔,但是這種做法是錯誤的，后面會提到一些錯誤的做法。<HEAD> 之間包括文檔的頭部信息，如文檔總標題等，若不需頭部信息則可省略此標記。<BODY>表示正文內容的開始。下面是一個最基本的超文本文檔的源代碼：< html ><head><title>一個簡單的HTML示例</ title ></ head ><body>< center ><h3>歡迎光臨我的主頁&

5、lt;/ h3><br /><hr /><font size=”2”>這是我第一次做主頁，無論怎么樣，我都會努力做好！</font></center></ body ></html>head區的其他設置· 設置站點作者信息<meta name="author" content="Iriskang,小康" /> · 設置站點版權信息<meta name="Copyright" content="sin

6、a " /> · 站點的簡要介紹(推薦)<meta name="description" content="新浪房產是專業的房地產網站，致力于為房地產業界、主力購房人群、裝修人群提供各類服務與咨訊。主要欄目有：房產新聞、樓盤展示、新盤中心、寫字樓、商鋪、地產圈、家居裝修、家居圖庫、業主社區論壇等內容。房地產,房產,買房,租房,二手房,家居,裝修,物業,房貸,寫字樓" /> · 站點的關鍵詞(推薦)<meta name="keywords" content="房產家居,房地

7、產新聞,建材,裝修,寫字樓" />三、 超文本中的標簽在開始正式內容制作之前，我們必須先了解一下web標準有關代碼的規范。了解這些規范可以幫助你少走彎路,盡快通過代碼校驗。1. 單標簽某些標記稱為“單標簽”，因為它只需單獨使用就能完整地表達意思，這類標記的語法是：<標簽名稱 />最常用的單標簽是<br />, 它表示換行。2. 雙標簽另一類標記稱為“雙標簽”，它由“始標簽”和“尾標簽”兩部分構成，必須成對使用，其中始標簽告訴Web瀏覽器從此處開始執行該標記所表示的功能，而尾標簽告訴Web瀏覽器在這里結束該功能。始標簽前加一個斜杠（/）即成為尾標記。這類標

8、記的語法是：<標簽> 內 容</標簽>其中“內容” 部分就是要被這對標記施加作用的部分。例如你想突出對某段文字的顯示，就將此段文字放在一<EM> </EM>標記中：<EM>第一：</EM>3. 標簽屬性許多單標記和雙標記的始標記內可以包含一些屬性， 其語法是：<標簽名字 屬性1=”值” 屬性2=”值” 屬性3=”值” ></標簽名字>各屬性之間無先后次序，屬性也可省略（即取默認值），例如單標記<HR />表示在文檔當前位置畫一條水平線（horizontal line），一般是從窗口中當前

9、行的最左端一直畫到最右端。帶一些屬性： <HR SIZE=”3 “ ALIGN=”LEFT” WIDTH="75%" />其中SIZE屬性定義線的粗細，屬性值取整數，缺為1；ALIGN屬性表示對齊方式，可取LEFT（左對齊，缺省值），CENTER（居中），RIGHT（右對齊）；WIDTH 屬性定義線的長度，可取相對值，（由一對 " " 號括起來的百分數，表示相對于充滿整個窗口的百分比），也可取絕對值（用整數表示的屏幕像素點的個數，如WIDTH=”300”），缺省值是"100%"。其中值得注意的：1所有的標記都必須要有一個相

10、應的結束標記以前在HTML中，你可以打開許多標簽，例如<p>和<li>而不一定寫對應的</p>和< /li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標簽必須關閉。如果是單獨不成對的標簽，在標簽最后加一個" /"來關閉它。例如:<br /><img height="80" alt="網頁設計師" src="./images/logo_w3cn_200x80.gif" width="200" />

11、;2所有標簽的元素和屬性的名字都必須使用小寫與HTML不一樣，XHTML對大小寫是敏感的，<title>和<TITLE>是不同的標簽。XHTML要求所有的標簽和屬性 的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常dreamweaver自動生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。3 所有的XML標記都必須合理嵌套同樣因為XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：<p><

12、b></p></b> 必須修改為：<p><b></b></p> 就是說，一層一層的嵌套必須是嚴格對稱。4 所有的屬性必須用引號""括起來在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號。例如:<height=80> 必須修改為：<height="80"> 特殊情況，你需要在屬性值里使用雙引號，你可以用"，單引號可以使用'，例如：<alt="say'hello'"&g

13、t;四、 頁面布局與文字設計1. 標題一般文章都有標題、副標題、章和節等結構，HTML中也提供了相應的標題標簽<Hn>,其中n為標題的等HTML總共提供六個等級的標題，n越小，標題字號就越大，以下列出所有等級的標題：H1></H1>第一級標題H2></H2>第二級標題H3></H3>第三級標題H4></H4>第四級標題H5></H5>第五級標題H6></H6>第六級標題請看下面的例子：<html><head><title>標題示例</

14、title></head><body>這是一行普通文字<P>H1>一級標題</H1>H2>二級標題</H2>H3>三級標題</H3>H4>四級標題</H4>H5>五級標題</H5>H6>六級標題</H6></P></body></html>2. 換行<br />在編寫HTML文件時，我們不必考慮太細的設置，也不必理會段落過長的部分會被瀏覽器切掉。因為，在HTML語言規范里，每當瀏覽器窗口被縮小時，瀏

15、覽器會自動將右邊的文字轉折至下一行。所以，編寫者對于自己需要斷行的地方，應加上<br />標簽。請看下面的例子：<html><head><title>無換行示例</title></head><body>登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。</body></html><html><head><title>換行示例</title></head><body>登鸛雀樓<br />白日依山盡，&

16、lt;br />黃河入海流。<br />欲窮千里目，<br />更上一層樓。</body></html>3. 段落標簽<P></P>為了排列的整齊、清晰，文字段落之間，我們常用<P></P>來做標記。文件段落的開始由<P>來標記，段落的結束由</P>來標記。<P>標簽還有一個屬性ALING，它用來指名字符顯示時的對齊方式，一般值有CENTER、LEFT、RIGHT三種。下面，我們用兩個例子來說明這個標簽的用法。<html><head>

17、<title>段落標簽</title></head><body><P ALIGN=”CENTER”>浣溪沙<P>一曲新詞酒一杯，去年天氣舊亭臺，夕陽西下幾時回。</P><P>無可奈何花落去，似曾相識燕歸來。小園香徑幾徘徊。</P></body></html><html><head><title>段落標簽</title></head><body>登鸛雀樓<P>白日依山盡，<br

18、 />黃河入海流。<br />欲窮千里目，<br />更上一層樓。</P></body></html>4. 水平線段<HR />這個標簽可以在屏幕上顯示一條水平線，用以分割頁面中的不同部分。<HR />有三個屬性：size水平線的寬度width 水平線的長，用占屏幕寬度的百分比或象素值來表示align 水平線的對齊方式，有LEFT RIGHT CENTER三種noshade 線段無陰影屬性，為實心線段<HTML><HEAD><TITLE>線段粗細的設定</TITL

19、E></HEAD><BODY><P>這是第一條線段，無size設定，取內定值SIZE=1來顯示<BR><HR /><P>這是第二條線段，SIZE=5<BR /></P><HR SIZE=5 /><P>這是第三條線段，SIZE=10<BR /></P><HR SIZE=10 /></BODY></HTML>5. 文字的大小設置提供設置字號大小的是FONT，FONT有一個屬性SIZE，通過指定SIZE屬性就能設置字

20、號大小，而SIZE屬性的有效值范圍為17，其中缺省值為3。我們可以SIZE屬性值之前加上“”、“”字符，來指定相對于字號初始值的增量或減量。請看示例：<html><head><title>字號大小</title></head><body><P><font size=”7”>這是size=7的字體</font></P ><P><font size=”6”>這是size=6的字體</font></P ><P><fo

21、nt size=”5”>這是size=5的字體</font></P><P><font size=”4”>這是size=4的字體</font></P><P><font size=”-1”>這是size=-1的字體</font></P></body></html>6. 文字的字體與樣式HTML4.0提供了定義字體的功能，用FACE屬性來完成這個工作。FACE的屬性值可以是本機上的任一字體類型，但有一點麻煩的是，只有對方的電腦中裝有相同的字體才可以在他

22、的瀏覽器中出現你預先設計的風格。<font face="字體">請看例子：<HTML><HEAD><TITLE>字體</TITLE></HEAD><BODY><CENTER><FONT face="楷體_GB2312">歡迎光臨</FONT><P><FONT face="宋體">歡迎光臨</FONT><P><FONT face="仿宋_GB2312&qu

23、ot;>歡迎光臨</FONT><P><FONT face="黑體">歡迎光臨</FONT><P><FONT face="Arial">Welcom my homepage.</FONT><P><FONT face="Comic Sans MS">Welcom my homepage.</FONT><P></CENTER></BODY></HTML>為了讓文字富有變

24、化，或者為了著意強調某一部分，HTML提供了一些標簽產生這些效果，現將常用的標簽列舉如下：<B>粗體</B><I>斜體</I><U>加下劃線</U><TT>打字機字體<TT><BIG>大型字體</BIG><SMALL>小型字體</SMALL><BLINK>閃爍效果</BLINK><EM>表示強調，一般為斜體</EM><STRONG>表示特別強調，一般為粗體</STRONG><

25、CITE>用于引證、舉例，一般為斜體</CITE>7. 文字的顏色文字顏色設置格式如下：<font color=”color_value”></font>這里的顏色值可以是一個十六進制數(用“#”作為前綴)，也可以是以下16種顏色名稱。Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080"Olive = "#808000&q

26、uot; White = "#FFFFFF"Yellow = "#FFFF00" Maroon = "#800000"Navy = "#000080"Red = "#FF0000"Blue = "#0000FF"Purple = "#800080"Teal = "#008080"Fuchsia = "#FF00FF"Aqua = "#00FFFF"五、 列表LIST1. 無序號列表無序號列表使用的

27、一對標簽是<ul></ul>，每一個列表項使用<LI></LI>。其結構如下所示：<UL><LI>第一項</LI><LI>第二項</LI><LI>第三項</LI></UL><html><head><title>無序列表</title></head><body>這是一個無序列表：<P><UL>國際互聯網提供的服務有：<LI>WWW服務</LI

28、><LI>文件傳輸服務</LI><LI>電子郵件服務</LI><LI>遠程登錄服務</LI><LI>其它服務</LI></UL></P></body></html>例：2. 序號列表序號列表和無序號列表的使用方法基本相同，它使用標簽<OL></OL>，每一個列表項使用<LI></LI>。每個項目都有前后順序之分，多數用數字表示。其結構如下所示：<OL><LI>第一項</

29、LI><LI>第二項</LI><LI>第三項</LI></OL>3. 定義性列表定義性列表可以用來給每一個列表項再加上一段說明性文字，說明獨立于列表項另起一行顯示。在應用中，列表項使用標簽<DT>標明，說明性文字使用<DD>表示。在定義性列表中，還有一個屬性是COMPACT,使用這個屬性后，說明文字和列表項將顯示在同一行。其結構如下所示：<DL><DT>第一項</DT> <DD>敘述第一項的定義</DD><DT>第二項</DT&

30、gt; <DD>敘述第二項的定義</DD><DT>第三項</DT> <DD>敘述第三項的定義</DD></DL>六、 表格1. 表格的基本結構<table>.</table> 定義表格<caption>.</caption>定義標題<tr> 定義表行<th> 定義表頭<td> 定義表元(表格的具體數據)基本表格的例子：<table width="100%" cellspacing="0&quo

31、t; cellpadding="0"><caption align="top">表格標題</caption><tr><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th></tr><tr><th scope="row">&nbsp;</th><td>&nbsp;&

32、lt;/td></tr></table>2. 表格的標題表格標題的位置，可由ALIGN屬性來設置，其位置分別由表格上方和表格下方。下面為表格標題位置的設置格式。設置標題位于表格上方：<caption align=”top”> . </caption>設置標題位于表格下方：<caption align=”bottom”> . </caption>3. 表格的大小一般情況下，表格的總長度和總寬度是根據各行和各列的總和自動調整的，如果我們要直接固定表格的大小，可以使用下列方式： <table width=”n1” h

33、eight=”n2”>width和height屬性分別指定表格一個固定的寬度和長度，n1和n2可以用像素來表示，也可以用百分比（與整個屏幕相比的大小比例）來表示。4. 邊框尺寸設置邊框是用border屬性來體現的，它表示表格的邊框邊厚度和框線。將border設成不同的值，有不同的效果。5. 格間寬度格與格之間的線為格間線，它的寬度可以使用<TABLE>中的CELLSPACING屬性加以調節。格式是：<TABLE CELLSPACING=”#”>#表示要取用的像素值格間寬度如下圖中的綠色區域：6. 內容與格線之間的寬度我們還可以在<TABLE>中設置CE

34、LLPADDING屬性，用來規定內容與格線之間的寬度。格式為：<TABLECELLPADDING=”#”>#表示要取用的像素值內容與格線之間的寬度如下圖中的紅色區域：7. 表格內文字的對齊/布局表格中數據的排列方式有兩種，分別是左右排列和上下排列。左右排列是以ALIGN屬性來設置，而上下排列則由VALIGN屬性來設置。其中左右排列的位置可分為三種：居左（left)、居右(right)和居中 (center)；而上下排列基本上比較常用的有四種：上齊(top)、居中(middle)、下齊(bottom)。<tr align=”#”><th align=”#”>

35、#=left, center, right<td align=”#”><tr valign=”#”><th valign=”#”> #=top，middle，bottom<td valign=”#”>示例：<table width="300" border="1" cellspacing="0" cellpadding="0"><caption align="top">表格標題</caption><tr&g

36、t;<th width="33%" scope="col">水平居中</th><th width="33%" align="right" scope="col">水平居右</th><th width="33%" align="left" scope="col">水平居左</th></tr><tr><th height="43&

37、quot; valign="top" scope="row">垂直頂端</th><td valign="middle">垂直居中</td><td valign="bottom">垂直底端</td></tr></table>8. 跨多行、多列的表元要創建跨多行、多列的表元，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN屬性，這兩個屬性的值，表明了表元中要跨越的行或列的個數。跨多列的表元 &l

38、t;th colspan=”#”><td colspan=”#”>colspan表示跨越的列數，例如colspan=2表示這一格的寬度為兩個列的寬度。跨多行的表元 <th rowspan=”#”><td rowspan=”#”>rowspan所要表示的意義是指跨越的行數，例如rowspan=”2” 就表示這一格跨越表格兩個行的高度。l 跨多列的表元<table border><tr><th colspan=3>值班人員 </th><tr><th>星期一</th> <

39、;th>星期二</th> <th>星期三</th><tr><td>李強</td><td>張明</td><td>王平</td></table>l 跨多行的表元<table border><tr><th rowspan=2>值班人員</th><th>星期一</th><th>星期二</th> <th>星期三</th></tr><

40、tr><td>李強</td><td>張明</td><td>王平</td></tr></table>l 表格的顏色在表格中，既可以對整個表格填入底色，也可以對任何一行、一個表元使用背景色。表格的背景色彩<table bgcolor=”#”>行的背景色彩<tr bgcolor=”#”>表元的背景色彩<th bgcolor=”#”>或 <td bgcolor=”#”>顏色疊加層次如下圖：七、 文件之間的鏈接超文本中的鏈接是其最重要的特性之一，使用者可以

41、從一個頁面直接跳轉到其他的頁面、圖象或者服務器。一個鏈接的基本格式如下：<a href="/" target="_blank"> w3c </a>標簽<a>表示一個鏈接的開始，</a>表示鏈接的結束；屬性“href”定義了這個鏈接所指的地方，即URL地址；target 鏈接打開的地址的目標窗口，可能的取值："_blank" 在新窗口打開此鏈接。"_self" 在本窗口打開此鏈接（本頁刷新）。"_parent" 在父框架窗口打開此鏈接。"_top" 在最外層框架窗口打開此鏈接。八、 多媒體效果超文本之所以在很短的時間內如此廣泛的受到人們的青睞，很重要的一個原因時它能支持多媒體的特性，如圖象、聲音、動畫等。這一部分，我們先來學習在一個頁面中如何插入圖象。1. 插入圖形超文本支持的圖象格式一般有X Bitmap(XBM)、GIF、JPEG三種，所以我們對圖片處理后要保存為這三種格式中的任何一種，這樣才可以在瀏覽器中看到。插入圖象的標簽是<IMG>，其格式為：<IMG SRC="圖形文件

溫馨提示

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

評論

0/150

提交評論