1.html和web網頁的組成部分
1.1 什么是html?
超文本標記語言
1.2 常用標簽
文本標題 h1-h6
段落 p
空格
加粗 b strong
傾斜 i em
強制換行 <br/>
水平線 <hr/>
上標 <sup></sup>
下標 <sub></sub>
串列
有序串列 ol li
默認是數字
想要改變串列的符號樣式 給ol添加type="A" start="開始的位置"
無序串列 ul li
默認是有一個實心圓
想要改變串列的符號樣式,給ul添加一個type="square方形 circle空心圓 disc默認值"
自定義串列 dl dt dd
規范一些的注意點: 一組dl里面只能有一個dt 可以有多個dd
常用場景:圖文混排(圖在上字在下 圖在左字在右)
插入圖片
src屬性:相對路徑/絕對路徑
title屬性:滑鼠懸停上去之后的提示資訊
alt屬性:圖片加載失敗的時候給的提示資訊
超鏈接<a></a>
路徑:href=""
title屬性:滑鼠懸停上去之后的提示資訊
target="_blank"新視窗打開 默認值:_self
沒有太多樣式的標簽
div 劃磁區域 容器
span 可以是某幾個或者某個字
表格
表格作用:資料顯示或者資料統計
表格:table
行:tr
列或者單元格:td
表格相關屬性:
寬度 width
高度 height
邊框 border
邊框顏色 bordercolor
背景顏色 bgcolor
對齊方式 align="center" left right
單元格之間的間距 cellspacing="0"
單元格與內容之間的間距 cellpadding
合并行 rowspan="合并數"
合并列 colspan="合并數"
1.3 web網頁的組成部分
結構(html) 表現(css) 行為(js)
2.html表單和css基礎
2.1 html表單
創建表單 <form></form>
設定資料傳送方式method="get或者post"
action=""
name="表單名字"
輸入框 <input/>
屬性type
文本框 type="text"
密碼框 type="password"
提交按鈕 type="submit" <button></button>
重置按鈕 type="reset"
提示資訊 placeholder=""
name=""
value=""
2.2 CSS基礎
2.2.1 什么是css
層疊樣式表
2.2.2 css語法
選擇器{屬性:屬性值;} 屬性和屬性值合起來的整體叫宣告
2.2.3 引入方式
內部樣式 在頭部里面寫<style></style>
外部樣式
鏈接 <link href="" rel="stylesheet" type="text/css"/>
匯入 <style>@import url() </style>
行內樣式(行內樣式 內嵌樣式) <div style="width:200px;"></style>
2.2.4 選擇器的分類
(1) 直接用html標簽的名字作為選擇器
(2) 多個一樣的元素想要區分的時候,可以用class選擇器或者id選擇器 id選擇器的名字是唯一的
(3)想要所有的元素都變的時候,就用通配符*{}
(4) 多個元素樣式一樣的時候,用群組選擇器 語法: 選擇符1,選擇符2,選擇符3{屬性:屬性值;}
3.CSS選擇器和核心屬性
3.1 CSS選擇器
后代選擇器 語法: 父元素 子元素
偽類選擇器
超鏈接默認的狀態 a:link
超鏈接訪問以后 a:visited
滑鼠懸浮鏈接上 a:hover
超鏈接激活時的狀態 a:actived
3.2 css選擇器權重
型別選擇器 0001
class選擇器 0010
id選擇器 0100
包含選擇器 所有之和
偽類選擇器 0010
行內樣式表 1000
!impotant > id > class > 標簽 > *和inherit
3.3 css核心屬性
文本相關屬性
字號大小 font-size
瀏覽器默認的是16px
字體顏色 color
字體 font-family
文字的加粗 font-weight
100-500 表示不加粗
600-900 表示加粗
這些數值后面是沒有單位的
傾斜 font-style
italic 表示傾斜
normal 不傾斜
文字的水平對齊方式 text-align
文字垂直位置 行高 line-hright
line-height: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
背景的位置 background-position:水平位置 垂直位置
可以為負值
背景固定 background-attachment:fixed;
簡寫background: 不需要注意順序
布局屬性
浮動屬性 float:left right none(默認值)
外邊距 margin
實作一個有寬度的盒子水平居中 margin:0 auto;
可以為負值
內邊距padding
如果該元素有設定寬度或者高度，添加上padding之后需要做減法
如果分析間距相對于該元素是里面的話,可以用padding
如果想要調整背景圖和內容的距離,用的也是padding
如果想要調整邊框和內客的距離,用的也是padding
簡寫:padding的數值的個數
padding-20px;表示4個都是20px
padding:10px 20px,表示上下是10左右是20px
padding:10px 20px 30px;上是10px左右是20px下是30px
padding:10px 20px 30px 40px;上10px右20下30左40
邊框border
邊框寬度 border-width
邊框顏色 border-color
邊框線型 border-style
實線 solid
虛線 dashed
雙線 double
點狀線 dotted
簡寫 border:1px solid red;
3.4 盒模型
margin 外邊距
border 邊框
padding 內邊距
content 內容
4.單行文本溢位
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
5.元素型別
5.1 元素的三種型別：塊元素、行內元素、行內塊狀元素
（1）塊元素：獨占一行(豎著排列)，可以設定寬高
（2）行內元素：行內逐個顯示(橫著排列)，設定寬高無效,margin和padding的向下顯示不正確
（3）行內塊狀元素：既有行內元素的特點又有塊元素的特點
5.2 元素嵌套規則:
1. 塊元素可以隨意去嵌會其他的元素型別但是塊元素中有幾個比較特殊,比如p標簽,自己不能包自己,另外p不能包含其他的塊元素,h1-h6他們之間不可以相互包含,并且自己不能包自己
2. 默認情況下,行內元素不要嵌套塊元素,行內塊元素，
5.3 元素型別轉換display
屬性值有18個
display:block;
display:inline;
display:inline-block;
display:none;
li默認的display的值是list-item
6.圖片撐大3像素`
給圖片添加 ：display:block;
給圖片添加： vertical-align:top;
7.寬高自適應
7.1 寬度自適應
單位為% 如果撐滿是100%
7.2 高度自適應
單位為% ，高度可以不寫，也可以是height：auto;
高度如果不寫，這時候父元素會有一些問題：
1. 子元素浮動后，父元素會高度塌陷（清除浮動的方法）
(1) 給父元素添加固定高度，缺點：不適合自適應布局
(2) 給父元素添加overflow:hidden/auto/scroll 和zoom:1 ，缺點：如果遇到定位定出去的時候，就不太適合
(3) 給所有浮動元素的后面添加一個空盒子，并添加clear:both; 缺點：造成代碼冗余
(4) 萬能清除法
.cl:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.cl{
zoom: 1;
}
（5）給父元素添加浮動 ，沒有優點
(6) 給父元素添加display:table; 轉成表格
7.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; 順序不能亂
注意：用height寫百分比的時候，需要給html和body同時添加height:100%;
8.瀏覽器兼容
8.1 瀏覽器前綴
-webkit- 谷歌/蘋果
-moz- 火狐
-o- 歐朋
-ms- IE
8.2 表單兼容
(1) 表單距離頂部間距不一致
input:{float:left;}
（2）表單按鈕樣式不一樣
用a模擬，如果按鈕是圖片則用背景圖寫
（3）表單里輸入文字，在IE上文字靠上對齊
line-height
（4）表單去除自帶的邊框
不要用border:none; 用border:0;
9.錨點及透明度
9.1 錨點
作用：同一頁面內不同位置跳轉
用法：
<a href="#id的名字"></a> <div id="box"></div>
9.2 透明度
transparent 只能讓顏色變透明
rgba（） 讓顏色變透明，不過透明度可以選擇
opacity 可以讓頁面元素變透明，IE的兼容寫法---filter:alpha(opacity=0-100)
9.3 顯示隱藏
display:none; 不占位置，不支持影片
opacity:0；占位置 支持過渡影片
visibility:hidden; 占位置 不支持影片
tranform:scale(0); 占位置
10.圖片整合
圖片整合又叫css精靈圖、雪碧圖，圖片整合程序中主要應用的是background-position
優點：（1）減少服務器的請求次數，提高頁面的加載速度
（2）減少圖片的體積
11.表格表單
11.1 表單
表單欄位集 fieldset
表單欄位標題 legend
提示資訊 label for
上傳檔案 type="file"
上傳多個檔案 multiple
單選按鈕 type="radio"
必須name="" 同組的必須一樣
選中checked
禁用 disabled
多選按鈕 type="checkbox"
下拉選單 select option
文本域 textarea
11.1.2 H5新增加的
提示資訊 placeholder
自動獲取焦點 autofocus
自動填充 autocomplete
輸入不能為空 required
最大max 最小min 步長step 最大長度 maxlength
11.2 表格
11.2.1 css相關屬性
控制單元格和單元格之間間距的屬性 border-spacing
合并單元格邊框的屬性 border-collapse : collapse;
單元格內容為空的時候的屬性 empty-cells : hide ;
固定的單元格的寬度 table-layout : fixed ;
控制單元格標題的屬性 caption-side: top bottom谷歌可以，但是left right只有火狐可以
11.2.2 HTML相關
行分組 thead tbody tfoot
12. 偽元素和偽類選擇器
12.1 偽元素
偽元素表示頁面中一些特殊的并不真實存在的元素（特殊位置）
偽元素用 ：：開頭，偽元素如下：
::first-letter 表示第一個字母
::first-line 表示第一行
::selection 表示選中的內容
::before 表示元素的開始
::after 表示元素的最后
其中before和after必須結合content屬性來使用
12.2 偽類選擇器
偽類選擇器分為結構偽類、動態偽類、否定偽類、目標偽類、語言偽類
動態偽類：
.demo a:link {color:gray;} 鏈接沒有被訪問時
.demo a:visited {color:yellow;} 鏈接被訪問過后
.demo a:hover {color:green;} 滑鼠懸浮在鏈接上時
.demo a:active {color:blue;} 滑鼠點中激活時的狀態
結構偽類：
:first-child 選擇某個元素的第一個子元素，IE6不支持:first-child選擇器
:last-child 選擇某個元素的最后一個子元素
:nth-child 選擇某個元素的一個后者多個特定的子元素
:nth-of-type
:empty
:root
否定偽類 :not()
目標偽類 :target
語言偽類 :lang()
13.CSS3屬性
13.1 陰影
文字陰影 text-shadow：水平 垂直 模糊度 顏色
盒子陰影 box-shadow：水平 垂直 模糊度 模糊半徑 顏色 insert
多個陰影之間用逗號隔開
13.2 英文換行
強制換行 word-break 默認值 normal
對于中文不換行 keep-all
強制換行 break-all
用來標明是否允許單詞內進行斷句 word-wrap
默認值 normal
break-word
13.3 背景相關的
（1）背景的裁剪范圍 background-clip
border-box （默認值）背景被裁切到邊框盒
padding-box 背景被裁切到內邊距框
content-box 背景被裁切到內容框
（2）背景起點 background-origin
padding-box（默認值） 背景影像相對于內邊距來定位
border-box 背景影像相對于邊框盒來定位
center-box 背景影像現對于內容框來定位
（3）背景大小 background-size
length 單位px
percentage 單位%
cover 使影像完全覆寫背景區域，圖片會部分失真
contain 保持影像本身寬高比，縮放到正好適應背景容器
13.4border開頭的2個屬性
（1）border-radius
（2）border-image
14. 彈性盒
(1) display：flex；
(2) flex-direction(改變主軸方向)
默認值 row
row-reverse
column
column-reverse
（3）換行 flex-wrap
默認值 nowrap
wrap
wrap-reverse
(4) 簡寫flex-flow:row nowrap
(5) 主軸對齊方式justify-content
flex-start、flex-end、center、space-between、space-around
(6) 側軸對齊方式align-items
flex-start、flex-end、center、baseline、stretch（默認值）
(7) 前后順序 order默認為0，值越小越靠前（可以為負值）
(8)放大比例 flex-grow 默認值為0
(9)縮小比例flex-shrink 默認值為1
(10)和寬度一樣 flex-basis
(11)簡寫flex：0 1 auto;
15.過渡、影片
15.1 過渡
(1) 定義過渡的屬性 transition-property
(2) 定義過迪的時間 transition duration : 2s;
(3) 定義過波的延遲時間 transition delay
(4) 定義過讀的運動形式 transition-tining-function
默認值:ease
加快ease-in
變慢ease out
先快后慢ease-in-out
勻速linear
逐幀影片steps()
貝塞爾曲線
(5) 簡寫transiion注意2個時間的順序(先過渡在延遲)
(6) 必須和hover事件一起用
15.2 影片
(1) 定義動國的名字 animation-name:
關鍵幀 @keyframes 名字()
(2) 影片的執行時間 animation-duralion
(3) 延遲時間 animation-delay
(4) 運動形式 animation-timing-function
(5)定義運動的次效animation-ileration-count
回圈 Infinite
(6) 定義動國的播放方向 animation-direction
默認值 normal
alternate
(7) 滑鼠經過暫停影片animation-play-state
(8) 定義影片執行的第一幀或者最后一幀停留的位置animation-lill-mode
(9) 簡寫 animation :
15.3 轉換(transform)
(1) 平移 transform:translate();
(2) 旋轉 transform:rotate();
(3) 縮放 transform:scale(); 默認是1
(4) 傾斜 skew() 里面的內容也會傾斜
(5) 視距(景深) transform:perspective();
(6) 轉換的中心點 transform-origin:水平 垂直 前后
最后一個引數只能用數值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/238082.html
標籤：其他
上一篇：ES5 與 ES6 中類的區別