HTML常用標籤

2022-07-24 18:30:26 字數 3146 閱讀 3049

一、html標籤的語義化(語義化即標籤的含義)

目的:根據標籤的語義,在合適的地方給乙個最為合理的標籤,讓結構更清晰。

二、html常用標籤

1、排版標籤(排版標籤主要和css搭配使用,顯示網頁結構的標籤,是網頁布局最常用的標籤

⑴標題標籤h(熟記)⭕

單詞縮寫: head  頭部、標題; title  文件標題

為了使網頁更具有語義化,我們經常在頁面中使用標題標籤,html提供了6個等級的標題

①標題標籤語義:作為標題使用,並且依據重要性遞減

②基本語法格式:

標題文字 

標題文字 

標題文字 

顯示效果:

標題文字

標題文字

標題文字

標題文字

標題文字

標題文字

小結:①加了標題的文字會變得加粗,字型大小從1到6依次變小

②一行只能放乙個標題

2、段落標籤p(熟記)⭕

①單詞縮寫:paragraph  段落

②語義:可以把html文件分割為若干段落,使其在網頁中有條理的顯示出來

③語法格式:文字內容

(沒有p1、p2的寫法,只需寫p)

3、水平線標籤hr(認識)

①單詞縮寫:horizontal  橫線

②語義:在網頁中常常可以看到一些水平線將段落與段落之間隔開,使得文件結構清晰,層次分明,

這些水平線可以通過插入實現,也可以簡單的通過標籤實現

③語法格式:是單標籤

4、換行標籤br(熟記)⭕

①單詞縮寫:break  打斷、換行

②語義:在html中,乙個段落中的文字會從左到右依次排列,直到瀏覽器視窗的右端,然後自動換行,

如果希望某段文字強制換行顯示,就需要使用換行標籤,不像word中可以直接敲回車鍵。

③語法格式:

是單標籤

④br與p區別,顯示效果:

br:(行間緊湊)

人間如逆旅,

我亦是行人。

----蘇軾《臨江仙﹒送錢穆父》

p:(行間空隙較大)

人間如逆旅,

我亦是行人。

----蘇軾《臨江仙﹒送錢穆父》

5、div和span標籤(重點)⭕

①單詞縮寫:div(division )分割、分割槽

span  跨度、跨距;範圍

②語義:沒有語義,是網頁布局主要的2個盒子

③語法格式:文字內容

文字內容

④div標籤:用來布局的,但是現在一行只能放乙個div

span標籤:用來布局的,一行上可以放好多個span

⑤顯示效果:div:蘇軾

李白span:蘇軾呀 李白呀

6、文字格式化標籤(熟記)⭕(重點記前兩組)

⑴、粗體標籤

①語法格式:文字內容文字內容

③區別:b只是加粗,strong除了加粗還有強調的意思,語義更強烈

⑵、斜體標籤

①語法格式:文字內容;文字內容

③區別:同上

⑶、刪除線標籤

①語法格式:文字內容;文字內容

③區別:同上

⑷、下劃線標籤

①語法格式:文字內容;文字內容

②顯示效果:文字以加下劃線方式顯示(xhtml不贊成使用u)

③區別:同上

7、標籤屬性

①、語義:屬性就是外部特徵,即手機的顏色,手機的尺寸,手機的。。。

②、想讓html標籤提供更多資訊時

語法格式:《標籤名  屬性1=『』屬性值1『』  屬性2=『』屬性值2『』...> 內容 如:《手機  顏色=『』紅色『』  大小=『』5寸『』>  8、影象標籤img(重點)⭕

⑴單詞縮寫:image  影象

⑵語義:想在網頁中顯示影象就需要使用影象標籤

⑶語法格式:

(語法中的src屬性用於指定影象檔案的路徑和檔名,是img標籤的必需屬性)

⑷標記屬性

屬性屬性值

描述src

url影象的路徑

alt文字

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

title

文字滑鼠懸停時顯示的內容

width

畫素(xhtml不支援%頁面百分比)

設定影象的寬度

height

畫素(xhtml不支援%頁面百分比)

設定影象的高度

border

數字設定影象邊框的寬度

③width,height:一般兩個不同時修改,改乙個另乙個會同時等比例修改

④border:要用css來做

⑹注意:①標籤可以擁有多個屬性,必須寫在開始標籤中,位於標籤名後

②屬性之間不分先後順序,標籤名和屬性、屬性與屬性之間均以空格分開

③採取 鍵值對 的格式 key=『』value『』的格式(即屬性=值,如width=『』300『』)

④影象標籤中 src 是必需要寫的

9、鏈結標籤(重點)⭕

⑴單詞縮寫:anchor  錨,鐵錨

⑵語法格式:文字或影象

屬性作用

href

target

用於指定鏈結頁面的開啟方式,其取值有 self 和 blank 兩種,其中 self 為預設值,blank 為在新視窗中開啟方式

③如果當時沒有確定鏈結目標時,通常將鏈結標籤的href屬性值定義為『』#『』(即href=『』#『』),表示鏈結暫時為乙個

空連線⑤鏈結標籤中 href 是必須要寫的

⑥target="_blank"(要記得加下劃線)

10、注釋標籤

可以看到。

⑵語法格式:

快捷鍵是:ctrl + /  或者 ctrl + shift +/

⑶總結:注釋是給人看的,目的是為了更好的解釋這部分**是幹嘛的,程式是不執行這個**的

⑷注意:①一般用於簡單的描述,如某些狀態描述,屬性描述等

②注釋內容前後各加乙個空格字元,注釋位於要注釋**的上面,單獨佔一行

html常用標籤

總類 所有html檔案都有的 檔案型別 放在檔案的開頭與結尾 檔案主題 必須放在 文頭 區塊內 文頭 描述性資料,像是 主題 文體 檔案本體 結構性定義 由瀏覽器控制的顯示風格 標題 從1到6,有六層選擇 3.0 標題的對齊 3.0 區分 3.0 區分的對齊 引文區塊 通常會內縮 強調 通常會以斜體...

html常用標籤

一年前學的,沒怎麼用都忘了。現在整理筆記做一下複習。html hypertext markup language 注釋 空格 npsp 一 html的頭標籤 二 html常見標籤 1.加粗 2.下劃線 3.斜體 4.刪除線 5.遠洋輸出 6.下標 7.上標 div與span 劃分區域 自動換行 不換...

html常用標籤

1 html標題 標題是通過 2 html水平線 用來在頁面中建立水平線,用來分隔內容 這是乙個段落。這是乙個段落。這是乙個段落。3 html段落 可以生成段落 this is a paragraph this is another paragraph 瀏覽器會自動在段落前後新增空行 4 html換...