今天分享一些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. libsvm下的windows版本中的工具的使用
			
    下载的libsvm包里面已经为我们编译好了(windows).进入libsvm\windows,可以看到这几个exe文件: a.svm-toy.exe:图形界面,可以自己画点,产生数据等. b.svm ...
    
			
    2. 
						
  2. phpcms v9 中的数据库操作函数
			
    1.查询 $this->select($where = '', $data = '*', $limit = '', $order = '', $group = '', $key='')   返回 ...
    
			
    3. 
						
  3. Linux IPTABLES端口转发
			
    之前在Linux上用普通用户部署了一个Tomcat,然后将其server.xml中的端口配置为80端口,用普通用户运行就提示绑定端口失败(permission denied),google了一下,原来 ...
    
			
    4. 
						
  4. 【leetcode】House Robber
			
    题目简述 You are a professional robber planning to rob houses along a street. Each house has a certain a ...
    
			
    5. 
						
  5. EXT.NET 使用总结（3）--动态图表
			
    动态生成雷达图--Radar 效果图: aspx页面代码: <ext:Panel ID="ResultPanel" Border="true" runat ...
    
			
    6. 
						
  6. 学习微信小程序之css9内边距
			
    padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
    
			
    7. 
						
  7. Service and controller in angularJs
			
    Separation of concern is at the heart while designing an AngularJS application. Your controller must ...
    
			
    8. 
						
  8. Delphi的三目运算 ifthen 和iif
			
    system.Math和system.StrUtils都有IfThen方法, 返回字符串和 返回 数值型 system.Math.IfThen(vehicle.MILE=0,0,StrToFloat( ...
    
			
    9. 
						
  9. 使用echarts开发电子屏数据展示页面
			
    背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
    
			
    10. 
						
  10. 对《分享一下自己用c++写的小地图》一文的补充
			
    在写完上一篇文章后,发现了一个问题: 那就是编写的插件无法实时预览. 在学习了Slate之后,我找到了方法: 重写SynchronizeProperties函数 头文件中添加: #if WITH_ED ...
    
			
    11.