一、容器
容器就是可以用来盛载任何文字与对象的对象。房子是一个容器，盛载着人，家具，电器等；人也是一个容器，承载着脑袋，四肢，躯干；眼睛是一个容器，承载着眉毛，睫毛，眼珠等。
在网页里表达容器的方式如下：
<房子>
<电器></电器>
<家具></家具>
<人>
<脑袋>
<眼睛>
<睫毛></睫毛>
<眉毛></眉毛>
<眼珠></眼珠>
</眼睛>
<嘴巴></嘴巴>
<鼻子></鼻子>
</脑袋>
<四肢></四肢>
<躯干></躯干>
</人>
</房子>
这种用<></>来表达对象之间的包含关系的语言称之为可SGML(标准通用标记语言)这种语言的功能很强大，但是规矩却非常多，很难学习，但具体可以到百科中了解。于是人们提出更简易且更加适合在浏览器里使用的HTML(超文本标记语言)，它是在SGML的基础上演化而来的，不同的是html容错性更好且不区分大小写，语法更加灵活。现在人们常说的HTML5 就是 HTML的第5版本，是最先进、最好用的版本。
二、属性
属性即是一个对象区别于另一个对象的特点。比如人的属性有姓名，性别，年龄，生肖，肤色，民族等等。。如果用html的方式来表达如下
<与会人员>
<人 姓名="风之子" 性别="男" 年龄="30" 民族="汉" 编号="0001">
</人>
<人 姓名="秦岚" 性别="女" 年龄="32" 民族="汉" 编号="0002">
</人>
</与会人员>
三、样式
样式是html5标准中非常重要的组成部分，它直接决定了网页的外观好看与否，以下演示样式的表达方式
<容器 编号="s2993" 样式="边框:1像素 实线 蓝色;宽度:100像素;高度100像素;圆角: 20像素">
这是容器里的文字
</容器>
四、小试牛刀
了解了html的容器，属性与样式。我们现在可以用这些基础知识小试牛刀，做一个小小的新闻页面。
<文章 样式="宽度:400像素;">
<一级标题 样式="文本对齐:居中">
最后的风之子
</一级标题>
<容器 样式="文本对齐:居中; 边线-底部: 1像素 实线 灰色;字体-大小:12像素; 颜色:灰色">
导演：M·奈特·沙马兰 上映时间：<时间>2010年8月23日</时间>
</容器>
<段落 样式="文本-缩进:2字符;字体-大小:12像素;颜色:绿色;边线: 1像素 实线 灰色; 边线-半径:10像素">
全世界被战火吞噬，没有人能够阻止无法避免的毁灭。一个世纪以来，烈火国一直在全世界开战...如今他们把目标转向水族部落，准备攻下北极水族的城堡。
</段落>
<段落 样式="文本-缩进:2字符;字体-大小:12像素;颜色:白色;背景-颜色:黑色;行-高:2字符;边线-半径:20像素;内边距:10像素">
某天，一名年轻的截水神通凯塔拉和她的哥哥苏卡一起练习她的截水技巧，意外发现一个名字叫安的小男孩...但是他能学会其它的三大神力，成为他注定要当的英雄，并且及时拯救世界吗?
</段落>
</文章>
现在做一个简单翻译，转化成以下的正式代码。没办法，谁让这些东西是外国人发明的呢，还是得配合下
<article style="width:400px;">
<h1 style="text-align:center">
最后的风之子
</h1>
<div style="text-align:center; border-bottom: 1px solid gray;font-size:12px; color:gray">
导演：M·奈特·沙马兰 上映时间：<time>2010年8月23日</time>
</div>
<p style="text-indent:2em;font-size:12px;color:green;border: 1px solid grey; border-radius:10px">
全世界被战火吞噬，没有人能够阻止无法避免的毁灭。一个世纪以来，烈火国一直在全世界开战...如今他们把目标转向水族部落，准备攻下北极水族的城堡。
</p>
<p style="text-indent:2em;font-size:12px;color:white;background-color:black;line-height:2em;border-radius:20px;padding:10px">
某天，一名年轻的截水神通凯塔拉和她的哥哥苏卡一起练习她的截水技巧，意外发现一个名字叫安的小男孩...但是他能学会其它的三大神力，成为他注定要当的英雄，并且及时拯救世界吗?
</p>
</article>
将以上的代码复制下来，粘贴到电脑的记事本上，保存成文件，文件命名为article.html。用浏览器打开这个文件，好了见证奇迹的时刻！！
最终效果
