当前位置: 首页 > 前端笔记 > HTML > 一个常见的网页头部(HEAD部分)解析
2014年05八月

一个常见的网页头部(HEAD部分)解析

对于一个网页来说,head部分是最常见的内容,也是前端动手开始做网页的第一步。当我们用工具创建网页的时候,这个部分默认就输出了。但是有些时候你会觉得你忽略掉的东西往往也很重要。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

</body>
</html>

上面就是用DW创建静态页面,默认生成的代码。但是对于一个有节操的前端来说,这个是不能忍的。我只是一个一般有节操的,所以就按照下面的输出就行了。

<!doctype html>
<html>
<head>
<meta charset="utf-8"><!--这里是用来规定编码,这个非常重要,且必须在title之前。否者你会恨惊奇的发现乱码-->
<title>网页标题</title><!--这个不需要多说明,如果没有这个你会发现你的页面很挫,据说这个是SEO最重要的部分-->
<meta name="keywords" content="关键字">
<meta name="description" content="页面简介">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--翻译成中文不知道怎么说,大概就是保证当前页面采用浏览器最新的文档模式阅读,兼容模式什么的走远点-->
<link rel="shortcut icon" href="/favicon.ico"><!--ICON,打开百度在选项卡前面有个小图标,就是通过他来实现的-->
<link rel="stylesheet" href="style.css" media="all"><!--引入CSS文件-->
<link rel="alternate" type="application/rss+xml" href="rss.xml"><!--大概就是可以通过RSS来阅读网站,IE10里面有个订阅源-->
</head>
<body>
</body>
</html>

上面还少了JS的引入方法,好多教程都建议JS放到最下面,所以这里就不说。大概不说都知道。

还有几个不常用的属性,也一起备注下。

<meta name="robots" content="none">

一般来说,没啥好设置的。意思就是允许不允许蜘蛛抓你。content的参数有all,none,index,noindex,follow,nofollow,默认是all。各种参数是什么意思,可以自行百度谷歌兵。

<meta name="author" content"作者名字,作者邮箱">

作者信息。你用上了表示你很自恋。

<meta http-equiv="expires" content="Fri, 12 Jan 2014 18:18:18 GMT">

用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。必须使用GMT的时间格式。

<meta http-equiv="Pragma" content="no-cache">

这样设定,访问者将无法脱机浏览。

<meta http-equiv="Refresh" content="2; URL=http://www.estorm.cn">

停留2秒后自动刷新到URL网址。好像很流氓的样子。

<meta http-equiv="Set-Cookie" content="cookievalue=abc; expires=Friday, 12-Jan-2014 18:18:18 GMT; path=/">

如果网页过期,那么存盘的cookie将被删除。时间必须是GMT的时间格式。

<Base href="http://www.estorm.cn/" target="_blank">

这个玩意在特定的特定的条件下有用。比如说上面的代码的意思是:全站的链接地址前面都加上“http://www.estorm.cn/”域名,所有的链接都通过新窗口打开。

<link rel="stylesheet" href="style.css" media="all">

这里有个media的参数得说一下:规定被链接文档将被显示在什么设备上。
screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

文章信息

  • 发布日期:2014年08月05日 23:13:47
  • 固定地址:http://www.estorm.cn/notes/html/2014-08-05/html-head-meta-link.html