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. Python语言基础04-函数和模块的使用

    本文收录在Python从入门到精通系列文章系列 在分享本章节的内容之前,先来研究一道数学题,请说出下面的方程有多少组正整数解. 事实上,上面的问题等同于将8个苹果分成四组每组至少一个苹果有多少种方案. ...

  2. python语言线程标准库threading.local源码解读

    本段源码可以学习的地方: 1. 考虑到效率问题,可以通过上下文的机制,在属性被访问的时候临时构建: 2. 可以重写一些魔术方法,比如 __new__ 方法,在调用 object.__new__(cls ...

  3. 过滤条件的时候用between和<>的区别

    无论是sqlsever还是oracle都支持between函数, 2个函数的基本语法是 WHERE A BETWEEN 1 AND 2/ WHERE A >=1 AND A <=2 ,be ...

  4. [LC]21题 Merge Two Sorted Lists （合并两个有序链表）（链表）

    ①英文题目 Merge two sorted linked lists and return it as a new list. The new list should be made by spli ...

  5. suseoj 1208: 排列问题 (STL， next_permutation(A.begin(), A.end()))

    1208: 排列问题 时间限制: 1 Sec  内存限制: 128 MB提交: 2  解决: 2[提交][状态][讨论版][命题人:liyuansong] 题目描述 全排列的生成就是对于给定的字符集或 ...

  6. 在开发框架中扩展微软企业库，支持使用ODP.NET（Oracle.ManagedDataAccess.dll）访问Oracle数据库

    在前面随笔<在代码生成工具Database2Sharp中使用ODP.NET(Oracle.ManagedDataAccess.dll)访问Oracle数据库,实现免安装Oracle客户端,兼容3 ...

  7. 力扣（LeetCode）翻转字符串里的单词 个人题解

    给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: "the sky is blue" 输出: "blue is sky the" 示例 2: 输 ...

  8. 【目标检测实战】目标检测实战之一--手把手教你LMDB格式数据集制作！

    文章目录 1 目标检测简介 2 lmdb数据制作 2.1 VOC数据制作 2.2 lmdb文件生成 lmdb格式的数据是在使用caffe进行目标检测或分类时,使用的一种数据格式.这里我主要以目标检测为 ...

  9. DDCTF2019 的四道题wp

    MIsc:流量分析 这道题,在比赛的时候就差个key了,但是没想到要改高度,后来群里师傅说了下,就再试试, 导出来改高度. 导出来,把 把%5c(4)前面的hex删掉,改成png,就直接拿去那个img ...

  10. APACHE HADOOP安装

    0.安装前准备 0.1 关闭防火墙 service iptables status service iptables stop 0.2 关闭Selinux 很多稀奇古怪的问题都是SELINUX导致的. ...