Html經常使用標籤

HTML標籤

分類

1. • 塊元素：頁面中獨佔一行的元素（block element) 例如：標題標籤，p標籤····
     • 在網頁中通常經過塊元素對頁面進行佈局
   • 行內元素：頁面中不會獨佔一行的元素（inline element)
     • 主要用於包裹文字

   注：通常狀況下會在塊元素中放行內元素，而不會在行內元素中放塊元素

   ​ p標籤中不能聽任何塊元素

2. • 雙標籤：由開始和結束兩個標籤符組成
   • 單標籤：用一個標籤符號完整描述某個功能 .例：< hr> 水平線 < br> 換行

• mate標籤

  <meta charset="UTF-8"> <!--字符編碼集-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--設置視口大小適配-->
      <meta name="keywords" content="web,網頁製做,設計,html">
      <meta name="description" content="專業">
      <!-- 
  		meta 用於設置網頁中的一些元數據，元數據不是給用戶看
  		charset 指定網頁的字符集
  		name 指定數據的名稱
  		content 指定數據的內容
  		keywords 網站關鍵字，可同時指定多個關鍵字，之間用 , 隔開
  		description 網站的描述 
  		會顯示在搜索引擎的搜索結果的中
  		 -->
  <meta http-equiv="refresh"content="3;url=http://www.baidu.com">
  <!--將頁面重定向到另外一個網站-->

文本標籤

• 標題標籤

  <!--標題標籤：
          塊元素：頁面中獨佔一行的元素（block element)
          h1-h6一共六級標題，重要性依次遞減,h1最重要，h6最不重要
          <h1>標題標籤在網頁中的重要性僅次於title標籤，通常一個頁面標題標籤只會使用h1-h3
      -->
      <h1>一級標題</h1>
      <h2>二級標題</h2>
      <h3>三級標題</h3>
      <h4>四級標題</h4>
      <h5>五級標題</h5>
      <h6>六級標題</h6>

• hgroup標籤

  爲標題標籤分組，可將一組相關的標題同時放入hgroup

  <hgroup>
      <h1>靜夜思</h1>
      <h2>李白</h2>
  </hgroup>

• p標籤

  頁面中的一個段落，獨佔一行，屬於塊元素

  <p>
     <!-- 文本內容--> 
  </p>

• blockquote 長引用標籤

  <blockquote>
      縮進效果
  </blockquote>

• em 斜體

  <p>
      html<em>學</em>習
  </p>

• strong 強調加粗字體

<p>
    網頁<strong>設計</strong>
</p>

• br 標籤 換行

  <br>

佈局標籤（結構化語義標籤）

H5新增：

• header：表示網頁的頭部
• article：表示一個獨立的文章
• main：表示網頁的主體部分（一個頁面中只會有一個main)
• footer:表示網頁的底部
• nav:表示網頁中的導航
• aside：和主體相關的其餘內容
• section：表示獨立的區塊，上邊標籤都不能使用時使用

經常使用方式：

• div:沒有語義，用來表示一個區塊，主要佈局元素
• span: 行內元素，無任何語義，通常用於在網頁中選中文字

其餘經常使用標籤

列表

1. 有序列表

   語法：使用ol標籤來建立有序列表，li 表示列表項

   <ol>
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
   </ol>

2. 無序列表

   語法：使用ul標籤來建立有序列表，li 表示列表項

   <ul>
       <li>結構</li>
       <li>表現</li>
       <li>行爲</li>
   </ul>

3. 定義列表

   語法：使用dl標籤來建立，dl 表示定義的內容，dd 來對內容進行解釋說明

   <dl>
       <dt>結構：</dt>
       <dd>結構用於對網頁元素進行整理和分類，主要包括XML和XHTML</dd>
   </dl>
   <dl>
       <dt>表現：</dt>
       <dd>表現用於設置網頁元素的版本、顏色、大小等外觀樣式，主要指的時CSS</dd>
   </dl>
   <dl>
       <dt>行爲：</dt>
       <dd>行爲是指網頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分</dd>
   </dl>

   注：列表之間能夠相互嵌套

超連接

• 定義：超連接可讓咱們從一個頁面跳轉到其餘頁面或者是當前頁面的其餘位置

