應該掌握的幾個HTML標記語言(個人總結)


HTML的英語意思是:Hypertext Marked Language,即超文本標記語言,是一種用來製作超文本文檔的簡單標記語言。
超文本傳輸協議規定了瀏覽器在運行 HTML 文檔時所遵循的規則和進行的操作.
HTTP協議的制定使瀏覽器在運行超文本時有了統一的規則和標準.
用HTML編寫的超文本文檔稱爲HTML文檔,它能獨立於各種操作系統平臺,自1990年以來HTML就一直被用作WWW(是World Wide Web的縮寫,也可簡寫WEB、中文叫做萬維網) 的信息表示語言,使用HTML語言描述的文件,需要通過WEB瀏覽器顯示出效果。
 所謂超文本,是因爲它可以加入圖片、聲音、動畫、影視等內容,事實上每一個HTML文檔都是一種靜態的網頁文件,這個文件裏面包含了HTML指令代碼,這些指令代碼並不是一種程序語言,它只是一種排版網頁中資料顯示位置的標記結構語言,易學易懂,非常簡單。HTML的普遍應用就是帶來了超文本的技術----通過單擊鼠標從一個主題跳轉到另一個主題,從一個頁面跳轉到另一個頁面與世界各地主機的文件鏈接

HTML標記語言的特點:
瀏覽器對HTML的語法要求不是特別嚴格,不區分大小寫,屬性值可以加雙引號或不加,(這裏的雙引號是英文的而不是中文的雙引號)。
可以用Dreamweaver、記事本或其他工具編寫HTML源文檔。(簡單方便)
 
HTML文檔構成網頁的源代碼。
瀏覽器讀取*.htm或*.html文件中的標記,並根據這些標記來顯示頁面。
1.HTML文檔結構
HTML文檔主要由3部分組成。
(1)HTML部分。HTML標籤告訴瀏覽器這兩個標籤中間的內容是HTML文檔。
    <html>
    ...
    </html>
(2)頭部。這部分包含顯示在網頁導航欄中的標題和其他在網頁中不顯示的信息。標題包含在<title>和</title>標籤之間。
    <head>
    <title>...</title>
    </head>
(3)主體部分。主體部分包含在網頁中顯示的文本、圖象和鏈接等。
    <body>
    ...
    </body>
2.HTML基本語法
HTML標籤使用時必須用尖括號"<>"把元素括起來,而且是成對出現.無斜槓的標記表示標記的開始,有斜槓的標記表示標記的作用結束.
一般來講,HTML的標籤有3種表示方法:   
(1)<元素名>文本或超文本</元素名>
"關閉型"標記,必須有開始和結束對.
例:<body>hello!</body>
(2)<元素名 屬性名="屬性值...">文本或超文本</元素名>
帶有可選屬性的標記
例:<body bgcolor="limegreen">你好!</body>
bgcolor就是body元素的一個屬性,屬性的值就是"="後面的單詞描述的淺綠色.
(3)<元素名>
"非關閉型"標記.
例:<p>你好!
結尾不用</p>來結束也可以表示這是一段文字,類似的還有換行標記<br>,水平線標記<hr>等.

3.META標記
META標記出現在網頁的標題部分.它是HTML語言HEAD部分的一個輔助性標記.
這是一個特殊的HTML標記,提供有關網頁的信息,如作者姓名、公司名稱、聯繫信息,以及標註頁面的內容提要和關鍵字等,
許多搜索引擎都要使用此信息。META共有兩個屬性,分別是name屬性和http-equiv屬性。
(1)name屬性
name屬性主要用於描述網頁,與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
name屬性語法格式是:<meta name="參數" content="具體的參數值">。主要有以下幾中參數:
author(作者):標註網頁的作者
例,將KAKA指定爲網頁的作者,則使用以下META標記:
<meta name="作者" content="kaka">

keywords(關鍵字):設定關鍵字
如果要用keywords(關鍵字)來告訴搜索引擎網頁的關鍵字是什麼,則使用以下META標記:
<meta name ="keywords" content="IT,教育,網絡,科學,培訓,職業">
(因爲搜索引擎採用了最新的算法,目前網站在搜索引擎的排名,更多取決於站點的內容好壞,由此可見,關鍵字只是影響排名的其中一個因素。)

robots(機器人嚮導):索引向導
告訴搜索引擎機器人哪些頁面需要索引,哪些頁面不要索引。
content的參數有all,none,index,noindex,follow,nofollow,默認是all(全部)。
例:<meta name="robots" content="all">

(2)http-equiv屬性
http-equiv屬性可用來代替name屬性。
http-equiv類似於HTTP的頭部協議,它給瀏覽器迴應一些有用的信息,以幫助正確地顯示網頁內容。
expires(期限)
可以用於設定網頁的到期時間。一旦網頁過期,必須到服務器上重新調閱。注意:必須使用GMT的時間格式。
<meta http-equiv="expires" content="Wed, 22 Aug 2007 11:48:57 GMT">

refresh(自動更新)
間隔10秒網頁自動刷新,並指向新的URL網址。
<meta http-equiv="refresh" content="10; url=http://www.51cto.com">
 
