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

栏目: Html · 发布时间: 7年前

内容简介：重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，作为盛放其它语义类标签的容器使用。

笔记说明

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

一、什么是元信息类标签

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

二、head 标签

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

2.1、注意

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

2、如果文档作为 iframe ，或者有其他方式指定了文档标题时，可以允许不包含 title 标签 。

三、title 标签

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

四、base 标签

base 标签 作用是给页面上 所有的 URL 相对地址提供一个基础。

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

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

五、meta 标签

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

5.1、具有 charset 属性的 meta

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

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

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

5.2、具有 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.3、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.4、其它预定义的 meta

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

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

补充：

<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这篇文章才知道的，加油加油才行。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Programming Collective Intelligence

Toby Segaran / O'Reilly Media / 2007-8-26 / USD 39.99

Want to tap the power behind search rankings, product recommendations, social bookmarking, and online matchmaking? This fascinating book demonstrates how you can build Web 2.0 applications to mine the......一起来看看《Programming Collective Intelligence》这本书的介绍吧!

码农工具