在學習 HTML 的過程中有一個感受就是知識並不困難，但是比較繁瑣，需要自己去總結消化，以及適當的記憶才能用好。所以在學習完後就想做一個系統的梳理，於是就有了這篇文章，主要是有兩個目的：

自己消化總結梳理知識知識點，主要用於自己學習，如果想更好學習，推薦大家去 W3shool官網學習
方便自己以後複習(畢竟自己的資料才最好接收到)

標題

HTML 的標題是通過 <h1> - <h6> 標籤進行定義的：

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>

段落

HTML 段落是通過 <p> 標籤定義的：

<p>我是一個段落</p>

超鏈

HTML 超鏈接是通過 <a> 標籤進行定義的：

<a href="url">鏈接顯示文本</a>

HTML 標籤當然可以嵌套，於是就有將一張圖片設置爲超鏈接：

<a href="url"><img src="url" /></a>

圖像

HTML 圖像是通過 <img> 標籤定義的：

<img src="url" width="" height="" />

<img> 標籤是一個自閉合標籤，其他的標籤一定要手動關閉。避免不必要的麻煩。

腳本

<script> 標籤是定義插入一段腳本的標籤，必需屬性是 type,默認值爲 type="text/javascript" --表示插入的是一段 javascript 腳本：

<script type="text/javascript">
   document.write("HelloWorld!");
</script>

該腳本會在瀏覽器輸出 HelloWorld!。以後在插入腳本的時候一般都是鏈接外部腳本文件，所以 script 元素一個經常使用的屬性是 src，地址就是外部的腳本文件位置。

表格

HTML 中表格由 <table> 標籤定義。每個表格均有若干行(由 <tr> 標籤定義)，每行被分割爲若干單元格(由 <td> 標籤定義)。td 指單元格（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
例如我們要創建一個兩行三列的表格：

<table border="1">
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
        <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
<table>

如果不定義邊框屬性 border=“1” 的條件下，表格將不顯示邊框

上述表格在瀏覽器中顯示如下：

1,1	1,2	1,3
2,1	2,2	2,3

<caption> 還可以用來定義表格的標題：

<table border="1">
    <capation>這是一個表格</capation>
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
        <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
<table>

這是一個表格

1,1	1,2	1,3
2,1	2,2	2,3

<th> 用來定義表格的表頭：

<table border="1">
    <caption>人事情況</caption>
    <!--必須要定義一個行-->
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>25</td>
        <td>程序員</td>
    </tr>
        <tr>
        <td>王五</td>
        <td>35</td>
        <td>產品經理</td>
    </tr>
<table>

人事情況
姓名	年齡	職業
張三	25	程序員
王五	35	產品經理

框架

通過使用框架，可以在同一個瀏覽器窗口中顯示不止一個頁面。
HTML 框架是通過 <frameset> 標籤定義的，可以定義水平框架和垂直框架：
水平框架：

<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html"> <!--框架1(文檔1)-->
  <frame src="/example/html/frame_b.html"> <!--框架2(文檔2)-->
  <frame src="/example/html/frame_c.html"> <!--框架3(文檔3)-->
</frameset>

垂直框架：

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html"> <!--框架1(文檔1)-->
  <frame src="/example/html/frame_b.html"> <!--框架2(文檔2)-->
  <frame src="/example/html/frame_c.html"> <!--框架3(文檔3)-->
</frameset>

內聯框架

<iframe> 用於在網頁內顯示網頁。使用方法：

<iframe src="URL"></iframe> 
<!--其中URL指的是另一個網頁的地址(文檔).html文件-->

<iframe> 的基本屬性寬度和高度：

<iframe src="URL" width="200" height="100"></iframe>

在瀏覽器中顯示如下：(生成一個200*100的框)：

格式化

文本格式化標籤

文本格式化標籤有很多，但是文本樣式都是通過 css 進行定義，所以真正使用的場景很少，主要有以下這些：

<abbr> --粗體(blod)
<em> --強調(emphasize)，顯示爲斜體
<i> --斜體(italic)
<strong> --加重語氣，也顯示爲斜體，但是語氣更強，一般不使用
<ins> --下劃線(insert)
<del> --刪除線(delete)
<sup> --上標
<sub> --下標

預格式化標籤

