HTML的概念
HTML的概念
- Hyper Text Markup Language 的四個(gè)英文首字母的縮寫。超文本是說指該文檔指向其他的文檔的超鏈接文檔。HTML進(jìn)過瀏覽器解析渲染之后，就是我們平常看到網(wǎng)頁。我們平常# 看到網(wǎng)頁包括HTML、CSS、JS等。
HTML：主要用來標(biāo)記頁面中的內(nèi)容。和表現(xiàn)相關(guān)如字體顏色，大小等都不是由HTML來控制。
HTML的發(fā)展歷史
html發(fā)展歷史
HTML文檔
html文檔的結(jié)構(gòu)
- 下面具體介紹各個(gè)部分：
<!DOCTYPE> :首行、頂格寫。嚴(yán)格說<!DOCTYPE>并不是HTML的一部分，它的主要作用是告訴瀏覽器需要用什么標(biāo)準(zhǔn)來解析文檔。
HTML5之前<!DOCTYPE>的類型：HTML4.01有strict.dtd（嚴(yán)格）、loose.dtd（松散）、frameset.dtd（框架）,html5定格寫<!DOCTYPE html>
HTML文檔頭部
<head>
<meta charset="utf-8"/>
<title>sample_title</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
- 拆解分析
<meta charset="utf-8">:寫在<title>之前，防止<title>標(biāo)簽亂碼。
<title>:網(wǎng)頁標(biāo)題，出現(xiàn)在瀏覽器標(biāo)題欄和搜索引擎搜索結(jié)果中。
<meta name="keywords"content="">
<meta name="description" content="">:描述文檔的基本信息，content的內(nèi)容給搜索引擎用的。
<meta name=”viewport” content=”width-device-width”>:針對(duì)移動(dòng)端的瀏覽器。
<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”stylesheet” href=”../css/style.css”>: 樣式表的引入。
<style>p {color:#999;}</style>: 樣式也可用<style>標(biāo)簽引入。
HTML基礎(chǔ)設(shè)施
- 文件應(yīng)以“<!DOCTYPE ......>”首行頂格開始，推薦使用“<!DOCTYPE html>”。
- 必須申明文檔的編碼charset，且與文件本身編碼保持一致，推薦使用UTF-8編碼<meta charset="utf-8"/>。
- 根據(jù)頁面內(nèi)容和需求填寫適當(dāng)?shù)膋eywords和description。
- 頁面title是極為重要的不可缺少的一項(xiàng)。
結(jié)構(gòu)順序和視覺順序基本保持一致
- 按照從上至下、從左到右的視覺順序書寫HTML結(jié)構(gòu)。
- 有時(shí)候?yàn)榱吮阌谒阉饕孀ト。覀円矔?huì)將重要內(nèi)容在HTML結(jié)構(gòu)順序上提前。
- 用div代替table布局，可以使HTML更具靈活性，也方便利用CSS控制。
- table不建議用于布局，但表現(xiàn)具有明顯表格形式的數(shù)據(jù)，table還是首選。
結(jié)構(gòu)、表現(xiàn)、行為三者分離，避免內(nèi)聯(lián)
- 使用link將css文件引入，并置于head中。
- 使用script將js文件引入，并置于body底部。
保持良好的簡(jiǎn)潔的樹形結(jié)構(gòu)
- 每一個(gè)塊級(jí)元素都另起一行，每一行都使用Tab縮進(jìn)對(duì)齊（head和body的子元素不需要縮進(jìn)）。刪除冗余的行尾的空格。
- 使用4個(gè)空格代替1個(gè)Tab（大多數(shù)編輯器中可設(shè)置）。
- 對(duì)于內(nèi)容較為簡(jiǎn)單的表格，建議將tr寫成單行。
- 你也可以在大的模塊之間用空行隔開，使模塊更清晰。
<body>
<!-- 側(cè)欄內(nèi)容區(qū) -->
<div class="m-side">
<div class="side">
<div class="sidein">
<!-- 熱門標(biāo)簽 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">熱門標(biāo)簽</h3> </div>
...
</div>
<!-- 最熱TOP5 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">最熱TOP5</h3> <a href="#" class="s-fc02 f-fr">更多?</a></div>
...
</div>
</div>
</div>
</div>
<!-- /側(cè)欄內(nèi)容區(qū) -->
</body>
另外，請(qǐng)做到以下幾點(diǎn)
- 結(jié)構(gòu)上如果可以并列書寫，就不要嵌套。如果可以寫成
<div></div><div></div>那么就不要寫成<div><div></div></div> - 如果結(jié)構(gòu)已經(jīng)可以滿足視覺和語義的要求，那么就不要有額外的冗余的結(jié)構(gòu)。比如
<div><h2></h2></div>已經(jīng)能滿足要求，那么就不要再寫成<div><div><h2></h2></div></div> - 一個(gè)標(biāo)簽上引用的className不要過多，越少越好。比如不要出現(xiàn)這種情況：
<div class="class1 class2 class3 class4"></div> - 對(duì)于一個(gè)語義化的內(nèi)部標(biāo)簽，應(yīng)盡量避免使用className。比如在這樣一個(gè)列表中，li標(biāo)簽中的itm應(yīng)去除：
<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
