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

2024年5月30日 111次阅读 来源: 凯小默

笔记说明

重学前端是程劭非（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这篇文章才知道的，加油加油才行。。。

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019182500
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