前端「HTML+CSS」零基础入门学习笔记（完整）
目錄
課程前導
HTML
html 初級篇 - 基礎標簽
html 進階篇 - 高級標簽
CSS
css引入+css基礎選擇器+選擇器權重
css復雜選擇器，權重計算問題，css基礎屬性
css企業開發習慣+盒子模型+層模型
課后練習
?兩欄布局+兩個經典bug+BFC
包裹浮動元素+開發實例、經驗
課程前導
一般來說，所有與視覺和交互有關的工作都由前端工程師來完成，后端工程師主要負責研究如何更好地把數據傳給前端。
首先要掌握前端三大基礎語言：HTML CSS JavaScript ，其次要學習：jQuery 網絡 CSS3 H5 es6 webpack4.0 git 小程序 設計模式 VUE VUEX VUE源碼 React Node.js Mongo DB數據庫等等。
HTML、CSS、JavaScript三者分工不同。?
HTML ? ? ? ? ? ? ?負責結構? ? ? ?
CSS? ? ? ? ? ? ? ? 負責樣式 （裝飾結構）
JavaScript? ? ? ?負責行為（動態效果和交互）? ? ? ?
瀏覽器 = shell（外殼）+內核 。
市場主流瀏覽器是什么？是在市場占有一定份額并有自主研發的內核的瀏覽器。
| 瀏覽器 | 內核 |
| IE | trident |
| Firefox ? ? | Gecko |
| Google chrome | Webkit/blink |
| Safari | Webkit |
| Opera | presto |
HTML
html 初級篇 - 基礎標簽
HTML是什么？是 hyperText markup language 的縮寫，超文本標記語言 。
HTML語言是由一對一對的標簽組成的，標簽由頭標簽和尾標簽組成，格式為<></> 。
我們把html標簽叫做根標簽。
<html><head>編輯瀏覽器的特性</head><body>展現給用戶看的內容</body> </html>亂碼時需要使用對應的字符集進行正確編碼。
編碼常用字符集：
gb2312(亞裔字符集不包括繁體)-->gbk(亞裔字符集包括繁體)
unicode(萬國碼)-->升級碼-->utf-8
?亂碼時使用 <meta charset="utf-8"> 即可解決。
<html lang="en,zh"> 是什么意思？用于告訴搜索引擎爬蟲我們的網站是關于什么內容的，en表示English，zh表示中文。
SEO：搜索引擎優化技術，符合爬蟲喜好
<meta content="服裝" name="keywords"> 網站關鍵字
<meta content="這是一個你穿了就不想脫的衣服" name="description">? 網站描述
<title>網頁標題標簽</title>
<p>段落標簽</p>
<h1>標題標簽</h1>
<h2>標題</h2>
.逐
.次
.小
<h6>標題</h6>
<strong>加粗</strong>
<em>斜體</em>
<del style="color: #CCCCCC;">￥50(添加中劃線)</del>
<address>地址標簽(成段落展示+斜體)</address>
超級重要的兩個標簽！！<div>獨占一行</div> 和 <span>無作用</span> 。
就是因為沒什么用所以最有用，可以當做規格化容器來使用，使得分塊更明確，更加結構化，能夠捆綁操作 。
捆綁操作是什么意思？就是選中容器的所有元素進行同一處理，只需要進行一次即可，更加方便省事。
<html><head><meta charset="utf-8"><title>document</title></head><body><p></p><h1-6>依次減小，加粗段落展示</h1-6><strong><em>標簽嵌套</em></strong>容器(綁定化操作)：<div></div><span></span></body> </html>html 進階篇 - 高級標簽
<div style="width: 100px;height: 100px;background-color: red;">kjbvjbxASDBcsdbnxcbvnxbvcnxvzvbhjvsadfv</div>顯示效果：
不會自動換行，會越出紅色矩形，因為瀏覽器無法識別一個單詞，會當做一個單詞處理。
空格是作為英文單詞分隔符的存在。所以不論我們有多少空格，都只顯示一個空格。
要想打印多個空格，我們就用到HTML編碼中的? ? ? ? 代表一個空格文本?。
如果想打印<div>，就要使用編碼中的 < 代表less than '<'??和?> 代表greater than '>'?。
HTML編碼只需要記住這三個就行。
<br>換行標簽??<hr>水平線標簽? <meta>元信息標簽
為了修飾包裹的內容，標簽一般都是成對出現；不需要修飾內容的標簽稱為單標簽。
有序列表標簽：
<ol>
?? ?<li>列表項1</li>
?? ?<li>列表項2</li>
?? ?<li>列表項3</li>
</ol>
默認阿拉伯數字作為序號；
<ol type="1"/"a"/"A"/"i"/"I"(五種排序標號類型) start="n (從第n個開始)">
?? ?<li>列表項1</li>
?? ?<li>列表項2</li>
?? ?<li>列表項3</li>
</ol>
<ol reversed="reversed"(倒著排序，比如3,2,1)>
?? ?<li>列表項1</li>
?? ?<li>列表項2</li>
?? ?<li>列表項3</li>
</ol>
無序列表：
<ul type="disc(默認)/square/circle">（實心黑○、實心黑□、空心黑○）
?? ?<li>列表項1</li>
?? ?<li>列表項2</li>
?? ?<li>列表項3</li>
</ul>
<img圖>片標簽? ? ?
<img src="images/icon.png" style="width: 200px;" alt="圖片占位符：這是出錯后圖片的位置上顯示的內容"? title="圖片提示符：鼠標移動到圖片上顯示的內容">地址實現方式：
1.網上url
2.本地的絕對路徑
3.本地的相對路徑
<a>超鏈接標簽</a>? 是anchor的縮寫，錨 (原始作用：作為錨點記錄位置) 。
<a href="hyperText reference：超文本引用" style="...">a標簽</a>在新標簽頁中打開：
<a href="hyperText reference：超文本引用" style="..." target="_blank" >a標簽</a>固定導航實現錨點的作用：
?
? ? ??
<html><head><title>document</title><meta charset="utf-8"></head><body><div id="demo1" style="" >demo1</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="demo2" style="" >demo2</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a style="display: block;position: fixed;bottom: 100px;right: 100px; border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;" href="#demo1" >find demo1</a><a style="display: block;position: fixed;bottom: 150px;right: 100px; border: 1px solid black;height: 50px;width: 200px;background-color: #ffc;" href="#demo2" >find demo2</a></body> </html><a href=""></a> 的作用：
1.超鏈接
2.錨點
3.打電話(href="tel:138XXXXXXXX")、發郵件(href="mailto:郵箱地址")
4.協議限定符(<a href="javascript:while(1){alert('讓你手欠')}">點我試試呀</a>)
<form>表單標簽(占html的重要性的50%)</form>
form表單：從前端往后端發送數據
<form method="get/post(發送數據的方式)" action="http://www...(發送地址)"></form>
示例：
<html><head><title>document</title><meta charset="utf-8"><style type="text/css">input{border: 1px solid #999;}</style></head><body><form method="get" action=""><form method="get" action=""><p>username:<input type="text" name="username" value="請輸入用戶名"></p><p>password:<input type="password" name="password" value="請輸入密碼"></p><input type="submit" value="提交"></form></form></body> </html>實現鼠標聚焦時搜索框內文字消失，鼠標移開文字出現；輸入內容移開顯示輸入內容：
1.2.聚焦3.輸入
4.移開5.刪除6.移開
<html><head><title>document</title><meta charset="utf-8"><style type="text/css">input{border: 1px solid #999;}</style></head><body><form method="get" action=""><p>username:<input type="text" style="color: #999999;" value="請輸入用戶名" name="username"onfocus="if(this.value=='請輸入用戶名'){this.value='';this.style.color='#424242'} "onblur="if(this.value==''){this.value='請輸入用戶名';this.style.color='#999999'}"><p>password:<input type="password"></p></p><input type="submit"></form></body> </html>單選框radio（同一選項的name要相同）：
?? ??? ?<form method="get" action=""><h1>以下哪個是你們所喜歡的男星</h1>1.貝克漢姆<input type="radio" name="star" value="xiaobei">2.萊昂納多<input type="radio" name="star" value="laiangnaduo">3.彭于晏<input type="radio" name="star" value="pengyuyan"><input type="submit" value="提交"></form>復選框checkbox（同一選項的name要相同）：
?? ??? ?<form method="get" action=""><h1>Choose youe favourite fruit!</h1>1.apple<input type="checkbox" name="fruit" value="apple">2.orange<input type="checkbox" name="fruit" value="orange">3.banana<input type="checkbox" name="fruit" value="banana"><input type="submit"></form>設置默認選中checked="checked"：
<html><head><meta charset="utf-8"><title>text</title></head><body><form method="get" action=""><h1>CHOOSE YOUR SEX</h1>male:<input type="radio" name="sex" value="male" checked="checked">female:<input type="radio" name="sex" value="female"><input type="submit"></form></body> </html>下拉菜單<select><option>：
<select><option>選項一</option><option>選項二</option>... </select>?
<html><head><meta charset="utf-8"><title>document</title></head><body><h1>Province</h1><form method="get" action=""><select name="province"><option>北京</option><option>上海</option><option>天津</option></select><input type="submit" value="提交"></form></body>? </html>CSS
css引入+css基礎選擇器+選擇器權重
CSS中只有一種注釋形式：/*? ? */? ? 快捷鍵：ctrl鍵+?
CSS是什么意思？Cascading Style Sheet 的縮寫，意思是層疊樣式表。
CSS是用來裝修HTML的。
引入css的三種形式：
1.行間樣式css
<html><head><meta charset="utf-8"><title>document</title></head><body><div style="width: 100px;height: 100px;background-color: red;"></div></body>? </html>2.頁面級css?
<html><head><meta charset="utf-8"><title>document</title><style>div{width: 100px;height: 100px;background-color: red;}</style></head><body><div></div></body>? </html>3.外部css文件
/*style.css*/ div{width:100px;height:100px;background-color:red; } <!--document.html調用style.css--> <html><head><meta charset="utf-8"><title>document</title><link rel="stylesheet" href="style.css"> </head><body><div></div></body>? </html>選擇器
1.id選擇器：? ? ? #(id名)
比如某個元素 id="only"? ,? #only 即可選擇到這個元素（id和元素的關系是1對1）。
2.類選擇器? ? ? ? .（class名）
比如某個元素 class="demo"? ,? .demo 即可選擇到這個元素（class和元素的關系是多對多）；
多個class屬性的連接用空格即可，比如?class="demo? demo1" 表示元素同時擁有“demo”和“demo1”兩個class屬性。
3.標簽選擇器? ? ? ?標簽名
直接 標簽名 加 花括號{} 即可修改標簽樣式。
比如：選擇所有div標簽
4.通配符選擇器 *? ?選擇所有元素。
!important的使用：
在屬性值后邊加上!important 表示優先選擇這個屬性 。
優先級：
!important>行間樣式>id選擇器>類選擇器=屬性選擇器([屬性/屬性=屬性值])>標簽選擇器>通配符選擇器? ?
| !important | Infinity |
| 行間樣式 | 1000 |
| id選擇器 | 100 |
| class選擇器|屬性選擇器|偽類 | 10 |
| 標簽選擇器|偽元素 | 1 |
| 通配符選擇器 | 0 |
css復雜選擇器，權重計算問題，css基礎屬性
1.父子選擇器/派生選擇器(不一定要用標簽選擇器，可用其他選擇器替代）? 形式：父親+空格+子孫
示例1：div下的所有span? ??
示例2： strong下的所有em? ?
示例3：? div下所有的em? ?
2.直接子元素選擇器? 形式：父親+'>'+兒子
示例：div下的直接兒子em? ? div > em
3.并列選擇器（按順序且不帶空格）?
示例：
4.分組選擇器
復雜選擇器優先級：同行選擇器對應權重之和比較大小（權重相同后面覆蓋前面的）。
修改字體
基本用法：
設置顏色的三種形式：
1.純英文單詞（示例：red）
2.顏色代碼（三原色rgb，示例：#FF4400，每兩位表示一種原色的飽和度，依次是紅綠藍）
3.顏色函數（示例：rgb(255,255,255）)
border —— 盒子邊框：
邊框的三種形狀：
? ?實線? ? ? ?? ? 點狀? ? ??? ? 條狀
css企業開發習慣+盒子模型+層模型
字體默認高度為16px，所以文本對齊高度設置為16px時上下沒有空隙。
實現字體在按鈕中水平垂直居中： 文本所占高度=容器高度（line-height=height）
實現文本首行縮進text-indent：
一個像素（px）只能表示一種顏色，1 em=1 font-size 。
行為、樣式、結構相分離：
要求HTML只負責結構，CSS只負責樣式，所以del標簽是禁止用的，但是我們可以通過CSS達到相同效果。
比如：
比如：模仿a標簽（藍色、下劃線、聚焦變小手）
偽類選擇器（最常用的是 a?:hover? 表示鼠標聚焦的效果）：
實現聚焦背景變色，如下圖：
? ? ? ? ?當鼠標聚焦：
三種元素：行級元素(內聯元素)、塊級元素、行級塊元素。
| 名稱 | 特點 | 例如 |
| 行級元素(內聯元素) inline | 1.內容決定元素所占位置 2.不可以通過css改變寬高 | span strong em a del |
| 塊級元素 block | 1.獨占一行 2.可以通過css改變寬高 | div p ul li ol form address |
| 行級塊元素 inline-block | 1.內容決定大小 2.可以改變寬高 | ? |
可通過display屬性相互轉換。
如行級轉塊級：?
連續幾張圖片放在一起為什么會有空隙？因為凡是帶有inline的元素，都有文字特性，都可被空格分隔。
解決方法：
? ?——>??
一般公司開發都是先定義功能，后選擇。
意思就是先寫好css樣式，寫html的時候調用所需要的樣式即可，這樣比較有利于模塊化分工，省時間精力。
自定義標簽：
意思就是初始化標簽，比如說baidu檢索的時候關鍵字顯示紅色，查看源代碼發現使用的是<em>標簽，而<em>標簽的原始css并不是這樣的，但是我們可以自定義。
當標簽的某些固定屬性是我們不需要或者不想要的時候，我們可以通過自定義標簽來改變標簽的初始樣式。
再講幾個栗子，比如a標簽我們不想要下劃線和藍色，比如ul標簽不想要圓點和間距。為了清晰一點我把背景變成黃色。
初始：? ? ? ? ? ? 自定義：
一般每個標簽都會自帶padding和margin屬性，但是有時我們不想要他們自帶的間隔大小，所以最好用通配符選擇器取消所有標簽的自帶間隔屬性。?為什么這樣最好呢？因為通配符選擇器權重為0，如果想要自定義也不會沖突。
盒子模型：
什么是盒子模型？
HTML內的每個元素，都可以作為一個盒子模型。
盒子的三大組成部分：盒子壁border + 內邊距padding + 盒子內容(width+height)。
盒子模型=外邊距margin+border+padding+（content=width+height）。
瀏覽器以左邊上邊為墻，也就是說設置外邊距的時候元素會往右下或者左上變化。
控制臺：
右鍵點擊控制，出現控制臺界面，點擊Elements，出現HTML+CSS的展示。
在CSS區域旁邊就是盒子模型，鼠標移到哪，對應的區域就會變色。
當我們想要設置一個元素居中時，可以嵌套元素盒子把內容大小設置成一樣大。比如：
padding是一個復合屬性，padding：10px等同于 padding：10px 10px 10px 10px，設置padding: 10px 20px 30px 40px如下圖：
四個值時順序：上，右，下，左；三個值時順序：上，左右，下；兩個值時順序：上下，左右；一個值：上下左右。
還可以單獨設置padding-top，padding-left，padding-right，padding-bottom。
嘗試做個遠眺圖，如下圖：
這里只有三層：
有了margin就能隔開元素和元素。
原始：? ? ? 自定義：
定位是什么？在特定位置出現特定元素。
絕對定位absolute：
設置左邊線距離左邊：left屬性；右：right屬性；上：top屬性；下：bottom屬性。
body標簽自帶的margin屬性的值為8px，所以生成的元素不會緊貼頁面邊框。
絕對定位的特點：
1.脫離原來位置進行定位（變成不同層面的元素，不占有另一層面的空間）
2.相對于最近的有定位的父級進行定位，如果沒有就相對于文檔定位
相對定位relative：
相對定位的特點：
1.保留原來位置進行定位（變成不同層面的元素，占有另一層面的空間）
2.相對于自己原來的位置進行定位
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ?
使用定律：用relative做參照物，用absolute定位 。
廣告定位fixed：
就是平時遇到的頁面上那種不管頁面怎么動位置都不變的廣告的定位。自己試試：
如何居中定位？ 首先left和top屬性設置為50%，又由于定位是以元素的左上角為參照的，所以還需要修改margin-left和margin-top往左和往上移動一半的寬和一半的長。如下：
課后練習
作業：顯示一個五環，并要求在屏幕居中的位置。
提示：
【參考答案】
<html><head><title>document</title><meta charset="utf-8"><link rel="stylesheet" href="style.css" /></head><body><div class="plat"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div><div class="circle5"></div></div></body> </html> *{margin: 0;padding: 0; } .plat{position: absolute;left: 50%;top: 50%;margin-top: -93px;margin-left: -190px;height: 186px;width: 380px; } .circle1, .circle2, .circle3, .circle4, .circle5{position: absolute;width: 100px;height: 100px;border: 10px solid black;border-radius: 50%; } .circle1{border-color: red;left: 0;top: 0; } .circle2{border-color: green;left: 130px;top: 0;z-index: 1; } .circle3{border-color: yellow;left: 260px;top: 0; } .circle4{border-color: blue;left: 65px;top: 70px; } .circle5{border-color: purple;left: 195px;top: 70px; }?兩欄布局+兩個經典bug+BFC
兩欄布局
一個元素讓出位置，另一個元素定位到那里去。
*{margin: 0;padding: 0; } .right{position: absolute;right: 0;width: 100px;height: 100px;background-color: #fcc; } .left{margin-right: 100px;height: 100px;background-color: #123; }兩個經典bug
1.margin塌陷：垂直方向上的margin父子元素不能分離而且取最大值。
2.margin合并：兄弟結構垂直方向上的margin共用，上有用下無用。
經典bug無法解決，但是我們可以使用BFC來彌補。
block format context 塊級格式化上下文。我們可以通過特定的手段改變一個或多個盒子的渲染規則。
如何觸發一個盒子的bfc??四種。
看情況選取，比如就是要溢出盒子顯示的就不適于第四種。
我們在解決margin塌陷時添加了CSS，在解決margin合并的時候添加了HTML(需要打包觸發BFC)和CSS，但是我們不能因為解決bug而隨意更改結構，所以margin合并問題我們選擇不解決，只使用margin-bottom而不使用margin-top即可。
包裹浮動元素+開發實例、經驗
三大模型：盒模型，層模型，浮動模型。
浮動模型最簡單，只有float：left/right 。
我們在使用浮動元素的時候會產生浮動流，而所有產生了浮動流的元素，塊級元素看不到他們，只有產生了BFC的元素和文本類屬性(帶有inline)的元素以及文本能看到浮動元素。
為了解決這一問題，我們可以想辦法清除周邊浮動元素的浮動流：?（left/right/both，一般使用both即可）
當普通元素包含浮動元素時，行級元素看不到浮動元素，所以我們需要在浮動元素后面加一個可以看到浮動元素的元素來定位最末端的位置，但是我們不能隨便的更改結構，所以我們利用元素自帶的偽元素進行修改。
每個元素誕生的時候就伴隨著兩個偽元素，邏輯最前面的元素和邏輯最后面的元素?。
偽元素結構必須有content表示內容，如下：
偽元素是行級元素，要設置寬高就要設置成行級塊元素。
利用偽元素清除浮動流：
效果：
原始：
擴展知識：凡是設置了position和float的元素，當把元素設置為BFC元素，都會被自動轉換為塊級元素。
最早的浮動是為了在報紙上顯示設置文字環繞圖片的效果，如下圖：
?
單行文本溢出用...代替如何實現？效果如圖一，實現如圖二。
多行文本溢出用...代替如何實現？不好實現，人工截斷末尾輸入... 。
如何保證文字剛好n行?計算好???即可。
比如兩行：
CSS中背景圖片image的基本屬性：
url()地址；size圖片大小；默認repeat重復平鋪；position表示在容器中的位置。
大型網站一定要保證在默認加載策略下也能正常使用，意思就是屏蔽CSS和JavaScript下HTML也能顯示并使用。
舉個例子：點擊淘寶網圖片到淘寶網首頁，我們要保證圖片顯示時文字不顯示，圖片不顯示時文字顯示。
圖片顯示時：?? 圖片顯示不了時：
方法一：將文字修改成不換行且首行縮進到容器之外，然后把溢出部分隱藏即可。
*{margin: 0;padding: 0; } a{display: inline-block;text-decoration: none;color: #424242;width: 190px;height: 90px;border: 1px solid black;background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);background-size: 190px 90px;text-indent: 190px;white-space: nowrap;overflow: hidden; }方法二：根據padding上可以加背景顏色和背景圖片，我們把內容的高設置為0且溢出部分隱藏即可。
*{margin: 0;padding: 0; } a{display: inline-block;text-decoration: none;color: #424242;width: 190px;height: 0px;padding-top: 90px;overflow: hidden;border: 1px solid black;background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);background-size: 190px 90px;/*text-indent: 190px;white-space: nowrap;overflow: hidden;*/ }?但是p標簽內不能套塊級元素，a標簽內不能套a標簽。
?
總結
以上是生活随笔為你收集整理的前端「HTML+CSS」零基础入门学习笔记（完整）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2019前端「HTML+CSS」零基础入
- 下一篇： Java面试宝典 HTML、js、aja