Skip to main content

head标签里面有什么？

head标签​

<head>
  <meta charset="utf-8">
  <title>我的测试页面</title>
</head>

head标签的内容不会在浏览器中显示，它的作用是保存页面的一些元数据(meta)。

页面标题​

<head>
  <title>页面标题</title>
</head>
title与h1的区别

`title`：用来表示 整个HTML文档 的标题，范围是：整个文档

`h1`：用来标记 页面内容 的标题，范围是：body区域

元数据meta​

设置文档的字符编码​

用于解决文档字符乱码

<meta charset="utf-8">

添加作者和描述​

使用<meta>的name和content属性

tip

name 指定meta元素的类型，说明该元素包含了什么类型的信息 content 指定实际的元数据内容

<meta name="author" content="leon">
<meta name="description" content="leon的技术文章">

企业自定义的描述​

The Open Graph protocol​

<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

自定义站点图标​

<link rel="icon" href="favicon.ico" type="image/x-icon">

引入CSS和JavaScript资源​

引入CSS​

<link rel="stylesheet" href="my-css-file.css">

引入JavaScript​

JavaScript不一定要在head中引入，看项目需要

<script src="my-js-file.js"></script>

文档设置主语言​

<html lang="zh-CN">

参考​

Last updated on