文章目錄

WEB前端筆記整理

一、HTML

1.1 HTML架構:

1.2 文字、圖片、超鏈接

1.3 音頻和視頻

1.4 表格表單

1.5 邊框美化

二、CSS

2.1 字體特效屬性概覽

2.2 CSS 美化

2.3 選擇聲明

2.4 基本選擇器

2.5 美化網頁菜單

2.6 圖片的美化style屬性內

2.3 2D Transform 方法

2.8 3D轉換

2.9 過渡效果

3.0 動畫效果

WEB前端筆記整理

18年讀大一時學習的前端設計，懟著一本書一直看，順便做了筆記，整理了一下，發布出來，筆記內容特別亂我自己都看不懂了，但還是要發出來紀念紀念

參考書籍：《HTML5+CSS3網頁設計案例教程》

一、HTML

1.1 HTML架構:

1

2

3

4

5

6

7

8

9

10

11

以上是html的主要結構，一切便寫在其上進行，

head內是一些預先定義修改，在其中修改，body內將直接應用。

body是其主體（身體），內容寫在其中。

1.2 文字、圖片、超鏈接

文字

段落和行的標簽

段落內內容

1

段落內包含新段落則在p后加對應數字eg：

wdqwdqwdqwdqwd
dasdqwdsdasda asdasdasdasd

1

2

3

4

5

標題標簽

標題

1

有h1 h2 h3…到六為止，代表6種標題大小，標題內可繼續接標題

標題1

標題2

1

2

3

4

（注：字符由字符表找對應字符，空行
輸入多空行：br{$}*行數 ）

1

圖片

標簽:

1

提交按鈕，submit，提價給服務器。

重置按鈕，reset，清楚表單中數據。

1

Date和time屬性的應用

Date 日、月、年

Month 月、年

Week 周、年

Time 時間

Datetime 時間、日、月、年

Datetime-local 時間、日、月、年（本地）

1

填寫數字屬性：number、range

Number是在空格內填寫數字，而range則是以滑條形式調整數字。

例子：

輸入

1

2

3

4

5

Require=”require”該命令插入在表單標簽內，則該標簽必需要填寫，才能上交。

表單美化在P259頁。

1.5 邊框美化

三個屬性：寬度、樣式、顏色

Border-width、border-style、border-color

Border：none無邊框，dotted 點線式邊框，dashed 破折線式邊框，solid直線式邊框，double雙線式邊框，groove槽線式邊框，ridge脊線式邊框，inset內嵌效果的邊框，outset突起效果的邊框，

指定調節各方位邊框效果：border-top-style，border-right-style，border-left-style，border-bottom-style，

調節各個位置顏色代碼與其相同。

邊框

1

圓角邊框：border-radius：值1/值2；兩個數值分別定義，水平半徑和數值半徑，

只設一個值代表四分之一圓！border-radius后面接四個圓角值將依次使用到top-left，top-right，bottom-right，bottom-left。后面未設置的值默認與前面相同。

定義不同位置的圓角屬性和上面相同。

二、CSS

2.1 字體特效屬性概覽

Font-family 字體

Font-size 字體大小

Padding-bottom…

Border-bottom …solid…padding指添加底線與文本距離，border指底線厚度，solid指固體填充顏色。

Background：url{照片名} repeat-x bottom 添加背景圖片，并讓其在底部沿x軸重復平鋪。

Text-shadow：陰影水平平移值；陰影豎直平移值；陰影模糊值；陰影顏色；

文字陰影效果。

一共四個字

1

定義字體粗細：font-weight：100~900

四種定義：lighter細，normal 正常，bold 粗，bolder 更粗，

Font-variant：normal 保持原字體形狀，比如大小寫

限制文本長度，多出的給隱藏掉。

兩種方式：clip隱藏部分用切割線；ellipsis隱藏部分用省略號

Font-size-adjust:none/number 強制字體尺寸相同，none表示沒有，number數字

單詞字體間距style=“word-spacing:normal或length”normal指正常距離，length則是設定一個值。文字間距離用letter-spacing。可以設定為負值。

文本修飾效果屬性：style=“text-decoration：none/underline/overline/line-through/blink”

Underline下劃線overline上劃線 line-through刪除線 blink閃爍

Text-transform對英文單詞的處理：1、capitalize開頭大寫 2、uppercase 全大寫3、lowercase全小寫

對齊方式：text-align

Start向第一行開始對齊，end向第一行結束對齊，left左對齊，right右對齊，center居中對齊，justify兩邊對齊中間均勻分布，

首行縮進text-indent:加長度，表示縮進的長度

