一．归类合并
在前几节课中，有一部分 HTML 代码比较松散，没有统一到一个类别块里。比如：很多的标签超链接没有归类到 UL 里，导致一些问题等。
//松散的标签曼谷(12)东京(5)西双版纳(8)...
这样写使用多个标签有什么问题？具体如下：
1.从语义不明确，如果外部包含 UL 可以理解为标签列表；
2.从 CSS 布局排版上，UL 作为一个整体，更容易统一排版； 3.从 SEO 角度考虑，大量 a 标签有可能会被判定堆积关键字嫌疑，从而导致网站降权，
用 UL 包含判断则让搜索引擎判定为有条例的列表，对搜索引擎更加友好。
//改成这种形式
//重新改写的 CSS#container .tag { text-align: center; padding: 10px 0;}#container .tag li { display: inline-block; background-color: #eee; width: 100px; height: 35px; line-height:35px; text-indent:8px; text-align: left; margin:2px 0;}#container .tag a { display: block; color: #999;}#container .tag a:hover { color: #fff; background-color: #458B00;} 同样，检查了首页，也有一个归类的问题，就是<figcaption>标签。字面上意思是表示图片的标题或简要信息。那我们设想一下，把除了标题和其他图片有关的简要信息都归于<figcaption>可以达到更好的排版效果。
//改写后的 HTML
<曼谷-芭提雅 6 日游> 包团特 惠，超丰富景点，升级 1 晚国五，无自费，更赠送 600 元/成人自费券 满意度 77% ¥ 2864 起国内长线
//CSS 部分#tour .info { padding: 5px0 0 0;} 二．子导航
旅游资讯在展示内容的上面，需要一个子导航块。
//HTML 部分
//CSS 部分#container .list { width: 910px; float: left;}#container .infor { height: 45px; line-height:45px; margin: 0 0 20px 0; background-color: #eee;}#container ul.left { display: inline-block; float: left;}#container ul.left li { width: 150px; height: 43px; line-height:43px; font-size: 18px; display: inline-block;}#container ul.left li a { display: block; text-align: center; color: #666;}#container ul.left li:first-child { background-color: #fff; border-top: 2px solid #458B00; position: relative; left: 1px;}#container ul.right { float: right; padding: 0 20px 0 0;}#container ul.right li { width: 60px; height: 45px; line-height:45px; font-size: 16px; display: inline-block; text-align: center;}#container ul.right li a { padding: 3px8px; color: #666;}#container ul.right li a.selected, #container ul.right li a:hover{ background-color: #458B00; color: #fff;}