因爲在格式化的過程中，html 標籤中的多次空格和換行默認爲只有一次空格和換行，所以要想保留自己的格式，需要使用標籤 <pre>。
HTML 預格式化是通過 <pre> 標籤定義的：

<pre>
我會       保留  自己的格式


可以顯示多次換行以及多個空格

</pre>

最後的輸出顯示爲：

我會       保留  自己的格式


可以顯示多次換行以及多個空格

程序代碼標籤

HTML 中代碼是通過 <code> 標籤定義的：

<code>
  var result = function sum(num1, num2) {
      return num1+num2;
  }
</code>

但是最後的輸出可能超出我們的預料，輸出會是下面這樣：

var result = function sum(num1, num2){return num1+num2;}

所以要想保留代碼風格，還要加上 <pre> 標籤進行預格式化：

<pre>
    <code>
    var result = function sum(num1, num2) {
          return num1+num2;
  }
    </code>
</pre>

最後的輸出纔是我們想要的結果：

    
    var result = function sum(num1, num2) {
          return num1+num2;
  }

引用和術語定義標籤

引用和引用塊，<q> 和 <blockquote> 分別是引用和塊引用的標籤：

<p>WWF 的目標是 <q>構建人與自然和諧相處的世界。</q></p>

最後的輸出會自動加上雙引號;

<p>以下內容引用自 WWF 的網站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力於保護自然界的未來。
世界領先的環保組織，WWF 工作於 100 個國家，
並得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote>

瀏覽器一般會對 <blockquote> 標籤進行縮進處理，其他沒有不同

縮寫標籤

<abbr> 元素定義縮寫或者是首字母縮寫。
具體含義看下面的例子：

<p><abbr title="World Health Organization">WHO</abbr></p>

列表

無序列表

<ul> 標籤用於定義無序列表，<li> 用於定義列表項：

<ul>
    <li>麪包</li>
    <li>牛奶</li>
    <li>沙發</li>
</ul>

最終的輸出就是如下所示：

麪包
牛奶
沙發

有序列表

<ol> 標籤定義有序列表，同樣， <li> 用於定義列表項：

<ol>
    <li>麪包</li>
    <li>牛奶</li>
    <li>沙發</li>
</ol>

最終輸出結果：
1.麪包
2.牛奶
3.沙發

自定義列表

除了使用 <ul> 和 <ol> 列表之外，我們還可以自定義列表，使用的標籤有：<dl> 、<dt> 和 <dd>：

<dl>
   <dt>Coffee</dt>
      <dd>Black hot drink</dd>
   <dt>Milk</dt>
      <dd>White cold drink</dd>
</dl>

在瀏覽器顯示如下：

Coffee: Black hot drink
Milk: White cold drink

表單

HTML 表單用於蒐集不同類型的用戶輸入。表單並不會顯示，可以看做是一個可以容納表單元素的容器。
HTML 中使用 <form> 標籤定義表單。

<form>
    form element(內部定義的是表單元素)...
</form>

表單元素指的是不同類型的 input 元素、複選框、單選按鈕、提交按鈕等等。

input元素

<input> 元素是最重要的表單元素。不需要關閉。
根據 type 屬性不同，<input> 元素有很多形態。 type 屬性是必需屬性。
經常使用的值有：text 、password、submit 、radio、checkbox

使用方法就是直接添加值即可：
text值：

<form>
    用戶：<input type="text"><br />
    密碼：<input type="text">
</form>

瀏覽器顯示如下：

用戶：密碼：

submit 值：

<form>
    用戶：<input type="text"><br />
    密碼：<input type="text"><br />
    <input type="submit">
</form>

瀏覽器中顯示如下：

用戶：
密碼：

radio 值：

<input type="radio">male<br/>
<input type="radio">femal<br/>

在瀏覽器中顯示如下：
male

femal

除了input 元素除了 type 屬性外，當然也有其他的屬性，比如經常使用的是在type="text"時，添加佔位符屬性：placeholder;在type=“submit” 時，添加 value 屬性，表示的是提交按鈕。

button 屬性

除了 input 元素之外，還有一些其他的元素，有 <button>、<select> 和 <textarea>
HTML中使用 button 定義按鈕：

<button type="button" onclick="alert('Hello World!')">點擊我！</button>

瀏覽器中的顯示效果是：
點擊我！

