HTML基礎知識總結

標籤分類

• HTML標籤又稱爲HTML元素，份內聯元素、塊級元素和內聯塊級元素

• （1）內聯元素

• inline element
• 不獨佔一行，沒法定義寬高
• 高度由自己內容大小決定，可嵌套內聯元素與純文本

• strong、em、del、ins、sub、sup、span、label、a

  （2）塊級元素

• block element
• 獨佔一行，能夠定義寬高
• 能夠嵌套任何元素

• div、p、h1~h六、address、ul、ol、li、dl、dt、dd、table、form、fieldset、legend、hr
  article、aside、footer、header、hgroup、main、nav、section、blockquote

  （3）內聯塊級元素

• inline-block element
• 不獨佔一行，能夠定義寬高

• img、input、select、textarea、iframe、canvas、audio、video

  （4）使用注意

• 內聯元素能夠嵌套內聯元素
• 塊級元素能夠嵌套任何元素
• p標籤不能嵌套div
• a標籤不能嵌套a標籤
• 語義化標籤
• 代碼結構清晰，方便閱讀，有利於團隊合做開發
• 有利於搜索引擎優化（SEO）
• 方便其餘設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)，以語義的方式來渲染網頁

• <title>：頁面主體內容。
  <hn>：h1~h6，分級標題，<h1> 與 <title> 協調有利於搜索引擎優化。
  <ul>：無序列表。
  <ol>：有序列表。
  <header>：頁眉一般包括網站標誌、主導航、全站連接以及搜索框。
  <nav>：標記導航，僅對文檔中重要的連接羣使用。
  <main>：頁面主要內容，一個頁面只能使用一次。若是是web應用，則包圍其主要功能。
  <article>：定義外部的內容，其中的內容獨立於文檔的其他部分。
  <section>：定義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。
  <aside>：定義其所處內容以外的內容。如側欄、文章的一組連接、廣告、友情連接、相關產品列表等。
  <footer>：頁腳，只有當父級是body時，纔是整個頁面的頁腳。
  <small>：呈現小號字體效果，指定細則，輸入免責聲明、註解、署名、版權。
  <strong>：和 em 標籤同樣，用於強調文本，但它強調的程度更強一些。
  <em>：將其中的文本表示爲強調的內容，表現爲斜體。
  <mark>：使用黃色突出顯示部分文本。
  <figure>：規定獨立的流內容（圖像、圖表、照片、代碼等等）（默認有40px左右margin）。
  <figcaption>：定義 figure 元素的標題，應該被置於 figure 元素的第一個或最後一個子元素的位置。
  <cite>：表示所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題。
  <blockquoto>：定義塊引用，塊引用擁有它們本身的空間。
  <q>：短的引述（跨瀏覽器問題，儘可能避免使用）。
  <time>：datetime屬性遵循特定格式，若是忽略此屬性，文本內容必須是合法的日期或者時間格式。
  <abbr>：簡稱或縮寫。
  <dfn>：定義術語元素，與定義必須緊挨着，能夠在描述列表dl元素中使用。
  <address>：做者、相關人士或組織的聯繫信息（電子郵件地址、指向聯繫信息頁的連接）。
  <del>：移除的內容。
  <ins>：添加的內容。
  <code>：標記代碼。
  <meter>：定義已知範圍或分數值內的標量測量。（Internet Explorer 不支持 meter 標籤）
  <progress>：定義運行中的進度（進程）。
  <i>：用於定義圖標

  a標籤做用

• 超連接標籤
• 打電話
• 發郵件
• 錨點定位
• 協議限定符

• <a href="https://www.xxx.com">超連接標籤</a>
      <a href="tel:1343333333">打電話</a>
      <a href="mailto:test@qq.com">發郵件</a>
      <a href="#miao">anchor 標籤(錨點)</a>
      <a href="javascript:void(0);">點擊不跳轉：點擊不跳轉</a>
      <a href="javascript:;">點擊不跳轉：點擊不跳轉</a

 列表分類

<ul>

  <li>列表項1</li>

  <li>列表項2</li>

</ul>

<ol>

  <li>列表項1</li>

  <li>列表項2</li>

</ol>

<dl>

  <dt>名詞1</dt>

  <dd>名詞1解釋1</dd>

  <dd>名詞1解釋2</dd>

  ...

  <dt>名詞2</dt>

  <dd>名詞2解釋1</dd>

  <dd>名詞2解釋2</dd>

</dl>

完整的表格結構

<table border="1" cellpadding="0" cellspacing="0" width="200">
      <thead>
        <tr style="background-color: gray;">
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
    
      <tfoot style="background-color: black;color: white;">
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>

## 新增的input type屬性值：

 

| **類型******       | **使用示例******            | **含義****** |

| ---------------- | ----------------------- | ---------- |

| **email******    | <input type="email">    | 輸入郵箱格式     |

| **tel******      | <input type="tel">      | 輸入手機號碼格式   |

| **url******      | <input type="url">      | 輸入url格式    |

| **number******   | <input type="number">   | 輸入數字格式     |

| **search******   | <input type="search">   | 搜索框（體現語義化） |

| **range******    | <input type="range">    | 自由拖動滑塊     |

| **time******     | <input type="time">     | 小時分鐘       |

| **date******     | <input type="date">     | 年月日        |

| **datetime****** | <input type="datetime"> | 時間         |

| **month******    | <input type="month">    | 月年         |

| **week******     | <input type="week">     | 星期 年       |

 

## 經常使用新屬性

 

| **屬性******           | **用法******                               | **含義******                               |

| -------------------- | ---------------------------------------- | ---------------------------------------- |

| **placeholder******  | <input type="text" placeholder="請輸入用戶名"> | 佔位符  當用戶輸入的時候 裏面的文字消失  刪除全部文字，自動返回       |

| **autofocus******    | <input type="text" autofocus>            | 規定當頁面加載時 input 元素應該自動得到焦點                |

| **multiple******     | <input type="file" multiple>             | 多文件上傳                                    |

| **autocomplete****** | <input type="text" autocomplete="off">   | 規定表單是否應該啓用自動完成功能  有2個值，一個是on 一個是off      on 表明記錄已經輸入的值  1.autocomplete 首先須要提交按鈕 <br/>2.這個表單您必須給他名字 |

| **required******     | <input type="text" required>             | 必填項  內容不能爲空                              |

| **accesskey******    | <input type="text" accesskey="s">        | 規定激活（使元素得到焦點）元素的快捷鍵   採用 alt + s的形式      |