[人工智能]行内块级元素以及元素分类

行内元素

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文档查看具体的元素，哪里更详细。