HTML基礎知識總結

時間 2019-11-12

標籤 html 基礎知識總結欄目 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

</ol>

<dl>

...

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。