前端HTML 常用標籤及屬性

2022-01-10 00:00:35 字數 2562 閱讀 6031

對於很多人來說,用html標籤都是熟能生巧,而不清楚為什麼是那樣的標籤,所以我在這列了乙個表,翻譯了其對應的英文。

相對路徑是指目標相對於當前檔案的路徑,網頁結構設計中多採用這種方法來表示目標的路徑。相對路徑有多種表示方法,其表示的意義不盡相同。表示方法如下:

絕對路徑是指完整的**,假設圖一中專案的**網域名稱為www.test.com,那麼000.css的絕對路徑應該是

標籤分類

標籤名英文

英文含義

標籤型別

備註html頁面結構

hypertext markup language

超文字標記語言

head

頭部title

網頁標題

body

主體常用標籤

其實選擇器也沒必要記得太清楚,如果不會的話,直接在瀏覽器f12,開啟開發人員工具,選中你想要選擇的元素,右鍵複製其選擇器即可。

布局練習:

格式選擇器類別

備註標籤名{}

標籤選擇器

根據標籤名來選中指定的元素

.類名{}

類選擇器

根據元素的class屬性值來選中一組元素

#id標識名{}

id選擇器

根據元素的id屬性值來選中乙個元素(id唯一)

*{}通配選擇器

選中頁面中的所有元素

格式選擇器類別

備註[屬性名]

屬性選擇器

選擇含有指定屬性的元素

[屬性名=屬性值]

屬性選擇器

選擇含有指定屬性和屬性值的元素

[屬性名^=屬性值]

屬性選擇器

選擇屬性值以指定值開頭的元素

[屬性名$=屬性值]

屬性選擇器

選擇屬性值以指定值結尾的元素

[屬性名*=屬性值]

屬性選擇器

選擇屬性值中含有指定值的元素

格式選擇器類別

備註選擇器1選擇器2...{}

交集選擇器

選中同時符合多個選擇器條件的元素

如果有標籤選擇器,第乙個必須是標籤選擇器開頭(不然就混在一起沒法區分了),第二個可以是類選擇器或id選擇器(id選擇器已經唯一選中了,沒必要)

p.red{}即 選中p標籤class為red的所有元素

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

並集選擇器

同時選中多個選擇器對應的元素

格式選擇器類別

備註父 > 子{}

子元素選擇器

選中父元素的指定子元素

祖先 後代{}

後代選擇器

選中指定元素內的指定後代元素

兄 + 弟

直接弟弟選擇器

選中下乙個弟弟(僅僅是下乙個)

兄 ~ 弟

弟弟選擇器

選中下面所有的弟弟

偽類:(不存在的類,特殊的類)一般是使用:開頭,用來描述乙個標籤元素的特殊狀態(很像是類)。

比如,第乙個元素,被點選的元素,滑鼠移入的元素

個人感覺就是選擇標籤的不同狀態

格式選擇器類別

備註標籤名:偽類名{}

偽類選擇器

ul > li:first-child{} 表示ul標籤的第乙個孩子li子標籤

li:nth-child(1)代表第乙個孩子li標籤

li:nth-of-type(1)代表第乙個li標籤

偽元素:一般使用::開頭,表示頁面中一些特殊狀態(如 位置)的並不真實存在的元素

個人感覺就是選擇標籤內部部分的不同狀態,比如標籤內的第乙個字母。

格式選擇器類別

備註標籤名:偽元素名{}

偽元素選擇器

p::first-letter{}表示p標籤裡面的第乙個字母

助記:看到這裡,我想你已經明白為什麼類選擇器是用.了。因為使用交集選擇器時,我們使用div.red這種標籤.類屬性值的結構,很有條理性。

比如說,人.攻擊力

偽類

英文英文含義

示例含義

應用場景

a:link

link

鏈結a:link

未單擊訪問時的超連結樣式

常用,超連結主樣式

a:visited

visited

訪問過的

a:visited

單擊訪問後的超連結樣式

區分是否已被訪問

a:hover

hover

懸停a:hover

滑鼠懸浮在超連結上的樣式

常用,實現動態效果

a:active

active

起作用的、有效的、積極的

a:active

滑鼠單擊未釋放的超連結樣式

少用,通常與link一致

to be continued(未完待續)...

html常用標籤及屬性

由於markdown將文字轉換為 html,因此在書寫html標籤時在標籤前面加了空格為了正常顯示。doctype html 文件宣告標籤,告訴瀏覽器這個頁面採取html5版本顯示頁面 html lang zh cn 告訴瀏覽器頁面採用中文顯示 meta charset utf 8 必須寫,採取ut...

HTML常用標籤及屬性

1.標題 align center 標題1h1 標題2h2 2.超連結 href 3.align center border 1px width 60 cellspacing 0px 姓名th 性別th tr 張三td 男td tr 李四td 女td tr table 4.表單 用於向後台提交資料 ...

HTML常用的標籤及常用屬性

檔案標籤 根標籤 頭標籤 標題標籤 體標籤 文字標籤 注釋標籤 標題標籤,1 6字型依次變小 段落標籤 換行標籤 分割線標籤 字型加粗標籤 字型斜體標籤 文字標籤 文字居中標籤 標籤 鏈結標籤 鏈結標籤一般標籤 塊標籤 行內標籤 表標籤 標籤 定義行 定義單元格 表標題 下拉選擇框標籤 下拉框 選項...