以前也看过一些html5网站，也曾下载过html5源码研究过，因为不经常用，对html5也一知半解，理解的非常片面。
这两天也看了一些html5的相关文档，重新梳理了下html5的知识结构。
首先说下我以前对html5的理解：
1.用新标签，例如<header></header><nav></nav><article></article><section></section>构建的网站。
2.响应式网站，兼容pc，ipad,手机端，相当于写了三套模板。
3 css3动画。
4.调用字体，以及小图标。
以前我觉得以上四点已经是html5的所有，现在才发现这只是html5的冰山一角，这只是html5最初级的知识，就算是最基础的我后来也慢慢忘了，现在来重新梳理一遍，这篇文章就只写初级部分吧。
针对于1：以前做前端写静态页面，一直用的是div+css的方式实现的。后来因为了解到html5增加了一些新标签，就以为html5网站就必须用新标签去写才算html5网站。我这个想法是大大的错误，最正确的方式应该是：基础结构可以用一些新标签去构建，但是内容部分仍用div去写。
<body>
<header></header>
<nav></nav>
<article>
<div class="main">
<div class="con"></div>
<div class="con sb"></div>
</div>
</article>
<footer></footer>
<body>
针对于2：响应式网站如何实现。简单点来说其实就是一个网站写了三个模板，分别对应于pc端，ipad,手机浏览器。同样的html我们要用到三套css去实现三个模板，实现方法就是用到@media screen and（宽度尺寸）{}，根据不同的宽度尺寸去判断编写对应的css，举例如下：
@charset "utf-8";
*{padding:0px; margin:0px;}
body{font-size:14px; font-family:"微软雅黑";background:#f5f5f5;}
/*html5*/
ul,li,dd,dl{list-style:none;}
a{color:#333; text-decoration:none;}
a:hover{color:#69F;}
header{height:80px;background-color:#0FF;}
nav{height:50px;background-color:#39F;}
article{height:auto;}
.con{height:200px;background-color:#9C6;margin-top:15px;}
footer{height:100px;background-color:#666;margin-top:20px;}
.main{width:1200px;margin:0px auto;height:auto;}
/*手机浏览器: w < 768px*/
@media screen and (max-width: 768px){
.main{width:100%;height:auto;overflow:hidden;}
.main .con{width:45%;height:100px;margin-right:10%;float:left;}
.sb{margin-right:0%!important;}
}
/* pad: w >= 768 && w< 992 */
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{ width:750px; background-color: blue; }
}
/*中等屏幕 w >= 992 && w<1200 */
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{ width:970px; background-color: pink; }
}
网友评论