HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。这里整理了一份 部分的清单，让大家了解每个标签及相应属性的意义，写出满足自己需求的 头部标签，可以很有效的增强页面的可用性。

HTML基本的头部标签

<!doctype html>

    <html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <!--移动端的页面这个可以忽略，具体可以查看本文Internet Explorer浏览器部分-->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--具体可以查看本文 为移动设备添加 viewport 部分-->

        <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->

        <title>页面标题</title>

        ...

    </head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面，具体可以查看本文Internet Explorer浏览器部分。

如果你的页面确定只在桌面浏览器中运行，那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype，不区分大小写。

　<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

charset

声明文档使用的字符编码，

    <meta charset="utf-8">

html5 之前网页中会这样写：

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

这两个是等效的，具体可移步阅读：vs，所以建议使用较短的，易于记忆。

lang属性

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文

    <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

繁体中文

    <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

    <p lang="zh-cmn-Hans">

    <strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。

    </p>

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”

移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  3. 移动前端不得不了解的HTML5 head 头标签（2016最新版）

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  4. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  5. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  6. 移动前端不得不了解的HTML5 head 头标签（首篇）

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  7. 移动前端不得不了解的HTML5 head 头标签（中上篇）

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  8. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  9. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

随机推荐

  1. jquery.eraser制作擦涂效果

    jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...

  2. Linux命令实战（四）

    1.Linux上的文件管理类命令都有哪些,其常用的使用方法及相关示例演示. 文件或目录的新建 touch :将每个文件的访问时间和修改时间修改为当前时间.若文件不存在将会创建为空文件,除非使用-c或- ...

  3. 【自然语言处理】利用LDA对希拉里邮件进行主题分析

    首先是读取数据集,并将csv中ExtractedBodyText为空的给去除掉 import pandas as pd import re import os dir_path=os.path.dir ...

  4. Jenkins 与Docker/Kubernetes的自动化CI流水（笔记）

    一.CI/CD 持续集成(continuous Integration,CI):代码合并.构建.部署.测试都在一起.不断执行这个过程,并对结果反馈. 持续部署(Continuous Deploymen ...

  5. node真的是单线程模式吗

    提到node,我们就可以立刻想到单线程.异步IO.事件驱动等字眼.首先要明确的是node真的是单线程的吗,如果是单线程的,那么异步IO,以及定时事件(setTimeout.setInterval等)又 ...

  6. java编程思想第四版第十四章 类型信息总结

    1. Class 对象: 所有的类都是在对其第一次使用的时候,动态加载到JVM中的.当程序创建第一个对类的静态成员的引用时,就会加载这个类.这说明构造器也是类的静态方法.即使在构造器之前并没有stat ...

  7. pat 1041 Be Unique（20 分）

    1041 Be Unique(20 分) Being unique is so important to people on Mars that even their lottery is desig ...

  8. bat脚本知识总结

    1常用基本命令 1.1 @ 它的作用是让执行窗口中不显示它后面这一行的命令本身 1.2 echo 它其实是一个开关命令,就是说它只有两种状态:打开和关闭.于是就有了echo on 和echo off两 ...

  9. mysql5.7下载与安装

    一.完全卸载旧版mysql 参考文章:https://blog.csdn.net/hui1setouxiang/article/details/89816176 二.win10中下载安装mysql5. ...

  10. 纯css实现tab导航

    仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...