技術標籤：前端htmlcsses6

一.html和web網頁組成部分

		1.什麼是html
			超文字標記語言
		2.html的語法
			雙標記 常規標記
			單標記 空標記
		3.常用的標記
			1) 文字標題h1~h6（其中h1只能用一次，h2用三次）
			2）段落標記p
			3）空格 &nbsp分號結束
			4)  加粗 b strong
			5）傾斜 i em
			6）強制換行 br
					word-break：break-all；
					另起一行換行 word-weap：break-word；
			7）水平線 hr
			8）上角標 sup  下角標 sub
			9）列表3
				無序列表 ul li
				預設有一個實心圓（想要改變符號樣式 給ul新增type=“square” 方形 circle空心圓）
				有序列表 ol li
				預設是數字（想要改變符號樣式 給ol新增type=“A start=3”開始的位置）
				自定義列表 dl dt dd
				規範的注意點：一組裡面只能有一個dt 可以有多個dd
				常用的場景：圖文排列（圖在上自在下	 圖在左字在右）
			10）插入圖片<img src=""/>
				src相對路徑的寫法
				-1.如果當前檔案是html和目標檔案所在的目錄是同一級 路徑的寫法：目標檔案的名字.副檔名
				-2.如果當前檔案和目標檔案所在的資料夾在同一級目錄，路徑寫法:目標檔案的資料夾的名字.副檔名
				-3.如果當前檔案在找目標檔案的過程中，需要後退的時候，路徑在寫的時候需要新增./如果是後退2步.J.Jlaqiang.ipg
				title屬性：滑鼠懸停上去的提示資訊
				alt屬性：圖片載入失敗時的提示資訊
			11）超連結 <a></a>
				路徑：href：“”
				title屬性：滑鼠懸停上去的提示資訊
				target=“_blank”   新視窗開啟 預設值：_self
			12）沒有太多預設樣式的標籤
				div 劃分區域
				span 可以是某幾個或者某幾個字
			14）表格
				表格的作用：資料的顯示或者資料統計
				表格 table
				行 hr
				列或者單元格 td
				相關屬性：
					width ，height，border，bordercolor，bgcolor，
					對齊方式：align=“center” left right
					單元格和單元格間距 cellspacing="0"
					單元格個內容的間距  cellpadding
					行合併  rowspan="合併的數" 注意要刪除多餘的單元格
					列合併 colspan="合併的列"
					單元格邊框合併 border-collapse：collapse
					列表隔行變（eve/2n    odd/2n+1）
									tr:nth-child(even){
									    background-color: gray;
									}
		4.web網頁組成的部分
			html結構
			css修飾
			javaScript行為
 

二.html表單和css基礎

	html的表單
		作用：收集資料的時候
				
			建立表單<form></form>
				設定資料傳送方式method="get和post"
				action=""
				name=	"表單的名字"
			輸入框<input/>
				屬性;type
					文字框：type="text"
					密碼框：type="password"
					提交按鈕：type="submit" <button></button>
					重置按鈕：type="reset"
				表示提示資訊：placeholder
				滑鼠單擊為手型：cursor:pointer
			value=""
				如果type="submit或者reset value的作用是修改內容
				如果type的值是text或者password value的作用是獲取使用者的資訊
				
	css基礎：
		什麼是css：層疊樣式表
		css語法：選擇器{屈性:屬性值:屬性和屬性值合起來的整體叫做宣告
		寫在哪裡（引入方式）：
		內部樣式： 在頭部裡面寫<style></style>
		外部樣式：連結<link href=" rel="stylesheet" type=""textcss">
						  匯入<style>@important  url（）</style>
						  link和import之間和區別？
						    1.本質的區別link是HTML的寫法import是CSS的一種引入方式
							2.載入順序上的link在載入的時候他是和HTMIL同時載入的，而impor載的
							3.相容上的link沒有相容問題import有相容問題。
							4、js控制dom改變樣式的時候，link可以修改的
		內聯樣式：行內樣式嵌入式樣式寫法<div style="width:200px;"></div>
		選擇器（選擇符） 的分類	
		1）直接用HTML標籤的名字作為選擇器的，比如div+ p礙h1元素選擇器或者型別選擇器
		2)  多個—樣的元素想要區分的時候，可以用class選擇器或者id選擇器
				class的選擇器的語法:.class的名字{}
				ID選擇器的語法id名字{}    特點：唯一性
		3）想要所有的元素都變的時候，就用萬用字元
		4)  多個元素樣式一樣的時候，用群組選擇器，群組選擇器語法:選擇符1，選擇符2，選擇3{屬性：屬性值}
 

