本文主要内容

• 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表單元素。對外的表現是行内元素（不會獨占一行），對内的表現是塊級元素（可以設置寬高）。

按照内容分類：

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

方案二：

雅虎的 CSS Reset

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

<link rel="stylesheet" type="text/css" href=">

方式三：（比較有争議）

*{ 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。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部