一、任何不是塊級(jí)元素的可見(jiàn)元素都是內(nèi)聯(lián)元素##
塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對(duì)齊塊
* dir - 目錄列表
* div - 常用塊級(jí)容易，也是css layout的主要標(biāo)簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標(biāo)題
* h2 - 副標(biāo)題
* h3 - 3級(jí)標(biāo)題
* h4 - 4級(jí)標(biāo)題
* h5 - 5級(jí)標(biāo)題
* h6 - 6級(jí)標(biāo)題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
* noscript - 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
內(nèi)聯(lián)元素(inline element)
* a - 錨點(diǎn)
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
* dfn - 定義字段
* em - 強(qiáng)調(diào)
* font - 字體設(shè)定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標(biāo)簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義范例計(jì)算機(jī)代碼
* select - 項(xiàng)目選擇
* small - 小字體文本
* span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
* strike - 中劃線
* strong - 粗體強(qiáng)調(diào)
* sub - 下標(biāo)
* sup - 上標(biāo)
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
二、嵌套規(guī)則
- 塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素，但內(nèi)聯(lián)元素不能包含塊級(jí)元素，它只能包含其它內(nèi)聯(lián)元素。
- 塊級(jí)元素不能放在p里面。
- 有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)聯(lián)元素，不能包含塊級(jí)元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內(nèi)可以包含div
- 塊級(jí)元素與塊級(jí)元素并列、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。
div 能不能嵌套在p里面##
不能，如果嵌套會(huì)導(dǎo)致html語(yǔ)義失敗，看下面的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:target pseudoclass example</title>
<style>
p em:last-of-type {
color: #4cae4c;
}
</style>
</head>
<body>
<p>
<em>I'm not lime :(</em>
<span><em>I am lime1!</em><em>I am lime2!</em></span>
<span><em>I am lime!</em></span>
<strong>I'm not lime :(</strong>
<em>I'm lime :D</em>
<span><em>I am also lime!</em> <strike> I'm not lime </strike></span>
<strong>I'm also not lime :(</strong>
<div><em>I am div lime1!</em></div>
</p>
</body>
</html>
可以看到，對(duì)于p元素下的所有em元素對(duì)于css中設(shè)定的偽類規(guī)則都生效了（所有em對(duì)于父類是最后一個(gè)em的，字體顏色為#4cae4c），但是當(dāng)我們?cè)诖a中嵌套了一個(gè)div后的效果，我們可以看下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:target pseudoclass example</title>
<style>
p em:last-of-type {
color: #4cae4c;
}
</style>
</head>
<body>
<p>
<em>I'm not lime :(</em>
<span><em>I am lime1!</em><em>I am lime2!</em></span>
<span><em>I am lime!</em></span>
<strong>I'm not lime :(</strong>
<div><em>This is a div em</em></div>
<em>I'm lime :D</em>
<span><em>I am also lime!</em> <strike> I'm not lime </strike></span>
<strong>I'm also not lime :(</strong>
<div><em>I am div lime1!</em></div>
</p>
</body>
</html>
很遺憾，在div后所有的偽類css效果都失效了。。。
引用：