三.css選擇器和核心屬性

1.css選擇器
		包含選擇器（後代選擇器）：語法 父元素  子元素{}
		偽類選擇器
			超連結預設的狀態alink
			超連結訪問過後avisited
			滑鼠經過的: hover
			超隧接啟用時候的狀態aactivef
2.css選擇器權重
		型別選擇器的權重是0001
		class選擇器0010
		id選擇器0100
		包含選擇器所有的之和
		偽類選擇器0010
		內聯樣式表1000
3.css核心屬性
		文字相關屬性
				font-size （瀏覽器預設大小16px）
			字型顏色 color
					直接寫單詞red
					用16進製表示#999999
					用rab（0,0,0）
					透明度rgba（0,0,0,0） a的取值範圍是0-1
			字型 font-fanily
					如果是中文字型或者有多個英文單片語成字型，需要新增雙引號
					多個字型之間用逗號隔開
			文字的加粗 font-family
					100-500表示的是不加粗
					600-900表示的加粗
					這些shuzh後面是沒單位的
			文字傾斜 font-style
					italic oblique表示的是傾斜
					normal 不傾斜
			文字的水平對齊方式
					taxt-align：center；right left
			文字的垂直位置
					行高line-height
					ps在測量的時候，如果文字大小一樣，那麼就是從上一行文字的頂部到下一行頂部
					line-height：1；其中的1表示的意思是字型大小的1倍（可以清除文字自帶的上下間距）
			簡寫 font
					簡寫的順序不能亂font：italic 800 20px/40px"宋體"
					最少有兩個引數 必須要有字號大小和字型
			首行縮排text-indent
					只對首行起作用
					可以給負值，負值往左邊走
			文字修飾：text-decoration
					text-decoration：none；一般會給a去除下劃線
					下劃線：underline
					上劃線：overline
					刪除線：line-through
					字間距：letter-spacing
					詞間距：word-spacing
					英文的處理方式
							英文大小寫的轉換 text-transform
		列表的相關屬性:
				去除列表前的小黑點 list-style:none;
		背景的相關屬性
				背景顏色background-color
				背景圖	background-image:url( );
					預設情況下，背景圖是顯示不了的，但是有內容或者設定了寬高就可以顯示了
					背景圖預設是平鋪
					背景圖顯示的範圍 由內容的多少或者寬高決定的
		背景圖的平鋪background-repeat
					預設值repeat
					不平鋪no-repeat
					橫向平鋪repeat-X
					縱向平鋪repeat-Y
		背景圖的位置background-position：水平位置 垂直位置
					取值可以負值
		背景圖固定back-attachment：fixed；
					簡寫：background：不需要注意順序
 

