今天分享一些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{width: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="data:images/menu_topimg.gif" /></td>

	</tr>

	<tr>

		<th background="images/menu_bg.gif" height="27">网站管理菜单</th>

	</tr>

	<tr>

		<td><img src="data: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="data:images/menu_bottomimg.gif" /></td>

	</tr>

</table>

</body>

</html>

												


											
HTML+CSS中的一些小知识的更多相关文章
	

    
								
  1. 关于css中选择器的小归纳（一）
		
    关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...
    
		
    2. 
						
  2. CSS中的一下小技巧2之CSS3动画勾选运用
		
    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
    
		
    3. 
						
  3. Xcode 中关于"#"的小知识
		
    在代码中使用Autolayout时,大家都会使用NSDictionaryOfVariableBindings这个宏,这个宏可以生成一个变量名到变量值映射的Dictionary.比如NSDictiona ...
    
		
    4. 
						
  4. python中的一些小知识
		
    在最近学习python中遇到的一些小问题汇总一下: 1.在windows7下安装python3.5版本时提示安装不了,缺少ServicePack1.  解决办法是,打开控制面板\系统和安全\Windo ...
    
		
    5. 
						
  5. CSS中的一下小技巧1之CSS3三角形运用
		
    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
    
		
    6. 
						
  6. C语言中重要的小知识汇总
		
    用于整理记录一些C语言下的小知识点: 1. 在C语言中,怎么查看一个数据类型占用了多少个字节大小呢? 可以使用sizeof(int)/sizeof(double)等来查看某数据类型到底用了几个字节:  ...
    
		
    7. 
						
  7. 精通CSS version2笔记2.小知识
		
    添加背景:background-img:url(URL)+属性; 圆角框:选择器{border-radius:单位;}创建X单位的圆角框在元素周围 投影:box-shadow:垂直和水平偏移.投影的宽 ...
    
		
    8. 
						
  8. Android中的一些小知识
		
    android中开发常用快捷键alt+/ 自动补全ctrl+1 有问题提示生成接收的参数 ctrl+L 在按2 注释// 注释 ctrl+//**/ 多行注释 ctrl+shift+/ android ...
    
		
    9. 
						
  9. ASCLL码中的一些小知识
		
    其次要记住asill值中   65是A      97是a A与a之间相隔32,用int转换后再用char转换回来. char b = s.charAt(i);为字符串转换成一个一个的.
    
		
    10. 
		

	


随机推荐
	

    
									
  1. AngularJS2
			
    //package.json 用来标记本项目所需的npm依赖包{ "name": "angular-quickstart", "version&quo ...
    
			
    2. 
						
  2. Linux安装卸载Mysql数据库
			
    关于mysql数据库在Linux下的应用一直以来都是我认为比较棘手的,这次通过搭建Linux学习环境顺便研究和学习Mysql数据库在Linux下安装和卸载. 1.先来看看卸载吧,如下图所示: 以上的命 ...
    
			
    3. 
						
  3. 如何把Qlik Sense嵌入到Web应用中
			
    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这是一个给初学者(尤其对VS不熟悉的BI工程师)的入门操作向导. Qlik Sense是 ...
    
			
    4. 
						
  4. CentOS Linux服务器安全设置
			
    转自:http://www.osyunwei.com/archives/754.html 引言: 我们必须明白:最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关 ...
    
			
    5. 
						
  5. maven权威指南学习笔记（二）——安装、运行、获取帮助
			
    这部分在网上很容易找到详细教程,这里就略写了. 基础:系统有配置好的jdk,通过 命令行 java -version,有类似下面的提示,表示java环境以配好 下载maven:官网 http://ma ...
    
			
    6. 
						
  6. Oracle的tnsnames.ora配置(PLSQL Developer)
			
    首先打开tnsnames.ora的存放目录,一般为D:\app\Administrator\product\11.2.0\client_1\network\admin,就看安装具体位置了. 步骤阅读  ...
    
			
    7. 
						
  7. iOS设计模式
			
    一.代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现. 优势:解耦合 敏捷原则:开放-封闭原则 实例:tableview的 数据源delegate,通过和pro ...
    
			
    8. 
						
  8. dedecms为文档页增加动态点击
			
    加上 <script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field name='id' ...
    
			
    9. 
						
  9. myeclipse 无法启动
			
    1.对项目中的一个文件重新命名,导致卡死,结束myeclipse进程不管用,重启不管用. 删除工程下的文件  以  .markers.snap 和  marker开头的两个文件   位置: 工作空间\ ...
    
			
    10. 
						
  10. 如何让TortoiseSVN导出新增或修改过的文件
			
    利用Windows系统下的TortoiseSVN客户端,可以导出指定版本之间修改过的文件,并保留完整的文件夹结构.下面我就来说说操作的步骤: 1.在网站项目的根目录下右键选择 “TortoiseSVN ...
    
			
    11.