HTML 头部
<head>
的内容不会在浏览器中显示,它的作用是包含一些页面的元数据。- 元数据 (Metadata): 描述数据的数据 (a set of data that describes and gives information about other data)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饥人谷前端</title>
</head>
<head>
是用来表示整个HTML文档大致内容的元数据(不是文档的内容)
元数据 <meta>
指定文档编码
<meta charset="utf-8">
告诉浏览器当前页面的内容使用的是utf-8编码,浏览器需要使用utf-8来解码,否则对于中文等特殊符号会出现乱码。
关于编码和乱码,可参考这篇文章。
适配移动页面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
告诉浏览器,当前页面要适配移动端,关于viewport的介绍,可参阅这篇文章。后续课程会继续深入讲解。
定制页面图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
设置 referer
<meta name="referrer" content="never">
添加页面描述
<meta name="description" content="饥人谷,专业有爱的前端培训机构">
<meta name="keyword" content="饥人谷 前端 Java"
便于搜索引擎检索。
应用 CSS 和 JS
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>