Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<head>标签里有什么? #3

Open
bitqiang opened this issue Apr 16, 2019 · 0 comments
Open

<head>标签里有什么? #3

bitqiang opened this issue Apr 16, 2019 · 0 comments

Comments

@bitqiang
Copy link
Owner

bitqiang commented Apr 16, 2019 •
edited
Loading

主要包含了页面是元数据

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

title和h1的区别：

h1 会加载显示在页面中

title 是用来表示整个html文档大致内容的元数据

元数据 <meta>

在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属 性来定义。name 表示元信息的名，content 则用于表示元信息的值。

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— 元素。

  • charset 指定了文档的字符编码
    <meta charset="utf-8">
  • name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。<meta name="author" content="Chris Mills">
  • content 指定了实际的元数据内容。
  • description也被使用在搜索引擎显示的结果页中
<meta name="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标签对viewport进行控制

一个典型的针对移动端优化的站点包含类似下面的内容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

viewport主要有以下属性

属性 说明
width 页面具体宽度，可以取具体数值
height 页面高度，可以取值具体的数字
initial-scale 初始缩放比例。
minimum-scale 最小缩放比例
maximum-scale 最大缩放比例
user-scalable 是否允许用户缩放

自定义图标

  • 将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

添加css和JavaScript

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

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

其他meta

  • application-name:如果页面是 Web application，用这个标签表示应用名称。
  • author: 页面作者。
  • description:页面描述，这个属性可能被用于搜索引擎或者其它场合。
  • generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网 页，不需要加这个 meta。
  • keywords: 页面关键字，对于 SEO 场景非常关键。
  • referrer: 跳转策略，是一种安全考量。
  • theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外 的UI(如窗口边框或者 tab 的颜色)。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@bitqiang