如題，本文主要描述博主對之前前端學習中HTML5標籤的一些整理。

一、基本分類

HTML4中，元素被分成兩大類: inline(內聯元素)與block(塊級元素)。

1. 塊級元素

每個塊級元素獨佔一行，
可以直接控制寬度、高度以及盒子模型的相關css屬性，
默認情況下，其寬度爲父級元素內容的寬度，
默認情況下，其高度爲本身內容的高度。
常用的塊級元素有：

標籤	描述
`<div>`	常用塊級元素，多用於佈局
`<h1>...<h6>`	一到六級標題
`<ol>、<ul>、<li>`	有序列表、無序列表、列表項
`<dl>、<dt>、<dd>`	自定義列表、定義術語（列表項）、定義項目描述
`<table>`	表格
`<p>`	段落，也稱行內元素
`<address>`	定義文檔作者或擁有者的聯繫信息
`<form>`	HTML 表單
`<hr>`	水平分隔線
`<nav>`	導航
`<aside>`	側邊欄
`<menu>`	菜單列表
`<article>`	文章
`<dialog>`	對話窗口
`<header>、<footer>`	頁眉、頁腳
…	…

2. 內聯元素

本身屬性爲display:inline的元素，即和相鄰的內聯元素在同一行，
寬高、內外邊距（垂直屬性）不可改變，
寬高是由內容本身的大小決定的（文字、圖片等）
常用的內聯元素有：

標籤	描述
`<a>、<b>`	錨點、加粗
`<span>`	常用的內聯容器，定義文本內區塊
`<br>`	換行
`<i>`	定義斜體字
`<em>`	定義強調文本
`<strong>`	加粗強調
`<label>`	定義 input 元素的標註
`<cite>`	定義引用
`<code>`	定義計算機代碼文本，可以和`<pre>`連用
`<img>`	圖片
`<input>`	輸入框
`<select>`	下拉列表
`<sub>、<sup>`	定義下標文本、上標文本
`<textarea>`	文本域
…	…

HTML5中，元素主要分爲7類：Metadata（元數據元素）、Flow（流式元素）、Sectioning（章節元素）、Heading（標題元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）。
具體描述，可見：HTML5元素分類與內容模型。

二、HTML5新增特性

相對於HTML4，新增了語義化更好的標籤元素和API。

1. 這裏列舉其中幾個常用的標籤：

標籤	描述
`<article>`	文章
`<aside>`	側邊欄
`<nav>`	導航組
`<video>`	定義視頻
`<audio>`	定義音頻
`<canvas>`	定義圖形，比如圖表和其他圖像，該標籤是基於js的繪圖api
`<svg>`	定義使用 SVG 的圖像繪製， XML 格式定義圖形
`<progress>`	狀態標籤（任務過程：安裝、加載）
`<menu>`	菜單列表
`<time>`	定義日期/時間
`<ruby>`	ruby註釋
`<dialog>`	定義對話框或窗口
`<details>`	定義用戶可查看或隱藏的額外細節
`<datalist>`	定義輸入控件的預定義選項
`<keygen>`	定義表單裏一個生產的鍵值，加密信息傳送
`<output>`	定義計算結果
…	…

2. 新增的API有：

上面提的<canvas> 和 <svg>，一個是基於js的繪圖api，一個是使用 XML 格式定義矢量圖形api，各有千秋。
Geolocation（地理定位）：用於獲得用戶的地理位置的api，getCurrentPosition()方法用於檢測是否支持定位，showPosition() 函數獲得並顯示經度和緯度。
Drag/Drop（拖放）：把 draggable 屬性設置爲 ‘true’，表示設置元素拖放，具體操作參考api中的方法。
web存儲：localStorage、sessionStorage 。
應用程序緩存：通過給<html> 標籤中添加 manifest屬性，啓用應用程序緩存，manifest 文件的建議文件擴展名爲".appcache"。
WebSockets：要連接遠程主機，只需新建一個WebSocket實例，提供希望連接的對端URL。

更多，可見：W3school - HTML5 新元素

三、部分標籤使用

1. 列表

  <!-- 1.無序列表 -->
  <h3>購物車</h3>
  <ul>
    <li>1.蘋果</li>
    <li>2.香蕉</li>
    <li>3.藍莓</li>
  </ul>
  <!-- 2.有序列表 -->
  <h3>飲料</h3>
  <ol>
    <li>1.牛奶</li>
    <li>2.橙汁</li>
    <li>3.奶茶</li>
  </ol>
  <!-- 3.定義列表 -->
  <dl>
    <dt>php</dt>
    <dd>全球通用服務器端編程語言</dd>

    <dt>mysql</dt>
    <dd>全球最廣泛的開源關係型數據庫系統</dd>

    <dt>Laravel</dt>
    <dd>全球最廣泛的開源PHP開發框架</dd>
  </dl>

