(1)內聯元素javascript
strong、em、del、ins、sub、sup、span、label、a
(2)塊級元素java
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
img、input、select、textarea、iframe、canvas、audio、video
(4)使用注意canvas
<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 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的形式 |