html的經常使用標籤

標籤:又稱爲標記

  • 雙閉合標籤
    • 示例:<html></html>
  • 單閉合標籤
    • 示例:<meta charset="UTF-8">

1、head標籤

  1. title標籤:顯示網站的標題
  2. meta標籤:提供有關頁面的元信息
  3. style標籤:定義內部樣式表
  4. link標籤:連接css資源文件、網站圖標
  5. script標籤:連接腳本js文件

2、 body標籤

2.1 標題標籤

  1. h1~h6標題標籤
  2. 示例:<h1>標題</h1>

2.2 段落標籤

  1. 又稱p標籤,每一個段落都要用p標籤包裹
  2. 示例:<p>段落內容</p>

2.3 超連接標籤

  1. 又稱a標籤css

  2. 示例:<a href = "網址">內容</a>html

  3. a屬性:安全

    • href:連接新網址,回到頂部,跳轉郵箱,下載文件
    • title:鼠標懸浮上的標題
    • style:行內樣式
    • target:目標
      • _self:默認值,在當前頁面中打開新的連接
      • _blank:在新的空白頁面打開新的連接
  4. 如何清除a標籤的下劃線?服務器

    text-decoration: none;
    
    none;無線
    underline:下劃線
    overline:上劃線
    line-through:刪除線

2.4 圖片標籤

  1. 又稱img標籤
  2. 示例:<img src = "圖片地址" alt = "圖片加載失敗時顯示的內容">
  3. img屬性:
    • src:圖片的資源地址
    • alt:圖片加載失敗時顯示的標題
    • title:鼠標懸浮時顯示的標題
    • width:設置圖片的寬度
    • height:設置圖片的高度

2.5 字體標籤

  1. 標題標籤:h1~h6
  2. 粗體標籤:<b><strong>
  3. 斜體標籤:<i><em>
  4. 上標:<sup>
  5. 下標:<sub>

2.6 列表標籤

  1. 無序列表:<ul>,無序列表中的每一項是<li>
    • ul:unordered list
    • li:list item(列表項)
    • ul屬性:type
      • disc:實心圓點,默認
      • square:實心方點
      • circle:空心圓
    • 設置爲無序號:list-style:none;
  2. 有序列表:<ol>,裏面的每一項是<li>
    • ol:ordered list
    • ol屬性:type
      • 1:阿拉伯數字,默認
      • i
      • I

2.7 表格標籤post

  1. 又稱table標籤字體

  2. 表格:<table>,表頭:<th>,行:<tr>,列:<td>網站

  3. table屬性:編碼

    • border:邊框
    • cellspacing:單元格和單元格之間的距離(外邊距)
    • bordercolor:表格的邊框顏色
  4. 簡單示例:加密

    <table border='1' cellspacing=0>
     <th>
         <td>id</td>
         <td>name</td>
     </th>
     <tr>
         <td>1</td>
         <td>mjj</td>
     </tr>
    </table>

2.8 表單標籤

  1. 又稱from標籤
  2. from屬性:
    • action:定義表單被提交時發生的動做,提交給服務器處理程序的地址
    • method:表單數據的提交方式,默認get,還有post
      • get:明文提交,不安全,只能提交2kb信息,提交的內容會在地址上顯示
      • post:密文提交,安全,能夠提交大量信息
    • enctype:表單數據的編碼方式(加密方式),只能在post方式下使用
  3. 輸入標籤(文本框):<input>
    • input屬性:
      • type:控件的類型
        • text:單行文本輸入框
        • password:密碼框
        • radio:單選框
          • 產生互斥效果:給每一個單選按鈕設置相同的name屬性值
          • 默認選中:給單選按鈕添加checked屬性
        • checkbox:多選框
          • 默認選中:添加checked屬性
        • submit:提交按鈕
        • file:上傳文件
        • datetime-local:時間
      • name:控件的名稱,提交到當前服務器的名稱
      • value:控件的值,提交到當前服務器的值
  4. label標籤:<label>,能夠設置和input有綁定關係
    • 設置方式:input元素要有一個id,而後label標籤有一個for屬性,和id相同,那麼label和input就有綁定關係了
  5. 下拉列表標籤:<select>,裏面的每一項用
  6. 多行文本輸入框:<textarea>
    • textarea屬性:
      • cols:指定文本區域的列數
      • rows:指定文本區域的行數

2.9 盒子標籤

  1. div標籤:<div>,division,分割spa

    • 定義:把網頁分割成不一樣的獨立的邏輯區域,必須獨佔一行
    • div屬性:
      • align:設置區域的位置,可選left,right,center
  2. span標籤:<span>

    • 定義:小區域標籤,在不影響文本正常的狀況下,單獨設置對應的樣式
    • span和div的惟一區別:span是不換行的,div是換行的
    <style>
        span.active{
            font-weight:bold;
        }
    </style>
    <p>
        <span class='active'>央視網消息</span>
    </p>
相關文章
相關標籤/搜索