整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML常用標簽

          HTML常用標簽

          哈嘍大家好,我是公眾號作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!


          第一階段 HTML5

          04 HTML常用標簽

          ?

          1 什么是標簽及其分類

          在HTML頁面中,帶有“< >”符號的元素被稱為HTML標簽,<html>、<head>、<body>都是HTML標簽。所謂標簽就是放在”<>”標簽符中表示某個功能的編碼命令,也稱為HTML標簽或HTML元素。

          1.雙標簽: <標簽名>內容<標簽名>

          2.單標簽: <標簽名/>(數量非常少)

          單標簽也稱空標簽,是指用一個標簽符號即可完整地描述某個功能的標簽。

          篇文章我們介紹了怎么創建一個最基本的網頁,這篇我們介紹一下經常被使用的標簽及用途。

          顯示在瀏覽器中的內容都要添加在基本模板中的body標簽的中間,這點一定要記?。。?/p>

          下面的body標簽中各個標簽,我做了解釋說明,大概了解各個標簽長什么樣子,能記住就更好了。

          下面的HTML代碼可以直接復制到你的網頁中(創建HTML文件的方法上篇文章有介紹)

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>這里是網頁的標題,你看到在哪里顯示的了嗎?——橙先生</title>

          </head>

          <body>


          <div>div標簽可以理解為是個空盒子,什么都能裝下</div>


          <!-- img標簽用來插入圖片,src="圖片路徑",alt屬性可選,用來描述圖片, <img src="圖片路徑" alt="圖片的說明(可選)"> -->

          這是一張圖片,注意這里的img標簽形式,這是個單標簽

          <img src="圖片地址" alt="圖片的說明(可選)">


          <!-- a標簽用來添加超鏈接 ,target="_blank"屬性用來點擊鏈接后跳轉到新的瀏覽器頁簽 href="需要跳轉到的網址或是文件"-->

          <a href="需要跳轉到的網址或是文件,如" target="_blank">這個是文字的鏈接,也可以在其他內容上添加(比如圖片)</a>


          <!-- p標簽用來填入文字 -->

          <p>在這里填入文字</p>

          <p>在這里填入文字</p>


          <!-- span標簽用來添加文字等,屬于行內元素 -->

          <span>在這里添加你想要的內容</span><span>!!!!!!這里是另外一段內容</span>


          <!-- 這里說說塊元素和行內元素,像上面的P標簽就是塊元素,它獨占一行, span標簽就是行內元素,可以在一行中顯示多個span標簽內容 -->


          <!-- br標簽用來換行 -->

          <br>


          <!-- h1至h6是有固定大小的標題/文字標簽 -->

          <h1>這是h1里的內容</h1>

          <h2>這是h2里的內容</h2>

          <h3>這是h3里的內容</h3>

          <h4>這是h4里的內容</h4>

          <h5>這是h5里的內容</h5>

          <h6>這是h6里的內容</h6>


          <!-- ul 和li是固定的搭配,是無序列表,可以有N個li -->

          <ul>

          <li>這里是無序列表1</li>

          <li>這里是無序列表2</li>

          <li>這里是無序列表3</li>

          </ul>


          <!-- ol 和li是固定的搭配,是有序列表,可以有N個li -->

          <ol>

          <li>這里是有序列表1</li>

          <li>這里是有序列表2</li>

          </ol>


          <!-- table 、tr 和 td是固定搭配 :table是表格,tr是表格里的行,td是表格里的列, 表格里可以有N行 N列-->

          <table>

          <tr>

          <td>表格中第一行的第1列</td>

          <td>表格中第一行的第2列</td>

          </tr>

          <tr>

          <td>表格中第二行的第1列</td>

          <td>表格中第二行的第2列</td>

          <td>表格中第二行的第3列</td>

          </tr>

          </table>

          ?

          </body>

          </html>

          上面的內容已經大致了解了吧?下一篇我們將介紹各種常用到的樣式,讓各個標簽更加的美觀。記得關注一下哦!

          .語法

          在HTML中創建超鏈接非常簡單,只需用標簽環繞需要被鏈接的對象即可,其基本語法格式如下:

          <a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

          href屬性:鏈接的地址,鏈接的地址可以是一個網頁,也可以是一個視頻、圖片、音樂等等。

          target屬性:

          1. _blank:在一個新的窗口中打開鏈接
          2. _self(默認值):在當前窗口中打開鏈接
          3. _parent:在父窗口中打開頁面(框架中使用較多)
          4. _top:在頂層窗口中打開文件(框架中使用較多)

          2.外部鏈接

          可以打開別人的網頁:

          <a href="https://www.baidu.com">在當前窗口打開百度</a><a href="https://www.baidu.com" target="_self">在當前窗口打開百度</a><a href="https://www.baidu.com" target="_blank">在新的窗口打開百度</a>

          3.內部鏈接

          直接鏈接內部頁面名稱即可:

          <a href="1.外部鏈接.html">打開內部鏈接</a>

          4.空鏈接

          如果當時沒有確定鏈接目標時,通常將鏈接標簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時為一個空鏈接:

          <a href="#">空鏈接</a>

          5.錨點鏈接

          通過創建錨點鏈接,用戶能夠快速定位到目標內容。創建錨點鏈接分為兩步:

          <h1 id="top">頂部</h1>...<a href="#top">回到頂部</a>

          跳轉到其他頁面:

          <a href="5.錨點鏈接2.html#top">回到另一個頁面頂部</a>

          5.錨點鏈接2.html

          <h1 id="top">頂部</h1>

          6.base 標簽

          base 可以設置整體鏈接的打開狀態

          base 寫到 head 之間

          <head>  <meta charset="utf-8">  <title>文檔標題</title>  <base target="_blank"></head><body>  <a href="http://www.baidu.com">在新窗口打開百度</a>  <a href="http://www.baidu.com" target="_self">在當前窗口打開百度</a></body>

          7.設置鏈接的顏色

          1. link連接的顏色
          2. alink正在點擊的顏色
          3. vlink已經訪問的連接顏色
          <body link="red" alink="yellow" vlink="green">  <a href="https://taobao.com">淘寶</a>  <a href="https://jingdong.com">京東</a></body>

          主站蜘蛛池模板: 亚洲一区二区精品视频| 99精品国产一区二区三区2021 | 国产另类TS人妖一区二区| 午夜福利一区二区三区高清视频| 亚洲爆乳精品无码一区二区| 蜜臀Av午夜一区二区三区| 福利在线一区二区| 色欲AV蜜桃一区二区三| 国内精品视频一区二区八戒| 无码人妻一区二区三区精品视频| 国产亚洲一区二区三区在线不卡 | 国产精品一区二区在线观看| 日韩一区二区三区在线观看| 精品国产日韩一区三区| 亚洲国产一区二区三区| 色一乱一伦一图一区二区精品| 无码国产精品一区二区免费式直播| 国产一区二区三区在线免费观看| 亚洲国产精品一区| 熟女大屁股白浆一区二区| 国产精品亚洲高清一区二区 | 三上悠亚一区二区观看| 国产在线一区二区在线视频| 蜜臀Av午夜一区二区三区| 精品国产一区二区三区av片| 狠狠综合久久av一区二区| 99精品国产一区二区三区| 一区二区三区在线免费看| 亚洲国产成人精品无码一区二区| 亚洲一区免费观看| 一区二区三区在线观看视频| 一区二区三区四区视频| 日韩一区在线视频| 国产精品免费视频一区| 国产免费av一区二区三区| 免费萌白酱国产一区二区| 一区二区高清在线观看| 国产AV一区二区三区无码野战| 香蕉一区二区三区观| 秋霞日韩一区二区三区在线观看| 国产精品久久一区二区三区|