行内元素与块级元素
今天下午面试了一道关于HTML的最基础的题,就是判断下列元素哪些是行内元素,哪些是块级元素?
把这道笔试题记录下来,是为了补充自己以前从未注意到的小知识点,在日后翻看时,巩固加深。
内联元素又称行内元素。
常见的以及面试时遇到的元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table,span, strong, em, br, img , input, label, select, textarea, cite,
行内元素:div,p,h1~h6,from,address,fieldset,hr,menu,table,..
块级元素:span, strong, em, br, img , input, label, select, textarea, cite
行内元素(inline element)
a---锚点
b---字体加粗
br---换行(面试考过)
em---强调
font---字体设定
i---斜体
img---图片
input---输入框
label---表格标签
select---下拉选框
small---小字体文本
span---常用的行内元素,定义文本内区块
strike---中划线
strong---粗体强调
sub---下标
sup---上标
textarea---文本域,多行输入框
tt---电传文本
u---下划线
cite---引用
备注:红色为面试时问过,但平时不怎么注意的
块级元素
div---常见的块级元素
p---段落
address--地址
h1~h6---标题(从大到小)
ul---无序列表
ol---有序列表
dl---定义列表
table---表格
center---居中对齐模块
blockquote---块引用
dir---目录列表
fieldset---form控制组
form---表单
hr---换行
isindex---input prompt
menu----菜单列表
pre---格式化文本
noframes---frames可选内容,(对不支持frame的浏览器显示此区块内容)
noscript---可选脚本内容(对不支持script的浏览器显示此内容)
备注:蓝色为不常见/用的块级元素
可变元素---根据上下文语境决定该元素为块元素或内联元素
button---按钮
applet---java applet
del---删除文本
iframe---inline iframe
ins---插入文本
map---图片区块
object---对象
script---客户端脚本
备注:红色为常用的元素
行内元素与块级元素的区别:
①行内元素不会独占一行,块级元素独占一行;
②内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通过这4个属性来控制内联元素的宽度。
③行内元素中,可放块级元素,撑起自己的高度
④col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr, td 等几个元素标签是只读的,也就是不能使用innerHTML等进行动态赋值.
块级元素和行内元素的转换
① display:block;---设置元素为块级元素
②display:inline;---设置元素为行内元素
③display:inline-block---设置元素为行内块元素;即可设置宽高,但是并非独占一行
本文来自博客园,作者:前端加油站,转载请注明原文链接:https://www.cnblogs.com/bllx/p/8570497.html