标签里有什么?

时间 2019-12-04

标签标签什么繁體版

原文原文链接

主要包含了页面是元数据css

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>
复制代码

title和h1的区别：

h1 会加载显示在页面中html

title 是用来表示整个html文档大体内容的元数据浏览器

元数据 `<meta>`

在 head 中能够出现任意多个 meta 标签。通常的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。安全

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

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主要有如下属性ide

属性	说明
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 的颜色)。