四.css核心屬性

	浮動屬性：
	
		left，right，none
		什麼時候用，讓元素橫著排過去
	清除浮動：
		clear：left，right，both				
	關於調整間距的
	
		外邊距margin
			實現一個盒子的水平居中（margin：0 auto；）
			可以為負數
		margin-top的相容問題
			產生的條件 預設情況下，給子元素新增margin-top，父元素會跟著一起下來
			解決的辦法：
				1.給父元素新增overflow-hidden；
				2.給父元素新增border-top：1px solid rgba（0,0,0""
				3.margin換成padding
				4.給父元素或者子元素浮動
		內間距（添白，補充）padding
			如果該元素有設定寬度或者高度，新增padding之後需要做減法
			如果分析間距相對於該元素是裡面的話，可以用padding
			如果想要調整背晏圖和內客的距離，用的也是padding
			如果想要調整邊框和內容的距離,用的也是padding
				簡寫:padding的教值的個數
				padding-20px;表示4個都是20px
				padding:10px 20px;表示上下是10左右是20px
				簡寫:padding的教值的個數
				padding-20px;表示4個都是20px
				padding:10px 20px;表示上下是10左右是20px
				padding:10px 20px 30px;上是10px左右是20px下是30pxL padding:10px 20px 30px 40px,上10px右20下30左40
	邊框border
	
		邊框的寬度border-width
		邊框的顏色border-color
		邊框的線型border-style（實線solid 虛線dashed 雙線double 點狀線dotted）
		簡寫border.20px solid red；
		邊框寫三角形
				寫一個箭頭朝左的三角形
				div:boder-top:30pmx solid transparent；
			 	border-bottom : 30px sold transparent； border-left：30px solid transparent； border-right：30px solid red； width :0;}
			 	
	盒模型：
		盒子模型的組成部分
		content內容  padding內邊距 border邊框 margin外邊距

五，單行本文溢位顯示省略號和元素型別

1.單行文字溢位顯示省略號
		1）	width：200px；
		2） 溢位屬性overflow：hidden；
				預設值：visible
				auto，	scroll， inherit
				分開：overflow-x和overflow-y
		3） 空餘空間white-space：nowrap；
				pre可以識別空格和回車，不會換行
				pre-line不可以識別空格，但是識別回車，且換行
		4）省略號的屬性text-overflow：ellipsis；
			  預設值:clip
2.元素型別
		1）依據css的顯示分類
			塊元素：
				豎著排列
				可以設定寬高，形狀為矩形
				可以作為其他元素的容器
				例如：div li p h1-h6 ol li form
			行內（內聯）元素
				橫著排列
				設定寬高不生效
				對於盒模型的屬性的個別屬性值不生效margin-padding的上下顯示不正確
				例如：i span em a b	strong
			行內塊元素
				既有行內元素的特點又有塊元素的特點
				例如：img input
				行內塊中的img和文字一起排列的時候，圖片對於文字基線對齊
				input和文字一起排列的時候	，input相對於文字居中對齊
				垂直對齊方式：vertical-align：
					預設值：baseline
					居中:middle
					top:實際是相對與文字行高的頂端對齊
					bottom：實際是相對與文字行高的低端對齊
					這個屬性會受到line-heright的影響
			元素巢狀規則
				塊元素可以隨意去巢狀其他的元素型別，但是塊元素有幾個比較特殊，p標籤不能巢狀自己，p也不能包含其他的塊元素，和h1-h6之間不可以互相包含，並且自己不能包自己
				預設情況瞎，行內元素不要巢狀塊元素，行內塊元素
3.元素型別的分類
	置換元素（替換元素)
		1）元素的實際顯示結果，是瀏覽器根據html的屬性或者標籤來決定的
		2）這類元素一般預設有一定的寬度和高度，或者其他的樣式(比如邊框)
		例如:img  input  textarea  object  select
	非置換元素（非替換元素）
		除了置換元素之外都是非置換元素
4.元素型別轉換的屬性 display	
		屬性值有18個
		常用的 display：block；（inline，inline-block，none）
		li預設的display的值是list-item
5.圖片撐大三畫素相容
		給圖片新增：display:block;
		給圖片新增：vertical-align：top；

