下面是HTML基本的头部元素
html 代码:
<!doctype html>
<html>
<head>
< charset="utf-8">
< http-equiv="x-ua-compatible" content="ie=edge">
<!--移动端的页面这个可以忽略，具体可以查看本文Internet Explorer浏览器部分-->
< name="viewport" content="width=device-width, initial-scale=1">
<!--具体可以查看本文 为移动设备添加 viewport 部分-->
<!-- 以上 3 个 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
< >页面标题</ >
...
</head>
html 代码:
< http-equiv="x-ua-compatible" content="ie=edge">
在桌面开发的时候可以让IE浏览器以最新的模式渲染页面，具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行，那么
html 代码:
< name="viewport" content="width=device-width, initial-scale=1">
也可以省略。
DOCTYPE
DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
使用 HTML5 doctype，不区分大小写。
html 代码:
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
charset
声明文档使用的字符编码，
html 代码:
< charset="utf-8">
html5 之前网页中会这样写：
html 代码:
< http-equiv="Content-Type" content="text/html; charset=utf-8">
这两个是等效的，具体可移步阅读：< charset='utf-8'> vs < http-equiv='Content-Type'>，所以建议使用较短的，易于记忆。
lang属性
简体中文
html 代码:
<html> <!-- 更加标准的 lang 属性写法 -->
繁体中文
html 代码:
<html> <!-- 更加标准的 lang 属性写法 -->
很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：
html 代码:
<p>
<strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</strong>。
</p>
为什么 而不是我们通常写的 呢，请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。
标签 标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 < > 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的 标签可以大大提升网站页面的可用性。
桌面端开发中， 标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。
移动端开发中， 标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。
标签分类 标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。
http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。
推荐使用的 标签 html 代码:
<!-- 设置文档的字符编码 -->
< charset="utf-8">
< http-equiv="x-ua-compatible" content="ie=edge">
< name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 个 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
<!-- 允许控制资源的过度加载 -->
< http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 尽早地放置在文档中 -->
<!-- 仅应用于该标签下的内容 -->
<!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）-->
< name="application-name" content="应用名称">
<!-- 针对页面的简短描述（限制 150 字符）-->
<!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 -->
< name="de ion" content="一个页面描述">
<!-- 控制搜索引擎的抓取和索引行为 -->
< name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
< name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
<!-- 告诉 Google 不显示网站链接的搜索框 -->
< name="google" content="nosite ssearchbox">
<!-- 告诉 Google 不提供此页面的翻译 -->
< name="google" content="notranslate">
<!-- 验证 Google 搜索控制台的所有权 -->
< name="google-site-verification" content="verification_token">
<!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）-->
< name="generator" content="program">
<!-- 关于你的网站主题的简短描述 -->
< name="subject" content="你的网站主题">
<!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。-->
< name="abstract" content="">
<!-- 完整的域名或网址 -->
< name="url" content="https://example.com/">
< name="directory" content="submission">
<!-- 基于网站内容给出一般的年龄分级 -->
< name="rating" content="General">
<!-- 允许控制 referrer 信息如何传递 -->
< name="referrer" content="never">
<!-- 禁用自动检测和格式化可能的电话号码 -->
< name="format-detection" content="telephone=no">
<!-- 通过设置为 “off” 完全退出 DNS 预取 -->
< http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->
< http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要显示在一个特定框架中的页面 -->
< http-equiv="Window-Target" content="_value">
<!-- 地理标签 -->
< name="ICBM" content="latitude, longitude">
< name="geo.position" content="latitude;longitude">
<!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
< name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
< name="geo.placename" content="city/town">
如果对你有帮助，麻烦点一下赞，并关注一下深正互联，也可以推荐身边爱前端的伙伴关注本部落，大家一起学习和成长！！！
猜你喜欢
联络方式：
深圳 · 龙岗 · 大运软件小镇22栋201
电话：400 182 8580
邮箱：szhulian@qq.com
