《前端之路》之五 head 头标签指南

最新推荐文章于 2025-07-01 03:54:03 发布

转载最新推荐文章于 2025-07-01 03:54:03 发布 · 170 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/erbingbing/p/9323356.html

本文详细介绍了HTML5中head标签的使用，包括DOCTYPE文档模式、字符集、语言、版本内核选择、SEO优化等关键元素，以及viewport在移动端布局的重要性。

文档模式

对文档进行有效性验证

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

通知浏览器读取文档时用哪种解析算法，如果没有写，浏览器会按照自身的规则对代码进行解析，可能会严重影响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">

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协议

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

常见设置

<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

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

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

添加到主屏后的标题（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"/>

转载于:https://www.cnblogs.com/erbingbing/p/9323356.html