摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。
笔记说明
重学前端是程劭非(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 的 metawidth:页面宽度,可以取值具体的数字,也可以是 device-width,表示跟设备宽度相等。
height:页面高度,可以取值具体的数字,也可以是 device-height,表示跟设备高度相等。
initial-scale:初始缩放比例
minimum-scale:最小缩放比例
maximum-scale:最大缩放比例
user-scalable:是否允许用户缩放
做好了移动端适配的网页,应该把用户缩放功能禁止掉,宽度设为设备宽度
5.4、其它预定义的 metaapplication-name:如果页面是 Web application,用这个标签表示应用名称。
author: 页面作者
description:页面描述,用于搜索引擎或者其它场合
generator: 生成页面所使用的工具,主要用于可视化编辑器,如果是手写 HTML 的网页,不需要加这个 meta
keywords: 页面关键字,对于 SEO 场景非常关键
referrer: 跳转策略,是一种安全考量
theme-color: 页面风格颜色,实际并不会影响页面,但是浏览器可能据此调整页面之外的 UI(如窗口边框或者 tab 的颜色)
补充:
个人总结
关于这一块在业务中确实关注比较少,base标签也是看了winter这篇文章才知道的,加油加油才行。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/55035.html
摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...
摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...
摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...
摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...
阅读 764·2023-04-25 22:57
阅读 2988·2021-11-23 10:03
阅读 562·2021-11-22 15:24
阅读 3094·2021-11-02 14:47
阅读 2858·2021-09-10 11:23
阅读 3034·2021-09-06 15:00
阅读 3876·2019-08-30 15:56
阅读 3276·2019-08-30 15:52