在HTML頁面中承二,被大量的標簽結(jié)構(gòu)榆鼠,這些標簽元素,主要分兩種:塊級元素(block element)和內(nèi)聯(lián)元素(inline element)亥鸠。它們都有不同的特點和作用妆够,這里做一個總結(jié)和分類。當然它們有諸多的同義中文翻譯负蚊,這里不深究神妹,博主更喜歡直譯的叫法。
在默認的標準文檔流里面
塊級元素
特點:
1. 自動換行家妆,并占據(jù)一整行鸵荠;
2. 高度,寬度以及外邊距和內(nèi)邊距都可控制伤极;
3. 默認寬度與瀏覽器寬度一樣蛹找,高度默認為0,與內(nèi)容無關(guān)哨坪;
4.?它可以容納內(nèi)聯(lián)元素和其他塊元素熄赡。
內(nèi)聯(lián)元素
特點:
1.默認從左到右,按順序一行并排齿税;
2.高度彼硫,寬度及外邊距和內(nèi)邊距僅部分元素可改變;
3.默認高寬只與內(nèi)容有關(guān)拧篮;
4.行內(nèi)元素只能容納文本或者其它內(nèi)聯(lián)元素。
為了打破這種默認的布局芜壁,更加靈活的展示礁凡,我們會引用CSS來改變默認布局。
比如:
他們可以通過修改`display`屬性來相互轉(zhuǎn)換窟蓝,`display:inline-block`變成內(nèi)聯(lián)(塊)元素布局状共,`display:block`變成塊元素布局。
分類
塊元素(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可選內(nèi)容小染,(對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
* noscript - 可選腳本內(nèi)容(對于不支持script的瀏覽器顯示此內(nèi)容)
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
內(nèi)聯(lián)元素(inline element)
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強調(diào)
* font - 字體設(shè)定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義范例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 常用內(nèi)聯(lián)容器踊赠,定義文本內(nèi)區(qū)塊
* strike - 中劃線
* strong - 粗體強調(diào)
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
可變元素
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區(qū)塊(map)
* object - object對象
* script - 客戶端腳本
謝謝您百忙中,閱讀本篇文章帖鸦;若覺得對你有幫助,請分享給更多的朋友
版權(quán)聲明:自由轉(zhuǎn)載-非商用-非衍生-保持署名
原文傳送門