今天分享一些HTML、CSS的小知识，希望能够对大家有所帮助！
1.解决网页乱码的问题：最重要的是要保证各个环节的字符编码一致！
（1）编辑器的编辑环境的字符集（默认字符集）：Crtl+U
常见的编码 GB2312(简体) 、GBK（简体）、BIG5(繁体)、UTF-8(多国语言编码)
（2）<meta>标记的字符集设定与编辑环境的字符集一致
字符集设置：<meta http-equiv="content-type" content="text/html; charset=utf-8">
（3）PHP的字符集设置
（4）MySQL的字符集设置
注意：不需要考虑浏览器的字符集，任何软件的默认字符编码都是ANSI编码，ANSI在中国，对应的具体的编码是GBK或GB2312。
2.CSS兼容性的问题
不兼容性：因为不同的浏览器厂商，对CSS的解析不一样，造成了同一个网页，在不同的浏览器下浏览的结果相差太多，这种现象叫“不兼容”。解决“不兼容”的办法，就是兼容性的调整。
解决不兼容性，大致三种方法：
（1） 常用的全局CSS属性设置
（2） 常用的兼容性设置
（3） CSS HACK
第一种：常用的全局CSS属性设置
（1）清除所有的标记的内外边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}
（2）项目符号
ul,ol,li{list-style:none;}
（3）全局字体颜色设置
body{font-size:12px;color:#444;}
（4）常用标题的设置
h1,h2,h3,h4,h5,h6{font-size:100%}
h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}
h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }
h3{font-size:12px}
h4{font-size:12px;font-weight:normal}
（5）全局链接
a{text-decoration:none;cursor:pointer}
a:link, a:visited {color:#004276}
a:hover{text-decoration:underline;color:#ba2636}
（6）图片
img{border:none;}
（7）浮动和清除
.float1{float:left;}
.float2{float:right}
.clear{clear:both;}
.blank10{height:10px;clear:both;}
（8）颜色
.red{color:#FF0000;}
.blue{color:#0000FF;}
.green{color:#00ff00;}
第二种：常用的兼容性设置
IETEST软件：可以测试IE6、IE7
（1）网页居中
IE5下的居中，应该是：text-align:center
Firefox下的居中，应该是：margin:0px auto;
body{font-size:12px;color:#444;background:url(../images/bg-body.gif) repeat-x #f1f1f1;text-align:center;}
.box{973px;margin:0px auto;text-align:left;}
（2）单行内容垂直中齐
Div{height:80px;line-height:80px;}
（3）IE中元素浮动时，margin左右加倍的问题
解决办法：Display:inline;
（4）实现1px高度的<div>
在IE6下解决办法：overflow:hidden; //超出1px外的部分全部隐藏掉
第三种：CSS HACK简介
CSS HACK，针对不同浏览器，编辑不同的CSS代码的过程，就叫CSS HACK。
（1）CSS属性的HACK：
div{
background-color：#FF0000; //所有浏览器都支持
*background-color：#00FF00; //ie6和IE7支持
_background-color：#0000FF; //IE6认识
}
（2）CSS选择器的HACK(了解一下)
IE7浏览器能识别
*+html div{
}
*html div{
Background-color:#FF0000;
}
注意：CSS HACK虽然可能解决一些浏览器兼容的问题，但毕竟不是W3C的规范，因此尽量少用，如果实在调试不过去，偶尔用一下可以。
3.锚点链接：实现在一个网页的不同部分进行跳转
第一步：先定义一个锚点(记号)（一般直接写在<body>后面）
<a name="top" id="top"></a> 中间一般不写内容
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
第二步：链接到定义的锚点所在的位置
<a href="#top">返回顶部</a>
地址栏中的地址显示：http://www.sina.com.cn/about/index.html#top
4.<meta>
（1）<meta>标记的概念
<meta>标记提供一些元信息，比如：关键字、描述信息、作者、网页刷新、网页过期期限、网页字符集等
（2）<meta>的两个属性
http-equiv：相当于http的文件头信息，告诉浏览器如何正确的显示网页的内容。
name：描述信息，指定网页关键字、网页描述、作者、版权信息
（3）常用的<meta>设置
设置网页的字符集：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页
延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />
设置网页的关键字：<meta name=“keywords” content=“网站建设,商丘平原街道办事处网站,网站开发” />
网页描述：<meta name=“description” content=“描述信息” />（描述信息不超过100个字）
网站作者：<meta name=“author” content=“商丘平原街道办” />
5.框架技术
框架主要应用于：电子书、帮助手册、企业网站的后台管理等。
框架技术，对于低版本的浏览器一般不支持，IE浏览器支持最好，Firefox浏览支持不太好。
网站前后一般不用框架实现，网站后台一般用框架实现。
框架技术：它就是将一个浏览器窗口划分成不同的小窗口，每个小窗口都显示不同的HTML网页。
一个框架由：框架集(<frameset>)和框架页(<frame>)构成。
注意事项：<frameset>和<body>只能二选一。
<frameset>的常用属性
Cols：划分列的框架，如：cols=“180,10,*”左180px，中间10px，右边为自动
Cols=“20%,10%,*”可以使用百分比表示
Rows：划分行的框架，如：rows=“180,*”
Frameborder：是否显示框架边线，取值：yes或no
Border：设置框线的粗细，border=“20”
Bordercolor：设置框线的颜色
<frame>的常用属性
Src：引入一个HTML文件进来，在指定的一个小窗口中显示；
Scrolling：设置滚动条如何显示，取值：auto、yes、no
Noresize：不能调整框架的尺寸；
Name：设置当前窗口(框架)的名称；
注意：框架中需要注意的是：一是左框架的链接内容，如何在主框架显示？
如果返回框架首页，取决于<a>标记的 target属性的设置！
具体使用方法如下：
index.html中的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
</head>
<frameset rows="64,*" frameborder="0">
<frame src="top.html" noresize="noresize" scrolling="no" />
<!--框架套框架-->
<frameset cols="182,*" frameborder="0">
<frame src="left.html" noresize="noresize" />
<frame src="main.html" name="mainFrame" />
</frameset>
</frameset>
</html>
left.html中的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
</style>
</head>
<body bgcolor="#cccccc">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/menu_topimg.gif" /></td>
</tr>
<tr>
<th background="images/menu_bg.gif" height="27">网站管理菜单</th>
</tr>
<tr>
<td><img src="images/menu_topline.gif" /></td>
</tr>
<tr align="center">
<td background="images/menu_bg.gif" height="27"><a href="news.html" target="mainFrame">新闻动态</a></td>
</tr>
<tr align="center">
<td background="images/menu_bg.gif" height="27"><a href="introduce.html" target="mainFrame">公司介绍</a></td>
</tr>
<tr align="center">
<td background="images/menu_bg.gif" height="27"><a href="index.html" target="_parent">后台首页</a></td>
</tr>
<tr>
<td><img src="images/menu_bottomimg.gif" /></td>
</tr>
</table>
</body>
</html>