#前端學習#------基礎標籤
由於本人也是初學HTML,以下都為本人學習過程中分點整理的知識點,希望共同進步,不足之處望指出批正。
1. H標籤-P標籤-Hr標籤
H系列標籤(Header1~Header6)
-作用:用於給文字新增標題語義
-格式: <h1>xxxxxx</h1>
<h2>xxxxxx</h2>
<h3>xxxxxx</h3>
<h4>xxxxxx</h4>
<h5>xxxxxx</h5>
<h6>xxxxxx</h6>
-注意點:1.H標籤是用來給文字新增語義,而不是用來修改文字的樣式的
2.H標籤有6個,從H1到H6,最多到6,超過6則無效
3.被H系列標籤包裹的內容會獨佔一行
4.在H系列的標籤中,H1最大,H6最小
5.在企業開發中,一定要慎用H系列標籤,特別是H1標籤,一般情況下,一個介面中只能出現一個H1標籤(與SEO有關)
P標籤(Paragraph)
-作用:告訴瀏覽器哪些文字是一個段落
-格式:<p>xxxxxx</p>
-注意點:在瀏覽器中會獨佔一行
Hr標籤(Horizontal Rule)
-作用:在瀏覽器中出現一條分割線
-格式:<hr/>
-注意點:1.在瀏覽器中獨佔一行
2.Hr標籤可以寫/也可以不寫/,如果不寫/那麼是按照HTML規範編寫,如果寫上/,那麼就是按照XHTML規範來寫,HTML5中相容HTML和XHTML,寫或者不寫都可以
2.註釋
-格式:<!--xxxxxx-->
-快捷鍵:ctrl + /
3.img標籤
-作用:告訴瀏覽器我們需要顯示一張圖片
-格式:<img src="xxxxxx">
-注意點:1.和H系列標籤還有/p標籤,Hr標籤不一樣,img標籤不會獨佔一行
2.如果我們手動指定了圖片寬高,導致圖片變形,如果不想讓圖片變形,指定任意的寬高(其中一個即可),系統會自動計算出寬/高值。
-屬性:
width寬度
height高度,設定圖片寬高,不設定系統預設圖片寬高顯示
title用於告訴瀏覽器,當滑鼠懸停在圖片上時,需要彈出的描述框中顯示什麼內容
alt當需要顯示的圖片找不到時,顯示什麼內容
4.Br標籤
-作用:換行
-格式:<br>
-注意點:多個br標籤可以連續使用,使用多個標籤就會換多少個行
5.a標籤
-作用:用於控制頁面之間跳轉
-格式:<a href="xxxxxx">展示給使用者看的內容</a>
-注意點:1.a標籤不僅可以讓文字點選,還可以讓圖片被點選
2.a標籤必須要有href屬性,否則a標籤不知道要跳轉待什麼地方
3.a標籤如果指定了URL地址,必須在地址前面加上http://或者https://
4.a標籤href屬性除了可以指定一個網路地址之外,還可以指定一個本地地址
-屬性:
target用於控制如何跳轉
(target選項)
_self:用於在當前選項卡中跳轉,不新建介面跳轉預設_self
_blank:用於在新的選項卡中跳轉,也就是新建介面跳轉
title控制滑鼠懸停時顯示的提示資訊
6.base標籤
-作用:專門用來統一的指定當前網頁中所有的超連結(a標籤)如何開啟
-格式:<base target="xxxxxx(_blank)">
-注意點:1.base標籤必須寫在head標籤的開始標籤和結束標籤之間
2.如果既在base中指定了target又在a標籤中指定了target,那麼瀏覽器會按照a標籤中指定的來執行
7.假連結
-作用:就是點選之後不會跳轉的連結稱之為假連結
-格式:1.# 會回到網頁頂部
2.javascript: 不會回到網頁頂部
8.錨點
-作用:通過a標籤跳轉到指定位置
-格式:<a href="#center">跳轉到中部</a>
<h1 id="center">我是中部</h1>
-注意點:1.通過a標籤跳轉到指定位置沒有過渡動畫
2.a標籤除了能跳轉到當前介面的指定位置以外,還可以跳轉到其他介面的時候直接跳轉到其他介面的指定位置