HTML的奇葩嵌套規則

来源:http://www.cnblogs.com/androidshouce/archive/2016/06/15/5586189.html
-Advertisement-
Play Games

1、塊級元素 一般用來搭建網站架構、佈局、承載內容……它包括以下這些標簽: address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、 ...


1、塊級元素

  一般用來搭建網站架構、佈局、承載內容……它包括以下這些標簽:

  address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

  2、內嵌元素

  一般用在網站內容之中的某些細節或部位,用以“強調、區分樣式、上標、下標、錨點”等等,下麵這些標簽都屬於內嵌元素:

  a、abbr、 acronym、b、bdo、big、br、cite、code、 dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、 strong、sub、sup、textarea、tt、u、var

 

二、HTML 標簽的嵌套規則

  1. 塊元素可以包含內聯元素或某些塊元素,但內聯元素卻不能包含塊元素,它只能包含其它的內聯元素:

  <div><h1></h1><p></p></div> —— 對

  <a href=”#”><span></span></a> —— 對

  <span><div></div></span> —— 錯

 

       2. 塊級元素不能放在<p>裡面:

  <p><ol><li></li></ol></p> —— 錯

  <p><div></div></p> —— 錯

 

       3. 有幾個特殊的塊級元素只能包含內嵌元素,不能再包含塊級元素,這幾個特殊的標簽是:

  h1、h2、h3、h4、h5、h6、p、dt

 

       4. li 內可以包含 div 標簽 —— 這一條其實不必單獨列出來的,但是網上許多人對此有些疑惑,就在這裡略加說明:

  li 和 div 標 簽都是裝載內容的容器,地位平等,沒有級別之分(例如:h1、h2 這樣森嚴的等級制度^_^),要知道,li 標簽連它的父級 ul 或者是 ol 都 可以容納的,為什麼有人會覺得 li 偏偏容納不下一個 div 呢?別把 li 看得那麼小氣嘛,別看 li 長得挺瘦小,其實 li 的胸襟很大 滴……

 

  5. 塊級元素與塊級元素併列、內嵌元素與內嵌元素併列:

  <div><h2></h2><p></p></div> —— 對

  <div><a href=”#”></a><span></span></div> —— 對

  <div><h2></h2><span></span></div> —— 錯

 

附圖:

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 繼承時實現代碼重用的重要手段,但它並非永遠是完成這項工作的最佳工具,不恰當的使用會導致程式變得很脆弱,當然,在同一個程式員的控制下,使用繼承會變的非常安全。想到了很有名的一句話,你永遠不知道你的用戶是如何使用你寫的程式的,一個程式員繼承另一個程式員寫的類也是同樣的危險。 於方法調用不同的是,繼承打破 ...
  • 引言:正則表達式為高級的文本模式匹配、抽取、與/或文本形式和替換功能提供基礎。在python中,通過標準庫中的re模塊來支持正則表達式 '.'點號,在普通模式,它匹配除換行符外的任意一個字元;如果指定了 DOTALL 標記,匹配包括換行符以內的任意一個字元。 '^'尖尖號,匹配一個字元串的開始,在 ...
  • 安裝 要在PHP程式中使用Redis,首先需要確保 Redis 的PHP驅動程式和 PHP 安裝設置在機器上。可以查看 PHP教程 教你如何在機器上安裝PHP。現在,讓我們來看看一下如何設置 Redis 的PHP驅動程式。 需要從 github 上資料庫: https://github.com/ni ...
  • 一、Redis基礎部分: 1、redis介紹與安裝比mysql快10倍以上 *****************redis適用場合**************** 1.取最新N個數據的操作 2.排行榜應用,取TOP N 操作 3.需要精確設定過期時間的應用 4.計數器應用 5.Uniq操作,獲取某段時 ...
  • python新手經常會犯的錯誤小結,有匿名函數lambda的理解,一個元素的元組,模塊導入,參數傳遞是可變的還是不可變的,迭代器和生成器的理解 ...
  • 當需求中是體現部分與整體層次的結構時,以及你希望忽略組合對象與單個對象的不同,統一的使用組合結構中的所有對象時,就應該考慮使用組合模式了。例如:我們單個複製一個文件和多個複製文件,對我們而言,並不在乎一個文件的複製與多個文件複製的區別,也就是我們的操作是一樣的。 下麵的代碼是建立一個公司的組織結構, ...
  • 1.先奉上整理的14圖。 2.其次奉上整理的圖之間的6種關係 ...
  • 函數調用方法 在談論JavaScript中apply、call和bind這三兄弟之前,我想先說下,函數的調用方式有哪些: 作為函數 作為方法 作為構造函數 通過它們的call()和apply()方法間接調用 前面的三種調用方法,我們都知道且不在這篇文章的討論範圍內,就不說了。 下麵我們來說說這第四種 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...