HTML基礎知識總結

標籤分類

  • HTML標籤又稱爲HTML元素,份內聯元素、塊級元素和內聯塊級元素
  • (1)內聯元素javascript

  • inline element
  • 不獨佔一行,沒法定義寬高
  • 高度由自己內容大小決定,可嵌套內聯元素與純文本
  • strong、em、del、ins、sub、sup、span、label、a

    (2)塊級元素java

  • 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)內聯塊級元素web

  • inline-block element
  • 不獨佔一行,能夠定義寬高
  • img、input、select、textarea、iframe、canvas、audio、video

    (4)使用注意canvas

  • 內聯元素能夠嵌套內聯元素
  • 塊級元素能夠嵌套任何元素
  • 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>ide

  <li>列表項1</li>字體

  <li>列表項2</li>優化

</ul>網站

<ol>ui

  <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的形式      |

相關文章
相關標籤/搜索