一.html和web網頁組成部分
1.什么是html
超文本標記語言
2.html的語法
雙標記 常規標記
單標記 空標記
3.常用的標記
1) 文本標題h1~h6（其中h1只能用一次，h2用三次）
2）段落標記p
3）空格  分號結束
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精靈圖，雪碧圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/234269.html
標籤：其他
下一篇：第一次總結