Html的Element基本元素讲解

本人写这篇文章是我在IT修真园里学习了一段时间，反过来复习时整理的。虽然只是些基础知识内容，希望能帮到大家。

首先我们要了解所谓的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)容器：块级元素

默认属性是前后各加
换行。

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

给出了一些主要要掌握的元素。同时我相信看众也比较容易理解和记忆这些内容。如果还是没在脑海中形成它们的样子。你可以参考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控件

Atas ialah kandungan terperinci Html的Element基本元素讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn