资讯专栏INFORMATION COLUMN

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

gaomysion / 1549人阅读

摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。

笔记说明

</>复制代码

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

</>复制代码

  1. 元信息,是指描述自身的信息。元信息类标签,就是 HTML 用于描述文档自身的一类标签。
二、head 标签

</>复制代码

  1. 作为盛放其它语义类标签的容器使用。
2.1、注意

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

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

三、title 标签

</>复制代码

  1. title 标签表示文档的标题,title 应该完整地概括整个网页内容的。
四、base 标签

</>复制代码

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

</>复制代码

  1. 极客时间

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

五、meta 标签

</>复制代码

  1. meta 标签是一组键值对,它是一种通用的元信息表示标签。
5.1、具有 charset 属性的 meta

</>复制代码

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

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

</>复制代码

  1. ……
5.2、具有 http-equiv 属性的 meta

</>复制代码

  1. 具有 http-equiv 属性的 meta 标签,表示执行一个命令,可以不需要 name 属性。

</>复制代码

其他命令:

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

</>复制代码

width:页面宽度,可以取值具体的数字,也可以是 device-width,表示跟设备宽度相等。

height:页面高度,可以取值具体的数字,也可以是 device-height,表示跟设备高度相等。

initial-scale:初始缩放比例

minimum-scale:最小缩放比例

maximum-scale:最大缩放比例

user-scalable:是否允许用户缩放

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

</>复制代码

5.4、其它预定义的 meta

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

author: 页面作者

description:页面描述,用于搜索引擎或者其它场合

generator: 生成页面所使用的工具,主要用于可视化编辑器,如果是手写 HTML 的网页,不需要加这个 meta

keywords: 页面关键字,对于 SEO 场景非常关键

referrer: 跳转策略,是一种安全考量

theme-color: 页面风格颜色,实际并不会影响页面,但是浏览器可能据此调整页面之外的 UI(如窗口边框或者 tab 的颜色)

补充:

</>复制代码

个人总结

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109509.html

相关文章

  • 重学前端学习笔记十六)--HTML信息标签

    摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

    wemall 评论0 收藏0
  • 重学前端学习笔记十六)--HTML信息标签

    摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

    printempw 评论0 收藏0
  • 重学前端学习笔记(二十四)--HTML里的链接

    摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...

    April 评论0 收藏0
  • 重学前端学习笔记(二十四)--HTML里的链接

    摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...

    CastlePeaK 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<