目錄
2019前端「HTML+CSS」零基礎入門之 HTML學習筆記
2019前端「HTML+CSS」零基礎入門
瀏覽器 = shell（外殼）+內核
市場主流瀏覽器是什麼？是在市場佔有一定份額並有自主研發的內核的瀏覽器。
| 瀏覽器 | 內核 |
| IE | trident |
| Firefox | Gecko |
| Google chrome | Webkit/blink |
| Safari | Webkit |
| Opera | presto |
HTML、CSS、JavaScript三者分工不同。
HTML 負責結構
CSS 負責樣式
JavaScript 負責行爲
CSS中只有一種註釋形式：/* */ 快捷鍵：ctrl鍵+?
課時4 css初級篇-css引入css基礎選擇器選擇器權重
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>行間樣式>id選擇器>類選擇器=屬性選擇器([屬性/屬性=屬性值])>標籤選擇器>通配符選擇器
| !important | Infinity |
| 行間樣式 | 1000 |
| id選擇器 | 100 |
| class選擇器|屬性選擇器|僞類 | 10 |
| 標籤選擇器|僞元素 | 1 |
| 通配符選擇器 | 0 |
課時5 css複雜選擇器，權重計算問題，css基礎屬性
1.父子選擇器/派生選擇器 （不一定要用標籤選擇器，可用其他選擇器替代） 形式：父親+空格+子孫
示例1：div下的所有span 
示例2： strong下的所有em 
示例3： div下所有的em 
2.直接子元素選擇器 形式：父親+'>'+兒子
示例：div下的直接兒子em div > em
3.並列選擇器（按順序且不帶空格）
示例：
4.分組選擇器
複雜選擇器優先級：同行選擇器對應權重之和比較大小（權重相同後面覆蓋前面的）
CSS字典
基本用法：
設置顏色的三種形式：
1.純英文單詞（示例：red）
2.顏色代碼（三原色rgb，示例：#ff4400，每兩位表示一種原色的飽和度，依次是紅綠藍）
3.顏色函數（示例：rgb(255,255,255）)
border —— 盒子邊框：
課時6 css企業開發經驗、習慣，盒子模型，層模型
字體默認高度爲16px.
實現字體在按鈕中水平垂直居中： 文本所佔高度=容器高度（line-height=height）
實現文本首行縮進兩個位置：
一個像素（px）只能表示一種顏色。1 em=1 font-size 。
行爲、樣式、結構相分離：
模仿a標籤：（藍色、下劃線、聚焦變小手）
僞類選擇器（最常用 - :hover 表示鼠標聚焦的效果）：
實現聚焦背景變色，如下圖：
轉換：display屬性
如行級轉塊級：
去除圖片之間的空隙：
連續幾張圖片放在一起爲什麼會有空隙？因爲
。
——> 
盒子模型：
先定義功能，後選擇。
意思就是先寫好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往左和往上移動一半的寬和一半的長。如下：
課後練習
作業：顯示一個五環，並要求在屏幕居中的位置。
提示：
- z-index屬性表示z軸也就是第幾層次，靠近觀察者爲正；
- 設置圓形用border-radius：50%；
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dv1">
<div class="cir demo1"></div>
<div class="cir demo2"></div>
<div class="cir demo3"></div>
</div>
<div class="dv2">
<div class="cir demo4"></div>
<div class="cir demo5"></div>
</div>
br*500+Tab鍵
</body>
</html>
/*style.css*/
*{
margin: 0;
padding: 0;
}
.dv1,.dv2{
position: fixed;
left: 50%;
top: 50%;
}
.dv1{
margin-left:-150px ;
margin-top: -100px;
width: 300px;
height: 100px;
z-index: 1;
}
.dv2{
margin-left:-100px ;
margin-top: -50px;
width: 200px;
height: 100px;
z-index: 2;
}
.cir{
display: inline-block;
width: 80px;
height: 80px;
border: solid 6px;
border-radius: 50%;
}
.demo1{
border-color: blue;
margin-right: 7px;
}
.demo2{
border-color: black;
margin-right: 7px;
}
.demo3{
border-color: red;
}
.demo4{
border-color: yellow;
margin-right: 11px;
}
.demo5{
border-color: green;
}