引言
作为一名web开发人员，前端知识是必不可少的，页面布局，浏览器兼容性，js，jQuery，异步调用及CSS样式等等。现在最流行的h5,懂得h5之后，PC端和移动端都轻松搞定，音频视频处理等等，比之前的h4方便很多，速度和性能提高很多。
之前一直做后端，前端的知识接触的比较少，虽然有时候都是模块开发，前端和后台都要设计，但是那些对前端要求不高的。最近做一个智慧城市项目，客户对前端要求很多的，自己这次把自己安排到主要进行前端设计这一块，很久没有写前端东西了，突然感觉生疏了。通过这个项目，又从新开始拿起来我的前端的知识，在开发过程中遇到了很多问题，虽然都是基础性的问题，但是这些也是大家最常见的一些问题。也许大家都觉得简单，就不记住了，都是用的时候去查，但是这样浪费浪费时间的。工作之余整理了一下这几天遇到的一些问题，都是一些简单的前端问题，越是简单的东西越是容易被大家忽略的，空闲整理一下记录下来。
一、页面自动刷新
1、在HTML头地方添加<meta http-equiv="refresh" content="5"> 这样一行代码，页面就会定时刷新。content是设置多长时间刷新一次
2、在页面中使用js设置一个时间间隔，调用刷新函数refresh。 setInterval("refresh();", 5000); --5秒刷新一次
二、背景图随着屏幕变化而变化
通过CSS设置：
body {
background:url('img/index/bk.jpg') no-repeat;
background-size:100% 100%;
background-position:center center;
background-size:cover;
background-attachment:fixed;
}
三、页面滚动字幕
<div id="main" style="500px;height:500px;border:1px solid;">
<div id="d1"><marquee scrollamount=2; style="100%;">向左滚动</marquee></div>
<div id="d2"><marquee scrollamount=2 style="100%;"><a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d3"><marquee scrollamount=2 style="100%;" onmouseover=stop() onmouseout=start()>鼠标放在文字上停止滚动</marquee></div>
<div id="d4"><marquee scrollamount=2 style="100%;" behavior=alternate>来回移动</marquee></div>
<div id="d5"><marquee scrollamount=2 style="100%;height:200px;" direction=up>·上下滚动<br>·调用了JavaScript代码<br>·可以点击链接<p>·<a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d6"><marquee scrollamount=2 style="100%;"><a style="color:#CC6600">颜色设置</a></marquee></div>
</div>
四、视频控件video
autoplay:false 如果出现该属性，则视频在就绪后马上播放。
controls="controls" 如果出现该属性，则向用户显示控件，比如播放按钮。
loop:如果出现该属性，则当媒介文件完成播放后再次开始播放。
View Code五、canvas 元素用于在网页上绘制图形
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面是使用canvas的demo：
View Code六、消息弹出框，在右边底部显
Message.js代码:
View Code下面是demo：
View Code七、Div的布局设计
View Code运行效果：这里的背景设置的全屏的，还有div使用百分比，无论屏幕大小多少，分辨率多少，怎么缩放，布局不会改变，位置不会被移动，永远全屏显示。
