html5的网页几本结构,HTML5培训轻松学会写网页结构与表现分离

原标题：HTML5培训轻松学会写网页结构与表现分离

我们的标题栏已经功德圆满了，下面我们就继续往下做广告栏。我们在正式做广告栏这部分之前，仍然先来分析，看看如何规划比较好。

对于广告栏的布局，每个人的想法可能都会有些不一样，但这里我们就用最朴素最简洁的方法。什么是最朴素最简洁的方法呢，我们就通过现象看本质。首先我们根据颜色判定广告栏的位置和大小，那这里肯定是需要一个div来进行划分区域了。然后我们看在这个div中都有哪些元素，我们打眼一看里面有四个元素第一个是最左边有很大的web这三个字母，这属于是一小段文字了，其实我们就可以使用span标签包裹起来。第二个是课后帮，这个我们把它当做是个整个网页的2级标题，所以我们可以使用h2标签包裹起来。第三个是以人为镜，可以明得失。

以代码为镜，可以通逻辑！ 这一段文字，我们采用p标签包裹起来。第四个也就是最后一个，看起来像是一个按钮，其实就是超链接，我们就使用学过的a标签包裹起来，然后在慢慢打磨。通过图片进行代码展示：当我们加上这几行代码之后，就产生了右侧图片的一个效果。

看起来虽然很丑，但是里面所包含的元素我们已经都做好了，剩下就是设置样式，调整格式了。我们仍然按照老套路，通过检查来设置样式，直到达到我们期望的效果，然后在把对应的代码搬至到sublime中，就大功告成了！

希望以上对你将要学习HTM5或即将从事HTML的你有所帮助!蓝鸥有着国内首家完整的移动web前端开发课程体系，高度专注移动端。蓝鸥HTML5培训开发项目全部来自于真实的企业项目，单独项目代码量超过 5 万行。为了让学员尽快的进入到企业开发的项目中，蓝鸥使用自主开发的产品和为客户定制的企业产品为案例，大批蓝鸥HTML5培训开发学员都从中收益。 我们是 一群热爱IT的年轻人，如果你也爱IT、爱HTML5开发，欢迎前来蓝鸥中心参观学习，让我们共同为梦想发声。返回搜狐，查看更多

责任编辑：