Html的Element基本元素讲解

首先我们要了解所谓的html它的定义是什么？

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点

所有 HTML 元素是元素节点

所有 HTML 属性是属性节点

HTML 元素内的文本是文本节点

注释是注释节点

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

【html：超文本标记语言，文本：txt格式的文件，标记：用标签对给文本附加语义】

如果你已经通过上文对html有个了解后，我们就着手研究它的三个元素。

块级(block-level)元素和内联(inline)元素以及行内快元素(inline-block)

科普一些背景：html布局：文档流，float浮动，position定位以及display：flex弹性布局。

基于最先出现的文档流，一些元素也被赋予了它原先的语义。

Block:块级元素单独霸占一行，可设定宽高；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

Inline：行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！

Inline-block:行内块元素：结合的行内和块级的要点，不仅可以设定宽高，还可以多个标签存在一行显示；

(div，p，ul，li)容器：块级元素
<div>默认属性是前后各加<br>换行。

(Span,img,input,a)文本：行内元素
<span>标签没语义，作用：可单独设置属性

给出了一些主要要掌握的元素。同时我相信看众也比较容易理解和记忆这些内容。如果还是没在脑海中形成它们的样子。你可以参考word文档中，一段文字默认状态下是不是铺满一行一行的从左到右，从上到下的排列。表格是不是新增一行两列或者一行多列默认是铺满整张A4纸。说到这里大家应该可以记住他们了。

概念和代表已经说了，但是我们不但要理解他们的语义，还要踏踏实实的使用它们。

先说inline吧，文字与img它要实现位置偏右，居中等位移，是跟word编辑器里的6个位置是 一模一样的。而网页设置中，频繁使用的是Text-align：center。

就不一一解释了，奉上内经，如下

Text-align:是设定在父盒子标签里，规定盒子内的行内元素（文本或img标签）居中显示。

Line-height:是指文本的行框（行高）高。由（上，下间距和文本高度组成）

实现垂直的原理:容器高度=行框高度。文本高度默认为16px，当设定容器高度=line-height=200px时，上，下间距会自动平分184px。

Margin：0 auto：是设定在要居中的盒子标签里。一般还要设定盒子宽度。

vertical-align:middle：是设定在两个行内元素标签里，使两个行内元素两者间和最后行内元素前的行内元素互相垂直对齐。

Tex-align和line-height常常搭配使用在一行文字的垂直居中。

Vertical-align:middle常常用于文本和img的垂直对齐。

vertical-align这个属性，如果要细究，那真的要搭入好多新内容。其实我们也不要了解他的基线，中线，顶线这些内容，知道怎么使用就好。

还有一点必须要说的：vertical-align是inline-block依赖型元素。如果不是inline-block元素，就会不理不睬。有些元素是默认支持它的：图片，按钮，单复选框，单行/多行文本框等HTML控件