HTML原创教程(结构篇)上

想试着说清楚我理解的html代码，希望有所助人，打算从两个方面去看，一是网页的结构层级、二是网页的样式和修饰，结构＋修饰＝网页。

一、前戏，给自己加个戏

我是一个ui设计师，行业背景是彩票，不定时就会进行活动营销，所以运营和产品对h5活动需求很大，当初进公司的时候特意想招会写点前端代码的设计师，所以没想到学到的代码在这里用上了。

基本流程图：

二、结构、掌握排版

如图，做完设计效果图就可以开始写代码了，一般排版都离不开上下左右的结构，那么就从这里开始

看上图，一个网页的结构拆分就是如此了

那么就开始看第一部分666红包来袭大banner，这种banner是全屏而且与背景颜色一致－绿色，看下图

这样1号编序就写完了，可以开始写内容啦，希望有人能坚持到这里，应该并不难

目前为止结构就是这么简单，用相同的思路写接下来的

不错感觉左右挺对齐的，不知不觉已经吧结构写完了，没多少行，我自问自答一些问题看有没有帮助

1、怎么感觉所有代码都在一起写着？

因为这是一个整体，如果下面的效果完全不同上面，比如上面是绿色背景，下面变成白色背景了，那就不会写在bigbox里了；

代码参考：

<div class=”bigbox”>

内容

</div>

<div class=”bigbox_2”>

内容

</div>

这就是可以包含完全不同的内容，也是同级别的意思、平等的意思，像是最终代码中<img>和<shen>是同级关系，<shen>和<qian>就说父子级关系，<shen>是父

2、img里面的src是个啥？

src是把图片引入就像class命名一样

3、<qian>里面写了很多内容呀。

没错，因为基本内容都在这里，往外的父级大多数是颜色背景的设置

其实这个最终的结构就是下图，对照一下，他们的层级是怎么样的

这次写到结构、下次写css修饰样式，对结构有什么疑惑可以留言私信，看完还没看懂的话，可以在看一遍，配合纸和笔画一画就会了解结构了，之后有时间会在写两三个例子网页，这样就基本没什么问题了，后续可以加入响应式、javas cript效果

学会或者了解html的代码我觉得需要两个要素，就像网页是由结构和修饰组成，学习需要谦虚和毅力，以为我会说努力和好学对不对，放低心态、坚持不懈加油！