【前端学习】前端学习第一天：块级元素和行内元素介绍及简单标签介绍

块元素

定义：块元素又称块级元素，一般都从新行开始，相邻的块级元素将会在不同行显示。

特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度；

④它可以容纳内联元素和其他块元素。

举例：

1、标题标签（h1~h6)：其中h1字体最大，h6字体最小；

2、段落标签（p标签）：用来定义网页中的一段文字，可以通过align属性控制段落在水平方向的对其方式；

 

3、有序列表al、无序列表ul、定义列表dl；

有序列表和无序列表通过使用li标签表示列表项，定义列表dd表示定义的内容，dd对内容进行解释说明。

 

4、div；

5、表格标签table；

6、表单标签form等。

行内元素：

定义：行内元素又称内联元素，一般不会从新的一行开始，仅仅依靠自己内部元素本身的大小来支撑结构，在宽度允许范围内，相邻的行内元素会在同一行显示。

特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变；

④内联元素只能容纳文本或者其他内联元素。

举例：

1、em标签：用于表示语音语调的加重，斜体；

2、strong标签：用来表示强调，加黑；

3、a标签：控制页面之间的跳转；

4、q标签：表示短引用。

行内块元素：

定义：既具有块元素可以设置宽度和高度的特点，又具有行内元素不会独占一行的特点。

举例：

常见元素如img元素、input元素等都是行内块元素；

块元素和行内元素的转换：

可以通过使用display属性设置元素显示的类型：

    inline：将元素设置为行内元素；

    block：将元素设置为块元素；

    inline-block：将元素设置为行内块元素，既可以设置宽度和高度，又不会独占一行。