select元素

select 元素定義下拉列表：

<p>班級：</p>
<select>
    <option value="1班">1班</option>
    <option value="2班">2班</option>
    <option value="3班">3班</option>
    <option value="4班">4班</option>
</select>

瀏覽器中顯示：

班級

1班 2班 3班 4班

textarea元素

textarea 元素定義文本域:

<textarea rows="10" cols="20">  <!--注意定義行數和列數，否則顯示不出來-->
    The cat was playing in the garden.
<textarea>

瀏覽器中顯示如下：

The cat was playing in the garden.

在 HTML5 中還添加了一些較新的類型，這裏我們不過多的討論，具體的會放在 HTML5 中講解，其實也很簡單，只要分清使用的場景即可!

音頻/視頻

首先要明白，音頻和視頻文件目前沒有較好的使用方法，因爲各個瀏覽器的兼容性問題，但是在 HTML5 之後，我們找到了一種比較好的方法，但也不是完美的。
在HTML5 之前，插入音頻和視頻主要使用兩個標籤(元素)：<embed> 和<object>

插入音頻文件

1 使用 <embed> 標籤：

<embed src="url" height="100" width="100" />

其中 src屬性是自己插入音頻資源位置；
問題：

標籤在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

2 使用 <object> 標籤：

<object src="url" height="" width="" />

其中 src屬性是自己插入音頻資源位置；
問題：

不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

3 <audio> 元素
<audio> 是 HTML5 元素，使用如下：

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

<audio> 元素有幾個常用的屬性：

control: 是否允許用戶控制暫停、播放、調節音量等操作，一般都要加上；
autoplay:是否允許資源自動播放，一般是不會的，會對帶來不好的用戶體驗；
loop: 是否循環播放，一般也不設置，看具體的場合，需要設置的場合很少。

4 最好的音頻解決方法

<audio controls="controls" width="100" height="100">
   <source src="song.mp3" type="audio/mps" />
   <source src="song.ogg" type="audio/ogg" />
   <embed src="song.mp3" width="100" height="100" />
   Your bowser is not support audio element!
</audio>

插入視頻文件

視頻和音頻的方法是一樣的，都有三個標籤進行插入：<embed>、object 和 <video>
1 使用 <embed> 標籤：

<embed src="url" height="100" width="100" />

其中 src屬性是自己插入視頻資源位置；
問題：

標籤在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
不同的瀏覽器對視頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該視頻。
如果用戶的計算機未安裝插件，無法播放視頻。
如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

2 使用 <object> 標籤：

<object data="url" height="" width="" />

其中 src屬性是需要插入視頻資源位置；
問題：

不同的瀏覽器對視頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該視頻。
如果用戶的計算機未安裝插件，無法播放視頻。
如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

3 <video> 元素
<video> 是 HTML5 元素，使用例如：

<video controls="controls" width="300" height="200">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support this video format.
</video>

<video> 元素有幾個常用的屬性：

control: 是否允許用戶控制暫停、播放、調節音量等操作，一般都要加上；
autoplay:是否允許資源自動播放，一般是不會的，會對帶來不好的用戶體驗；
loop: 是否循環播放，一般也不設置，看具體的場合，需要設置的場合很少。

4 最好的解決方案

<video controls="controls" width="300" height="200">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <embed src="song.mp3" width="300" height="200" />
Your browser does not support this video format.
</video>

這就是 HTML 中所有的基本的元素，HTML5 略有涉及，有關 HTML5 詳細的學習見下一篇文章。

參考：

[1] W3school官網

HTML基礎語法回顧

文章目錄

標題

段落

超鏈

圖像

腳本

表格

框架

內聯框架

格式化

文本格式化標籤

預格式化標籤

程序代碼標籤

引用和術語定義標籤

縮寫標籤

列表

無序列表

有序列表

自定義列表

表單

input元素

button 屬性

select元素

textarea元素

音頻/視頻

插入音頻文件

插入視頻文件

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

JS基本引用類型

VS2017中新建Qt GUI 工程報錯:無法解析的外部符號 __imp_CommandLineToArgvW，該符號在函數 WinMain 中被引用

數據結構學習：C++實現線性表的順序存儲結構

Git教程：Git版本操作之撤銷修改（二）

CSS盒子(框)模型

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結