一、html語(yǔ)義化
語(yǔ)義化：簡(jiǎn)單來(lái)說(shuō)就是根據(jù)內(nèi)容的結(jié)構(gòu)化，選擇合適的標(biāo)簽从撼，便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)，讓瀏覽器的爬蟲(chóng)和機(jī)器很好的解析钧栖。
注意：
1低零、盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；
2拯杠、在語(yǔ)義不明顯時(shí)掏婶，即可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距阴挣，對(duì)兼容特殊終端有利气堕；
3、不要使用純樣式標(biāo)簽畔咧，如：b茎芭、font、u等誓沸，改用css設(shè)置梅桩。
4、需要強(qiáng)調(diào)的文本拜隧，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式宿百，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b）洪添，em是斜體（不用i）垦页；
5、使用表格時(shí)干奢，標(biāo)題要用caption痊焊，表頭用thead，主體部分用tbody包圍忿峻，尾部用tfoot包圍薄啥。表頭和一般單元格要區(qū)分開(kāi)，表頭用th逛尚，單元格用td垄惧；
二、HTML的新元素（筆者只是用來(lái)記錄跟隨斌叔學(xué)習(xí)的過(guò)程 如果此文章有什么錯(cuò)誤不足的地方 接受指正）
1.<header> 標(biāo)簽定義文檔的頁(yè)眉
2.<section> 標(biāo)簽定義文檔中的節(jié)绰寞。比如章節(jié)到逊。頁(yè)眉铣口、頁(yè)腳或文檔的其他部分。該標(biāo)簽有點(diǎn)類似于將一本書(shū)分成幾個(gè)章節(jié)蕾管，每個(gè)section標(biāo)簽代表一節(jié)枷踏。一個(gè)section通常有內(nèi)容和標(biāo)題組成，通常不推薦那些沒(méi)有標(biāo)題的內(nèi)容用section掰曾。
3.<footer>標(biāo)簽定義 section 或 document 的頁(yè)腳。其實(shí)它跟我們的header標(biāo)簽有點(diǎn)對(duì)應(yīng)的感覺(jué)停团。在典型情況下旷坦，該元素會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息佑稠。
4.<article>標(biāo)簽定義外部的內(nèi)容秒梅。外部?jī)?nèi)容可以是來(lái)自一個(gè)外部的新聞提供者的一篇新的文章，或者來(lái)自 blog 的文本舌胶，或者是來(lái)自論壇的文本捆蜀。是獨(dú)立的內(nèi)容，與上下無(wú)關(guān)幔嫂。
div section article的區(qū)分：
?(1)語(yǔ)義是從無(wú)到有辆它，逐漸增強(qiáng)的。div沒(méi)有任何語(yǔ)義履恩，僅僅用作樣式化锰茉。
(2)對(duì)于一段有主題的內(nèi)容塊，則就適用 section切心，而如果這段內(nèi)容可以脫離上下文飒筑，作為完整的獨(dú)立存在的一段內(nèi)容，則就適用 article绽昏。
(3)section是整體的一部分协屡，article是獨(dú)立的一部分。如果實(shí)在分不清該用哪種的話就用div吧全谤。雖然并不推薦這么使用肤晓。
5.<nav>導(dǎo)航元素。例如百度首頁(yè)的新聞 網(wǎng)頁(yè) 貼吧等啼县。
三材原、塊級(jí)元素和行內(nèi)元素
塊級(jí)元素：塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)“塊”季眷。例：<p><div>? 總是在新行上開(kāi)始余蟹，默認(rèn)寬度占父級(jí)元素寬度100%，可以設(shè)置寬高等屬性就是塊級(jí)元素子刮，div威酒、p窑睁、header、section等都是塊級(jí)元素
行內(nèi)元素：一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間葵孤。例：<span>? 和其他元素在一行担钮，寬高由內(nèi)容決定的元素就是行內(nèi)元素，span尤仍、i箫津、a等就是行內(nèi)元素
有一點(diǎn)要注意，行內(nèi)元素內(nèi)部不能包涵塊級(jí)元素
當(dāng)我們想在行內(nèi)塊級(jí)元素中一行放多個(gè)的塊級(jí)元素是可以用到css-display屬性
css---display屬性 可以設(shè)置inline宰啦、block苏遥、inline-block等幾個(gè)不同的值 ? ?
inline ?設(shè)置這個(gè)屬性的元素就會(huì)變成行內(nèi)元素，不論之前是塊級(jí)元素還是行內(nèi)元素赡模。而且設(shè)置的寬高也會(huì)失效哦田炭。
display:inline-block; 設(shè)置這個(gè)屬性的元素就會(huì)變成塊級(jí)元素，不論之前是塊級(jí)元素還是行內(nèi)元素漓柑。
注意：如果某個(gè)元素被添加了float屬性或者用了絕對(duì)定位教硫，那么這個(gè)元素就會(huì)變成塊級(jí)元素或行內(nèi)塊級(jí)元素哦。
四辆布、css樣式表
在網(wǎng)頁(yè)中有很多相同的樣式瞬矩，所以就會(huì)產(chǎn)生很多相同的代碼懦鼠，這樣會(huì)讓代碼看起來(lái)很亂不美觀讨阻，當(dāng)然更重要的是后期維護(hù)的工作量會(huì)很大，所以我們就要把html和css分離嘹叫，將元素的樣式抽離出來(lái)嫩絮，單獨(dú)放在樣式表里丛肢。這樣代碼會(huì)美觀不少，相同的樣式只需要調(diào)用一個(gè)標(biāo)簽就可以剿干。
例如：
<html>
<head>
<title>小仙女</title>
div{ ?width:150px;
height:150px ?}
</head>
<body>
<div>
<p>xiaoxiannv</p>
</div>
<div>
<p>我是小仙女</p>
</div>
</body>
</html>
這樣兩塊內(nèi)容我們用的是同一個(gè)樣式蜂怎，如果我們要改別的樣式，只需要修改style標(biāo)簽內(nèi)的樣式即可置尔，當(dāng)然杠步，我們也可以在style里添加別的樣式。
以上榜轿，在style標(biāo)簽內(nèi)寫(xiě)css樣式為內(nèi)部樣式表
外部樣式變就是把css單獨(dú)寫(xiě)成一個(gè)擴(kuò)展名為css的文件幽歼，這樣是樣式表的復(fù)用性更強(qiáng)。此時(shí)把style的內(nèi)容換成css文件的鏈接即可 ?例：<link rel="stylesheet" href="./html.css">
五谬盐、選擇器
選擇器甸私，就是用來(lái)選擇元素的。選擇器有很多種飞傀，主要包括元素選擇器皇型、類選擇器诬烹、id選擇器、群組選擇器弃鸦、后代選擇器绞吁、子元素選擇器。當(dāng)然這只是最常用的部分唬格。
元素選擇器就是根據(jù)元素名寫(xiě)的家破，div{} ，這個(gè)其實(shí)就是元素選擇器购岗。
類選擇器是選擇一類元素员舵，而這個(gè)類型是由開(kāi)發(fā)者自己定的。注意：寫(xiě)類選擇器的樣式時(shí)是要用 "." ? 例：.left
id選擇器藕畔，經(jīng)常用于javascript ?具體可以參考這篇文章www.reibang.com/p/48dc1f4307d0
通用選擇器。我們來(lái)在html.css文件的開(kāi)頭加上如下代碼：
*{——font-size:14px;} ?網(wǎng)頁(yè)上所有文字的大小都會(huì)改變成一樣的
六庄拇、派生選擇器
群組選擇器,當(dāng)有多個(gè)選擇器下有相同的屬性時(shí)注服，可以寫(xiě)成一個(gè)群組選擇器。這樣可以精簡(jiǎn)我們的代碼措近，維護(hù)起來(lái)也很方便溶弟。
例：header，section{
? ? ? ? ? ?——border：1px;}
后代選擇器瞭郑。顧名思義辜御，這個(gè)選擇器就是選中一個(gè)元素的所有后代元素來(lái)添加樣式。這里筆者也不是很明白屈张，但是選擇器很方便不能用的太隨意擒权。在寫(xiě)樣式的時(shí)候盡量不要再全局對(duì)某個(gè)元素定義特殊樣式。
子元素選擇器阁谆，大于(>)符號(hào)指的是直接子元素碳抄。例：".right > header"這個(gè)的意思是類選擇器right的直接子元素header元素。這樣就會(huì)只修改類選擇器為right的section元素中的header元素的樣式场绿。
注意:選擇器是有優(yōu)先級(jí)的剖效。當(dāng)代碼里有兩個(gè)選擇器定義了不同的樣式，但是添加給了同一個(gè)元素焰盗，瀏覽器需要知道該渲染哪一個(gè)璧尸。
內(nèi)聯(lián) > id > 類 > 標(biāo)簽(元素選擇器) > 偽類 > 通配符(通用選擇器)
七、偽類
偽類熬拒，你可以理解為偽造的類爷光，用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式梦湘，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的瞎颗。它可以算是一種狀態(tài)類件甥，比如在有的網(wǎng)站上，有些文字或者圖片哼拔，你鼠標(biāo)放在上面會(huì)變樣式引有，就是用偽類實(shí)現(xiàn)的。偽類有很多倦逐，感興趣的同學(xué)可以自行百度譬正。
偽元素：是通過(guò)css創(chuàng)建的元素，而不是通過(guò)html創(chuàng)建的檬姥≡遥可以顯示在頁(yè)面中，但在dom樹(shù)中卻沒(méi)有健民。例：
.list::before{
——content:"小仙女排名"
} ? ? 偽元素也不止before一個(gè) ?有興趣的同學(xué)可自行百度抒巢。
八、媒體查詢（css）
先給出一個(gè)例子：（以下代碼寫(xiě)在css中）
@media(min-width:900px){
p{
color:#f60;
}
}
當(dāng)滿足"@media()"括號(hào)中的條件時(shí)秉犹，就會(huì)應(yīng)用其中的樣式規(guī)則了蛉谜。有一點(diǎn)要注意，默認(rèn)樣式要寫(xiě)在媒體查詢之前崇堵。否則媒體查詢的效果會(huì)被覆蓋型诚。
媒體查詢時(shí)很常用的，因?yàn)楝F(xiàn)在的電腦顯示器大小不一鸳劳，各種尺寸都有狰贯，這就造成我們寫(xiě)的網(wǎng)頁(yè)有可能會(huì)在各種不一樣尺寸的顯示器上顯示。
當(dāng)你放一個(gè)800px的div在頁(yè)面上赏廓，在1366寬度的電腦屏幕上顯示正常涵紊，可是在2600寬度的顯示器上就會(huì)只有一小塊了。這時(shí)候就需要我們的媒體查詢了楚昭。其實(shí)媒體查詢就相當(dāng)于屏幕的自適應(yīng)問(wèn)題栖袋。
注：本文中知識(shí)點(diǎn)學(xué)習(xí)自陳斌的程序媛課程 ?感興趣的同學(xué)可百度搜索
告誡自己：知足常樂(lè)，以夢(mèng)為馬抚太，浪跡天涯
