12：head 头标签指南

常见头标签

DOCTYPE

文档模式

  1. 对文档进行有效性验证

    告诉用户代理或浏览器这个文档是按照什么DTD写的，但是这个动作是被动的，每次页面加载时，浏览器并不会下载DTD，并检查合法性，只有手动校验时才启用。

  2. 决定浏览器的呈现模式

    通知浏览器读取文档时用哪种解析算法，如果没有写，浏览器会按照自身的规则对代码进行解析，可能会严重影响html排版布局

浏览器的三种解析HTML文档的方式

  • 非怪异（标准）模式

  • 怪异模式

  • 部分怪异（近乎标准）模式

HTML5的文档模式写法

<!DOCTYPE html>

优点：写法简洁，向前向后兼容

使用 vscode 来进行编写的时候 可以使用快捷输入。 html:5 --->>> Enter

字符集

<meta charset="utf-8">

语言

简体中文

<html lang="zh-cmn-Hans"></html>

繁体中文

<html lang="zh-cmn-Hant"></html>

版本内核选择

优先使用IE最新版本和Chrome

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

360使用Google Chrome Frame，即极核速

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

<meta name="renderer" content="webkit">

SEO优化

title是SEO最重要的部分，尽量突出关键字

<title>title</title>

关键词

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

页面描述内容

<meta name="discription" content="your description">

网页作者

<meta name="author" content="author,email,address">

robots协议

  1. 定义网页搜索引擎的索引方式

  2. 取值：no,noindex,nofollow,all,index,follow

<meta name="robots" content="index,follow">

viewport

  1. 让布局在移动浏览器上显示得更好，是移动端开发的重要的头标签。

  2. content参数：

类型 作用 取值
height viewport高度 数值/device-height
initial-scale 初始缩放比例 数值：1
maximum-scale 最大缩放比例 数值
minimum-scale 最小缩放比例 数值
user-scalable 是否允许用户缩放 yes/no

常见设置

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

设置 minimal-ui，IOS 7新增属性，可以在页面加载时最小化上下状态栏

<meta name="viewport" content="width=device-width,user-scalable=no,minimal-ui">

适配 iphone6 和 iphone6 plus

  1. 大部分4.7~5寸的安卓设备的viewport宽为360px，iphone6 上却是375px

  2. 大部分5.5寸的安卓设备的viewport宽为400px，iphone6 plus却是414px

<meta name="viewport" content="width=375">

<meta name="viewport" content="width=414">

百度禁止转码

<meta http-equiv="Cache-Control" content="no-siteapp">

IOS设备

添加到主屏后的标题（IOS6 新增）

<meta name="apple-mobile-web-app-title" content="标题">

是否启用WebApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes">

设置状态栏的背景颜色，需启用WebApp的全屏模式

content参数

default：默认

black：黑色

black-translucent：黑色半透明


<meta name="apple-mobile-web-app-status-bar-style" content="black">

禁止数字自动识别为电话号码

<meta name="format-detection" content="telephone=no"/>

Github地址，欢迎 Star

《前端之路》之五 head 头标签指南的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 【转】你所不知道的HTML <head/> 头标签

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

  7. HTML head 头标签(转)

    HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...

  8. 前端基础-html 介绍和head标签 ( 1 )

    主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 写在前面: 前端               后端 C(client)        S ...

  9. [前端、HTTP协议、HTML标签]

    [前端.HTTP协议.HTML标签] 什么是前端 """ 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面 手机界面 平板界面 什么是后端 后端类似于幕后操 ...

随机推荐

  1. BZOJ_2795_[Poi2012]A Horrible Poem_hash+暴力

    Description 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节. 如果字符串B是字符串A的循环节,那么A可以由B重复若干次得到. Input 第一行一个正 ...

  2. 用Fundebug插件记录网络请求异常

    在服务端,不管我们使用Node.js.Java.PHP还是Python等等,都会用日志以文本的形式记录请求以及报错信息.这个对于后端做事后分析是很有用的. 另一方面,前端有时候出问题其实是因为后端接口 ...

  3. json与javabean之间的转化

    接着上一个http://www.cnblogs.com/ya-qiang/p/9009134.html随笔,继续介绍json与java对象之间的转化 一.java普通对象和json字符串的互转 jav ...

  4. python设计模式-观察者

    定义: 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖的对象都会得到通知并被自动更新. 观察者模式是对象的行为模式,又叫发布-订阅(pubish/subscribe)模式,模型 ...

  5. ie兼容问题记录

    工作中遇到的ie网站兼容性问题  头疼.......... 以下为从网上搜索学习的整理兼容性方法 用于自己记录 #兼容问题 ##css hack: https://blog.csdn.net/fres ...

  6. MIP 移动网页加速器视频教程全新发布

    MIP (Mobile Instant Pages - 移动网页加速器) 是百度推出的开源项目,用于移动端页面加速.MIP 技术通过优化浏览器资源加载,前端代码执行及 CDN 缓存加速来加速页面,打造 ...

  7. 【效率神奇】Github丧心病狂的9个狠招

    Github,一个被业内朋友成为「全球最大的同性交友社区」的平台. 小时候遇到不会的字可以查新华字典.后来写作文我们可以通过作文书.或者文摘去找合适的素材.同样,写代码可以去Github上找适合自己的 ...

  8. spring源码 — 五、事务

    spring提供了可配置.易扩展的事务处理框架,本文主要从一下几个方面说明spring事务的原理 基本概念 事务配置解析 事务处理过程 基本概念 事务隔离级别 在同时进行多个事务的时候,可能会出现脏读 ...

  9. java监听器简述

    监听器的概念 所谓监听器就是对内置对象的状态或者属性变化进行监听并且做出反应的特殊servlet,并且也需要在web.xml文件中进行相关配置. 内置对象的状态变化:初始化和销毁,也就是说当内置对象初 ...

  10. 设计模式之结构类模式PK

    结构类模式包括: 适配器模式 桥梁模式 组合模式 装饰模式 门面模式 享元模式 代理模式 结构类模式着重于如何建立一个软件结构 为什么叫结构类模式呢? 因为他们都是通过组合类或对象产生更大结构以适应更 ...