HTML基本標記
標題標記
HTML語言提供了6級標題,<h1>爲最大,<h6>爲最小.用戶只需定義從H1導H6中的一種大小,瀏覽器將負責顯示過程。
例:
<html>
<head>
<title>標題</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
段落標記
<p>用於標記段落的開始,段落結束標記</p>並非是必需的.即它是一個非關閉型標記.
還可以通過段落的align屬性來設置段落的對齊方式,如左對齊(left)、居中(center)、右對齊(right)。
例:<p align="center">居中對齊
 
換行
<br>
<br>標記沒有結束標記。
 
預格式化標記
<pre>...</pre>
此標籤用於顯示預先已定義好格式的文本。
 
文本格式標記
<B>..</B> 加粗
<I>..</I> 斜體
<U>..</U> 下劃線
<SUB>..</SUB> 下標標記
<SUP>..</SUP> 上標標記

列表
無序列表(項目列表)
有序列表(編號列表)
無序列表就是項目列表.列表項前面帶有項目符號,包含在無序列表標記<UL>...</UL>內.
列表中每項都用列表標記 <LI>標記,其中LI表示列表項.
結束標記</LI>爲可選項
有序列表包含在<OL>...</OL>標記內.有序列表也顯示列表項,區別於有序列表的列表項以自動生成的編號順序顯示.(1.2.3.)
有序列表--屬性
<LI TYPE=I>    大寫羅馬字母 
<LI TYPE=i>    小寫羅馬字母
<LI TYPE=A>    大寫字母
<LI TYPE=a>    小寫字母 
<OL START=n>   使用1以外的數字開始編號(START屬性指定列表的起始數字)
 
其他常用標記
1.<font>標記
用於控制網頁上文本的顯示.文本大小、顏色和樣式等屬性都可以使用。
<font>標記屬性
color  指定字體的顏色。可以指定顏色名稱或十六進制值
size   用於指定字體的大小。可以爲字體指定的大小範圍從1~7,最大爲7,最小爲1;
         也可以使用一個默認字體大小,然後相對於該默認大小指定後續字體的大小。
         例如,默認字體大小爲3,則size+=4將使大小增加到7,size-=1將使大小減小到2
face   用於指定字體的樣式、類型

2.<HR>標記
用於在頁面上繪製水平線。此標籤只有開始標記,沒有結束標記,可用於屬性控制水平線的顯示。
<HR>標籤屬性
align   指定水平線的位置,可以將水平線居中對齊、右對齊或左對齊,如align=center
width   指定水平線的長度,可以按像素或百分比爲單位指定其長度,默認值爲100%,即橫穿整個文檔
size    指定水平線的高度,以像素爲單位
noshade 指定水平線以純色而不是以陰影進行顯示
color   指定水平線以一種顏色顯示,可以指定顏色名稱或以十六進制值表示

3.<IMG>標記
<img>標記用於在HTML文檔中插入圖像,<img>標記會顯示src屬性中指定的內容。
<img src="123.jpg">
<img>標籤的align屬性可用於調整圖像相對於周圍文本的對齊方式。
align可取下面的值:top bottom middle left right
<img align=top src="123.jpg">

4.<EMBED>標記
嵌入音頻文件用此標記.
<embed src="123.wma" width="100" height="40"></embed>

5.<MARQUEE>標記
這個標記經常用來做滾動字幕,可以橫向也可以縱向.
<marquee direction="right">hello!</marquee>
direction是方向屬性,值可以是up(向上)、down(向下)、left(向左)、right(向右).標記中間可以插入圖像,用於製作更復雜的效果。

6.超文本鏈接標記
語法:<a href="url"></a>
href是hypertext reference的縮寫,用於設定鏈接地址。鏈接地址必須爲URL地址。
幾個應用例子:
<a href="index.htm">回到主頁</a>
<a href="sound.wav">播放音頻文件</a>  打開鏈接後,會把鏈接的音樂源文件下載到本地的播放器程序中進行播放。
<a href=javascript:alert("hello")>點我</a>
<a href="123.doc">文本下載</a>   這是文件下載鏈接

特殊字符
&nbsp;   空格
&yen;    元(¥)
&gt;     大於(>)
&lt;     小於(<)
&quot;   引號("")
&amp;    "與"符號(&)
&copy;   版權號(?)
&reg;    註冊商標(?)

HTML表格標記
1.<table></table>  定義表格的開始和結束.實現表格的代碼就包含在其中.
<table>屬性
align  對齊
width  寬度,百分比或像素
bgcolor  背景色
background  定義整個表格背景以一幅圖片平鋪
border  定義邊框是否顯示
cellspacing  定義單元格之間的間距
cellpadding  定義單元格內的間距

2.<caption></caption> 定義表格標題.此項可省略
3.<tr></tr>  定義表格的一行
4.<th></th>以及<td></td> 
<th>和</th>用來設置表格欄標題(表頭),顯示爲粗體字此標記可省略.
<td>和</td>用來轉載單元格數據,它們必須位於<tr></tr>標記之間.
<td>標記屬性很多.如:bgcolor(背景色)、align(對齊方式)、valign(垂直對齊方式)
 
----------------------------------------------------

超鏈接是從源端點到目標端點的一種調轉。由於是在兩點之間鏈接,因此把端點形象地稱爲錨(Anchor).
也就是超文本鏈接中的標記<A>,也稱錨記。
URL:Uniform Resoure Locator  統一資源定位器

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章