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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...