淺談塊級元素和內聯元素的嵌套規則

1. 替換和不可替換元素

從元素本身的特點來講,可以分為替換和不可替換元素。

a) 替換元素

替換元素就是瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容。

例如瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來,而如果查看(X)HTML代碼,則看不到圖片的實際內容;又例如根據<input>標簽的type屬性來決定是顯示輸入框,還是單選按鈕等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容,即是一個空元素,例如

  1. <img?src=”cat.jpg”?/>??
  2. <input?type="submit"?name="Submit"?value="提交"?/>??

瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。

b) 不可替換元素

(X)HTML 的大多數元素是不可替換元素,即其內容直接表現給用戶端(例如瀏覽器)

  1. <p>段落的內容</p>??

段落<p>是一個不可替換元素,文字“段落的內容”全被顯示。

替換元素一般有內在尺寸,所以具有width和height,可以設定。例如你不指定img的width和height時,就按其內在尺寸顯示,也就是圖片被保存的時候的寬度和高度。

對于表單元素,瀏覽器也有默認的樣式,包括寬度和高度。

?

1. 塊級元素和行內元素

塊級元素的特點:每一個塊級元素都是從一個新行開始顯示,其后的元素需另起一行

常見:

  塊級元素:h1,h2,h3,h4,h5,h6,hr,div,fielset,form,dl,address,ol,p,table,ul,pre等

  內聯元素(行內元素):a,b,br,em,i,img,input,strong,textarea,span,label等

注意:兩者可相互轉換:display:inline|block

嵌套規則:

1、塊級元素里可包含內聯元素和某些塊級元素,但內聯元素不能包含塊級元素,只能包含其他內聯元素

2、塊級元素不能放在p里面(經典問題:p里面不能嵌套div)

3、有幾個塊級元素只能包含內聯元素,不能包含塊級元素的。如h1,h2,h3,h4,h5,h6,p,dt

4、li里面可以包含div

特殊情況:

在某種情況下,a里面可以嵌套div,這取決于a的父元素是否可以嵌套div

<div><a><div></div></a></div>

上面的寫法是正確的,a的父元素是div,div里面可以嵌套div,所以a里面嵌套div可行

但是a標簽里面不能包裹有像a、button這樣的互動式標簽

1 <div><a><div><a>......</a></div></a></div>(錯誤!)

?

?

塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易,也是css layout的主要標簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容,(對于不支持frame的瀏覽器顯示此區塊內容
* noscript - )可選腳本內容(對于不支持script的瀏覽器顯示此內容)
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表


內聯元素(inline element)
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* 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 - 定義變量


可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。

* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本

轉載于:https://www.cnblogs.com/dragonlong/p/4544373.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/375926.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/375926.shtml
英文地址,請注明出處:http://en.pswp.cn/news/375926.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

如何更新Chrome

在瀏覽器的地址欄中輸入chrome://help即可進行自動更新&#xff0c;如下圖&#xff1a;

c語言用指針實現打開和關閉文件,我用rewind函數沒把指針直到開始,關閉文件然后打開就行。幫忙看看...

該樓層疑似違規已被系統折疊 隱藏此樓查看此樓高手啊&#xff0c;我試了&#xff0c;結果是回到文件頭了&#xff0c;把123覆蓋了&#xff0c;為ABC 但我這個程序就能直接不關閉文件而用rewind函數到開頭&#xff0c;你幫忙看看&#xff0c; //二進制文件的輸入輸出--數據塊的讀…

最佳適應算法模擬內存分配

最佳適應算法 從全部空閑區中找出能滿足作業要求的&#xff0c;且大小最小的空閑分區&#xff0c;這種方法能使碎片盡量小。 問題描述 Given five memory partitions of 100 KB, 500 KB, 200 KB, 300 KB, and 600 KB (in order), how would each of the first-fit, best-fit…

單片機c語言 i%3c%3c1,單片機C語言作業及上機習題及答案

《單片機C語言作業及上機習題及答案》由會員分享&#xff0c;可在線閱讀&#xff0c;更多相關《單片機C語言作業及上機習題及答案(37頁珍藏版)》請在人人文庫網上搜索。1、第一次課熟悉winTC編譯環境、熟悉C語言程序結構1.使用C 語言編譯環境&#xff0c;輸入下面的源程序。將你…

基于順序搜索的動態分區分配算法模擬內存動態分配--最佳適應算法(best fit,BF)

BF算法、男朋友算法&#xff0c;哈哈 要實現動態分區分配&#xff0c;需要考慮三個方面的問題。分別是數據結構、分區分配算法、分區的分配與回收操作。 首數據結構 這里我們使用的是空閑分區鏈&#xff0c;采用雙向鏈表表示空閑分區。 具體實現如下&#xff1a; typedef …

我也要談談大型網站架構之系列(4)——分布式中的異步通信

我們知道在面向對象編程中&#xff0c;總會想著各種辦法來實現代碼的解耦&#xff0c;從而讓項目中的各種人員面對自己熟悉的業務進行開發&#xff0c; 做到術業有專攻&#xff0c;比如大家非常熟悉的三層架構&#xff0c;MVC&#xff0c;MVP以及MVVM模式&#xff0c;讓前端設計…

node模塊函數圖解