行高：line-height：加長度，可為負值 百分比表示字符長度，應用在塊標簽中，div

White-space空白處理，可應用在塊或行元素中。（style）

Normal正常空白會被瀏覽器忽略 pre空白會被保留 類似

標簽，nowrap文本不會換行直到遇到

標簽為止，pre-wrap保留空白和換行符即enter鍵，pre-line不保留空白但保留換行符，inherit繼承父元素屬性，（嵌套）

2.2 CSS 美化

CSS 樣式包含選擇符、屬性、屬性值

內容

1

P為選擇符、style=color為屬性、red為屬性值。

1、樣式分類：行內樣式、內嵌樣式、鏈接樣式、導入樣式

2、行內樣式：在body內寫入標簽中

3、內嵌樣式：寫入head中

1

Text/css是指應用的css屬性，不同標準樣式不同。

4、鏈接樣式：放在head區域，鏈接到一個專門的樣式文件，讓代碼分離，方便后期維護

1

Rel指鏈接到指定的樣式表，stylesheet指樣式表，type是文件類型，herf是鏈接文件位置，1.css是指文件名，此處涉及到相絕對（盤符）位置和相對位置的關系。

5、導入樣式：@import””放在head中最前面，

1

1.css為文件名，插入方式和上面相同，但可以導入多個文件。

優先級：行內樣式>內嵌樣式>鏈接樣式>導入樣式

內嵌樣式中選擇方式：1、標簽選擇 2、類選擇器3、id選擇器……………

1標簽選擇-就直接對應代碼標簽

2 類選擇器-選擇相同屬性一類 例如class屬性，見css筆記記載

文字

1

2

3

4

5

6

7

8

9

10

3略

4繼承選擇器

1

2

3

4

5

6

7

8

9

10

11

在前一個基礎上對其中部分標簽添加其他屬性

5偽類選擇器

A標簽的4種顯示狀態

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

Link指為訪問時鏈接狀態，visited指訪問后鏈接狀態，hover指懸浮在鏈接上時的狀態，active指激活鏈接時鏈接的狀態

狀態指樣式

2.3 選擇聲明

集體聲明

1

2

3

4

5

多重套嵌聲明

與繼承選擇器相同

css兩種方法注釋：

1.通過link單獨鏈接一個css文件

2.在body內寫（麻煩）

style是css用于對外觀（顏色、大小、背景等）的描述

不同描述間用；

分開“=”是一級等號

“：”是在一級等號內的二級等號

{}是一個重要符號，要多想想其用處。

css注釋/注釋/

html注釋

色彩模式rgb

r 淺深 0-255

g

b

eg：

{color：rgb（232，242，5）；} 百分比也可以，直接寫名稱也可以

選擇器

選擇器可以找到html中元素，并且將樣式值傳遞給元素

4大類

基本選擇器

組合選擇器

屬性

偽元素

2.4 基本選擇器

1通配符選擇器 * （對所有選擇器）（eg、border外邊框 *div{boeder:1px solid black})

2標簽選擇器 div (只針對標簽div)

3id選擇器（針對部分區域）在html需要做標記標簽內寫上id=“名字”，在另一處

用 #名字 來追述到標記標簽，對之做特殊處理 （大小用font-size: px；來調大小）

注id具有唯一性 一個標簽只有一個id，但一個id可以對多個標簽。

4class選擇器

eg html內

123

css內.名字{font-size:100px}

class與id不同，一個標簽可以接好多個class

id class 在css中前面可以加標簽名來限定范圍

eg:div.名字{font-size:100px}

命名不能使用純數字!!!

2.5 美化網頁菜單

網頁菜單常用塊元素與列表組合

塊元素：div、nav兩者無區別，但方便分辨

無序列表：ul內接li

有序列表：ol內接li

自定義列表：dl dt dd依次內嵌

有序與無序列表美化通常通過，改變前面的符號或數字來美化，

詳情看271，或百度，屬性：list-style-type后接none則讓其消失

將前面的符號或數字改變成圖像：list-style-image:url(圖片路徑)

Padding-left設置圖片與文字的距離

無序列表美化：276頁

2.6 圖片的美化style屬性內

圖片的大小：width和 height 只設定其中一個會等比例縮放，兩個都設置則不會等比例縮放。

圖像和文本和在一個行元素或塊元素中則使用text-align文本對齊方式。單獨放到其中也可以。

以上為橫向對齊

縱向對齊：跟與圖像在一行的元素來對齊，vertical-align

Sub與文本下標對齊，super與文本上標對齊，

