一、容器

容器就是可以用来盛载任何文字与对象的对象。房子是一个容器，盛载着人，家具，电器等；人也是一个容器，承载着脑袋，四肢，躯干；眼睛是一个容器，承载着眉毛，睫毛，眼珠等。

在网页里表达容器的方式如下：

<房子>
  <电器></电器>
  <家具></家具>
  <人>
    <脑袋>
      <眼睛>
        <睫毛></睫毛>
        <眉毛></眉毛>
        <眼珠></眼珠>
      </眼睛>
      <嘴巴></嘴巴>
      <鼻子></鼻子>
    </脑袋>
    <四肢></四肢>
    <躯干></躯干>
  </人>
</房子>

这种用<></>来表达对象之间的包含关系的语言称之为可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。用浏览器打开这个文件，好了见证奇迹的时刻！！

最终效果