做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-1word-2我是第一行的设置我是第二行的设置从图中很明显的看出，段前段后改变的是灰色框高度，其实就是改变了内容在灰色框的位置，是不是相当于盒模型中的内边距设置；行距想必不用解释大家也都非常熟悉，可以改变第一行与第二行内容的间距，这是不是相当于盒模型中的外边距设置。大家明白盒模型了吗？其实就相当于word文档的段前段后及行距设置。
说到这里大家有没有理解hmtl和css呢，上面举的例子只是其中一小部分，大家如果有兴趣可以继续拿html、css和word进行对比，毕竟我们对word是最熟悉的。通过我们熟悉的知识去学习我们未知的知识，能够帮助我们快速学习新知识，所以任何新事物我们都要找到他的根，HTML、CSS的根就是word文档！
文中有讲的不好的地方还请大家多多批评指正。