html是一种什么样的文档,什么HTML、CSS，其实就是word文档！

做javaweb开发的程序员都知道什么是HTML和CSS，大家肯定会说是超文本标记语言和层叠样式表，好家伙，真专业。如果讲给外行人听，肯定听不懂这么专业的名词。在我初学这两种语言的时候，看书、看视频，然后练习代码，运行代码看页面。经过一段时间的练习，在熟练的使用标签以及写样式后，我发现这跟写word及其相似。

HTML的字体相关的标签

font字体(属性color颜色、size大小、face改变字体)

p段落

h标题

hr水平线

b加粗

i斜体

strong加粗

em斜体

我们打开word看一看

word工具栏——字体

html图片标签img

我们打开word看一看

word工具栏——图片

html表格标签table

我们打开word看一看

word工具栏——表格

说到这里肯定有同学问了：盒模型在哪里？初次接触盒模型时，我是完全懵了，完全不知道在说什么，更别提在前端使用了，概念都没搞清楚，学的也是云里雾里。一个很简单的东西，套上“盒模型”这三个字瞬间高大上了。

盒模型

标签元素都有自己边框border，你看不到他是因为你没给这个标签元素设置边框属性，你设置了边框样式后你就能看到了。外边距margin改变的是标签元素与标签元素之间的距离，内边距padding改变的是标签元素中的内容在标签中的位置。解释完大家是不是还是有点不明白。

我们再来看看word中的段落设置。

word-1

word-2

我是第一行的设置

我是第二行的设置

从图中很明显的看出，段前段后改变的是灰色框高度，其实就是改变了内容在灰色框的位置，是不是相当于盒模型中的内边距设置；行距想必不用解释大家也都非常熟悉，可以改变第一行与第二行内容的间距，这是不是相当于盒模型中的外边距设置。大家明白盒模型了吗？其实就相当于word文档的段前段后及行距设置。

说到这里大家有没有理解hmtl和css呢，上面举的例子只是其中一小部分，大家如果有兴趣可以继续拿html、css和word进行对比，毕竟我们对word是最熟悉的。通过我们熟悉的知识去学习我们未知的知识，能够帮助我们快速学习新知识，所以任何新事物我们都要找到他的根，HTML、CSS的根就是word文档！

文中有讲的不好的地方还请大家多多批评指正。

举报/反馈