实例讲解HTML5制作一个时尚类网站
http://banlab.me/view/fashion
一个网页的构成分为3部分：
1:html (内容)
2:css (表现)
3:JavaScript (行为)
一般大家说的行为和表现从内容上分离，就是说css和JavaScript从html文档里面分离开来，比如css另建一个style.css的专门文件，或者js.js的专门文件。
css用来控制内容的表现(就是你看到的丰富的效果)，而JavaScript用来控制页面的动态交互的行为(就是你操作中的动态的交互)。
好了，大致就是这样，很简单吧？
再对照着看这个案例 http://banlab.me/view/fashion
整个网站的左上角是logo和导航，当点击导航的具体内容右侧会弹出内容( 你可以先试试)。在网站的底部有一个页脚。
大致也是这样3块：头部，内容区域，页脚
所以我们按照上次说的那样先把整个页面的大框架定下来：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>一个时尚类的网站</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header></header>
<section></section>
<footer></footer>
</body>
</html>
（在接下去的部分，我只把在<body></body>标签里面的内容写出来，这样方便浏览。）
在logo区域，只有一个logo和一句简单的描述,于是我这样写：
<header>
<h1>banLab</h1>
<em>design for fashion</em>
</header>
(你在网站上看到的不是这样的，因为当时我是设计和前端一起做的，一开始是想拟一个副标题的，所以当时是这样写的：
<header>
<hgroup>
<h1>banlab</h1>
<h1>副标题</h1>
</hgroup>
</header>
这里<hgroup>标签用来包裹连续的标题标签(<h1> 至<h6>),它是一个html5才有的新标签。不过我们看到网站上design for fashion的意思更像是一句补充的说明，所以我用了一个<em>强调的标签来描述。这样从内容上看起来，也更符合语义了，你觉得是不是？
在头部的下面有一个导航，我们用<nav>标签。接下去你先把导航全部内容展开，你是否看到，这个导航是个2级导航，每个一级导航下面都有一个子分类。
对于这样的关系，我们一个一个的插子<nav>标签会觉得很吃力，因为还有更好的html(5)标签来处理这种关系。于是我这样写：
<nav>
<dl>
<dt>Works</dt>
<dd>Web Design</dd>
<dd>Web Developemnt</dd>
<dd>Graphic Design</dd>
<dt>Catelogo1</dt>
<dd>Catelogo1_item1</dd>
<dd>Catelogo1_item2</dd>
<dt>Catelogo2</dt>
<dd>Catelogo2_item1</dd>
<dd>Catelogo2_item2</dd>
<dt>Catelogo3</dt>
<dd>Catelogo3_item1</dd>
<dd>Catelogo3_item2</dd>
</dl>
</nav>
以上Catelog是我自定的名字，如果你们喜欢的话，可以下载之后，然后更改具体的栏目名称。
<dt>和<dd>用来定义一个“定义列表”，它与"<ul>和<li>"以及"<ol>和<li>"这两个组合不同，形象点的解释就是: <dd>标签里面的内容是<dt>标签内容的说明，他们必须有这样的关系。如果两个区域的内容毫不相干，那么就不适用<dt>和<dd>来处理。其他标签的用法一样，虽然几乎任何合法的html5标签都能实现同样的效果，但是我们也希望我们写的html5代码读起来更像一篇语义正确的文章。
而且需要注意的是：<dt>后面不能缺少<dd>标签，而且他们都必须包裹在<dl>标签内部，这样才是一个合法的完整的"定义列表"。
我当初没有把<nav>放在<header>内部，也是由于当时一开始做的时候他们不是组合在一起的缘故，后来(当然是)懒得改了。 但是从最终的效果来看，似乎把logo和导航组合一起写更合适：
<header>
<h1>banLab</h1>
<em>design for fashion<em>
<nav>
<dl>
<dt>Works</dt>
<dd>Web Design</dd>
<dd>Web Developemnt</dd>
<dd>Graphic Design</dd>
<dt>Catelogo1</dt>
<dd>Catelogo1_item1</dd>
<dd>Catelogo1_item2</dd>
<dt>Catelogo2</dt>
<dd>Catelogo2_item1</dd>
<dd>Catelogo2_item2</dd>
<dt>Catelogo3</dt>
<dd>Catelogo3_item1</dd>
<dd>Catelogo3_item2</dd>
</dl>
</nav>
</header>
当然，在每个可以点击的地方，我都插入了一个<a>标签，用来说明这是一个链接，可以点击，这样整个头部和导航就完成了。
接下去是内容区域，因为导航有4大块：work,catelog1,catelog2,catelog3.
所以我写了对应的4个并列的<section>，并且都给他们用唯一的#id来命名。他们是这样的：
<section id="work"></section>
<section id="catelog1"></section>
<section id="catelog2"></section>
<section id="catelog3"></section>
这就是4块具体的内容。当然如果想让整个HTML的DOM结构更加清晰，还可以在这4个<section>外面再用一个<section>标签包裹，于是是这样的：
<header>
<h1>banLab</h1>
<em>design for fashion<em>
<nav>
<dl>
<dt>Works</dt>
<dd>Web Design</dd>
<dd>Web Developemnt</dd>
<dd>Graphic Design</dd>
<dt>Catelogo1</dt>
<dd>Catelogo1_item1</dd>
<dd>Catelogo1_item2</dd>
<dt>Catelogo2</dt>
<dd>Catelogo2_item1</dd>
<dd>Catelogo2_item2</dd>
<dt>Catelogo3</dt>
<dd>Catelogo3_item1</dd>
<dd>Catelogo3_item2</dd>
</dl>
</nav>
</header>
<section id="content">
<section id="work"></section>
<section id="catelog1"></section>
<section id="catelog2"></section>
<section id="catelog3"></section>
</section>
接下去，我们写4大块内容的具体内容，他们与导航的4大分类的子菜单对应，完整的是这样的：
<section id="content">
<section id="work">
<section id="work_design"></section>
<section id="work_web"></section>
<section id="work_graphic"></section>
</section>
<section id="catelog1">
<section id="catelog1_item1"></section>
<section id="catelog1_item2"></section>
</section>
<section id="catelog2">
<section id="catelog2_item1"></section>
<section id="catelog2_item2"></section>
</section>
<section id="catelog3">
<section id="catelog3_item1"></section>
<section id="catelog3_item2"></section>
</section>
</section>
而具体的内容则在这些内部的区域里面，看到他们像列表，于是我们可以用<ul>和<li>标签来写，说明这是一个无序列表。我们就写其中的第一个，因为其他的都是相同的，所以到时候可以直接复制：
<section id="work_design">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
继续在列表内部写每个具体的项目：
<section id="work_design">
<ul>
<li>
<div>
<a href="">
<figure>
<img src="image/work/thumb/pic1.jpg">
<figcaption>pic1</figcaption>
</figure>
</a>
</div>
</li>
<li>
<div>
<a href="">
<figure>
<img src="image/work/thumb/pic2.jpg">
<figcaption>pic2</figcaption>
</figure>
</a>
</div>
</li>
<li>
<div>
<a href="">
<figure>
<img src="image/work/thumb/pic3.jpg">
<figcaption>pic3</figcaption>
</figure>
</a>
</div>
</li>
</ul>
</section>
你可以看到在这里我用<div>标签来包裹每一个具体的项目，因为在这里似乎<section>反而不合适，它缺少上下文的语境，只是用来布局的。
在<div>内部，我用了一个<a>标签来包裹图片，而具体的图片<img>和图片的说明<figcaption>都放在<figure>内部。
接下去里面的内容可以直接复制到其他的区域了，因为他们都有相同的样式(css)以及结构上的位置也相同。
最后写页脚: 我们看到有一个版权的说明以及一组导航。于是我们可以这样写：
<footer>
<p>© 2012 BANLAB ™</p>
<nav>
<h1>关注我们：</h1>
<ul>
<li>Google+</li>
<li>微薄</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Tumblr</li>
<li>腾讯微薄</li>
<li>豆瓣<li>
</ul>
<a href="#">更多?</a>
</nav>
</footer>
© 显示出来的就是?,当然你也可以直接输入?,而™显示出来的效果就是显示在左上角的商标样式:TM。但是要注意的是：在使用这样的命名字符时候，末尾必须有分号" ; "，不然在w3验证网站上验证后会显示错误。
我把"更多?"从底部的社交网络导航内部分离出来，因为它不是他们其中的一员。就像员工车辆前面的司机，身份与车厢内的同事还是有一点点区别的。(我不是歧视的意思，抱歉！)，但是不管如何，他们都在同一辆车上。
到此为止，所有的结构都完成了。
接下去我们写样式(css),由于css3的某些新的选择器IE6几乎都不支持（包括IE8可能少部分都不支持），所以在实际操作当中，如果你很介意IE6用户的话，我说的内容可能不是很适合。
css3引入了很多新的选择器，借助这些新的选择器可以让html5文档看起来更加整洁干净。
还是从头开始，我们先写头部和导航的区域:
由于<header>和<section id="content">，<footer>都是属于<body>的子元素：
<body>
<header></header>
<section id="content"></section>
<footer></footer>
</body>
看到了吗？ 需要说明的是css里面的子元素指的是往下第一级的元素。
于是我们可以这样写：
body > header {}
body > section{}
body > footer{}
就是这样！body>header就是特指这个header,而在页面内部section或者article出现的其他<header>标签都不在选择范围，由于在一个html(5)文档中，<body>标签是唯一的，所以他们的意思就是选择body下的(第一级)子元素：header,section,footer. 这样我们就可以在html5文档里面省去为这3个元素添加class(类)或者id(名)了，html(5)文档看起来也会更加干净整洁。
根据同样的方法，我们可以选择<header>标签内部的<nav>，以及<nav> 内部的每一条具体的导航栏目，给他们设置对应的样式。
不过由于在这个<header>内部只有唯一的一个<nav>，所以我们也可以省略">"，因为有时候太多">"(子选择器)看起来也是烦人的(就像我平常自己工作中一样)。
所以我们 对照上面的html结构，可以这样写导航的样式:
body> header{}
body> header h1{}
body> header em{}
body>header nav{}
body>header nav dl{}
body>header nav dl dt{} ( 或者:body>header nav dt{} )
body>header nav dl dd {} ( 或者:body>header nav dd {} )
如上小括内的，由于dt和dd都是nav下面唯一dl内部元素(即:没有另外一个并列的(样式不同的)dl定义列表)，所以可以省略了dl, css越过dl层级直接找到他们。
导航区域的样式关系理清之后，然后再写内容区域的，根据上文的html结构：
我们这样写css言样式的结构
body>section{}
body>section>section{} (指:id="work",id="catelog1",id="catelog2",id="catelog3")
body>section>section>section{} (指上面区域内部的子区域)
body>section>section>section>ul{}
body>section>section>section>ul li{}
body>section>section>section>ul li div{}
body>section>section>section>ul li div a{}
body>section>section>section>ul li div a figure{}
body>section>section>section>ul li div a figure img{}
body>section>section>section>ul li div a figure figcaption{}
在这里，前面几个section的关系必须非常清楚的确定他们有父子的关系，不然可能会出错，比如：
body section{}
body section section{}
body section section section{}
第一个section内部的属性(我说的属性就是样式)会延伸下去，第二个section会继承第一个section内部的属性( 除非相同的属性覆盖)，而第三个section又会从第一个和第二个两个里面都得到继承。
而后面的ul 以及内部的元素都是从第3个section(body>section>section>section>)开始之后唯一的，所以他们不会存在继承的关系，就没有其他相同元素可以相互影响了。
由于本案例html5结构的关系，我们可以这样首先确定每个相同层级的元素的样式。
说明：相同层级指在DOM结构中属于同一个层级，他们是树状的，DOM结构也像公司的员工职位结构。比如一个公司有2个部门：网络部，市场部。网络部又分为几个职位：网页设计，程序开发。假设市场部下面只有一个职位：销售。
那么在这个公司： 网页设计，程序开发和销售都是属于不同部门的相同级别。
同样，假设公司是<body>，那么老板就是<header>, 而网络部和市场部就是<section id="content">内部的两个同级区域<section id="dev">和<section id="sale">，而设计师和程序开发就是在<section id="dev">里面的元素，销售则是<section id="sale">里面的元素。虽然不在同一个<section>(部门)，但是他们所处的位置相同。
在css中也是这样，所以我们用上面那些关系先写出这些相同层级(不同区域)的样式，这些样式会赋给所有同级的元素。 然后我们可以根据每个id(名)写每个区域内特有的样式。这样，就不会相互串门，相互影响了。
同样页脚的部分就可以这样写：
body>footer {}
body>footer p{} (这是唯一的p,所以可以省略">"子选择器符号)
body>footer nav{}
body>footer ul{}
body>footer li{}
body>footer a{}
body>footer nav a{}
不过在这里，基本上只说了css子选择器" > "的用法，以及css书写的结构。好了，有点累了，下次再写。
