HTML头部
- <head>标签中的内容不会在浏览器中显示,作用:包含一些页面的元数据
- 元数据:描述数据的数据
<head>
<meta charset="utf-8">
<title>第一篇博客</title>
</head>
元数据<meta>
有个好玩的例子:
<Meta http-equiv="Refresh"Content="3;Url=http://www.baidu.com">
提留三秒后,自动跳转到百度首页。
-
指定文档编码
<meta charset="utf-8">
-
适配移动页面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
具体解释可查看以下链接:
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
-
定制页面图标
有两种方法(详见 用link标签实现 shortcut icon(给网页标题前添加一个小图标favicon.ico):
-
<link rel="shortcut icon " type="images/x-icon" href="./favicon.ico">
其中favicon.ico需放在根目录下面(不提倡用这种方法,因为图片没有授权,违反了W3C标准) -
<link rel="shortcut icon " type="images/x-icon" href="http://www.jd.com/favicon.ico">
-
设置 referer
<meta name="referrer" content="never">
referrer就是来源、来路的意思
content有四個參數:
"never" "always" "origin" "default"
比如有A页面和B页面,A页面有一个链接链到了B页面,
A页面:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="always">
<title>a</title>
</head>
<body>
<a href="b.html">b</a>
</body>
</html>
B页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b</title>
</head>
<body>
<script>
console.log(document.referrer);
</script>
</body>
</html>
当A页面<meta name="referrer" content="always">
的值为always时,B页面能取得他从哪个页面来;
当A页面<meta name="referrer" content="never">
的值为never时,B页面无法取得他是从哪个页面来的,加载不出来。
(比如说百度贴吧有些图片设置了链接权限,不开放非相关网页)
-
添加页面描述
<meta name="description" content="文字描述内容">
-
应用 CSS 和 JS
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
网友评论