HTML常用元素

meta/title/style/link/script/base

<meta charset="utf-8"> 規(guī)定頁(yè)面的字符編碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
meta name="viewport"
viewport視口：手機(jī)屏幕/電腦屏幕等設(shè)備的視口有多大
width=device-width: 視口寬度=設(shè)備寬度
initial-scale=1.0: 初始化的縮放比例是1
maximum-scale=1.0: 最大縮放是1
user-scalable=no: 用戶不能縮放

<base href="/"> 框架中用于指定 其它文件路徑的基準(zhǔn)路徑

div: 是 層？ 是 區(qū)域？ 是 容易？ 由于語(yǔ)義不明確，似乎可以是任意一種。
section, article, aside, header, footer: 有明確含義的 一塊區(qū)域
p: 段落
span/em/strong: 行內(nèi)元素(em, strong 帶默認(rèn)樣式：em斜體 strong粗體)

table/thead/tbody/tr/td:表格相關(guān)元素。
tr(table row)表格中的一行，td(table data)單元格。
thead封裝整行，將該行作為表頭
th：將tr中的第一個(gè)單元格 設(shè)置為 標(biāo)題單元格

ul/ol/li/dl/dt/dd:列表相關(guān)的元素。
ul(unordered list無(wú)序列表)
ol(ordered list有序列表)
li(list item列表項(xiàng))
dl(defined list定義的列表)
dt(defined title定義的標(biāo)題)
dd(defined data定義的內(nèi)容)

a:鏈接

form/input/select/textarea/button:表單 輸入框 下拉框 文本輸入?yún)^(qū)域 按鈕

HTML重要屬性

• a[href, target]
  target:在哪兒打開(kāi)鏈接，默認(rèn)在當(dāng)前窗口打開(kāi)。target=blank新窗口打開(kāi)
• img[src, alt]
  alt:alternative替代資源，一般為文字
• table td[colspan, rowspan]
  單元行 需要占用多行/多列，使用colspan rowspan屬性
• form[target, method, enctype]
  target: 表單提交地址
  method: 提交方式)post get)
  enctype: encode type 編碼類(lèi)型(對(duì)post而言)
  urlencode(提交文本) formdata(把數(shù)據(jù)進(jìn)行編碼后 進(jìn)行提交。因此，可以上傳文件)
• input [type, value, name, id]
• button[type]
• select>option[value]
• label[for]
  與表單項(xiàng) 相關(guān)聯(lián)。點(diǎn)擊某個(gè)label時(shí)，相當(dāng)于點(diǎn)擊 該label對(duì)應(yīng)的表單項(xiàng)。用于單選框 復(fù)選框

如何理解HTML

• 描述網(wǎng)頁(yè)內(nèi)容各個(gè)部分之間的 結(jié)構(gòu)關(guān)系

H5新增內(nèi)容

• 新區(qū)塊標(biāo)簽
  • section
  • article
  • nav
  • aside
• 表單增強(qiáng)
  • input新增類(lèi)型：日期，時(shí)間，搜索
  • 表單驗(yàn)證: required, min, max, pattern
  • placeholder autofocus

H5新增語(yǔ)義

• header/footer: 即可表示 網(wǎng)站的頭部，也可表示 區(qū)塊的頭部(比如article中 可以包含header footer)
• section/article: div是沒(méi)有語(yǔ)義的 區(qū)塊(當(dāng)找不到合適的語(yǔ)義標(biāo)簽時(shí)，就使用div).
  section和article相比，section適用于更瑣碎的信息
• nav：navigate
• aside: 側(cè)邊欄
• em/strong: emphasis(斜體)/strong(加粗)
• i: icon圖標(biāo)

HTML元素分類(lèi)

可以按樣式，按功能(區(qū)塊，鏈接，表單元素)

• 按默認(rèn)樣式分：
  • block塊：呈方塊形狀，默認(rèn)會(huì)占據(jù)整行(div section article aside)
  • inline行內(nèi)元素/內(nèi)聯(lián)元素：沒(méi)有 規(guī)則的形狀，不會(huì)獨(dú)占一行(跟文本相關(guān)的元素 span em strong)
  • inline-block: 可以像inline元素一樣 和其它元素 在同一行。對(duì)外像inline元素，對(duì)內(nèi) 像block元素(形狀可能是塊狀，有自己的寬高尺寸等)。
    (inline-block: 一些表單元素，下拉框 輸入框)

