跳到主要内容

文档头部

head 元素承载什么内容？​

  • 定位: 网页头部, 存放元数据与资源引用;
  • 表现: 内容不渲染在页面上;
  • 常见子元素: title、meta、link、script;
<head>
  <meta charset="utf-8" />
  <title>My test page</title>
</head>

title 元素的作用是什么？​

  • 作用: 声明网页标题;
  • 位置: 放在 head 内;
  • 边界: 一个文档只写一个;
<title>My test page</title>

meta 元素可以声明哪些元数据？​

用途写法
文档编码<meta charset="utf-8" />
作者信息<meta name="author" content="Chris Mills" />
网页描述<meta name="description" content="..." />
视口与响应式<meta name="viewport" content="..." />
  • 两种形式: charset 直接声明文档编码; name + content 声明键值型元数据;
  • viewport 的具体取值见 响应式设计;
<meta charset="utf-8" />
<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide complete beginners to the Web with all they need to know."
/>
  • 图标: rel="icon" + href 指向站点图标;
  • 样式: rel="stylesheet" + href 指向 CSS 文件;
  • 属性分工见 src 与 href 的区别;
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="my-css-file.css" />

如何引用外部脚本而不阻塞解析？​

  • 写法: 用 script 标签的 src 引用, 加 defer 延迟执行;
  • 效果: 文档解析完成后再执行脚本;
  • 注意: 脚本由 script 标签引用, 不是 link;
<script src="my-js-file.js" defer></script>