重学前端学习笔记（十六）--HTML元信息类标签

时间 2019-12-06

标签前端学习笔记十六 html 信息标签栏目 HTML 繁體版

原文原文链接

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，天天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的能够加入winter的专栏学习【原文有winter的语音】，若有侵权请联系我，邮箱：kaimo313@foxmail.com。

1、什么是元信息类标签

元信息，是指描述自身的信息。 元信息类标签，就是 HTML 用于描述文档自身的一类标签。

2、head 标签

做为盛放其它语义类标签的容器使用。

2.一、注意

一、head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，而且最多只能包含一个 base。html

二、若是文档做为 iframe，或者有其余方式指定了文档标题时，能够容许不包含 title 标签。前端

3、title 标签

title 标签表示文档的标题， title 应该完整地归纳整个网页内容的。

4、base 标签

base 标签做用是给页面上 全部的 URL 相对地址提供一个基础。

<html>
    <head>
        <base href="https://time.geekbang.org" target="_blank"/>
    </head>
    <body>
        <a href="">极客时间</a>
    </body>
</html>

上面的代码里面a标签的属性href没有值，可是当你点击极客时间，它就会新开一个页面打开base标签里的href。web

5、meta 标签

meta 标签是一组键值对，它是一种通用的元信息表示标签。

5.一、具备 charset 属性的 meta

HTML5开始 meta标签新增 charset 属性的 meta 标签无需再有 name 和 content。

charset 型 meta 标签很是关键，它描述了 HTML 文档自身的编码形式。建议放在 head 的第一个。chrome

<html>
    <head>
        <meta charset="UTF-8">
……

5.二、具备 http-equiv 属性的 meta

具备 http-equiv 属性的 meta 标签，表示执行一个命令，能够不须要 name 属性。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

其余命令：浏览器

content-language：指定内容的语言
default-style：指定默认样式表
refresh：刷新
set-cookie：模拟 http 头 set-cookie，设置 cookie
x-ua-compatible：模拟 http 头 x-ua-compatible，声明 ua 兼容性
content-security-policy：模拟 http 头 content-security-policy，声明内容安全策略

5.三、name 为 viewport 的 meta

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

width：页面宽度，能够取值具体的数字，也能够是 device-width，表示跟设备宽度相等。
height：页面高度，能够取值具体的数字，也能够是 device-height，表示跟设备高度相等。
initial-scale：初始缩放比例
minimum-scale：最小缩放比例
maximum-scale：最大缩放比例
user-scalable：是否容许用户缩放

作好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度安全

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

5.四、其它预约义的 meta

application-name：若是页面是 Web application，用这个标签表示应用名称。cookie

author: 页面做者
description：页面描述，用于搜索引擎或者其它场合
generator: 生成页面所使用的工具，主要用于可视化编辑器，若是是手写 HTML 的网页，不须要加这个 meta
keywords: 页面关键字，对于 SEO 场景很是关键
referrer: 跳转策略，是一种安全考量
theme-color: 页面风格颜色，实际并不会影响页面，可是浏览器可能据此调整页面以外的 UI（如窗口边框或者 tab 的颜色）

补充：app

<head>
    <!-- 默认使用最新浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 不被网页(加速)转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">

    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow">

    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- 设置苹果工具栏颜色 -->
    <meta  name="apple-mobile-web-app-status-bar-style" content="black-translucent">

</head>

我的总结

关于这一块在业务中确实关注比较少，base标签也是看了winter这篇文章才知道的，加油加油才行。。。编辑器