html基礎標籤知識快速回憶
1、前言
筆者是一個移動開發人員，對於web前端以及很久沒接觸了，所以把以前的知識都給回學校了。最近由於涉及到前端開發，所以寫下這一篇文章，在學習的同時，也記下來，方便以後檢視。宣告：為了方便，筆者的參考內容和圖片來自w3school,連結如下：點選開啟連結
2、Html與瀏覽器的關係
Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：比如下面的內容
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
瀏覽器會根據標籤的含義解釋怎麼顯示各標籤包含的內容，對於上面這一段，會這麼解釋：
- <html> 與 </html> 之間的文字描述網頁
- <body> 與 </body> 之間的文字是可見的頁面內容
- <h1> 與 </h1> 之間的文字被顯示為標題
- <p> 與 </p> 之間的文字被顯示為段落
3、編寫Html最簡便的方法
筆者不是前端開發人員，如果讀者是前端開發人員或者是初學者，建議使用專業的html編輯器，專業的編輯器有：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
作為一個有經驗的開發人員，使用系統自帶的筆記本是最簡便的方式，使用方法如下：
新建一個文字--->輸入html資訊---->儲存為html字尾的檔案---->點選開啟就會使用預設的瀏覽器打開了
4、html基礎標籤
標題：標題是通過<h1>-<h6>這6個標籤標識的。 段落：<p>標籤即表示一個段落。 連結：連結是通過<a>標籤標識。標準的如下：當點選的時候跳轉的href指向的地址。 圖片：<img>即可指定一個影象。<a href="http://www.w3school.com.cn">This is a link</a>
<img src="w3school.jpg" width="104" height="142" />5、html語法規則
①、大多數 HTML 元素可以巢狀（可以包含其他 HTML 元素） ②、<body> 元素定義了 HTML 文件的主體 ③、<html> 元素定義了整個 HTML 文件 ④、一定要關閉標籤。比如<body></body> ⑤、html對大小寫不敏感6、html屬性
HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的資訊。屬性總是以名稱/值對的形式出現，比如：name="value"。屬性總是在 HTML 元素的開始標籤中規定。屬性和屬性值對大小寫不敏感。不過，全球資訊網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號
下面列一個大多數html標籤都有的屬性：
7、html標題和水平線
標題是通過<h>標籤定義的，<h1> 定義最大的標題。<h6> 定義最小的標題，預設情況下，瀏覽器會自動地在標題的前後新增空行，請確保將
HTML heading 標籤只用於標題。不要僅僅是為了產生粗體或大號的文字而使用標題。搜尋引擎使用標題為您的網頁的結構和內容編制索引。因為使用者可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文件結構是很重要的。應該將
h1 用作主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。
<hr /> 標籤在 HTML 頁面中建立水平線
8、html段落和換行
段落是通過 <p> 標籤定義的。瀏覽器會自動地在段落的前後新增空行。（<p> 是塊級元素）如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標籤，<br /> 元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義，因此它沒有結束標籤。
9、style樣式
注意，style是htnl標籤的一個屬性。 style樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式新增到 HTML 元素，或者間接地在獨立的樣式表中（CSS 檔案）進行定義。在 HTML 4 中，有若干的標籤和屬性是被廢棄的，因此，不要再使用它們了。如下：
下面舉幾個使用style的例子：
<h2 style="background-color:red">This is a heading</h2><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p><h1 style="text-align:center">This is a heading</h1>第一個定義了背景色，代替了bgcolor，第二個定義了字型的樣式，顏色和大小，代替了font。第三個定義了字型的對齊方式，代替了align。
10、用於格式化文字的標籤
11.使用樣式表
外部樣式表：當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。使用外部樣表如下：
<link rel="stylesheet" type="text/css" href="mystyle.css">內部樣式表：當單個檔案需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標籤定義內部樣式表。使用方式如下：
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head><p style="color: red; margin-left: 20px">
This is a paragraph
</p>12、html連結
超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影象，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。當您把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手。
我們通過使用 <a> 標籤在 HTML 中建立連結。
有兩種使用 <a> 標籤的方式：
- 通過使用 href 屬性 - 建立指向另一個文件的連結
- 通過使用 name 屬性 - 建立文件內的書籤
比如：
<a href="url">Link text</a><a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>href定義了連結目標，target指定了開啟連結的方式
13、html圖片
在 HTML 中，影象由 <img> 標籤定義。
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。要在頁面上顯示影象，你需要使用源屬性（src）。src 指 "source"。源屬性的值是影象的 URL 地址。定義影象的語法是：
<img src="boat.gif" alt="Big Boat">
14、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>border定義了邊框的寬度，如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文字：
比如：<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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>
為了避免在表格沒有內容的時候不顯示邊框，可以新增 作為佔位符。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td><span style="font-size: 13.3333px;"> </span></td>
<td>row 2, cell 2</td>
</tr>
</table>16、列表
列表分為無序列表和有序列表。 無序列表：無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始於 <ul> 標籤。每個列表項始於 <li>
使用方法如下：
有序列表：
同樣，有序列表也是一列專案，列表專案使用數字進行標記。有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
如下：
17、div和span標籤
HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。<div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設定樣式屬性。<div> 元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文件佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的資料。
HTML <span> 元素是內聯元素，可用作文字的容器。<span> 元素也沒有特定的含義。當與 CSS 一同使用時，<span> 元素可用於為部分文字設定樣式屬性。
---------文章寫自：HyHarden---------