前端學習(6)~html回顧

  • 2020 年 2 月 23 日
  • 筆記

本文主要內容

  • 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

常見標籤的重要屬性：

  • 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文檔，它的結構可以是：

    <section>          <h1>一級標題</h1>            <section>              <h2>二級標題</h2>              <p>段落內容</p>          </section>            <section>              <h2>二級標題</h2>              <p>段落內容</p>          </section>            <aside>              <p>廣告內容</p>          </aside>        </section>        <footer>          <p>某某公司出品</p>      </footer>

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。鏈接：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。

更多更詳細的學習可以在w3school上進行

VirMach 便宜 VPS

QNews

QNews