HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素。
块级元素:
独占一行,宽度和父元素宽度一样宽(默认)
可以设置宽高
设置的width属性和元素的宽度(width+padding2+border2+margin2)是两回事(盒子模型)
如果没有设置高度,高度由内容撑开
块级元素可以包裹别的元素。p标签尽量不要包裹别的块级元素
常用的块级元素:
块级的块标签,用于在效果中 定义一块;
段落标签,用于展示效果中划分段落;
.....
:
标题标签,用于展示效果中划分标题;
:有序列表标签,用于在效果中定义一个有序列表
无序列表标签,用于在效果中定义一个无序列表;
:引起定义列表;
:表格标签,用于在效果中定义一个表格;
:指定所包含控件在表单中起作用。
行内元素:
可以和别的标签共享一行,标签的宽度和高度由内容决定
不能设置宽高,外边距和内边距部分可控制(盒子模型)
常用的行内元素:
:
超链接标签,用于在效果中定义一个可以点击跳转的链接;
行级的块标签,用于在效果中 一行上定义一个块,进行内容显示;
:
换行;
:
指定文本应以斜体渲染,若可用的话;
:
强调文本,通常以斜体渲染;
:
以粗体渲染文本;
:
为页面上的其它元素指定标签;
:
分离文本中的引语;
:
用斜体显示标明引言;
:
指定代码范例;
定义编程变量。通常以斜体渲染;
行内块级元素:
可以和别的元素共享一行,宽高由内容决定(默认)
可以设置宽高
注意:行内块级元素并排显示的时候,两个行内块级元素之间默认有一个间隔
取消行内块级元素之间的空格:
(1)给行内元素的父元素设置字体大小为0px(行内元素的内容无法显示,行内元素之间的空格也无法显示)
(2)给行内元素设置合理的字体大小(行内元素的内容就能显示了)
常用的行内块状元素:
:
图片标签,用于在页面效果中展示一张图片;
:
创建各种表单输入控件。
文章来源: segmentfault.com,作者:前端萧萧,版权归原作者所有,如需转载,请联系作者。
原文链接:segmentfault.com/a/1190000038788820