HTML_行內元素、塊級元素、空元素

weixin_34378969發表於2015-01-25
HTML
  • 內聯元素
  • 叫法有內聯元素、內嵌元素、行內元素、直進式元素
  • 一般都是基於語義級(semantic)的基本元素，它只能容納文字或者其他內聯元素，通常被包括在塊元素中使用。
  • 內聯元素有這些
    • a - 錨點
      abbr - 縮寫
      the <abbr title="world wield web constium">W3C</abbr>is important;
      94752-1a0dc06e1ae90774.jpg
      abbr.jpg

      b - 粗體（不推薦）、strong - 粗體強調、em - 斜體重要{均是雙標籤}
      在沒有其他合適標籤更合適時，才應該把 <b> 標籤作為最後的選項。HTML5 規範宣告：應該使用 <h1> - <h6> 來表示標題，使用<em>標籤來表示強調的文字，應該使用<strong> 標籤來表示重要文字。
      這些也都可通過font-weight屬性來設定。
      bdo 定義文字方向
      <br /> rtl: <bdo dir="rtl">here is some text</bdo> <br /> ltr: <bdo dir="ltr">here is some text</bdo>
      94752-9840dad076dc3b8d.jpg
      dbo.jpg

      big - 較原來字型大一號。<big><big>12</big></big>
      br - 換行<br> <br />clear屬性
      cite - 引用，斜體顯示
      code - 計算機程式碼(在引用原始碼的時候需要)
      dfn - 定義欄位
      i - 斜體
      img - 圖片
      input - 輸入框
      kbd - 定義鍵盤文字
      samp - 定義範例計算機程式碼
      var - 定義變數
      q - 短引用
      small - 小字型文字
      span - 常用內聯容器，定義文字內區塊
      label - 表格標籤
      del-刪除部分
      ins-新插入部分
      select - 專案選擇
      sub - 下標
      sup - 上標
      textarea - 多行文字輸入框
      iframe-建立包含另一個文件的內聯框架
      <iframe src="block_elements.html" width="" height=""></iframe>
      　
      94752-0bb643e1422d3b54.jpg
      iframe.jpg

      (map,area)-帶有可點選區域的影象對映
      < img src="../../LG/image/ff8080814aecc157014aecdf36aa002a.jpg" width="300px" border="0" usemap="#test" alt="test" />
      <map name="test" id="test">
      <area shape="circle" coords="20,20,50" href="block_elements.html" alt="" />
      </map>
  • 塊級元素
  • address - 定義文件或文章的作者的聯絡資訊，不要侷限於地址，以斜體的形式展現。
    94752-03a0347777e5e01b.jpg
    <address>Written by miss_du</address>.jpg

    blockquote - 標籤定義塊引用，左右兩邊會自動進行縮排
    俗話說得好
    <blockquote>
    笨鳥先飛
    </blockquote>
    94752-1e9daf7dac01efb6.jpg
    blockquote.jpg

    dir - 目錄列表
    <dir>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    </dir>
    94752-2cb9e56d29ae93fa.jpg
    dir.jpg

    dl>dt+dd-定義列表，這個經常用，就不距離啦
    ul>li-定義無須列表
    ol>li-定義有序列表
    div常用的塊級元素，用於css佈局。
    （fieldest，legend）-組合表單中的相關元素
    <fieldset id="">
    <legend>性別</legend>
    女:<input type="radio" name="" id="" value="" />
    男:<input type="radio" name="" id="" value="" />
    </fieldset>
    94752-5548feb6d21d45e0.jpg
    fieldset.jpg

    　 form - 互動表單
    　 h1 ~h6
    　 hr - 水平分隔線
    　 noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容
    　noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
    　pre - 格式化文字,，主要用於顯示原始碼。
    <pre>
    <a>
    顯示原始碼了麼？
    </a>
    </pre>
    94752-570f055d0033e8a6.jpg
    pre.jpg

    　table - 表格
    <table border="" cellspacing="" cellpadding="">
    <caption>hello</caption>
    <thead style="background: black;color: #fff;">
    <tr>
    <th>Header</th>
    <th>Header</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Data</td>
    <td>Data</td>
    </tr>
    </tbody>
    </table>
    • 需要注意：caption元素在表格中重複會折行，但是脫離表格，重複不會折行。

相關文章