HTML 常見標籤part1

時間 2021-04-04

標籤 javascript css html 前端 java 瀏覽器學習字體網站 code 欄目 HTML 简体版

原文原文鏈接

一，HTML常見標籤part1

想要在網頁上展現出來的內容必定要放在body標籤中。保存到一個HTML格式的文件中。javascript

二，標題標籤

<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。因爲 h 元素擁有確切的語義，所以請您慎重地選擇恰當的標籤層級來構建文檔的結構。所以，請不要利用標題標籤來改變同一行中的字體大小。相反，咱們應當使用css來定義來達到漂亮的顯示效果。標題標籤一般用來製做文章或網站的標題。css

h1~h6標籤的默認樣式：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小馬哥以前端學習</title>
</head>
<body>
    <h1>一級標題</h1><h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
</body>
</html>

請看上面代碼 <h1>和<h2>書寫在一行上展現，可是在瀏覽器的效果倒是換行了前端

1) 文本樣式標籤

文本樣式標籤主要用來對HTML頁面中的文本進行修飾，好比加粗、斜體、線條樣式等...

1. `<b></b>`：加粗
2. `<i></i>`：斜體
3. `<u></u>`：下劃線
4. `<s></s>`：刪除線
5. `<sup></sup>`：上標 
6. `<sub></sub>`：下標

如今若是想在一段文字中特別強調某幾個字，這時候就能夠用到`<em>`或`<strong>`標籤。
這兩個標籤都是表示強調，可是二者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。
在瀏覽器中`<em>`默認會用斜體表示，`<strong>`會用粗體來表示。兩個標籤相比，咱們一般會推薦你們使用`<strong>`表示強調

三，段落標籤

,paragraph的簡寫。定義段落 java

<body>
        <p>小馬哥學習前端！！！</p>
        <p>小馬哥學習前端！！！</p>

</body>

瀏覽器展現特色：瀏覽器

跟普通文本同樣，但咱們能夠經過css來設置當前段落的樣式
是否又獨佔一行呢？答案是的塊級元素

四，超連接標籤

超級連接<a>標記表明一個連接點，是英文anchor（錨點）的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像學習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連接標籤</title>
</head>
<body>
<body>
    <h1>

        <!-- a連接 超連接
        target:_blank 在新的網站打開連接的資源地址
                _self 在當前網站打開連接的資源地址
        title: 鼠標懸停時顯示的標題
        -->
        <a href="http://www.baidu.com" target="_blank" title="路飛學城">路飛學城</a>
        <a href="a.zip">下載包</a>
        <a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>

        <!-- 返回頁面頂部的內容 -->
        <a href="#">跳轉到頂部</a>

        <!-- 返回某個id -->
        <a href="#p1">跳轉到p1</a>

        <!-- javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，
        而 javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應。 -->
        <a href="javascript:alert(1)">內容</a>
        <a href="javascript:;">內容</a>


    </h1>
</body>
</body>
</html>

target:_blank 在新的網站打開連接的資源地址 target：_self 在當前網站打開連接的資源地址 title: 表示鼠標懸停時顯示的標題字體

連接其餘表現形式：網站

目標文檔爲下載資源例如：href屬性值，指定的文件名稱，就是下載操做(rar、zip等)
電子郵件連接前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息。例如：<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
返回頁面頂部的空連接或具體id值的標籤例如：<a href="#">內容</a>或<a href="#id值">內容</a>
javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。例如：<a href="javascript:alert()">內容</a>
javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</a

五，列表標籤

網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟<li>標籤一塊兒用，每條li表示列表的內容code

<ul>:unordered lists的縮寫無序列表 <ol>:ordered listsde的縮寫有序列表

<!-- 無序列表 type能夠定義無序列表的樣式-->
    <ul type="circle">
        <li>個人帳戶</li>
        <li>個人訂單</li>
        <li>個人優惠券</li>
        <li>個人收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type能夠定義有序列表的樣式 -->
    <ol type="a">
        <li>個人帳戶</li>
        <li>個人訂單</li>
        <li>個人優惠券</li>
        <li>個人收藏</li>
        <li>退出</li>
    </ol>