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

2024年1月24日 210次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