行内块级元素以及元素分类

行内元素

display:inline

特点

        1.默认下行内元素之间共享一行

        2.无法设置宽高，只能设置左右外边距、左右内边距

        3.行内元素只能包含数据和其他行内元素

常见的行内元素

        span、a、img、label、input、button、i、b、u、em、strong......

置换元素

        行内元素不是不能设置宽高吗？那为啥img、input、botton设置宽高确生效呢，因为他们是置换元素。

        什么是置换元素呢？元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

块级元素

display:block

特点

        1.默认下块级元素独占一行

        2.可以设置宽高以及margin、padding

        3.块级元素可以包含行内元素和块级元素

常见的块级元素

        div、h1-h6、p、ul>li、ol>li、dl>dt>dd、form、table、header 、nav、article、footer 、address......

行内块级转化

        行内、块级元素之间可以通过display进行转化。当display:inline-block，此时元素属于行内块级元素，此时可以设置宽高、margin、padding，一行可以包含多个行内块级元素。

元素分类

html元素大体上按照功能分类可以分为：文字相关、图像视频、表单、表格

文字相关

        ·h标签，这个标签很重要，检索时会检索h1的内容，一般就使用h1，h2，h3

        ·p标签，段落标签

        ·列表标签，有无序、有序、定义列表，列表标签可以展示数据，也可以和图片/文字一起展示

        ·a标签，可以通过href来进行网页、文件、页面、电子邮件、页面定位的跳转

        ·span，文本内容通用

        ·em标签，着重阅读

        ·strong，加粗，文本很重要

        ·b，加粗

        ·i，斜体

        ·u，下画线

        不过很多的文本效果我们都会采用样式去控制，所以这些文本元素不经常会使用，比如加粗可以使用font-weight: bold;  斜体可以使用font-style:italic;

图像视频

        ·img，图片标签，通过src设置图片路径，可以使用绝对、相对路径，也可以是图片url地址

        ·video，视频标签，可以设置多个source标签，因为如果浏览器不支持某种格式视频，设置source的多个格式视频后，浏览器会选择自己支持的格式播放

        ·audio，音频标签，与视频标签类似

        ·ul>li，li中嵌套img、p标签，实现图文展示的效果

表单

<form action='服务器接口'></form>

label标签

        input前的文字和input输入框关联，只要设置label的for属性和input的id一致即可

text标签

name属性

        提交表单时，服务器接口后面跟着的键值对中，键就是name，想要提交数据给服务器，name必不可少

placeholder属性

        输入框文本提示

type属性可以有很多取值        

        ·text明文输入框，输入啥看到啥

        ·password暗纹输入框，一般是密码

        ·radio单选框，设置name属性一样时，就会有单选效果，单选框还要有value的值，value是传给服务器的值

        ·checkbox多选框，和radio单选一样

        ·submit提交按钮，会把带有name值的数据传送给服务器

        ·button，普通按钮，value是给按钮命名的

        ·image，图片按钮

        ·reset，重置按钮，清空表单数据，value是给按钮命名的

        ·file，文件上传

        ·email，邮箱，能进行很简单的验证

        ·url，url地址，能进行很简单的验证

        ·number，此时只能数字输入

        ·date，选择时间

        ·color，取色器

        ·hidden，隐藏域，用户看不到，但是服务器需要的数据，就用这个传送

select标签

        下拉列表，select下拉框>optgroup分组名字>option具体事务

textarea标签

        多行输入框，可以设置cols、rows，不过还是可以无限拉伸

progress标签

        进度条，max属性定义工作量，value定义完成的进度

表格

        简单表格table>tr>td/th

        完整表格table表格声明>caption标题>thead表头>tbody表体>tfoot表格附加数据

对齐方式

        水平对齐align: left、center、right ，都能设置

        垂直对齐valign: top、mid、bottom ，只能给tr、td/th设置

表格边距

        外边距cellspacing，默认2px

        内边距cellpadding ，默认1px

表格合并

        水平方向合并colspan，值为多少就设置合并几个

        垂直方向合并rowspan

总结

        这就是一些html元素的简单分类，还有很多的元素并没有介绍到，其实在我如今阶段，常用的元素并不是很多，如果某天遇到时，可以多翻翻MDN文档查看具体的元素，哪里更详细。

自己所写，如果有误，麻烦您指出