顯示：

2. 表格

  <h3>表格</h3>
  <table border="1" width="500" cellspacing="0" cellpadding="5">
    <!-- 1標題 -->
    <caption><h2>購物車</h2></caption>
    <!-- 2表頭 -->
    <thead>
      <tr bgcolor="bluegreen">
        <th>編號</th>
        <th>名稱</th>
        <th>單價</th>
        <th>數量</th>
        <th>金額</th>
        <th>付款人</th>
      </tr>
    </thead>
    <!-- 3.主體 -->
    <tbody>
      <tr>
        <td>1</td>
        <td>電腦</td>
        <td>10000</td>
        <td>1</td>
        <td>10000</td>
        <td rowspan="4" align="center">Alfred</td>
      </tr>
      <tr>
          <td>2</td>
          <td>手機</td>
          <td>2000</td>
          <td>2</td>
          <td>4000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>鼠標</td>
        <td>300</td>
        <td>3</td>
        <td>900</td>
      </tr>
      <!-- 4.底部 -->
      <tr>
        <td colspan="3" align="center">合計</td>
        <td>6</td>
        <td>14900</td>
      </tr>
    </tbody>
  </table>

顯示：

3. 表單控件

<h3>表單和表單控件</h3>
  <h3>用戶註冊</h3>
  <form action="login.php" method="POST">
    <!-- 1表單分組 -->
    <fieldset style="border: none;background-color: rgba(22, 73, 167, 0.671);">
      <!-- 2分組名稱 -->
      <legend>基本信息</legend>
    
      <p>
        <label for="username">賬號：</label>
        <input type="text" name="username" id="username" placeholder="不能超過8個字符">
      </p>
      <p>
        <label for="password">密碼：</label>
        <input type="password" name="password" id="password" placeholder="必須在6-12位之間">
      </p>
      <p>
        <label for="email">郵箱：</label>
        <input type="email" name="email" id="email" placeholder="[email protected]">
      </p>
      <p>
        <label for="age">年齡：</label>
        <input type="number" name="age" id="age" min="16" max="80" width="500" placeholder="範圍：16-80">
      </p>
    </fieldset>
    <fieldset>
      <legend>興趣愛好</legend>
    
      <p>
        <label for="">課程：</label>
        <!-- 下拉列表 -->
        <select name="" id="">
          <!-- 分組 -->
          <option value="">請選擇</option>

          <optgroup label="前端">
            <option value="">HTML5</option>
            <option value="">CSS3</option>
            <option value="" selected>JavaScript</option>
          </optgroup>
          
          <optgroup label="後端">
            <option value="">PHP</option>
            <option value="">mysql</option>
            <option value="">Laravel</option>
          </optgroup>
          
        </select>
      </p>
      <p>
        <label for="">愛好：</label>
        <!-- 複選框 -->
        <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩遊戲</label>
        <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">編程</label>
        <input type="checkbox" name="hobby[]" value="moves" id="moves"><label for="moves">影視</label>
      </p>
      <p>
        <label for="">性別：</label>
        <!-- 單選框 -->
        <input type="radio" name="gender" id="male"><label for="male">男生</label>
        <input type="radio" name="gender" id="female"><label for="female">女生</label>
        <input type="radio" name="gender" id="secret"><label for="secret">保密</label>
      </p>
    </fieldset>
    <fieldset>
      <legend>按鈕操作</legend>
    
      <p>
        <!-- 常用按鈕 -->
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <input type="button " name="button" value="按鈕">
        <button type="">註冊</button>
      </p>
      <p>
        <!-- 上傳提交  -->
        <input type="file" name="" id="" multiple>
        <input type="image" src="submit.gif" alt="提交" height="50" width="auto">
        <input type="hidden" name="" value="china">
      </p>
      <p>
        <!-- 文本域 -->
        <textarea name="" id="" cols="100" rows="10" style="resize: both">
          <!-- 新增表單屬性 -->
          1.placeholder：設置提示信息或默認值；
          2.autofocus：自動獲取輸入焦點；
            e.g.  <input type="text" name="username" id="username" autofocus>
          3.required：設置字段爲必填項；
            e.g.  <input type="text" name="username" id="username" required>
          4.pattern：正則表達式驗證，更加精準的控制用戶的輸入；
            e.g.  <input type="text" name="username" id="username" pattern="[A-Z]{6}">
          5.list：list屬性值必須與input的id值一致，實現dataliist列表與控件綁定；
          6.width和height：（寬高）只要設置其中一個即可，另一個等比縮放；
            e.g.  <input type="image" scr="img.jpg" width="50" alt="提交">
          7.min、max和step：區間和步長設置；
            e.g.  <input type="number" name="salary" min="10000" max="50000" step="500">
          8.novalidate：提交時放棄數據驗證（交給服務器驗證）；
            e.g.  <form action="" method="post" novalidate></form>
          <!-- 新增表單類型 -->
          1.number：僅限數值型數據；
            e.g.  <input type="number" name="" id="">
          2.date：僅限日期類型數據；
            e.g.  <input type="date" min="2017-02-18" max="2019-09-01" value="2018-10-01">
          3.time：僅限時間型數據，只允許設置小時區間，分鐘供參考；
            e.g.  <input type="time" min="10:10" max="22:00" value="21:00">
          以上都是輸入時驗證；
          4.email：僅限於電郵地址類型；
            e.g.  <input type="email" name="" id="">
          5.search：有內容時，會顯示一個取消圖標；
          6.url：僅限以http:// 或 https:// 開頭的url地址；
          以上類型，提交時驗證；
          7.color：通過系統調色板來獲取顏色，返回16進制顏色值；
            e.g.  <input type="color" name="color" id="color">
                  <button id="btn">獲取顏色值</button>
                  <input type="text" id="color-value">
                  <script>
                    document.getElementById("btn").onclick=function(){
                      document.getElementById("color-value").value = document.getElementById("color").value;
                    }
                  </script>
          
        </textarea>
      </p>
      <p>
        <!-- 搜索框 + datalist -->
        <label for="search">搜索：</label>
        <input type="text" name="search" id="search" list="keyword">
        <datalist id="keyword">
          <option value="html">html</option>
          <option value="css3">css3</option>
          <option value="javascript">javascript</option>
          <option value="vue">vue</option>
          <option value="bootstrap">bootstrap</option>
          <option value="php">php</option>
          <option value="python">python</option>
          <option value="ruby">ruby</option>
        </datalist>
      </p>
    </fieldset>
    <fieldset>
        <!-- 音視頻標籤 -->
      <legend>音視頻標籤</legend>
      <!-- 1.視頻 -->
      <!-- 相關屬性：
        controls：設置可控；
        autoplay：自動播放（與preload預加載屬性相互排斥）；
        muted：靜音；
        poster：自定義海報； -->
      <video src="http://upos-hz-mirrorcosu.acgvideo.com/upgcxcode/54/67/119866754/119866754-1-6.mp4?e=ig8euxZM2rNcNbRM7WdVhoM17wUVhwdEto8g5X10ugNcXBB_&deadline=1570364892&gen=playurl&nbs=1&oi=2045622435&os=cosu&platform=html5&trid=8c09fdc066c2410a8b74f4bd9451d90a&uipk=5&upsig=8cf6c9ef4fe4bfaf6b61ba5354096f34&uparams=e,deadline,gen,nbs,oi,os,platform,trid,uipk&mid=0" width="360" controls poster="http://www.laststand.cn/uploads/allimg/180911/4-1P911144R4551.jpg">街舞</video>
      
      <!-- 2.音頻 -->
      <!-- 相關屬性：
        controls：設置可控制；
        autoplay：自動播放（與preload預加載屬性相互排斥）；
        muted：靜音；
        loop：循環播放 -->
      <audio src="http://music.163.com/song/media/outer/url?id=29004400.mp3" controls></audio>
    </fieldset>
  </form>

顯示：

結束！

Web前端（一） - HTML標籤常用整理！

一、基本分類

二、HTML5新增特性

三、部分標籤使用

微服務實踐k8s&dapr開發部署實驗（2）狀態管理

Win10 LTSC 2019 安裝後的一些步驟

Python 潮流週刊#52：Python 處理 Excel 的資源

Python（十四）- 多任務：進程、線程、協程

Python（十五）- 創建二叉樹和遍歷的實現

數據結構與算法（一）- 常見的數據結構及應用場景分析

Python（十三）- 常用內置模塊與第三方庫

【Hexo搭建個人博客】：Next主題-相關配置

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

linux以太網驅動總結