Conecte-se
Fazer login

Galeria de mapas mentais HTML CSS

HTML CSS

html和css的常用基礎，CSS是層疊樣式表cascading style sheets，html是超文本標記語言hyper text markup language。

Editado em 2023-08-22 15:01:32

PlotWizard

Trabalhos recentes Ver mais trabalhos>>

bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.

HTML CSS

PlotWizard

Trabalhos recentes Ver mais trabalhos>>

Recomendado para você
Descrição

Vue3
- 24
WSpOlsSb
前端演算法網路知識框架筆記總結
- 22
슈퍼직장인
前端學習
- 24
WSUJfrxa
BOM
- 15
PlotWizard
Web Worker
- 13
PlotWizard
HTML標籤種類
- 111
- 1
PlotWizard
HTML基礎知識
- 27
PlotWizard
前端CSS、JS、HTML開發知識點學習總結
- 17
PlotWizard
CSS前端HTML基礎課程訓練方案
- 19
PlotWizard
ethers.js
- 24
EllaGrace

HTML CSS

CSS概念

cascading style sheets

層疊樣式表

CSS語法

註解

/* */

選擇符{屬性:屬性值;屬性:屬性值;屬性:屬性值;......屬性:屬性值;}

CSS常見選擇符

基本

標籤

標籤名{}

特點

唯一性

#box{}

class

特點

一對多

多對一

.red{}

偽類

:hover

:link

:active

:visited

通配符

複合

群組

選擇符1,選擇符2,....{}

包含

選擇符1 選擇符2 ...{}

指定

選擇符1選擇符2...{}

CSS常見屬性

文字

font-size

color

line-height

text-align

font-weight

bold

normal

lighter

bolder

font-style

normal

italic

font-family

font-varient

normal

small-caps

text-indent

text-decoration

underline

overline

line-through

none

text-transform

uppercase

lowercase

capitalize

text-overflow

letter-spacing

word-spacing

盒模型

margin

支持四值法

支援單一方向定義

支援取值為負

不支援背景圖

垂直相鄰合併

父親盒子overflow:hidden

子盒子float

border

特點

支援背景圖

支援單一方向

不支援四值法

邊框楔形

三角形

border:100px solid transparent;

border-top-color:red;

height:0;

width:0;

屬性

border-width

border-style

solid

實線

dashed

線狀虛線

dotted

點狀虛線

double

雙線

border-color

padding

支持四值法

支援單一方向

支援背景圖

不支援取值負數

需減對應寬高（怪異盒不需要）

content

width

height

浮動

float

left

right

none

clear

left

right

none

both

放在不想被浮動影響的盒子上

定位

相對

relative

特點

不脫標佔位

相對自己定位

可以用於細微位置的移動

可以用於絕對定位的參考物

絕對

absolute

特點

脫標不佔位

相對包含塊定位

不寫座標留原位

子絕父相

固定

fixed

特點

相對視窗定位

脫標不佔位

不寫座標留原位

黏性

sticky

特點

需要結合座標使用

相當於相對定位和固定定位的結合

不脫標佔位

靜態

static

特點

不脫標佔位

不支援座標屬性

不支援層級屬性

元素類型

分類

區塊級

獨佔一行

可設定寬高

行高可撐開高度

浮動之後會橫向排列

內聯

在一行顯示

不能設定寬高

行高撐不開高度

浮動之後可以設定寬高

不支援text-indent

不支援盒模型相關屬性，垂直方向失效

轉換

display

block

inline-block

inline

none

隱藏元素

list-item

清單類型

table-cell

單元格類型

應用

不定寬導航水平居中

ul {text-align:center}

li {display:inline-block;}

單行居中多行靠左

.all {text-align:center;}

.all p {display:inline-block;text-align-left};

圖片間隙

