更多2019年的技术文章,欢迎关注我的微信公众号:码不停蹄的小鼠松(微信号:busy_squirrel),也可扫下方二维码关注获取最新文章哦~
1、link标签
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
……
</head>
link标签支持所有的浏览器,定义了内部文档与外部资源的关系,通常情况下都是对外部资源的应用。并且只能出现在<head> </head>标签中,可出现多次。
说明:href表示被引用的资源链接;rel表示本文档和被引用文档之间的关系,rel=“stylesheet”表示被引用的文档是一个样式表。
eg: 登录jsp页面的<head>标签部分
<head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width,innitial-scale=1">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/EVM/bootstrap/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="/EVM/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href = "/EVM/img/sac_logo_small.jpg" rel="Shortcut Icon"> <!-- 页面的地址栏上面,页面标题旁的小图标 -->
<title>登陆</title>
</head>
在这里要提出的,是上段代码中的倒第三行:
<link href = "/EVM/img/sac_logo_small.jpg" rel="Shortcut Icon"> <!-- 页面的地址栏上面,页面标题旁的小图标 -->
很多人可能都注意过,当自己把网站收藏时,收藏夹中的该条记录前面会有个小图标,当你再次点击后,打开的页面前面还是有该图标,我称其为网站的标志:
eg:
标签前面会有个,若把该<link>标签行加入<head> </head>中,就可起到这种效果。至于rel里面填写的是什么倒不重要了,只要href把图片引过来就可以。
2、meta标签
<meta>也是<head>中经常要用到的标签。
定义:<meta>提供了本页面的元信息(类似于元数据,描述数据的数据),描述本页面的信息。
meta有两个属性:1、name; 2、http-equiv。下面分别介绍一下两个属性。
<1>name
格式:<meta name = "参数" content = "参数">
eg:
<meta name="viewport" content="width=device-width,innitial-scale=1">
name有如下几种参数值:
A.keywords(关键字):用来告诉搜索引擎,本网页的搜索关键字是什么。
举例:
<meta name ="keywords" content="science, education,culture,politics,ecnomics">
B.description(描述):说明本网页的主要内容是什么。
举例:
<meta name = "description" content = "This is sss's blog, welcome to everybody!">
C.robot(机器人向导):用来告诉搜索机器人,哪些页面需要索引,哪些不需要索引。
举例:
<meta name = "robot" content = "none">
这里的content有几个固定的参数可选:all, none, index, noindex, follow, nofollow,默认的是all。
D.author(作者):标注网页的作者。
举例:
<meta name = "author" content = "SSS">
<2> http-equiv
定义:相当于网页的文件头作用,向浏览器返回一些有用的信息,帮助浏览器正确的定位网页内容。
格式:<meta http-equiv = "参数" content = "参数值">
eg:
<head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width,innitial-scale=1">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/EVM/bootstrap/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="/EVM/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href = "/EVM/img/sac_logo_small.jpg" rel="Icon"> <!-- 页面的地址栏上面,页面标题旁的小图标 -->
<title>登陆</title>
</head>
http-equiv有几种类型的参数:
A. Expires(期限):设定网页到期的时间,一旦网页上的时间到期,就需要浏览器重新向服务器重新传输,获取网页内容。
举例:
<meta http-equiv = "expires" content = "Fri, 12 Jan 2001 18:18:18 GMT" >
注意:时间必须要用GMT的时间格式
B. Pragma(cache模式):禁止浏览器从本地缓存中访问网页内容。
举例:
<meta http-equiv = "Pragma" content = "no-cache" >
注意:如果这样设定,则用户无法脱机访问。
C. Refresh(刷新):自动刷新并指向新页面。
举例:
<meta http-equiv = "Refresh" content = "2; url = http://baidu.com" >
注意:content中的2表示浏览器在本页面暂停2秒后转向URL指向的地址。
D. Set-Cookie(cookie设定):如果网页过期,那么存盘的cookie将被删除。
举例:
<meta http-equiv = "Set-Cookie" content = "cookievalue = xxx; expires = Friday, 12-Dec-2014 :19:59:59 GMT; path = /" >
注意:时间要是GMT格式。
E. Window-target(窗口设定):强制页面在当前窗口以独立页面显示。
举例:
<meta http-equiv = "Window-target" content = "_top" >
用途:防止别人在框架里调用自己的页面。
F. content-type(字符集的设定):设定页面使用的字符集。
举例:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
下面综述meta标签的功能:
1、帮助页面给各搜索引擎搜索
meta很重要的一个功能就是设置关键字,用来帮助各大搜索引擎来搜索到你的网页。其中,最主要的就是keywords和description两个关键字。因为按照搜索引擎的工作原理,显示派出搜索机器人查看网页中meta里面的keywords和description关键字中的content,然后将内容保存在自己的数据库中,然后再根据关键字的密度进行排序,从而显示出网页。因此,设置好关键字,可以提高网站的点击率。
下面给出一些例子:
<meta name = "keywords" content = "政治,经济,文化,情感,生活,心灵,娱乐,电影,社会,金融,交通" >
<meta name = "description" content = "政治,经济,文化,情感,生活,心灵,娱乐,电影,社会,金融,交通" >
网页里设置好这些关键字后,搜索引擎就可以自动搜索这些content,然后将结果放在自己的数据库中,再根据密度进行排序。
2、定义页面使用的语言
这是meta最常见的功能。起到定义该网页的语言类型。当浏览器访问该网站时,浏览器会自动将网页中的内容设置到你网页中设定的语言类型,比如utf-8,如果浏览器并没有安装utf-8码,那就网页就会呈现该浏览器默认的网页语言编码。同样的,如果网页是英文类型的,那么就可以设定charset = en。
<meta http-equiv = "content-Type" content = "type = "text/html; charset = gb2312" >
注意:改代码就表示将网页的语言设置成国标码。
3、自动刷新并指向指定页面
meta的这个功能就可以实现在无人干预的情况下,在本网页停留N秒之后,转向新网页。格式上面的refresh类型已给出。
4、实现网页转换时的动画效果
这个代码我还没有用过,功能是:在进入网页或者离开网页的一刹那实现动画效果。
代码如下:
<meta http-equiv = "Page-Enter" content = "revealTrans(duration=5.0, transition=20)" >
离开网页时的动画效果:
<meta http-equiv = "Page-Exit" content = "revealTrans(duration=5.0, transition=20)" >
一旦上述代码被加进<head> </head>中后,我们再进入或者离开网页,都会看到动画效果。
注意:所加的网页不能是一个frame页。
5、网页定级评价
6、控制页面缓冲
meta标签可以设置网页到期的时间(expires),到期后,页面会重新向服务器提交请求,重新刷新页面。
7、控制显示窗口
<meta http-equiv = "Window-target" content = "_top" >
在<head> </head>中加入以上代码,可以防止页面被其他页面当做一个frame调用。
其他提到的功能都是上面http-equiv的几个关键字中提到的,入refresh,cache,expires等。
3、bootstrap3中的页面背景设置
这是在优化登录界面的时候碰到的难题。后来在网上看到了别人的一个样例,就是讲如何使得背景图片充满整个屏幕,
事例代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>窗口背景变化</title>
<style type="text/css">
*{margin:0;padding:0;}
#bg{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
</head>
<body>
<div id="bg"><img src=" http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
window.onresize = window.onload = function(){
var w,h
if(!!(window.attachEvent && !window.opera))
{
h = document.documentElement.clientHeight;
w = document.documentElement.clientWidth;
}else{
h = window.innerHeight;
w = window.innerWidth;
}
document.getElementById('msg').value ='窗口大小:' + 'width:' + w + '; height:'+h;
var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
bgImg.width = (w - 5);
bgImg.height= (h-5) ;
}
</script>
</body>
</html>
另外在我的另外一篇博文中也提到了这个问题,点击这里查看;
我这里要说的是另外一种方式,这种方式也是我在别的网页源代码里看到的,网址是http://job.bootcss.com/。该网站也是用bootstrap写的界面,其中的一个界面显示效果如下:
有热气球的那部分,涉及的源码如下:
<header id="top-header" class="top-header jumbotron" style="background-image: url(/assets/img/ballon.jpg);">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h1>招聘/求职</h1>
<p class="lead">好工作都在这里啦!</p>
</div>
<div class="features media">
<h5 class="media-left">快捷入口:</h5>
<div class="media-body">
<p class="coms">
<a target="_blank" href="http://company.liepin.com/1072424?mscid=b_o_0001" class="label label-default label-ali" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '阿里'])">阿里</a>
<!-- <a href="/company/腾讯" class="label label-default label-tencent" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '腾讯'])">腾讯</a> -->
<a target="_blank" href="http://company.liepin.com/884492?mscid=b_o_0001" class="label label-default label-baidu" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '百度'])">百度</a>
<a target="_blank" href="http://company.liepin.com/3264402?mscid=b_o_0001" class="label label-default label-sina" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '金山'])">金山</a>
<a target="_blank" href="http://company.liepin.com/856639?mscid=b_o_0001" class="label label-default label-sohu" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '迅雷'])">迅雷</a>
<a target="_blank" href="http://company.liepin.com/6429309?mscid=b_o_0001" class="label label-default label-360" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '360'])">360</a>
<!-- <a href="/company/小米" class="label label-default label-xiaomi" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '小米'])">小米</a> -->
<a target="_blank" href="http://company.liepin.com/947003?mscid=b_o_0001" class="label label-default label-lenovo" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '畅游'])">畅游</a>
</p>
<p class="salary">
<a href="/salary/10" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '10万起'])">10万起</a>
<a href="/salary/20" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '20万起'])">20万起</a>
<a href="/salary/30" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '30万起'])">30万起</a>
<a href="/salary/50" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '50万起'])">50万起</a>
<a href="/salary/土豪" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '土豪'])">土豪</a>
</p>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="activities-wrap">
<div class="activities">
<h2>猎聘送“金卡” <i class="fa fa-star"></i></h2>
<p>完善简历,抽“金卡”,高薪工作送到家!!高薪工作不要错过啦</p>
<p class="text-center">
<a class="btn btn-default btn-sm" href="http://wenda.bootcss.com/question/70" target="_blank" onclick="_hmt.push(['_trackEvent', '活动', 'click', '活动详情'])">活动详情</a>
<a class="btn btn-default btn-sm" href="http://www.liepin.com/event/landingpage/itweb.shtml?mscid=b_o_0002" target="_blank" onclick="_hmt.push(['_trackEvent', '活动', 'click', '完善简历'])">完善简历</a>
</p>
</div>
</div>
</div>
</div>
</div>
</header>
这里要指出的是,热气球作为了背景,且在前端界面是无法进行“复制图片”或者“图片另存为”的,这正好是我之前一直没有解决的问题,所以,我将上面代码中的这一句:
<header id="top-header" class="top-header jumbotron" style="background-image: url(/assets/img/ballon.jpg);">
加入我的代码中,
<header id="top-header" class="top-header jumbotron span10 offset1" style="background-image: url(/EVM/img/sac_jietu5.jpg);">
<div class="row-fluid">
<div class = "span4 offset2 text-right">
<img src="/EVM/img/sac_jietu11.jpg" class = "img-rounded">
</div>
<br>
<div class="span4 text-left" style = "background-color:silver; border:1px solid red">
<br> <br>
<form class="form-horizontal" method="post" action="/EVM/userAction"
id="loginForm">
<div class="control-group span2 offset5">
<h2>登录</h2>
</div>
<br> <br> <br> <br> <br> <br>
<div class="control-group">
<label class="control-label" for="inputEmail">用户名</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="邮箱"
name="inputEmail" title="请输入登录邮箱">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">密码</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password"
name="inputPassword" required="required">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox"> <input type="checkbox">
保存
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
<input type="hidden" name="method" value="login">
</form>
</div>
</div>
</header>
这里的界面效果展示如下:
其中,登录表单和图片左右的部分就是设置的背景图片,本来图片很小:
由此可见,<header ……>中的代码是将该图片多次覆盖而形成上面界面中的效果。这可能是另外的一种使图片占满div或者全屏的方式。
疑惑:如果图片足够大,是不是还会出现多张图片拼凑而成的界面?因为网站http://job.bootcss.com/中的气球图片是没有显示完全的,即整个区域只显示了一部分,所以不会出现多张图片拼凑的情况,针对这一疑惑,可能以后会给出答案,现在还是处于学习中~后续会继续更新
更多2019年的技术文章,欢迎关注我的微信公众号:码不停蹄的小鼠松(微信号:busy_squirrel),也可扫下方二维码关注获取最新文章哦~