10-HTML基礎回顧

#本文主要內容

• html 的常見元素

• html 元素的分類

• html 元素的巢狀關係

• html 元素的預設樣式和 CSS Reset

• html 常見面試題

#html 的常見元素

html 的常見元素主要分為兩類：head 區域的元素、body 區域的元素。下面來分別介紹。

#1、head 區域的 html 元素

head 區域的 html 元素，不會在頁面上留下直接的內容。

• meta

• title

• style

• link

• script

• base

base元素的介紹：

<base href="/">

base 標籤用於指定基礎的路徑。指定之後，所有的 a 連結都是以這個路徑為基準。

#2、html 元素（body 區域）

body 區域的 html 元素，會直接出現在頁面上。

• div、section、article、aside、header、footer

• p

• span、em、strong

• 表格元素：table、thead、tbody、tr、td

• 列表元素：ul、ol、dl、dt、dd

• a

• 表單元素：form、input、select、textarea、button

div 是最常見的元素，大多數場景下，都可以用div（實在不行就多包幾層div）。可見，div 是比較通用的元素，這也決定了 div 的的語義並不是很明確。

常見標籤的重要屬性：

• a[href,target]
• img[src,alt]
• table td[colspan,rowspan]。設定當前單元格佔據幾行幾列。在合併單元格時，會用到。
• form[target,method,enctype]
• input[type,value]
• button[type]
• selection>option[value]
• label[for]

#html 文件的大綱

我們平時在寫論文或者其他文件的時候，一般會先列出大綱，然後再寫具體的內容。

同樣，html 網頁也可以看成是一種文件，也有屬於它的大綱。

一個常見的html文件，它的結構可以是：

    <section>
        <h1>一級標題</h1>

        <section>
            <h2>二級標題</h2>
            <p>段落內容</p>
        </section>

        <section>
            <h2>二級標題</h2>
            <p>段落內容</p>
        </section>

        <aside>
            <p>廣告內容</p>
        </aside>

    </section>

    <footer>
        <p>某某公司出品</p>
    </footer>
 

#檢視網頁大綱的工具

我們可以通過http://h5o.github.io/這個工具檢視一個網頁的大綱。

使用方法：

（1）將網址http://h5o.github.io/儲存到書籤欄

（2）去目標網頁，點選書籤欄的網址，即可檢視該網頁的大綱。

這個工具非常好用，既可以檢視網頁的大綱，也可以檢視 markdown 線上文件的結構。

#html 元素的分類

按照樣式分類：

• 塊級元素

• 行內元素

• inline-block：比如form表單元素。對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設定寬高）。

按照內容分類：

圖片來源：https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content

#html 元素的巢狀關係

• 塊級元素可以包含行內元素。

• 塊級元素不一定能包含塊級元素。比如 div 中可以包含 div，但 p 標籤中不能包含 div。

• 行內元素一般不能包含塊級元素。比如 span 中不能包含 div。但有個特例：在 HTML5 中， a 標籤中可以包含 div。

注意：在 HTML5 中a > div是合法的，div > a > div是不合法的 ；但是在 html 4.0.1 中，a > div仍然是不合法的。

#html 元素的預設樣式和 CSS Reset

比如下拉框這種比較複雜的元素，是自帶預設樣式的。如果沒有這個預設樣式，則該元素在頁面上不會有任何表現，則必然增加一些工作量。

同時，預設樣式也會帶來一些問題：比如，有些預設樣式我們是不需要的；有些預設樣式甚至無法去掉。

如果我們不需要預設的樣式，這裡就需要引入一個概念：CSS Reset。

#常見的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS。連結：https://meyerweb.com/eric/tools/css/reset/

方案二：

雅虎的 CSS Reset。連結：https://yuilibrary.com/yui/docs/cssreset/

我們可以直接通過 CDN 的方式引入：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

方式三：（比較有爭議）

*{
    margin: 0;
    padding: 0;
}

上面何種寫法，比較簡潔，但也有爭議。有爭議的地方在於，可能會導致 css 選擇器的效能問題。

#Normalize.css

上面的幾種 css reset 的解決思路是：將所有的預設樣式清零。

但是，Normalize.css的思路是：既然瀏覽器提供了這些預設樣式，那它就是有意義的。既然不同瀏覽器的預設樣式不一致，那麼，Normalize.css就將這些預設樣式設定為一致。

#html 常見面試題

#doctype 的意義是什麼

• 讓瀏覽器以標準模式渲染

• 讓瀏覽器知道元素的合法性

#HTML、XHTML、HTML5的區別

• HTML 屬於 SGML

• XHTML 屬於 XML，是 HTML 進行 XML 嚴格化的結果

• HTML5 不屬於SGML，也不屬於 XML（HTML5有自己獨立的一套規範），比 XHTML 寬鬆。

#HTML5 有什麼新的變化

• 新的語義化元素

• 表單增強

• 新的API：離線、音視訊、圖形、實時通訊、本地儲存、裝置能力等。

#em 和 i 的區別

共同點：二者都是表示斜體。

區別：

• em 是語義化的標籤，表示強調。

• i 是純樣式的標籤，表示斜體。HTML5 中不推薦使用。

#語義化的意義是什麼

• 開發者容易理解，便於維護。

• 機器（搜尋引擎、讀屏軟體等）容易理解結構

• 有助於 SEO

#哪些元素可以自閉和

自閉和的元素中不能再嵌入別的元素。且 HTML5 中要求加斜槓。

• 表單元素 input

• 圖片 img

• br、hr

• meta、link

#form 表單的作用

• 直接提交表單

• 使用 submit / reset 按鈕

• 便於瀏覽器儲存表單

• 第三方庫（比如 jQuery）可以整體獲取值

• 第三方庫可以進行表單驗證

所以，如果我們是通過 Ajax 提交表單資料，也建議加上 form。