img{display:block;

img{vertical-align:top/middle/bottom;}

.all{font-size:0;}

圖片垂直居中

方法1

.all {height:400px;line-height:400px;}

img{vertical-align:middle;}

方法2

img{vertical-align:middle;}

span{vertical-align:middle;width:0;height:100%;display:inline-block}

表格相關

border-spacing

邊框間隙

border-collpase

邊框合併

table-layout

固定表格佈局

值

fixed

固定表格佈局

auto

自動表格佈局

empty-cells

無內容儲存格顯示

值

hide

無內容儲存格隱藏

show

無那日單元格顯示

背景相關

background-color

background-image

url();

background-repeat

repeat

no-repeat

repeat-x

repeat-y

background-position

水平垂直

top right bottom left

background-attachment

scroll

相對盒子

fixed

相對視窗

清單相關

list-style:none

css3

選擇符

基本

標籤

class

層級

後代

（空格）

子代

相鄰兄弟

一般

偽類

動態偽類

:hover

:link

:active

:visited

:focus

結構偽類

孩子系列

:nth-child()

:first-child

:last-child

:only-child

:nth-last-child()

兒子系列

:nth-of-type()

:first-of-type

:last-of-type

:only-of-type

:nth-last-of-type()

:root

:empty

:not()

否定偽類

:not

語言偽類

:lang

目標偽類

:target

需要結合錨點連結使用

放在目標上

加了id的是目標

UI元素狀態偽類

:disabled

:enabled

:read-only

:read-write

:checked

屬性

[attr]

[attr=val]

[attr^=val]

[attr$=val]

[attr*=val]

[attr~=val]

[attr|=val]

偽元素（內聯）

::after {content:""}

::before {content:""}

::first-line

::first-letter

::selection

權重

0.1

標籤

class

偽類

屬性

100

內聯

1000

!important

10000

屬性

圓角半徑

border-radius

盒子陰影

box-shadow

inset

內陰影

向右

向下

模糊程度

擴展程度

陰影顏色

文字陰影

text-shadow

向右

向下

模糊程度

變形

transform（2D）

translate()

rotate()

scale()

skew()

transform（3D）

定義景深

perspective

定義變形類型

transform-style:preserve-3d;

3D變形

translate3d

rotatex

rotatey

rotatez

scale3d

定義變形起點

transform-origin

過渡

transition

漸變

線性漸變

background:linear-gradient(0deg, #000, #000)

徑向漸變

background:radial-gradient(半徑 at 位置, #000, #000)

半徑：主/次

位置：x/y

線性漸變平鋪

background:repeating-linear-gradient(0deg, #000 5px, #000 10px)

徑向漸變平鋪

background:repeating-radial-gradient(半徑 at 位置, #000 5px, #000 10px)

動畫

動畫的聲明

@keyframes 名字{}

動畫調用

animation: 名字 .5s linear 0s infinite alertnate forwords

佈局方式

彈性盒佈局

容器

display:flex

flex-direction

column

row

column-reverse

row-reverse

flex-wrap

wrap

no-wrap

wrap-reverse

justify-content

flex-start

flex-end

center

space-between

space-around

space-evenly

align-items

stretch

flex-start

flex-end

center

baseline

alegn-content

stretch

flex-start

flex-end

center

space-between

space-around

space-evenly

專案

flex

flex-shrink

flex-grow

flexbasis

align-self

stretch

flex-start

flex-end

center

baseline

order

網格佈局

容器

display:grid

grid-template-columns

200px 200px 200px

20% 50% 30%

repeat(3,200px)

repeat(auto-fill,20%)

1fr 1fr 1fr

1fr 1frr 1minmax(200px,1fr)

grid-template-rows

200px 200px 200px

20% 50% 30%

repeat(3,200px)

repeat(auto-fill,20%)

grid-gap

row-gap

column-gap

grid-template-areas

justify-content

align-content

justify-items

align-items

專案

grid-area

grid-column

grid-column-start

grid-column-end

grid-row

grid-row-start

grid-row-end

多列佈局

columns

columns:5 200px;

column-count

column-width

column-gap

column-rule

column-span

column-fill

媒體查詢

@media screen and (min-width:960px) and (max-width:1200px)

盒模型

box-sizing

border-box

怪異盒模型

特點

padding border在width height內

content-box

標準盒模型

特點

width height不包含padding border

相容

內容

Trident

Gecko

Webkit

Blink

Presto

前綴

-moz-

-ms-

-webkit-

-o-

術語

漸進增強

先低後高，以低版本功能的實現為主，為高版本添加酷炫效果

優雅降級

先高後地，以高版本功能的效果為主，需要處理低版本的兼容

其他

字體圖示

http://www.iconfont.cn

錨連結

跳轉

居中方法

定位

方法1

父親盒子

position:relative;

子盒子

position:absolute;

top:50%;

left:50%;

margin-left:-寬一半;

margin-top:-高半;

margin:auto

方法2

父親盒子

position:relative;

子盒子

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto

方法3

父親盒子

position:relative;

子盒子

position:absolute;

top:calc(50% - 高半);

left:calc(50% - 寬半);

方法4

父親盒子

position:relative;

子盒子

position:absolute;

top:50%;

left:50%;

translate(-50%,-50%);

彈性盒

方法1

父親盒子

display:flex;

子盒子

margin:auto;

方法2

父親盒子

displayflex;

justify-content:center;

align-items:center;

方法3

父親盒子

display:flex;

justify-content:center;

子盒子

align-self:center

網格

方法1

父親盒子

display:grid;

justify-content:center;

align-content:center;

方法2

父親盒子

display:grid;

子盒子

margin:auto;

轉行內區塊

方法1

父親盒子

line-height: 高;

text-align:center;

父親盒子

display:inline-block;

vertical-align:middle;

line-height:高;

方法2

父親盒子

text-align:center;

子盒子

display:inline-block;

vertical-align:middle;

父盒偽元素::after

content:"";

display:inline-block;

vertical-align:middle;

width:0;

height:100%;

方法3

父親盒子

text-align:center;

vertical-align:middle;

display:table-cell;

子盒子

display:inline-block;

多行文字垂直居中

父親盒子

vertical-align:middle;

display:table-cell;

程式碼片段

省略號

固定寬

width

不換行

white-space:nowrap;

溢出隱藏

overflow:hidden

省略號

text-overflow:ellipsis

行動端佈局

vieport

視口，行動端預設980

dpr

裝置像素比

佈局方式

百分比佈局

等比縮放佈局

單位

自身的倍數或是父盒子字號的倍數

rem

根（html）字號的倍數

百分之一的視窗寬

百分之一的視口高

vmin

百分之一的短邊

vmax

百分之一的長邊

BFC

可觸發的屬性

float

left

right

overflow

hidden

scroll

auto

position

absolute

fixed

display

inline-block

table-cell

table-caption

flex

應用

margin-top穿透問題

高度塌陷問題

寬高自適應

寬度自適應內容

float

position

inline-block

高度自適應內容

高度塌陷

子盒子浮動，父盒子高度為0的現象

解決

固定高

優點

簡單

缺點

無法自適應

父親盒子加overflow:hidden

優點

可自適應

缺點

溢出隱藏

在浮動下面添加一個空盒子，並設定clear:both;

優點

可以自適應

不溢出隱藏

缺點

需要多加載一個盒子

萬能清浮法，給父盒子加::after{content:"";display:block;clear:both;}

優點

可自適應

頒布溢出隱藏

也不需要多載一個盒子

高度自適應窗口

html,body{height:100%;}

HTML5

特點

基本結構更簡潔

語法放鬆

標籤語意化

即使沒有樣式，也能呈現清晰結構

方便搜尋引擎優化

便於團隊合作，程式碼的後期維護修改

無障礙性

未來功能

新增語義標籤

大語意

header

footer

main

nav

section

article

aside

小語意

figure

figcaption

mark

canvas

video

屬性

controls

autoplay

muted

loop

src

支援格式

mp4

ogg

webm

width

height

audio

屬性

controls

autoplay

muted

loop

src

支援格式

mp3

ogg

wav

details

summary

source

智慧表單

新增屬性

required

必填項

autofocus

自動對焦

placeholder

佔位符

autocomplete

是否開啟歷史記錄

值

off

pattern

正規驗證

新增控制項

tel

url

number

min

max

step

range

min

max

step

color

date

month

week

time

datatime-local

html常見標籤

文字類

標題

一般用於放logo

一般用於放欄目標題

段落

修飾類

加粗

strong

語意強

傾斜

語意強

底線

ins

語意強

刪除線

del

語意強

上下標

sup

上標

sub

下標

表格類

標籤

table

列標題

caption

表格標題

行分組

thead

tbody

tfoot

列分組

colgroup

屬性

rules

群組分割線

值

all

cols

rows

none

groups

width

height

border

bgcolor

align

水平對齊方式

值

left

right

center

valign

垂直對齊方式

值

top

middle

bottom

baseline

colspan

rowspan

cellspacing

cellpadding

表單類

表單域

form

method

提交方式

值

get

不安全

可分享

處理資料小於2KB

受網址列長度影響

效率高

獲取數據的過程

post

傳送資料的過程

不限大小

相對安全

效率低

不可分享

action

目標地址

值

（跳轉的地址）

name

target

打開方式

值

_blank

新視窗打開

_self

目前視窗打開

表單控制項(type)

文字

text

密碼

password

單選

radio

每組需要有相同的name屬性值

多選

checkbox

下拉

select>option

文字域

textarea

按鈕

image

button

submit

reset

file

相關屬性

name

名

value

值

multiple

多選

checked

預設勾選

selected

下拉式選單預設勾選

readonly

只讀

disabled

停用

列表類

有序

ol>li

屬性

type

值

start

無序

ul>li

屬性

type

值

circle

disc

square

none

自訂

dl>dt dd

路徑相關

圖片

img

屬性

scr

title

alt

width

height

超連結

屬性

href

title

target

路徑

相對

同級

直接寫

上一級

../

下一級

資料夾

文件

絕對

從磁碟機開始的

D:\.......

從網頁頁面使用的

https://img.......

差別

相對

有參照物

不能跨磁碟符

絕對

沒有參照物

本地的不能跨電腦（除非電腦的路徑一致）

其他

強制換行

水平線

div

span

字元實體

文法

雙標籤

<標籤名稱屬性="屬性值"></標籤名稱>

單一標籤

<標籤名屬性="屬性值" />

標籤，標記，元素

html基本結構

文檔聲明頭

告訴瀏覽器我的文檔類型是html

字元編碼

charset="utf-8"

頁面標題

title

html概念

hyper text markup language

超文本標記語言