HTML和CSS常用標籤

2022-01-29 19:18:03 字數 4308 閱讀 2181

背景圖:background-image;

邊框的樣式

批量建立:父元素》子元素 * #>屬性 *#

span標籤:在行內定義乙個區域,也就是一行內可以被劃分成好幾個區域,從而實現某種特定效果。本身沒有任何屬性。例子logo標籤

g

o

o

g

le

(標題巢狀的過程中,必須先結束的靠近內容的標題,再按照由內及外的順序依次關閉標題)鍵對值:即為對「屬性」設定「值」 如color=「red」

塊元素:獨佔一行,寬與父元素同寬,高度取決於內容. 可以直接設定寬高

div\p\ li \ul

行內元素:和其它元素共享一行,寬高都取決於內容.不可以設定寬高

span\a\em\strong

行內塊元素:和其它元素共享一行,寬高都取決於內容,可以設定寬高

button\input\img

p:段落標記

:注釋標記

hr :插入橫線

color :顏色

align :對齊方式

strong:加粗 em:傾斜標記

hspasce :水平間距

br :換行

&emsp :空兩格

a href :超連結

hr :橫線

style:內嵌樣式

style標記的使用

設定p段落的顏色為紅色

1.3.1 標題和段落標記

hr :插入橫線

br:強制換行

1.3.2 文字格式化標記

1.3.3 特殊字元標記1.4.1 常用的影象格式

jpeg / jpg格式:有失真壓縮,顏色最大,但不支援透明

gif格式:無損,支援動畫,支援簡單的透明,但顏色少,常用於色彩相對單一的影象e.g.logo

png格式:體積小,顏色多,支援複雜的透明,但不支援動畫

1.4.2 影象標記

alt 影象不能顯示時的替換文字

title 滑鼠懸停時的提示文字

width 和 height寬高(通常指設定乙個)

border 邊框屬性

vspace(垂直) 和 hspace(水平) 邊距

align 對齊屬性html5不贊成

使用border vspace hspace align,通過css設定

1.5.1 建立超連結

1.5.2錨點鏈結

頁面內跳轉的錨點設定,頁面內的跳轉需要兩步:

方法一:

②:在頁面中需要的位置設定錨點;(注意:a標籤中要寫乙個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標籤中按需填寫必要的文字,一般不寫內容

方法二:

①:同方法一的①

②:設定錨點的位置

;在要跳轉到的位置的標籤中新增乙個id屬性,屬性值與①中href的屬性值一樣,不加#

方法二不用單獨新增乙個a標籤來專門設定錨點 ,只在需要的位置的標籤中新增乙個id即可。

2.1.1 無序列表ul

2.1.2 有序列表ol

2.1.3 定義列表dl

2.2.1header元素

我們早上9:00開始上班

今年的十一我們準備去旅遊

本訊息發布於2023年8月15號

2.5.2. mark元素

2.5.3. cite元素2.6.1 draggable屬性

2.6.2 hidden屬性

2.6.3 spell check屬性

2.6.4 contenteditable元素

this text can be edited by the user.

edit this content to add your own quote

edit this content to add your own quote - 2

可以使用css中caret-color屬性設定文字插入游標的顏色。

1.div模擬textarea文字域輕鬆實現高度自適應2.避免處理input、textarea的內含樣式

3.2.1 css樣式規則

選擇器/**/ :注釋文字

3.2.2 css樣式表

1.行內式

2.內嵌式

3.鏈入式

3.2.3 css基礎選擇器

1.標記選擇器

2.類選擇器

3.id選擇器

4.萬用字元選擇器

5.標籤指定式選擇器6.後代選擇器7.並集選擇器font-size:字型大小大小

font-family:字型

font-weight:字型粗細

font-style:字型風格

font:綜合設定字型樣式

@font-face:屬性

word-wrap:

1.color:文字顏色;2.letter-spacing:字間距;3.word-spacing:單詞間距;4.line-height:行間距;5.text-transfor:文字轉換;6.text-decoration:文字裝飾;7.text-align:水平對齊方式;8.text-indent:首行縮排;9.white-space:空白符處理;10.text-shadow:陰影效果;11.text-overflow:表示物件內溢位文字;

1.邊框樣式(border- style)

border-style:上邊(右邊 下邊 左邊)【上右下左】

2.邊框寬度(border-width)

border-width:上邊(上右下左)

3.邊框顏色(border-color)

border-color:上邊【上右下左】

4、綜合設定邊框

border:寬度 樣式 顏色;【不分先後順序】

5、圓角設計

border-radius:引數1/引數2(引數1水平半徑 引數2 垂直半徑)

border-radius:引數1(設定圓角半徑)

6.邊框

border-image

內邊距padding

外邊距margin

清楚元素缺省內外邊距

*
5.2.3 box-shadow屬性

box-shadow:畫素值1(水平隱影可為負值) 畫素值2(垂直隱影可為負值) 畫素值3(嗎,模糊半徑) 畫素值4(隱影擴充套件半徑) 顏色值 陰影型別;

5.2.4 box- sizing屬性

box-sizing:content-box/border-box;

設定背景顏色:background- color;

設定背景;background-image;

背景顏色與不透明度顏色設定

opacity:0-1;介於0-1

設定背景影象不平鋪background-prpeat

repeat:沿水平和豎直方向平鋪

no-repeat:不平鋪

repeat-x:水平方向平鋪

repeat-y:豎直方向平鋪

設定背景影象的位置:background-position

設定背景影象固定:background-attchment;

設定背景影象大小 background-size

設定背景 的顯示位置:background-origin;

設定背景影象裁剪區域:background-clip

背景復合屬性background

線性漸變:background-image:linear-gradient(漸變角度,顏色值1,顏色值2....,顏色值n);

徑向漸變:background-image:radial-gradient(漸變形狀【使用關鍵字at連線】圓心位置,顏色值1,顏色值2.。。。顏色值n);

重複漸變:

重複線性漸變:background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2.。。顏色值n);

重複徑向漸變:background-image:repeiatng-radial-gradien(漸變形狀【使用關鍵字at連線】圓心位置,顏色值1,顏色值2.。。。顏色值n);

未來可期 時光不會辜負每乙個平靜努力的人!

原創不易,莫要白嫖,點個贊吧!

css標籤和html標籤

一,html 標題標籤 h1,h2,h3,h4,h5,h6 段落標籤 水平線標籤 換行標籤 水平線標籤 size 水平粗細線 width 水平線寬度 align 水平線對齊方式 color 水平線顏色 字型標籤 funt size 文字大小 color 字型顏色 face 文字的字型 標籤 src ...

html和css 常用標籤和基本屬性

帶語義的標籤 h1 h6 表示標題 p 表示段落 img 表示 a 表示鏈結 不帶語義的標籤 div 表示一塊內容 span 表示行內的一塊內容 css引入方式 內聯式 嵌入式 外鏈式 css屬性入門,布局常用樣式 width 設定元素的寬度 height 設定元素的高度 background 設定...

html和css基礎學習 常用標籤和屬性

一 form表單 post提交方式,位址列沒有內容 3 form表單提交時根據name提交,name的取值一般是見名知義 4 但凡需要提交的,都必須用form包起來 5 name 沒什麼作用,只是如果乙個頁面有多個form,以示區分 二 的type屬性 name是提交到後台資料庫的,value是存i...