今天分享一些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中的一些小知识的更多相关文章
-
CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
-
Xcode 中关于";#";的小知识
在代码中使用Autolayout时,大家都会使用NSDictionaryOfVariableBindings这个宏,这个宏可以生成一个变量名到变量值映射的Dictionary.比如NSDictiona ...
-
python中的一些小知识
在最近学习python中遇到的一些小问题汇总一下: 1.在windows7下安装python3.5版本时提示安装不了,缺少ServicePack1. 解决办法是,打开控制面板\系统和安全\Windo ...
-
CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
-
C语言中重要的小知识汇总
用于整理记录一些C语言下的小知识点: 1. 在C语言中,怎么查看一个数据类型占用了多少个字节大小呢? 可以使用sizeof(int)/sizeof(double)等来查看某数据类型到底用了几个字节: ...
-
精通CSS version2笔记2.小知识
添加背景:background-img:url(URL)+属性; 圆角框:选择器{border-radius:单位;}创建X单位的圆角框在元素周围 投影:box-shadow:垂直和水平偏移.投影的宽 ...
-
Android中的一些小知识
android中开发常用快捷键alt+/ 自动补全ctrl+1 有问题提示生成接收的参数 ctrl+L 在按2 注释// 注释 ctrl+//**/ 多行注释 ctrl+shift+/ android ...
-
ASCLL码中的一些小知识
其次要记住asill值中 65是A 97是a A与a之间相隔32,用int转换后再用char转换回来. char b = s.charAt(i);为字符串转换成一个一个的.
-
mysql中权限的小知识
参考:https://www.cnblogs.com/apollo1616/articles/10294490.html mysql中user表中host列的值的意义 % 匹配所有主机 localho ...
随机推荐
-
Spark Shuffle原理、Shuffle操作问题解决和参数调优
摘要: 1 shuffle原理 1.1 mapreduce的shuffle原理 1.1.1 map task端操作 1.1.2 reduce task端操作 1.2 spark现在的SortShuff ...
-
关于在Xcode控制台打印的注意点
注意!!在控制台中打印语句的返回值,这句代码也算是被执行过了一次 比如在下列代码的if语句执行之前,现在控制台打印 [_dataBaseexecuteUpdate:createSql] 的布尔值 if ...
-
android studio中如何设置注释模板
在开发程序的时候,我们一般都会给文件自动添加上一些关于文件的注释信息,比如开发者的名字,开发的时间,开发者的联系方式等等.那么在android studio中该如何设置呢? 工具/原料 andro ...
-
Oracle 数据库中不同事务并发访问的问题
现象 以SQL/Helper为例,打开不同的SQL窗口,对同一个表格进行操作,如下所示. 窗口1:当执行更新任务.紧接着执行查询时获得一组查询结果.结果是对的. 窗口2:而在另外一个SQL查询窗口中执 ...
-
Android 设计模式之MVC模式
说到Android设计模式的MVC模式,估计很多人都是比较熟悉了,这里深入了解一下MVC到底是怎么回事,以ListView为例子讲解. 一.深入理解MVC概念 MVC即Model-View-Contr ...
-
在django admin中添加自定义视图
来自https://blog.csdn.net/qq_35753140/article/details/84881757 django admin提供了完善的用户管理和数据模型管理,方便实用.研究 ...
-
nginx+ flume
nginx 作用: 做负载均衡 nginx和lvs的区别:nginx可以做反向代理 1.上传nginx安装包 tar -zxvf tengine-2.1.02.安装环境 依赖 gcc opens ...
-
djangobb之debug-toolbar查看其sql
#djangobb之views show_forum(request, forum_id, full=True) default queries including duplicates ) Quer ...
-
Spring 是如何解析泛型 - ResolvalbeType
Spring 是如何解析泛型 - ResolvalbeType Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Java ...
-
css3学习笔记二
接着是对图形移动.旋转.倾斜.放缩的处理. -moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/ -moz-transfo ...