div, p 都是塊級(jí)元素
span, em, strong 都是inline元素
select 是inline-block元素

• 按內(nèi)容分(content model)：
  • Flow: 在文檔流中 有一些影響的元素(大部分可見(jiàn)的元素 都屬于flow元素)
  • Metadata：表示信息的元素，有一些metadata不在flow中，html中head中的title，base，script等，這些標(biāo)簽是不占據(jù)文檔流的。
  • Heading：h1-h6標(biāo)題，hgroup
  • Sectioning: 主要是一些分區(qū)的元素，比如section article aside nav
  • Interactive：有交互/互動(dòng)的元素(和用戶有交互)， 鏈接(點(diǎn)了鏈接就跳轉(zhuǎn)了).
    比如 a, audio, button等 和用戶有交互的元素
  • Phrasing: 這部分的元素 大都屬于inline類(lèi)型的元素，被包含在一個(gè)段落中 是段落的一部分。phrasing本身并不是完整的(只是其他元素中的一部分)，比如em(一句話中可能有兩個(gè)需要強(qiáng)調(diào)的詞組，就使用em包裹)。
  • Embeded: 可嵌入的元素(是嵌入別的元素中，還是被嵌入？)一些元素 可以在其中 嵌入其他元素。比如audio video img

Flow content

Phrasing content

Interactive content

Embeded content

Metadata content

HTML元素的嵌套關(guān)系

哪些元素 可以出現(xiàn)在 哪些地方，哪個(gè)元素 可以被另一個(gè)元素包含。

基本原則：

• 塊級(jí)元素(block) 可以包含 行內(nèi)元素(inline).
  比如div元素可以包含(a, span)
• 塊級(jí)元素 不一定 能包含塊級(jí)元素
  塊級(jí) 包含 塊級(jí)：div包div, section包div。
  塊級(jí)元素(段落p) 不能包含 塊級(jí)元素(div)
• 行內(nèi)元素 一般不能包含 塊級(jí)元素
  span包div 是不行的。
  行內(nèi)元素(a元素) 可以包含 塊級(jí)元素(div)。

HTML的嵌套關(guān)系 依賴(lài)于：

* 元素的分類(lèi)
* content model

HTML元素默認(rèn)樣式

html不寫(xiě)樣式時(shí)，會(huì)有 默認(rèn)的樣式

* 默認(rèn)樣式的意義：
    如果默認(rèn)沒(méi)有樣式 需要對(duì)每個(gè)元素定義 各種基礎(chǔ)的樣式，增加了 開(kāi)發(fā)人員的負(fù)擔(dān)。
* 默認(rèn)樣式 會(huì)帶來(lái)問(wèn)題：
    有些默認(rèn)樣式 是我們不想要的，需要清除默認(rèn)樣式 再寫(xiě)一些自己需要的樣式。
    比如下拉框是沒(méi)辦法清除 默認(rèn)樣式的，此時(shí) 需要的定制成本 是很高的。
    有些樣式 不同瀏覽器的處理結(jié)果 是不同的
* css reset
    有些樣式 是我們不想要的，統(tǒng)一去掉
    有些樣式 不同瀏覽器的處理結(jié)果 不一樣，顯式地統(tǒng)一
css reset的簡(jiǎn)單粗暴方式：
    *{
        margin:0;
        padding:0;
    }
瀏覽器在查找元素時(shí)，使用的是什么策略？如果我用*，會(huì)不會(huì)一個(gè)一個(gè)的去匹配元素 會(huì)不會(huì)比較慢

HTML面試真題

* 1. doctype的意義是什么？
    對(duì)盒子模型 進(jìn)行標(biāo)準(zhǔn)的處理(width看做content-width)
    讓瀏覽器知道 元素書(shū)寫(xiě)方法的合法性(doctype: html4, xhtml)

* 2. html, xhtml, html5的關(guān)系
    html屬于SGML的一個(gè)應(yīng)用(SGML是一個(gè)通用的標(biāo)記語(yǔ)言，xml也是SGML的一個(gè)應(yīng)用)
    xhtml屬于xml，是html進(jìn)行xml嚴(yán)格化的結(jié)果
    html5是個(gè)獨(dú)立的規(guī)范，不屬于SGML或XML，書(shū)寫(xiě)方式上 html5比XHTML寬松