Top middle bottom老三樣

Length以基線為標準，可以為負數

浮動效果float：none/right右/left左

內邊距padding-top padding-left padding-right padding-bottom

外邊距：margin：用法和上面相同。

背景色：background-color：。。。

插入背景圖片：background-image：url（圖片名）

1

當背景圖過小時幾種重鋪方法：background-repeat：repeat/repeat-x/repeat-y/no-repeat

第一個全部重鋪，第二個x軸方向重鋪，第三個y軸方向重鋪，第四個不重鋪

背景圖片與文檔一起滾動的問題，background-attachment：scroll/fixed

Scroll指圖片與滑輪一起滾動， fixed指圖片固定在可見屏幕內不動

Background-position：top，center，bottom/left，right

組合確定位置

背景圖片大小：background-size：長度、寬度 只設一個則另一個默認，大小百分比，

Cover將圖片縮放覆蓋到適合定義區域，contain與cover差不多

加<>指代碼不用輸入

Background-origin：border/padding/content 背景圖片顯示地方定義：border指在border邊框內顯示，padding指在padding區域內顯示，content在content區域內顯示

218在看

圖片包括背景圖片上右下左的邊距設定：margin：依次四個數值。

圖片的美化style屬性內

圖片的大小：width和 height 只設定其中一個會等比例縮放，兩個都設置則不會等比例縮放。

圖像和文本和在一個行元素或塊元素中則使用text-align文本對齊方式。單獨放到其中也可以。

以上為橫向對齊

縱向對齊：跟與圖像在一行的元素來對齊，vertical-align

Sub與文本下標對齊，super與文本上標對齊，

Top middle bottom老三樣

Length以基線為標準，可以為負數

浮動效果float：none/right右/left左

內邊距padding-top padding-left padding-right padding-bottom

背景色：background-color：。。。

插入背景圖片：background-image：url（圖片名）

1

當背景圖過小時幾種重鋪方法：background-repeat：repeat/repeat-x/repeat-y/no-repeat

第一個全部重鋪，第二個x軸方向重鋪，第三個y軸方向重鋪，第四個不重鋪

背景圖片與文檔一起滾動的問題，background-attachment：scroll/fixed

Scroll指圖片與滑輪一起滾動， fixed指圖片固定在可見屏幕內不動

Background-position：top，center，bottom/left，right

組合確定位置

背景圖片大小：background-size：長度、寬度 只設一個則另一個默認，大小百分比，

Cover將圖片縮放覆蓋到適合定義區域，contain與cover差不多

加<>指代碼不用輸入

Background-origin：border/padding/content 背景圖片顯示地方定義：border指在border邊框內顯示，padding指在padding區域內顯示，content在content區域內顯示

218在看

圖片包括背景圖片上右下左的邊距設定：margin：依次四個數值。

一、2D轉換

Transform底下的各種屬性和transition一樣需要加-webkit-來在定義；

1、 Translate（x，y）；在x和y軸上移動的距離，以左邊和上邊為基準線。

2、 rotate(度數deg) 允許負值，旋轉順時鐘旋轉。

3、 skew（）根據x軸和y軸翻轉給定角度。單位deg

2.3 2D Transform 方法

2.8 3D轉換

2.9 過渡效果

過渡是使過渡過程效果柔和化，使它不突兀。

Transition過渡屬性簡寫版，分四類

Transition-property：需要過渡的屬性名

Transition-duration：過渡效果花費的時間

Transition-timing-function：規定過渡時間曲線，

Transition-delay：規定過渡從什么時候開始（延遲）

黃色標記的四個可以直接簡寫在transition的后面。

簡寫的順序是：名稱-持續時間-速度曲線-延遲

寫完后下面要在接一個-webkit-transition重復定義上面過渡才能使用。不同瀏覽器webkit不同

過渡曲線分類：

3.0 動畫效果

@keyframes：定義動畫css樣式，動畫

Animation是除了animation-play-state以外所有動畫屬性的簡寫；

Animation-name：定義@keyframes的名稱

Animation-duration是一個周期所花費的時間 默認0

Animation-timing-function：規定動畫的速度曲線

Animation-delay：動畫延遲

Animation-iteration-count：規定動畫播放次數

Animation-direction：規定動畫下一周期是否逆向播放，默認normal

Animation-play-state：規定動畫是否運行或暫停

定義動畫時，@keyframes是用來單獨寫定義動畫，然后在需要的對象上綁定動畫，使用animation：+名字+持續時間；

@keyframes中用百分比定義各個時間段，from、to表示0%到100%；

CSS HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。