重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32889 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

HTML元信息类标签:你知道head里一共能写哪几种标签吗?

winter 2019-02-21
你好,我是 winter。
我们在前面的 HTML 部分的课程中,已经学习了语义标签。这些标签涵盖了我们日常开发用到的多数标签,也是我们编写代码时最常用的一批标签。
但是我们今天要讲的标签,重要性丝毫不弱于语义类标签,这就是页面元信息类标签。
我们可以先来了解一下什么是元信息类标签。所谓元信息,是指描述自身的信息,元信息类标签,就是 HTML 用于描述文档自身的一类标签,它们通常出现在 head 标签中,一般都不会在页面被显示出来(与此相对,其它标签,如语义类标签,描述的是业务)。
元信息多数情况下是给浏览器、搜索引擎等机器阅读的,有时候这些信息会在页面之外显示给用户,有时候则不会。
元信息类标签数量不多,我在这里就逐一为你介绍一下。

head 标签

首先我们先来了解一下 head 标签,head 标签本身并不携带任何信息,它主要是作为盛放其它语义类标签的容器使用。
head 标签规定了自身必须是 html 标签中的第一个标签,它的内容必须包含一个 title,并且最多只能包含一个 base。如果文档作为 iframe,或者有其他方式指定了文档标题时,可以允许不包含 title 标签。

title 标签

title 标签表示文档的标题,从字面上就非常容易理解。这里我就讲讲需要注意的地方。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(16)

  • 火云邪神0007
    老师,我家的猫不让我给他剪指甲,怎么办?

    作者回复: 有三个思路,可供参考:
    1. 带去宠物医院剪
    2. 拿毛巾包上或者装进袋子里强行剪
    3. 忍着,被主子抓几道是一种赏赐

    2019-02-23
    1
    130
  • AICC
    <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">
    <!-- 设置苹果工具栏颜色 -->

    作者回复: 赞

    2019-02-21
    84
  • CC
    阅读完今天的文章,才感觉自己其实不懂 meta,之前对 meta 的细节缺少分类和整理。感谢老师。

    回到老师的问题,我平时还见过以下三种(组)标签:

    1. Open Graph 的标签组,包括 title, type, URL, site_name, description 和 image,是为 Facebook 分享提供信息;

    2. Twitter 的标签组,包括 card, title, description 和 image,是为 Twitter 分享提供信息;

    3. msapplication 的标签组,包括 TileColor 和 TileImage,是为 Windows 8 以及以上系统识别 favicons 用的。

    作者回复: 赞 这部分我也不了解 推荐给大家。

    2019-02-21
    1
    19
  • 丘丘
    上面评论中的
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 设置苹果工具栏颜色 -->
    这两条,我试着似乎没有效果。
    keywords这个属性,理论上对seo有作用,但是我随便进行了搜索,打开排名第一页的几个网站,都没有这么属性,是不是现在这种简单的seo打法已经被放弃了呢?
    2019-03-24
    1
    8
  • LiH
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    关闭iOS上的内容识别
    2019-03-01
    7
  • MarlboroKay
    meta基本用法:
      <meta name=application-name content="lsForums">
    name = application-name 是不是少了 “”
    name = "applicaiton-name" ?

    作者回复: 属性可以不写引号 不过确实写了更好

    2019-02-21
    6
  • 码屁
    @丘丘 你难道忘了 竞价排名[滑稽]
    2019-05-15
    4
  • Alen
    http://www.alenqi.site/2018/03/04/complete-tags/ 之前总结的
    2019-05-08
    3
  • July
    老师好,keywords 现在对seo还有用吗?
    2019-02-28
    2
  • 靠人品去赢
    突然想问一下,老是本尊是不是一个猫奴啊,感觉很喜欢那猫举例子做封面什么的。

    编辑回复: 是的呀 养了三只呢

    2019-02-21
    2
  • 阿成
    常见的还有
    format-detection 禁止 iPhone 的自动识别

    作者回复: 赞。

    2019-02-21
    2
  • 渴望做梦
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    对于多核浏览器,控制浏览器以哪种类型内核来显示,好像是 360 浏览器首先主导的
    2019-07-08
    1
  • 周姑娘
    为什么我有的看不懂,不知道怎么学习
    2019-04-03
    1
  • 有铭
    我是说为什么viewport在html标准里找不到,一直很疑惑是从哪里蹦出来的,搞了半天原来不是html标准是行业约定

    作者回复: 是的 但是这个东西太重要了 比标准上的很多细节都重要得多。

    2019-02-23
    1
  • Geek_fc1551
    老是通常我们用的比较多的时哪些,给个模板贴了就能的,必不可少的
    2019-12-04
  • Geek_fc1551
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
      <!-- 添加到主屏后的标题 -->
      <meta name="apple-mobile-web-app-title" content="标题" />
      <!-- 忽略数字自动识别为电话号码 -->
      <meta content="telephone=no" name="format-detection" />
      <!-- 忽略识别邮箱 -->
      <meta content="email=no" name="format-detection" />
      <meta name="apple-itunes-app" content="app-id=myAppStoreID,
    affiliate-data=myAffiliateData, app-argument=myURL" />
    2019-12-04
收起评论
16
返回
顶部