第01章 HTML基礎知識
1.1 HTML和CSS的進階簡介
- HTML葛虐、CSS胎源、JavaScript是前端最核心的三大技術(shù)。其中HTML和CSS是基礎屿脐，入門也很容易涕蚤，以致于很多人覺得HTML和CSS沒什么技術(shù)含量。
- 真是這樣嗎的诵？試著思考以下問題：
- 什么是HTML語義化万栅？對于標題、圖片西疤、表格申钩、表單，如何更好的實踐這些內(nèi)容的語義化瘪阁？
- 什么是外邊距疊加？出現(xiàn)外邊距疊加的根本原因是什么邮偎？
- 在CSS中谜悟，關(guān)于命名怕轿、書寫以及注釋都有哪些規(guī)范，以利于團隊開發(fā)和后期維護？
- 說一下display屬性的理解揪惦，屬性值
block、inline固额、inline-block头谜、table-cell的區(qū)別？ - 是否深入了解過
text-indent宠纯、text-align卸夕、line-height以及vertical-align屬性，有哪些高級技巧婆瓜？ - 為什么
overflow:hidden可以清除浮動快集？ - CSS有哪些性能優(yōu)化技巧？如何使用更高性能的選擇器廉白？
- 如何使用CSS實現(xiàn)各種圖形效果个初，例如三角形、圓猴蹂、橢圓等院溺。
- 解釋一下包含塊、BFC和IFC磅轻、層疊上下文等概念珍逸。
- 如果以上問題有一半都答不上來逐虚，說明連“熟悉CSS”的程度都算不上，更別說“精通CSS”弄息。
1.2 HTML痊班、XHTML和HTML5
- HTML (HyperText Mark-up Language)超文本標記語言：把HTML和XHTML和HTML5一起談時，通常指的是HTML 4.0摹量；
-
XHTML (EXtensible HypeText Mark-up Language)擴展的超文本標記語言：這是XML風格的HTML 4.0涤伐，可以說是語法更嚴謹、結(jié)構(gòu)更純凈的HTML過渡版本缨称。比如：
- 標簽必須閉合：
<br>（×錯誤）凝果，<br/>（√正確）； - 標簽和屬性必須小寫：
<DIV></DIV>（×錯誤）睦尽，<div></div>（√正確）器净； - 標簽屬性值必須用引號括起來：
<input type=text>（×錯誤），<input type="text">（√正確）当凡； - 用id屬性替代name屬性：
<div name="wrapper">（×錯誤）山害，<div id="wrapper">（√正確）；
- 標簽必須閉合：
-
HTML5 ：是新一代的HTML標準沿量，HTML 4.0的升級版浪慌。HTML5版本不僅僅是規(guī)范了一些標簽，還增加了一系列新技術(shù)朴则，包含canvas权纤、SVG、websocket乌妒、本地存儲等汹想。舉例：
- 定義HTML5文檔的類型更簡化：
<!DOCTYPE html>； - 標簽不區(qū)分大小寫：
<div>測試</DIV>撤蚊； - 標簽的屬性值允許不加引號：
<div id=wrapper>容器</div>古掏； - 某些標簽的屬性值可忽略不寫：
<input type="checkbox" checked>；
省略形式 等價于 checked checked='checked' readonly readonly='readonly' defer defer='defer' ismap ismap='ismap' nohef nohref='nohref' noshade noshade='noshade' nowrap nowrap='nowrap' selected selected='selected' disabled disabled='disabled' multiple multiple='multiple' noresize noresize='noresize' HTML 5允許的簡寫屬性：
省略形式 等價于 checked checked='checked' readonly readonly='readonly' defer defer='defer' ismap ismap='ismap' nohef nohref='nohref' noshade noshade='noshade' nowrap nowrap='nowrap' selected selected='selected' disabled disabled='disabled' multiple multiple='multiple' noresize noresize='noresize' - 定義HTML5文檔的類型更簡化：
1.3 <div>和<span>
-
<div>和<span>都是沒有語義侦啸。 -
div是塊元素(block)冗茸，可以包含其他元素，常用于頁面較大塊的結(jié)構(gòu)劃分和布局匹中； -
<span>是行內(nèi)元素(inline)夏漱，只用來包含文字；
1.4 id和class
- 我們在寫jQuery代碼時顶捷，經(jīng)常通過元素的
id和class來選擇元素挂绰，似乎并沒什么區(qū)別。但在定義HTML元素時，具體什么時候要用id葵蒂，什么時候用class呢交播？ -
id是HTML元素的唯一標識，同一個頁面相同的id只允許出現(xiàn)一次践付。W3C建議秦士，只對頁面關(guān)鍵性的結(jié)構(gòu)或者大結(jié)構(gòu)才使用id。 比如LOGO永高、導航隧土、主體內(nèi)容、底部信息欄等命爬。這是因為搜索引擎識別頁面結(jié)構(gòu)時曹傀，主要是根據(jù)標簽的語義以及id屬性來識別的，因此id屬性不能濫用饲宛。 -
class是抽取相同的樣式代碼皆愉，應用到多個元素上，以減少重復代碼艇抠。 通常元素會應用多個class樣式幕庐，一個是公共樣式，一個是單獨樣式家淤。 - 示例异剥，三個
<div>標簽應用了column樣式的同時，還擁有自己的樣式：
<div class="column blog"></div>
<div class="column manual"></div>
<div class="column tool"></div>
1.5 設置瀏覽器標題小圖標
<link rel='shortcut icon' type="image/x-icon" href="./image/favicon.icon">
-
rel和type兩個屬性值是固定形式媒鼓，href是小圖標的URL地址。
注意：小圖標必須是
.ico格式
