html元素分类及特性,html元素的分类有哪些？

有关html元素的基本知识，我已经在《html元素是什么》一节中讲述过，不再赘述！而一个完整的html网页是由众多不同的html元素组成的，这些元素虽多，但总体可以分为块状元素，内联元素，块状内联元素三大类型，每种类型有着各自的特点。

一、块状元素

块状元素本身的属性为display:block的元素，因此，它在网页中是以矩形区域显示的，正因为这个特点，我们通常使用块状元素来进行页面的结构布局！

块状元素，有时候，也叫块级元素，行外元素

不是块状的元素，通过设置display:block，可以将该元素变成块状元素

块状元素的特点：

1、在默认情况下，每个块状元素从新的一行开始，其后面的元素另起一行；

2、在默认情况下，块状元素是自上而下垂直排列，且每个块状元素独占一行；

3、块状元素一般都作为其他元素的容器，可以容纳内联元素和其他块状元素。

4、块状元素的高度，行高及其外边距和内边距都可以通过CSS属性来控制和调整！

5、在不设置宽度的情况下，块级元素的宽度则和它的父级元素的宽度一致。

6、在不设置高度的情况下，块级元素的高度则和它的父级元素的高度一致。

常见块状元素：标签描述div常用块状容器，也是css和layout的主要标签

h1~h6一、二、三、四、五、六级标题

p段落

hr水平分隔线

menu菜单列表

ol、ul、li有序列表、无序列表、列表项

dl、dt、dd定义列表、定义术语、定义描述

table表格

blockquote块引用

form交互表单

设置display:block，可以将元素转换块级元素。

二、内联元素

内联元素是指本身属性为display:inline的元素，其宽度随元素的内容而变化。因为他自身的特点，我们通常使用内联元素来进行文字、小图片(小结构)的搭建。

内联元素，有的时候还叫做行内元素、行间元素、内嵌元素。

不是内联元素，通过设置display:inline，可以将该元素变成内联元素

内联元素的特点：

1、内联元素不会独占一行，多个相邻的内联元素会排列在同一行中，顺序是从左到右排列，直到排列不下，才会另起新的一行；

2、内联元素设置高度height是无效的，宽度由其自身内容决定的，但高度可以通过行高line-height来进行调整；

3、内联元素设置宽度width是无效的，其宽度是由元素内容本身的大小决定的，比如文字、图片等；

4、内联元素设置外边距margin，只有左外边距margin-left和右外边距margin-right是有效的，而上下是无效的；

5、内联元素设置内边距padding，只有左内边距padding-left和右外边距padding-right是有效的，而上下是无效的；

6、内联元素只能容纳文本或者其他内联元素，请不要在内联元素中嵌套块状元素。

常见内联元素标签描述标签描述a超链接或锚点s中划线(不推荐)

abbr缩写acronym首字

br换行cite引用

b粗体(不推荐)big大字体

i斜体code计算机代码(在引用源码的时候需要)

font字体设定(不推荐) (html5取消了该标签)dfn定义字段

span常用内联容器，定义文本内区块small小字体文本

strong粗体强调tt电传文本

textarea多行文本输入框kbd定义键盘文本

em强调samp定义范例计算机代码

u下划线q短引用

strike中划线sub下标

label表格标签sup上标

select项目选择var定义变量

三、内联块状元素

内联块状元素(inline-block)就是既能设置宽高，又能独占一行显示，这样，同时具备了内联元素和块状元素的特点；

设置display:inline-block，就是将元素转换成为内联块状元素类型；

内联块状元素特点：

1、内联块状元素和其他相邻元素同在一行， 但它们之间存在间隙，间隙大小为字体大小；

2、内联块状元素的高度、宽度、行高以及顶和底边距都可设置。

常见内联块状元素

button，textarea，input、select、img是内联块状元素(inline-block)

标签，浏览器会根据其src属性来读取显示其中内容，它的宽度width和高度height，是可以自行设定的，如果没有设置宽度和高度，就会根据原图片的实际宽高来显示。对于表单元素标签也可以自行设置高度和宽度，如果没有设置，浏览器就会按照默认的显示宽度和高度。