HTML知識梳理（筆記）

HTML常見元素

meta

定義和用法
<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。

<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

base
定義和用法
<base> 標籤爲頁面上的全部連接規定默認地址或默認目標。

一般狀況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標籤能夠改變這一點。瀏覽器隨後將再也不使用當前文檔的 URL，而使用指定的基本 URL 來解析全部的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標籤中的 URL。

Html5新增標籤

新區塊標籤

• section
• artical
• nal
• aside

表單加強

• 日期、時間、搜索
• 表單驗證
• placeholder自動聚焦

html新增語義

HTML元素分類

按默認樣式分

• 塊級block
• 行內 inline
• inline-block

按內容分類：
按內容分類

HTML的嵌套關係

• 塊級元素能夠包含行內元素。
• 塊級元素不必定能包含塊級元素。
• 「行內元素通常不能包含塊級元素」

a標籤裏爲什麼能夠包含div（點擊圖片轉到連接）
答案，在a標籤中包含div不必定合法，由於a是一個透明的內容模型，在嵌套關係中會被忽略，合不合法要看a前面那個標籤。

參考連接

HTML默認樣式問題

處理瀏覽器的默認樣式。
css Reset解決方案

• <style>
            *{
                margin:0;
                padding:0;
            }

• Normailze.css
• YuI的css reset

問題

1. doctype的意義是什麼？
2. HTML XHTML HTML5的關係。
3. HTML5有什麼變化。
4. em和i有什麼區別？
5. 語義化的意義是什麼？
6. 哪些元素能夠自閉和？
7. HTML和DOM的關係。
8. propetry和attribute的關係。
9. form的做用有哪些？

答案

1. 讓瀏覽器以標準模式渲染。
   讓瀏覽器知道元素的合法性。
2. HTML屬於SGML。
   XHTML屬於XML，是HTML進行XML嚴格化的結果。
   HTML5不屬於SGML或XML，不XHTML寬鬆。
3. 新的語義化元素。
   表單加強。
   新的API（離線、音視頻、圖形、實時通訊、本地儲存、設備能力）
   分類和嵌套變動。
4. em是語義化標籤，表強調
   i是純樣式標籤，表斜體
   HTML5中i通常用做圖標
5. 開發者容易理解。
   機器容易理解結構（搜索、讀屏軟件）
   有助於SEO優化。
   semantic micordata
6. 表單元素 input
   圖片 img
   br hr
   meta link
7. HTML是一段文本，是一頁字符串，是「死」的。
   DOM是瀏覽器解析出來的結構，是「活」的。
   JS能夠維護的是DOM。
8. attribute是HTML中的,是「死」的。
   property是DOM中的，是能夠經過JS進行更改的，是「活」的。
9. 直接提交表單。 使用submit/reset按鈕。 便於瀏覽器保存表單。 第三方庫能夠總體提取值。 第三方庫能夠進行表單驗證。