关于head标签的一些整理

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于head标签的一些整理相关的知识，希望对你有一定的参考价值。

自己关于html中head头部内的一些标签理解还是有一些乱，所以抽时间整理一下，方便以后查看。

DOCTYPE

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

声明DOCTYPE的目的有2个

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html>

meta

meta标签内可以设置页面的字符编码

<meta charset="utf-8">

然而在HTML5出现之前，字符编码是这么设置的。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

meta标签内还可以设置语言类型

许多同学都会这么写lang属性。

<html lang="zh-CN">

以我们经常写中文页面的情况来看，应该用下面的写法。

<html lang="zh-cmn-Hans"><!-- 简体中文 -->
<html lang="zh-cmn-Hant"><!-- 繁体中文 -->

meta标签可以让一些浏览器以特定的内核渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

这样会让浏览器优先使用ie最新版本和chrome。

国内一些双核浏览器默认都是以ie内核的，可以通过设置meta让其默认用chrome内核。

<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

meta标签设置页面关键词

<meta name="keywords" content="your keywords">

meta标签设置页面描述

<meta name="description" content="页面描述">

meta标签设置页面作者

<meta name="author" content="作者信息">

viewport

现在手机web盛行，传统的pc页面在手机上的显示并不是非常理想，可以通过设置viewport来着手。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

以上属性，光看名字就能猜到大概了。主要是告诉浏览器，宽度设置为设备宽度。同时禁用页面缩放。

关于设备宽度，像素比，请看这里：设备像素比devicePixelRatio简单介绍

link

link标签除了可以引入css样式文件意外，还可以设置页面的ico文件。

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

以上是普通页面的一些常用的head内的标签使用。关于移动web的整理另外开一篇。

以上是关于关于head标签的一些整理的主要内容，如果未能解决你的问题，请参考以下文章