做问卷调查赚钱还得懂一些HTML+DIV+CSS基础

我们做问卷调查一般都是通过浏览器来做，可以把一页页的问卷理解为普通的网页，而网页一般都是由HTML+DIV+CSS+JS代码组成的，做问卷的过程中，遇到下面这些问题，怎么解决？

第1种情况：有份问卷调查里图片很多，而图片加载很慢，图片显示不完整调查就不能点下一步，怎么办？

第2种情况：有份问卷调查里图片很多，而图片加载很慢，我把图片禁用了，下一步按钮也不见了，怎么办？

第3种情况：有份问卷调查里图片很多，而图片加载很慢，我把图片禁用了，所有选项和下一步按钮都不见了，怎么办？

除了图片，还有视频，问卷中的视频无法加载且不看完不能点下一步怎么办？

如果你懂HTML，可以快速定位到相关代码，迅速解决问题。

以上这些其实都是网页方面的问题，很明显，现在做问卷不能只会单纯的做，其他相关的东西都得会点，如果你懂一些基础的HTML代码，那么上面这些问题都可以轻松解决。

下面列举部分HTML代码，想了解更多可以到w3school，网址：w3school.com.cn

最简单的网页结构应该是这样：

<!DOCTYPE html>

<html>

<head>

<title>乐呵赚</title>

</head>

<body>

</body>

</html>

<meta charset="utf-8" /> 对整个网页编码的定义，在body标签内出现的，就是网页的具体内容，较常见的html标签有下面这些：

1、div标签——主要用于网页结构的布局，一般采用id和class区分不同的div，例如定义一个网页的底部版权信息，可以写为：<div class="copy">乐呵赚 版权所有</div>

2、p标签——表示段落，比如博客简介的文字可以写为：<p>本站是乐呵赚（lehezhuan.com）的分站，为了单独记录国外调查方面的内容，所以建了此博客。</p>

3、h1--h6标签——标题标签，权重由h1到h6依次递减，h1具有唯一性，每个页面只出现一次，例如，可以将网页主标题放在h1里，副标题放在h2里，相关内容放在h3里，等等……

4、ul标签——表示列表，与li标签配合使用，例如：<ul><li>产品1</li><li>国外调查问卷网1</li><li>国外问卷调查网2</li></ul>

类似的还有有序列表ol，用法相似，一般网页的导航菜单就使用列表标签来实现……

5、img标签——图片表示，在网页中展示图片的时候用。如：<img src="images/1.jpg" alt="国外问卷网付款图" />

6、span标签——表示行内元素，比如：<p>联系电话：<span>88888888</span></p>文本中的某部分加上了span标签，便于在CSS中给它单独定义样式……

7、a标签——表示链接，例如：<a href="https://www.lehezhuan.com">乐呵赚</a>含义是给“乐呵赚”这几个字加上对应的链接。如果是给图片加上链接，则应当写为：<a href="lehezhuan.com"><img src="logo.jpg" alt="乐呵赚" /></a>

8、strong和em标签——表示强调，在文章中某个关键词或某句话比较重要，可以加上此标签，在没定义样式的情况下，一般强调的文本会显示粗体或斜体。

9、此外还有一些标签，如表格标签table，以及表示音频或视频的标签audio和video等等，在网页模板中用的较少的标签这里就不再赘述，将以上标签使用灵活的话，制作网页模板就基本够用了，其他的标签再慢慢研究就可以了。

关于CSS，也有很多定义各种样式的代码，下面列举部分。

1、background——表示背景，例如给名为top的p标签定义背景，我们可以写为：#top {background:#ccc;}这表示背景是浅灰色，如果要用图片作为背景，则应写作：#top {background: #00FF00 url(bg.png) no-repeat;}这里的no-repeat表示不重复显示背景，如果需要重复，则去掉该属性即可；

2、text-align——表示文本居左、居右和居中的设置，最常用的：p {text-align:center}意思就是将这段文本居中；

3、font——定义字体和字号，例如：#one {font:bold 12px/20px arial}

表示文字为粗体，12px大小，行间距为20px，字体为arial，如需单独定义字号和字体，则写为：font-size:14px;font-family:arial;

单独定义是否加粗，则使用：font-weight:bold;font-weight:normal

单独设置行间距，则使用：line-height:24px;line-height:150%;

4、padding和margin——分别定义内边距和外边距，例如：#two {padding:0 5px 0 6px;margin:10px;}表示two标签的内边距分别为0，5px，0，6px，四边外边据都为10px，当分别定义四边边距的时候，按照上、右、下、左的顺序，只定义两个数字，则表示上下，左右，只定义一个数字，则表示四边相同距离；

5、 border——表示边框，一般写为：#xxx {border:1px solid #eee}则表示边框宽度为1px，颜色为#eee，如果单独定义下边框，则写为border-bottom，其他四边亦然；

6、链接样式：我们可以分别定义链接文本的样式与鼠标指向链接时的样式，比如：a {text-decoration: none;color:red;}，a:hover {text-decoration: underline;color:blue;}

意思是链接文本不显示下划线，颜色为红色，当鼠标指向时显示下划线，并显示为蓝色。此外还有a:visited标签定义已经访问过的链接样式，可以自己试一下；

7、上述text-decoration定义文字是否加下划线，不一定针对链接使用，如果将给普通文本加下划线也是可以的，至于a:hover表示鼠标指向链接时的样式，同样的，也可以使用p:hover表示鼠标指向该段落时的样式；

8、height和width——表示高度和宽度，例如：img {height:50px;width:200px;}则定义了图片的宽和高，如果width:100%则表示宽度为整个屏幕的宽度；

9、float:left和float:right——常用来布局的浮动标签，它表示元素的流动方向，例如float:left表示向左浮动，下方的元素就会自动显示在右边；

10、display——定义元素的类型，最常用的display:none表示隐藏该元素，display:inline表示元素在行内显示，display:block表示元素以块状显示；

11、clear:both——表示清除浮动，不希望元素有浮动效果，则可以给元素加上此定义。

12、position:absolute和position:relative——表示绝对定位，通常是父级定义position:relative，子级定义position:absolute绝对定位属性，子级使用left或right和top或bottom进行绝对定位。对于初学者来说这个可能不易理解，暂时可以不作研究，并不是每个网页模板都会用到绝对定位。