首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

HTML 輸入標簽:input 為何在 Bootstrap 中出現閉合標簽?

     編輯:程式設計疑難解答

結論

HTML 規範演進導致的寫法差異:

  • HTML 4 / HTML5:`` 屬於**空元素**,**只有開始標簽,無結束標簽**,寫 `` 或 `` 均可。
  • XHTML 1.x:要求**所有元素必須正確閉合**,空元素寫為 ``(帶斜槿)或 ``(罕見但合法)。

Bootstrap 源碼中的現象

Bootstrap 文檔/源碼常見:

<input type="text" class="form-control" />  <!-- 自閉合寫法,兼容 XHTML/HTML5 -->
<!-- 絕不會出現 -->
<input></input>  <!-- 非法內容模型,瀏覽器會忽略內容 -->

為何會有「包裹 div/span」的錯覺?

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

實際是 `

` 包裹 `` 和 ``,**非 `` 包裹內容**。

最佳實踐

  • **HTML5 項目**:簡寫 ``,無需斜槿。
  • **React/JSX**:**必須**自閉合 ``,否則報錯。
  • **Vue/Svelte 模板**:同 HTML5,`` 即可。
  • **不要**寫 `內容`,瀏覽器會丟棄內容,無語義。

**本質:`` 是替換元素,無法包含子節點;閉合寫法僅為滿足 XML 語法要求。**

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved