HTML常用標籤大全（前篇）

阿新 • • 發佈：2019-01-30

1.HTML簡介

什麼是HTML?
HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言: HyperText Markup Language
HTML 不是一種程式語言，而是一種標記語言
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 文件包含了HTML 標籤及文字內容
HTML文件也叫做 web 頁面
HTML 標籤
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b 
> 和 </b>

標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤
<標籤>內容

<!DOCTYPE>宣告有助於瀏覽器中正確顯示網頁。
HTML5 宣告
<!DOCTYPE html>
HTML 4.01宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 宣告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.HTML例項

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
    <h1>你好</h1>
    <p>段落。</p>
</body>
</html>
其中：
<!DOCTYPE html> 宣告為 HTML5 文件
<html> 元素是 HTML 頁面的根元素
<head 
> 元素包含了文件的元（meta）資料
<title> 元素描述了文件的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

對於中文網頁需要使用宣告編碼，否則會出現亂碼。

3.HTML元素和屬性

HTML 元素以開始標籤起始，HTML 元素以結束標籤終止
元素的內容是開始標籤與結束標籤之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
大多數 HTML 元素可擁有屬性
不要忘記結束標籤
使用小寫標籤
`沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。

<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標籤中新增斜槓，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

HTML 元素可以設定屬性
屬性可以在元素中新增附加資訊
屬性一般描述於開始標籤
屬性總是以名稱/值對的形式出現，比如：name=”value”。
屬性值應該始終被包括在引號內。
雙引號是最常用的，不過使用單引號也沒有問題。
Remark提示: 在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name=’John “ShotGun” Nelson’

4.HTML標題

標題（Heading）是通過 <h1> - <h6> 標籤進行定義的. <h1> 定義最大的標題。 <h6> 定義最小的標題。
請確保將 HTML 標題標籤只用於標題。不要僅僅是為了生成粗體或大號的文字而使用標題。
搜尋引擎使用標題為您的網頁的結構和內容編制索引。

5.水平線插入

<hr> 標籤在 HTML 頁面中建立水平線。

6.html註釋

可以將註釋插入 HTML 程式碼中，這樣可以提高其可讀性，使程式碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。

<!-- 這是一個註釋 -->

7.html段落

段落是通過 <p> 標籤定義的，瀏覽器會自動地在段落的前後新增空行， 是塊級元素。

對於 HTML，您無法通過在 HTML 程式碼中新增額外的空格或換行來改變輸出的效果。當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 程式碼中的所有連續的空行（換行）也被顯示為一個空格。

8.html文字格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>你好</title> 
</head> 
<body>
<b>加粗文字</b><br><br>
<i>斜體文字</i><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
<em>強調文字</em><br>
<strong>加粗文字</strong><br>
<dfn>定義專案</dfn><br>
<code>一段電腦程式碼</code><br>
<samp>計算機樣本</samp><br>
<kbd>鍵盤輸入</kbd><br>
<var>變數</var>
<big>這個文字字型放大</big>
<small>這個文字是縮小的</small>
<pre>
此例演示如何使用 pre 標籤
對空行和    空格
進行控制
</pre>
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p> 
<q>塊引用Build a future where people live in harmony with nature.</q>
<p>My favorite color is <del>刪除線</del> <ins>下劃線</ins>!</p>
</body>
</html>

9.html連結

 - HTML使用標籤 <a>來設定超文字連結。超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影象，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。
　　當您把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手。
　　在標籤<a> 中使用了href屬性來描述連結的地址。
　　預設情況下，連結將以以下形式出現在瀏覽器中：
　　一個未訪問過的連結顯示為藍色字型並帶有下劃線。
　　訪問過的連結顯示為紫色並帶有下劃線。
　　點選連結時，連結顯示為紅色並帶有下劃線。
　　使用 target 屬性，你可以定義被連結的文件在何處顯示。
<a href="http://www.runoob.com/" target="_blank">訪問菜鳥教程!</a>
<p><a href="//www.microsoft.com/">本文字</a> 是一個指向全球資訊網上的頁面的連結。</p>
<p>
**跳轉到連結指定地址**
<a href="#C4">檢視章節 4</a>
</p>
<h2><a id="C4">章節 4</a></h2>
建立圖片連結:
<a href="//www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>

10.html頭部

<head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。可以新增在頭部區域的元素標籤為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素
<title> 標籤定義了不同文件的標題。
<title> 在 HTML/XHTML 文件中是必須的。
<title> 元素:
定義了瀏覽器工具欄的標題
當網頁新增到收藏夾時，顯示在收藏夾中的標題
顯示在搜尋引擎結果頁面的標題

<base> 標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link> 標籤定義了文件與外部資源之間的關係。
<link> 標籤通常用於連結到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 標籤定義了HTML文件的樣式檔案引用地址.
在<style> 元素中你需要指定樣式檔案來渲染HTML文件:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

HTML <meta> 元素
meta標籤描述了一些基本的元資料。
<meta> 標籤提供了元資料.元資料也不顯示在頁面上，但會被瀏覽器解析。
META元素通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他元資料。元資料可以使用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他Web服務。
<meta>一般放置於 <head>區域
<meta> 標籤- 使用例項
為搜尋引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定義網頁作者:
<meta name="author" content="Hege Refsnes">
每30秒中重新整理當前頁面:
<meta http-equiv="refresh" content="30">

<script>標籤用於載入指令碼檔案，如： JavaScript。
<script> 元素在以下章節會詳細描述。

11.html與css

CSS 可以通過以下方式新增到HTML中:
內聯樣式- 在HTML元素中使用"style" 屬性
內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素 來包含CSS
外部引用 - 使用外部 CSS 檔案
最好的方式是通過外部引用CSS檔案.

內聯樣式

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 
使用內聯樣式的方法是在相關的標籤中使用樣式屬性。
樣式屬性可以包含任何 CSS 屬性。
以下例項顯示出如何改變段落的顏色和左外邊距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
現在通常使用font-family（字型），color（顏色），和font-size（字型大小）屬性來定義文字樣式，而不是使用<font>標籤。

內部樣式表

當單個檔案需要特別樣式時，就可以使用內部樣式表。
你可以在<head> 部分通過 <style>標籤定義內部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。
使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

12.html影象

在 HTML 中，影象由<img> 標籤定義。
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示影象，你需要使用源屬性（src）。src 指 "source"。源屬性的值是影象的 URL 地址。
定義影象的語法是：
<img src="url" alt="some_text">
alt 屬性用來為影象定義一串預備的可替換的文字。
height（高度） 與 width（寬度）屬性用於設定影象的高度與寬度。
屬性值預設單位為畫素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
定義影象地圖和可點選區域
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

13.html表格

表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由 <td> 標籤定義）。字母 td 指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
**例項**
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 表格和邊框屬性

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML 表格表頭

表格的表頭使用 <th> 標籤進行定義。
cellpadding制定內容與邊框的距離
cellspacing指定單元格與單元格的距離
大多數瀏覽器會把表頭顯示為粗體居中的文字：
<table border="1" cellpadding="10" cellspacing="10">
 <caption>標題</caption>
  定義列組，用於設定樣式
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
    thead, tbody, 和 tfoot 元素預設不會影響表格的佈局。不過，您可以使用 CSS 來為這些元素定義樣式，從而改變表格的外觀。
    <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td colspan="2">row 2, cell 1</td>
<td rowspan="2">row 2, cell 2</td>
</tr>
</tbody>
</table>

14.html列表

無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表使用 <ul> 標籤，type包括圓點，圓圈和正方形
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

有序列表也是一列專案，列表專案使用數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤，type包含大小寫字母和羅馬數字，數字
列表項項使用數字來標記。
<ol type="I">
<li>Coffee</li>
<li>Milk</li>
</ol>

自定義列表

自定義列表不僅僅是一列專案，而是專案及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML常用標籤大全（前篇）

1.HTML簡介

2.HTML例項

3.HTML元素和屬性

4.HTML標題

5.水平線插入

6.html註釋

7.html段落

8.html文字格式化

9.html連結

10.html頭部

11.html與css

12.html影象

13.html表格

14.html列表

HTML常用標籤大全（前篇）

HTML常用標籤整理（f）

HTML常用標籤屬性（一）

文本分類需要CNN？No！fastText完美解決你的需求（前篇）

計算機常用英語大全（中英文對照）

專案二：Kaggle房價預測（前篇）

第三章：CSS樣式（前篇）

HTML教程學習筆記（第一篇）

MY-SQL-----資料庫（前篇）

Linux常用命令大全（最完整）

織夢（dedecms）標籤大全（非常全面）

Android應用程式程序啟動過程（前篇）

OpenCV霍夫變換系列（前篇）-經典霍夫線變換

文字分類需要CNN？ No！fastText完美解決你的需求（前篇）

Python之Numpy庫常用函式大全（含註釋）

前端開發----微信小程式入門級教程（前篇）

強大的畫圖標籤——Canvas（基礎篇）

Python之Matplotlib庫常用函式大全（含註釋）

計算機常用英語大全（中英文對照）

OpenCV背景虛化（前篇）

HTML常用標籤大全（前篇）

1.HTML簡介

2.HTML例項

3.HTML元素和屬性

4.HTML標題

5.水平線插入

6.html註釋

7.html段落

8.html文字格式化

9.html連結

10.html頭部

11.html與css

12.html影象

13.html表格

14.html列表

相關推薦