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

時間 2020-02-23

標籤應該掌握幾個 html 標記語言我的總結欄目 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文檔。

（2）頭部。這部分包含顯示在網頁導航欄中的標題和其餘在網頁中不顯示的信息。標題包含在<title>和</title>標籤之間。

（3）主體部分。主體部分包含在網頁中顯示的文本、圖象和連接等。

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標記：

keywords(關鍵字)：設定關鍵字

若是要用keywords(關鍵字)來告訴搜索引擎網頁的關鍵字是什麼，則使用如下META標記：

(由於搜索引擎採用了最新的算法，目前網站在搜索引擎的排名，更多取決於站點的內容好壞，因而可知，關鍵字只是影響排名的其中一個因素。)

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的時間格式。

refresh(自動更新)

間隔10秒網頁自動刷新，並指向新的URL網址。

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>標籤的align屬性可用於調整圖像相對於周圍文本的對齊方式。
align可取下面的值：top bottom middle left right

4.<EMBED>標記
嵌入音頻文件用此標記.

5.<MARQUEE>標記
這個標記常常用來作滾動字幕,能夠橫向也能夠縱向.

<marquee direction="right">hello!</marquee>

direction是方向屬性,值能夠是up(向上)、down(向下)、left(向左)、right(向右).標記中間能夠插入圖像，用於製做更復雜的效果。

6.超文本連接標記
語法：<a href="url"></a>

href是hypertext reference的縮寫，用於設定連接地址。連接地址必須爲URL地址。

幾個應用例子：

<a href="sound.wav">播放音頻文件</a> 打開連接後，會把連接的音樂源文件下載到本地的播放器程序中進行播放。

<a href="123.doc">文本下載</a> 這是文件下載連接

特殊字符

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 統一資源定位器