资讯专栏INFORMATION COLUMN

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

wemall / 1423人阅读

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

笔记说明
重学前端是程劭非(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 相对地址提供一个基础。

    
        
    
    
        极客时间
    

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

五、meta 标签
meta 标签是一组键值对,它是一种通用的元信息表示标签。
5.1、具有 charset 属性的 meta
HTML5开始 meta标签新增 charset 属性的 meta 标签无需再有 name 和 content

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


    
        
……
5.2、具有 http-equiv 属性的 meta
具有 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/55035.html

相关文章

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

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

    gaomysion 评论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元查看
<