• 屬性：

  • href 指定跳轉的目標路徑

    --值能夠是一個外部網站的地址

    --能夠是一個內部網頁的地址

  • target 指定超連接打開的位置

    --可選值：

    ​ _self 默認值，在當前頁面打開超連接

    ​ _blank 在一個新標籤中打開超連接

• 語法：使用 a 標籤來定義超連接

  <a href="https://www.qq.com" target="_blank">騰訊qq</a>
      <a href="html基本語法.html"target="_self">超連接</a><!--同一目錄-->

• 錨點

  id屬性：（惟一不重複）

  ​ 每個標籤均可添加一個id屬性

  ​ id屬性就是元素的惟一標識，同一頁面中不能出現重複的id屬性

  • 回到當前頁面頂部：直接將超連接的 href 屬性設置爲 #

  • 能夠跳轉到當前頁面的指定位置，只需將href屬性設置爲 #目標元素的id屬性值

  <a href="#bottom">去底部</a>
   <a href="#">回頂部</a>
  
  <p id="bottom">
     teday do you do;
  </p>

• 補充

  1. 相對路徑

     通常相對路徑都會使用 . 或 .. 開頭

     ./ 表示當前文件所在目錄

     ../ 表示當前文件所在目錄的上一級目錄

     以上兩種寫法均可以省略不寫，都至關於默認寫了 ./

  2. 絕對路徑

     包含盤符的整個路徑

  3. 佔位符

     在開發中可將 # 做爲超連接的路徑佔位符使用

     javascript:;來做爲href屬性，點擊超連接什麼都不會發生

圖片標籤

• 定義：用於向當前頁面中引入一個外部圖片

  ​ 使用img標籤來引入外部圖片，img標籤是一個自結束標籤

  ​ 屬於替換元素，在塊元素和行內元素之間，具備兩種元素的特色

• 屬性

  • src 屬性：指定的外部圖片的路徑

  • alt 圖片的描述，默認狀況下不會顯示，有些瀏覽器會在圖片沒法加載時顯示

    ​ 搜索引擎會根據alt中的內容來識別圖片，若是不寫alt屬性，圖片不會被搜索引擎收錄

  • title 鼠標懸停時顯示的內容

  • width 圖片的寬度 （單位是像素px)

  • height 圖片的高度

    寬度和高度若只修改了一個，另外一個會等比例縮放

• 語法

  <img src="img.jpg" alt="木頭" title="munu" width=500>

• 補充：圖片格式

  • jpg ：支持顏色比較豐富，不支持透明效果，不支持動圖，通常來顯示照片
  • gif ：顏色較少，支持簡單透明，支持動圖，單一圖片動圖
  • png ：顏色豐富，支持複雜透明，不支持動圖，專爲網頁而生
  • webp：具備以上的全部優勢，缺點：兼容性很差
  • base64: 將圖片使用base64編碼，這樣能夠將圖片轉換爲字符，經過字符的形式引入圖片，通常都是一些須要和網頁一塊兒加載的圖片纔會使用base64

  選擇原則：效果同樣用小的，效果不同，用效果好的

音視頻標籤

audio

• 定義：用來向頁面中引入一個外部的音頻文件

  • 音頻文件引入時，默認狀況下不容許用戶本身控制播放中止

• 屬性

  • controls 是否容許用戶控制播放

  • autoplay 音頻文件是否自動播放

    大部分瀏覽器不會自動對音樂進行播放

  • loop 音樂是否循環播放

• 語法：

  <audio src="./mp4/20200816150618_0.mp4" controls autoplay loop></audio>

  • 注：除了經過src來指定文件路徑外，還可經過source來指定文件目錄

    兼容全部瀏覽器

    <audio controls>
                    對不起！您的瀏覽器不支持播放，請升級您的瀏覽器！ 
                    <source src="../mp3/趙紫驊 - 可樂.mp3">
       				 <source src="../mp3/趙紫驊 - 可樂.ogg">
                    <embed src="../mp3/趙紫驊 - 可樂.mp3" type="audio/mp3" width="200" height="300"> <!--ie8以前-->
                </audio>

video

• 定義：用於向頁面引入一個視頻
• 其餘用法與音頻標籤使用相同