TML <base> 元素

指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素。

包含屬性href 和

target 可以指定a 標簽的默認窗口打開行為

<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默認就打開新的窗口 <a href="aaa">123</a>

使用

<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>

雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片

content 標簽

HTML <aside> 元素

表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。

HTML <blockquote> 元素

（或者 HTML 塊級引用元素），代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進（注 中說明了如何更改）。若引文來源于網絡，則可以將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，可以通過 <cite> 元素。

HTML <figure> 元素

代表一段獨立的內容, 經常與說明（caption） <figcaption> 配合使用, 并且作為一個獨立的引用單元。當它屬于主內容流（main flow）時，它的位置獨立于主體。這個標簽經常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體。

Inline text semantics

HTML 縮寫元素（<abbr>）

用于展示縮寫，并且可以通過可選的 title 屬性提供完整的描述。

ps: 完整描述樣式貌似不能自定義

HTML鍵盤輸入元素(<kbd>)

用于表示用戶輸入，它將產生一個行內元素，以瀏覽器的默認monospace字體顯示。

HTML標記文本元素(< Mark >)

表示為引用或符號目的而標記或突出顯示的文本，這是由于標記的段落在封閉上下文中的相關性或重要性造成的。

ps:項目中大量使用span 標記的做法不符合html5 的語義化

HTML Ruby Base（<rb>）

元素用于分隔<ruby>注釋的基本文本組件（即正在注釋的文本）。一個<rb>元素應該包裝基本文本的每個單獨的原子段。

ps: 拼音注解

<samp> 元素

用于標識計算機程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。

HTML 中的<small>

元素將使文本的字體變小一號。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個元素被重新定義為表示邊注釋和附屬細則，包括版權和法律文本。

HTML <sub> 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更低并且更小。

ps: 下腳標

HTML <sup> 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更高并且更小。

ps: 上腳標

HTML <u> 元素

使文本在其內容的基線下的一行呈現下劃線。在HTML5中, 此元素表示具有未標注的文本跨度，顯示渲染，非文本注釋，例如將文本標記為中文文本中的專有名稱(一個正確的中文標記), 或 將文本標記為拼寫錯誤

HTML <map>

與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區域).

HTML <track> 元素

被當作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計時字幕（或者基于時間的數據），例如自動處理字幕。

HTML <object> 元素

（或者稱作 HTML 嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源

ps: 支持引入的資源類型

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

關于支持資源類型的測試

http://joliclic.free.fr/html/object-tag/en/index.php

、語義化標簽含義

語義化的標簽，旨在讓標簽有自己的含義。

二、語義化標簽的優勢

1. 代碼結構清晰，方便閱讀，有利于團隊合作開發。
2. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
3. 有利于搜索引擎優化（SEO）。

三、常見的語義化標簽

<title>：頁面主體內容。

<h>：h1~h6，分級標題，<h1> 與 <title> 協調有利于搜索引擎優化。

<ul>：無序列表。

<li>：有序列表。

<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屬性遵循特定格式，如果忽略此屬性，文本內容必須是合法的日期或者時間格式。

<address>：作者、相關人士或組織的聯系信息（電子郵件地址、指向聯系信息頁的鏈接）。

<del>：移除的內容。

<meter>：定義已知范圍或分數值內的標量測量。（Internet Explorer 不支持 meter 標簽）

四. 代碼示例

    <!-- hgroup 標題用來為標題分組，可以將一組相關的標題同時放入到hgroup中 -->
    <hgroup>
         <h1>回鄉偶書</h1>
         <h2>其二</h2>
    </hgroup>


    <!-- p標簽    表示頁面中一個段落 也是塊元素 -->
    <p>在p標簽的內容 表示為一個段落</p>


    <!-- 
    em標簽 表示語調語氣加重 
    行內元素 ：不會獨占一行的元素
    -->
    <p>今天天氣<em>真</em>不錯</p>


    <!-- strong 表示強調，重要內容 -->
    <p>你今天必須要<strong>完成作業</strong></p>


    魯迅說
    <!-- blockquote 表示 引用長引用  塊元素 -->
    <blockquote>
        我說過很多話 但我都不記得了
    </blockquote>


    <!-- q標簽 表示短引用 為行內元素 -->
    子曰<q>溫故而知新</q>


</body>

關聯面試題：請簡述下你對HTML語義化的理解？知道的可以在評論區留言！[送心]