六.寬高自適應和瀏覽器相容

	1.寬高的自適應：用的單位%如果撐滿是100%
		1）高度的自適應：用的單位可以是%，高度不寫，height：auto；
		2）如果高度不寫，這個時候父元素會有一些問題
				子元素浮動後，父元素高度會塌陷（清除浮動的方法）
					給父元素新增固定的高度，缺點：不適合自適應的佈局
					給父元素新增overflow：hidden/auto/scroll；，和zoom1 缺點：如果遇到定位定出去的時候，就不太適合了
					給所有的浮動元素新增一個空盒子，並且新增生命==宣告clear：both； height：0；overflow：hidden；缺點：造成程式碼冗餘	
					設定萬能清楚法
					：after{content：""; display:block; height:0; clear:both; overflow:hidden; visibility:hidden;}
					zoom:1;
						偽元素選擇器的權重是1
							:after和content
							:before和content
							:first-letter 第一個字元 只能用於塊元素
							:first-line 第一行 只能用於塊元素
							:selection選中之後的樣式  背景顏色和字型顏色
						給父元素新增浮動，沒有優點
						給父元素新增display：table；轉成表格
		3）自適應的時候，可以一些min-height或者max-height，min-width max-width
				min-height對於ie6不相容
					最小高度的相容寫法
						1.min-height：200px；_height:200px;
						2.min-height：200px；height：auto！important；height：200px；順序不能亂
						
		4）過濾器
				_下劃線的過濾器
				！important過濾器
				\9過濾器
				\0過濾器
				+或者*過濾器
				：root過濾器
	****用height寫百分比的時候，注意點：給html和body同時新增height：100%；****
	2.瀏覽器的相容
		1）5大瀏覽器的核心和帶博愛作品
				Trident 核心 MSHTML ie核心  代表作品IE，遨遊
				Gecko  核心 代表作品 火狐
				Webkit核心  代表作品 谷歌和蘋果瀏覽器
				Blink核心  代表作品最新的谷歌和歐朋
				Presto 核心 代表作品 歐朋
		2）常見的相容問題和解決方法
				圖片撐大3畫素 hack：img{display：block；或者vertical-align：top；}
				圖片橫著排列的時候，水平之間有空隙 hack：浮動
				圖片新增a後，再IE上有邊框hack：img{border：0；}
				圖片格式png24在IE6上有背景色，hack：把格式轉成png8
		3)  表單相關的相容
				表單元素就頂部間距不一致 hack：input{float：left}
				表單按鈕樣式u不一樣 hack：用a模擬或者如果按鈕是圖片，用背景圖寫
				表單裡面輸入的文字不一樣，在IE上文字靠上對齊，hack：line-height；
				表單去除自帶的邊框，不要用border：none；hack：border：0；
		4）其他的相容
				margin-top的相容
					hack1：給父元素新增上邊框
					hack2：給父元素新增overflow：hidden；
					hack3：給父元素或者子元素新增浮動
					hack4：給換成padding
					滑鼠變小手cursor：hand；但是隻能IE9以下 hack：cursor：pointer；

七.定位，錨點，透明

1.定位
	預設值：position：static；
	相對定位：position：relative；    不脫離文件流        參照物：自己原來的位置    層疊順序：沒有設定z-index的時候，後寫在上面
	絕對定位：position：absolute； 	 脫離文件流      	參照物：最近的帶有relative的父元素，預設相對與瀏覽器
	固定定位：position：fixed；       脫離                參照物:瀏覽器視窗     
	粘性定位：poition：sticky；       不脫離文件流
	包含塊概念；給決對定位的父元素新增相對定位，那麼這個父元素就是包含塊。
2.實現一個元素水平垂直居中
	1）position：absolute/fixed;    margin：auto ；上下左右"0"	
3.錨點
	作用：同一片頁面內不同位置跳轉
	用法：<a href="#id的名字"></a>
			   <div  id=“box”></div>
4.透明
	opacity：0； 或者1
	IE的相容寫法fitter：alpha（opacity=0-100）；
	顯示隱藏：
		display:none;隱藏，徹底隱藏內容和位置都不在，顯示到隱藏中間沒有過程
		opacity：0；隱藏，內容不在但是位置還在，可以看到過程，可以搭配過渡動畫

八.圖片整合

	優點：1.減少伺服器的請求次數，提高頁面的載入速度
		  2.減少圖片的體積
	圖片整合過程中的主要應用的是
				background-position：
	其他名稱：css精靈圖，雪碧圖