已截圖方式記錄模塊信息&#xff1a; HTTP模塊&#xff1a; 對于網絡返回處理狀態封裝了很多種&#xff0c;我已截圖展現 以上狀態也是在http協議中包含的狀態。 http函數&#xff1a; path模塊&#xff1a; 轉載于:https://www.cnblogs.com/kuailingmin/p/4547538.html

android 心跳效果動畫,Android實現心跳的效果

最近再做一個教育類的項目。在做一些學習工具的時候&#xff0c;美工提出了一些要求&#xff0c;大致如下&#xff1a;其實實現過程也不難&#xff0c;大致就是對一個視圖控件添加一個圓形的背景&#xff0c;然后該視圖進行動畫處理&#xff0c;膨脹的同時&#xff0c;透明度增…

Oracle超出最大連接數問題及解決

用過Oracle的應該都熟悉如何查看和設置Oracle數據庫的最大連接數。這里就再啰嗦一遍。 查看當前的連接數&#xff0c;可以用select count(*) from v$process;設置的最大連接數&#xff08;默認值為150&#xff09;select value from v$parameter where name ‘processes’;修改…

操作系統上機作業--使用系統調用實現mycat

mycat.c的功能與系統cat程序相同mycat將指定的文件內容輸出到屏幕&#xff0c;例子如下&#xff1a;要求使用系統調用open/read/write/close實現 $ cat /etc/passwd root:x:0:0:root:/root:/bin/bash daemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologin bin:x:2:2:bin:/bin:/u…

GCDAynscSocket簡單使用-客戶端

這是一篇介紹GCDAynscSocket客戶端簡單使用的文章&#xff08;服務端后續添加&#xff09; 背景&#xff1a;在這篇文章之前我對socket的了解僅限于知道有TCP、UDP兩種方式&#xff0c;使用抓包工具時甚至看不懂抓包數據&#xff08;慚愧...&#xff09;&#xff0c;所以本文介…

微信android版字體,微信炫彩字下載-微信七彩字體 安卓版v1.6.2-PC6安卓網

微信七彩字體一款方便的手機字體更換軟件&#xff0c;微信炫彩字軟件集合了上百款優質中文美化字體&#xff0c;微信七彩發光字里有可愛的喵嗚體、卡通體&#xff0c;清秀的靜蕾體等多種字體。軟件介紹微信、qq上最好用、最個性的聊天字體應用&#xff0c;讓你的聊天與眾不同&a…

Android SQLite 數據庫 增刪改查操作

Android SQLite 數據庫 增刪改查操作 轉載▼一、使用嵌入式關系型SQLite數據庫存儲數據在Android平臺上&#xff0c;集成了一個嵌入式關系型數據庫——SQLite&#xff0c;SQLite3支持NULL、INTEGER、REAL&#xff08;浮點數字&#xff09;、TEXT(字符串文本)和BLOB(二進制對象…

SIT與UAT的分別

在企業級軟件的測試過程中&#xff0c;經常會劃分為三個階段——單元測試&#xff0c;SIT和UAT&#xff0c;如果開發人員足夠&#xff0c;通常還會在SIT之前引入代碼審查機制&#xff08;Code Review&#xff09;來保證軟件符合客戶需求且流程正確。下面簡單介紹一下SIT和UAT的…

操作系統上機作業--使用系統調用實現mycp

mycp.c的功能與系統cp程序相同將源文件復制到目標文件&#xff0c;例子如下&#xff1a;要求使用系統調用open/read/write/close實現 $ cat /etc/passwd root:x:0:0:root:/root:/bin/bash daemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologin bin:x:2:2:bin:/bin:/usr/sbin/nolo…

android自動化持續集成,基于持續集成的Android自動化測試.pdf

基于持續集成的Android自動化測試.pdf2015 年 第24 卷 第 5 期 計 算 機 系 統 應 用①基于持續集成的Android 自動化測試王 焱, 張 征(華中科技大學 自動化學院, 武漢 430074)摘 要: Android 測試方面的研究大多集中在測試工具和框架的實現上, 有些工具和框架可以實現測試用例…

Csharp 高級編程 C7.1.2

第七章 代理&#xff08;1&#xff09; 一、代理要聲明 二、代理使用步驟 聲明代理初始化代理&#xff08;使用 實例的方法名 作為參數&#xff09;使用代理代碼示例&#xff1a; /*C7.1.2*/ using System; using System.Collections.Generic; using System.Linq; using System…

操作系統上機作業--實現mysys(多進程)

mysys.c: 實現函數mysys&#xff0c;用于執行一個系統命令&#xff0c;要求如下mysys的功能與系統函數system相同&#xff0c;要求用進程管理相關系統調用自己實現一遍使用fork/exec/wait系統調用實現mysys不能通過調用系統函數system實現mysys 測試程序 #include <stdio.…

06鏈隊列_LinkQueue--(棧與隊列)

#include "stdio.h" #include "stdlib.h" #include "io.h" #include "math.h" #include "time.h"#define OK 1 #define ERROR 0 #define TRUE 1 #define FALSE 0 #define MAXSIZE 20 /* 存儲空間初始分配量 */ty…

android 透明變成白色,android – 狀態欄不透明但是白色

為了用anko DSL測試kotlin我決定在最后一個android studio ide(2.1.3)中使用kotlin插件(1.0.3)和最新的anko庫(0.9)開始一個新的proyect我使用默認的proyect Navigation Drawer Activity,所以我只需要將主xml轉換為anko.這是xml&#xff1a;xmlns:android"http://schemas.…