1. 程式人生 > >#前端學習#------基礎標籤

#前端學習#------基礎標籤

由於本人也是初學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標籤除了能跳轉到當前介面的指定位置以外,還可以跳轉到其他介面的時候直接跳轉到其他介面的指定位置