HTML头部相关知识
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>