* 3.html5 有什么變化？
    變化是 相對(duì)于html4 和xhtml而言的
    * 增加 新的語(yǔ)義化元素，比如section article nav aside header footer, 便于書(shū)寫(xiě) 更富有語(yǔ)義的結(jié)構(gòu)。把之前語(yǔ)義不強(qiáng)的i,b元素 都不推薦使用了。
    * 表單增強(qiáng)，包括新的元素 和 表單驗(yàn)證。
    * 新的API(離線application cache, 音視頻，圖形canvas，實(shí)時(shí)通信websocket，本地存儲(chǔ)local storage，設(shè)備能力 包括定位 獲取加速計(jì) 陀螺儀的狀態(tài))
    * 元素分類(lèi)和嵌套的變更，html5對(duì)元素 重新進(jìn)行了分類(lèi)，嵌套規(guī)則也有一些變化，但是 推理的過(guò)程 完全變了，因?yàn)榉诸?lèi)變化了。比較明顯的就是a元素的變化，a能否包含 塊級(jí)元素，取決于a外面的元素是什么 
* 4. em和i有什么區(qū)別
    主要是語(yǔ)義化上面的變化，em和i的默認(rèn)樣式 都是斜體的。
    * em是語(yǔ)義化的標(biāo)簽，表強(qiáng)調(diào)
    * i是純樣式的標(biāo)簽，表斜體 其沒(méi)有強(qiáng)調(diào)的意思
    * html5中不推薦使用i，一般把i作為圖標(biāo) 表示icon的含義
* 5.語(yǔ)義化的意義是什么
    * html文檔 按照語(yǔ)義化去編寫(xiě) 讀起來(lái)就會(huì) 很容易，能夠一眼看到它的大綱 開(kāi)發(fā)者就容易理解
    * 也是機(jī)器容易理解的結(jié)構(gòu)(比如 搜索引擎，讀屏軟件)
        如果大綱寫(xiě)的好，機(jī)器就容易理解你的頁(yè)面 
    * 有助于SEO
    * 不要到處用div，需要section就用section 需要article就用article
    * semantic microdata,這是另外一個(gè)規(guī)范 會(huì)在html中添加一些新的標(biāo)記，讓后去標(biāo)注 這個(gè)東西 是什么。對(duì)頁(yè)面中的元素 做進(jìn)一步的語(yǔ)義化標(biāo)記 方便搜索。
* 6.哪些元素可以自閉合
    不是所有的元素里面 都可以放別的元素的，有些元素就是放在那兒 它里面就沒(méi)有別的元素了。常見(jiàn)的有以下這些元素：
    * 表單元素input(input框內(nèi) 不能有其他元素)
    * 圖片img(不能在圖片中嵌入 別的元素)
    * br hr（br換行  hr水平線）
    * meta link(元信息：meta link)
* 7.HTML和DOM的關(guān)系
    * HTML是寫(xiě)好的帶結(jié)構(gòu)的文本，是'死'的
    * DOM是 由HTML 經(jīng)過(guò)瀏覽器解析 而來(lái)的，DOM是存在于瀏覽器內(nèi)存中的 一個(gè)樹(shù)狀的結(jié)構(gòu), 是'活'的
    * JS維護(hù)DOM
* 8.property和attribute的區(qū)別
    一般都譯作'屬性'，認(rèn)為：property是'特性' attribute是'屬性'. 
    * 寫(xiě)在html中的 被認(rèn)為是 attribute
    * property一般被用在 (html經(jīng)過(guò)解析之后的得到的dom)dom元素中
        調(diào)試技巧，在inspect查看器中選中的元素 在console中有個(gè)名稱(chēng)'$0'. 使用'$0'，可以查看選中元素的一些屬性。
* 9.form的作用有哪些
    使用form有很多好處，就算是用ajax提交數(shù)據(jù) 也應(yīng)該加上form。
    * 直接提交表單(直接用get/post的方式 進(jìn)行表單提交)，必須有form
    * 表單和submit/reset配合，submit可以提交表單 reset可以重置表單
    * 使用form 可以使 瀏覽器記錄下 表單中的數(shù)據(jù)
    * 第三方庫(kù) 可以整體提取值
        jquery中的serialize 可以把表單中的值 
    * 第三方庫(kù) 在有form時(shí)，才能進(jìn)行表單驗(yàn)證