HTML: 超文本標(biāo)簽語言
英文:HyperText Markup Language
作用： 用來展現(xiàn) 文本 聲音 視頻? 圖片 的頁面
語法：
1.標(biāo)簽是由 “ < ”? 加上 英文 加上? “>” 所組成。
2.標(biāo)簽一般情況下是成對出現(xiàn)，分開始標(biāo)簽和結(jié)束標(biāo)簽顷锰，結(jié)束標(biāo)簽會比開始標(biāo)簽多一個“/”价卤。
在開始標(biāo)簽和結(jié)束標(biāo)簽的中間寫的是屬于這個標(biāo)簽的內(nèi)容
如：
3.標(biāo)簽是不區(qū)分大小寫的，(當(dāng)開始標(biāo)簽是小寫的時候，結(jié)束標(biāo)簽也必須是小寫)但是建議小寫，因為大部分程序員都是寫的小寫。這也成為了一種規(guī)范刹枉。
4.標(biāo)簽是可以相互嵌套的（標(biāo)簽里面還可以再放標(biāo)簽）,但是要注意下標(biāo)簽的先后順序。
例如：
在寫html的時候需要一個基本的結(jié)構(gòu)：
這個結(jié)構(gòu)是由三對標(biāo)簽所組成屈呕，分別是：html head? body
需要注意微宝，html這對標(biāo)簽是包含head和body的。
如：
代碼解釋：
1.html：這是根標(biāo)簽虎眨，意思是html中的所有內(nèi)容都要放在這對標(biāo)簽之中蟋软。
2.head：html文檔頭部的部分，在里面寫的內(nèi)容一版是不會給用戶直接瀏覽的嗽桩，就如同人的大腦的思維是不會輕易讓外界知道是一個原理岳守。
里面寫的內(nèi)容有： <style> <script> <link> <meta>等標(biāo)簽。
瀏覽器會對head標(biāo)簽進行預(yù)讀碌冶，然后再決定是否執(zhí)行里面的內(nèi)容湿痢。
3.body：表示的是html的身體部分，里面的內(nèi)容寫的是展示給用戶瀏覽的內(nèi)容扑庞。
body標(biāo)簽中的內(nèi)容會被瀏覽器直接執(zhí)行譬重。
h1-h6 標(biāo)題標(biāo)簽? ：h標(biāo)簽1-6是由大到小依次排列的拒逮。
設(shè)置默認選擇：
單選&多選? 用? checked=checked
列表：? ? ? 用? selected=selected
禁用? ? ? 用? disabled="disabled"
⑨ 框架集（后臺管理系統(tǒng)）
span、div臀规、input
span：內(nèi)聯(lián)元素-----à內(nèi)聯(lián)元素的特征是他只占自己內(nèi)容的面積消恍，不可以設(shè)置寬高
div：塊級元素 -----à塊級元素他占整行的面積，可以設(shè)置寬高
input：內(nèi)聯(lián)塊級元素-----à內(nèi)聯(lián)塊級元素只占自己內(nèi)容的面積以现。可以設(shè)置寬高约啊。
CSS屬性
樣式：CSS(層疊樣式表)
CSS 作用： 修飾標(biāo)簽
WEB2.0: 規(guī)范
HTML : 展現(xiàn)網(wǎng)頁內(nèi)容
CSS? : 美化html頁面
JavaScript: 網(wǎng)頁交互
Css 語法：
方式1： 行內(nèi)樣式邑遏，寫在開始標(biāo)簽中 用style屬性引起，缺點恰矩，代碼重復(fù)记盒，維護成本高。
方式2 :? 內(nèi)嵌樣式外傅，寫在head標(biāo)簽中 用style 標(biāo)簽集中聲明纪吮。
方式3： 外部樣式，寫在獨立的css文件中萎胰，通過 link標(biāo)簽引入
語法：選擇器{ 屬性：取值碾盟；屬性：取值 ; .....? ? ? }
css的寫法 ----à 語法：屬性名：樣式;
如：color：red;
選擇器：
標(biāo)簽選擇器：
語法：
標(biāo)簽{
css屬性
}
如：p{
color:red;
}
id選擇器：
語法：
#id名{
css屬性
}
如：#p-1{
color:red;
}
類選擇器：
語法：
.class名{
css屬性
}
如：.p-1{
color:red;
}
文字樣式
color:顏色; ---------文字顏色
font-size:像素;---------文字尺寸;
font-family:字體; ---------設(shè)置文字字體
font-weight:bold; ---------設(shè)置文字為粗體
font-style:italic; ---------設(shè)置文字為斜體
line-height:像素; ---------設(shè)置文字行高（文字上下居中）
text-decoration:underline; ---------給文字增加下劃線
text-decoration:none;---------隱藏下劃線text-decoration:line-through;---------增加刪除線letter-spacing:像素;---------文本間距內(nèi)部文本對齊
text-align:left; ---------文字向左對齊
text-align:right; ---------文字向右對齊
text-align:center; ---------文字居中對齊
背景
background:url (圖片路徑); ---------背景圖
background:color/rgb(0 , 0 , 0); ---------背景顏色
background: rgba(0 , 0 , 0 , 0.5); ---------背景顏色以及透明度
寬/高度
width:像素; ---------寬度
height:像素; ---------高度
max-width/height:像素; ---------最小寬/高
min-width/hright:像素; ---------最大寬/高
漂浮：float:left/right; ---------浮動在左/右側(cè)邊線border:像素 顏色 樣式; --------- 設(shè)置邊線
邊線樣式:dashed:虛線? dotted:點線? solid:實線
border-top/bottom/left/right:像素 式 色;
---------上/下/左/右邊線的寬度技竟，樣式冰肴，顏色
距離：margin-left:像素;? ---------距離左邊界距離
margin-top:像素;? ---------距離上邊界距離
margin -right:像素; ---------距離右邊界距離
margin-bottom:像素; ---------距離下邊界距離
margin:0 auto ; ---------左右對齊（居中）填充內(nèi)部內(nèi)容：padding-top:像素; ---------上部填充
padding-bottom:像素; ---------下部填充
padding-left:像素; ---------左部填充
padding-right:像素; ---------右部填充定位：1、絕對定位(position: absolute)
2榔组、相對定位(position: relative)
3熙尉、固定定位(position: fixed)
注意:定位一般配合top/bottom/left/right:像素;來設(shè)置位置顯示狀態(tài)：display:none / block; ---------隱藏/顯示
z-index:位置; ---------設(shè)置重疊
設(shè)置透明度：filter:alpha(opacity=50);
opacity:0.5;
Css3
圓角化效果：border-radius
使用方法：
border-radius:10px;? /* 所有角都使用半徑為10px的圓角*/
border-radius:5px? 4px? 3px? 2px ;? /*4個角的半徑值分別是左上角、右上角搓扯、右下角检痰、左下角，順時針*/
除此之外锨推，border-radius的值還可以用百分比作為單位铅歼，但是兼容性不是太好。
實心上半圓：
方法：把高度設(shè)為寬度的一半爱态，并且只設(shè)置左上角和右上角的半徑與元素的高度一致（大于也是可以的）
如同：
效果圖：
實心圓：
方法：把寬度與高度的值設(shè)為設(shè)置為一致（正方形）谭贪，并且四個角的值都設(shè)置為他們值得一半。
如代碼：
效果：
邊框陰影：box-shadow
Box-shadow是向盒子添加陰影锦担，支持添加一個或者多個俭识。
語法：
Box-shadow：X軸偏移量 Y軸偏移量 [ 陰影模糊半徑 ] [ 陰影擴展半徑 ] [ 陰影顏色 ] [ 投影方式 ]
參數(shù)介紹：
X軸偏移量：必需。水平陰影位置洞渔。允許負值
Y軸偏移量：必需套媚。垂直陰影位置缚态。允許負值
陰影模糊半徑:模糊距離。
陰影擴展半徑：陰影尺寸
陰影顏色：陰影顏色堤瘤，默認黑色玫芦。
投影方式：可選（設(shè)置inset時為內(nèi)部陰影，默認為外部陰影）
示例代碼：
效果:
設(shè)置內(nèi)部陰影的代碼：
效果：
添加多個陰影：
如果要是添加多個陰影本辐，只需用逗號隔開即可桥帆。
如：
效果：
文本陰影text-shadow
語法：text-shadow：X-offset? Y-offset? blur? color；
X-offset：表示陰影水平偏移的距離慎皱，其值為正時老虫，陰影面向右偏移，反之向左茫多。
Y-offset：表示陰影垂直偏移的巨離祈匙，其值為正時，陰影面向下偏移天揖，反之為上夺欲。
Blur：為陰影模糊程度，其值不能為負數(shù)今膊，如果值越大些阅，陰影越模糊，反之為越清晰万细，如果不需要陰影則將blur的值設(shè)為0扑眉；
Color：是指陰影顏色，也可以使用rgba色赖钞。
示例代碼如：text-shadow:5px? 0px? 10px? red;
實現(xiàn)效果為：陰影向右偏移5個像素的紅色陰影腰素。
實現(xiàn)背景色透明度：
background：rgba（100,100,100,0.5）;
r? g? b表示的是顏色的三原色值，分別的范圍是0~255雪营，
a表示的是透明度弓千，范圍是0.1~1，1為不透明献起，0.1是最高透明度洋访。不可以為負值。
漸變色：
gradient分線性漸變（linear）和徑向漸變（radial）谴餐。
語法：background：linear-gradient（漸變方向姻政，起始顏色，結(jié)束顏色）
漸變方向分：
to? top ：從上向下
to? right :? 從左向右
to? bottom：從下向上
to? left：從右向左
to? right：從右向左
這樣起始顏色到結(jié)束顏色就會有一個漸變性岂嗓，當(dāng)然也可在起始顏色與結(jié)束顏色之間添加更多的顏色來實現(xiàn)額外的過度汁展。
背景尺寸：Background-size
語法：background-size:auto/長度值/百分比/cover/contain
取值說明：
1、auto：默認值，不改變背景圖片的原始寬度和高度食绿。
2侈咕、長度值：成對出現(xiàn)，如：200px 50px器紧，將背景圖片的寬度設(shè)置為200px耀销，高為50px，如果只有一個值铲汪，則將其作為圖片的寬來進行等比放縮熊尉。
3、百分比：0%~100%之間的任何值掌腰，這個值是基于元素的寬高來進行計算的帽揪。
4、顧名思義為覆蓋辅斟，即將背景圖片等比放縮填滿整個元素。
5芦拿、contain士飒、容納，即將背景圖片等比放縮至某一邊緊貼元素邊緣位置蔗崎。
