HTML头的那点小事

最新推荐文章于 2025-04-26 17:03:33 发布

ZzzMxin

最新推荐文章于 2025-04-26 17:03:33 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html head meta viewport doctype

本文链接：https://blog.youkuaiyun.com/qq_34178562/article/details/88129718

8 篇文章

订阅专栏

一句话说明，标准通用标记语言解析器（SGML），根据文档定义类型（DTD）来解析文档类型（DocType）。
文档类型分为一下几种：

模式	介绍
标准模式	HTML与CSS定义渲染，即我们常见的`<DOCTYPE html>`
怪异模式(quicks mode)	尝试模拟更久的浏览器行为
部分标准模式(almost mode)	表单元格尺寸的怪异行为

meta标签用于提供有关页面的元信息，不会像<body>中的元素显示在页面，但对于机器是可读的，毕竟包含在html文件中嘛。以名称/值的形式成对传递。

eg：<meta name="charset" content="UTF-8">
告诉浏览器，charset的值是UTF-8，即说明了页面的编码格式。

<meta>还有一个http-equiv，将键值对添加到服务器发送到浏览器内容的头部。
eg:<meta http-equiv="expires" content="31 Dec 2019">
在发送给浏览器内容的头部增加过期时间

<meta>还有其他常用的属性，比如keyword关键字，搜索引擎经常利用改关键字用于分类.

用途：设备适配。
介绍三个viewport：

`viewport`	说明
`layout viewport`	网页的默认窗口大小（不包括滚动条），即`document.documentElement.clientWidth`
`visual viewport`	浏览器可视区域大小（包括滚动条），即`window.innerWidth`
`ideal viewport`	完美适配设备的窗口大小

所谓适配设备，其实说白了就是使得 layout viewport = ideal viewport。实现如下：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

width可以理解为页面设计的宽度，即ideal viewport，initial-scale=1为初始缩放比例，两者同时存在的时候，取较大的那个。在这里两者的大小是一样的。也就达到了适配的效果。