搜索
首页web前端H5教程HTML head 头标签

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。


DOCTYPE


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


DTD(Document Type Definition) 声明以 开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD,名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册,+表示是,-表示不是。组织即组织名称,如:W3C。类型一般是 DTD。标签是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符,如:EN 表示英文,ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本,过渡版本,以及基于框架的 HTML 文档。


HTML 4.01 strict
复制代码
HTML 4.01 Transitional
复制代码
HTML 4.01 Frameset
复制代码
最新 HTML5 推出更加简洁的书写,它向前向后兼容,推荐使用。
复制代码
在 HTML中 doctype 有两个主要目的。


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


决定浏览器的呈现模式


对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。


  • 非怪异(标准)模式
  • 怪异模式
  • 部分怪异(近乎标准)模式 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE 标签,可详细阅读模式?标准!的内容。

charset


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



复制代码


html5 之前网页中会这样写:


复制代码
这两个是等效的,具体可移步阅读: vs ,所以建议使用较短的,易于记忆。


lang属性


简体中文



复制代码


繁体中文


复制代码


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


优先使用 IE 最新版本和 Chrome



复制代码


360 使用Google Chrome Frame


复制代码


360 浏览器就会在读取到这个标签后,立即切换对应的极速核。 另外为了保险起见再加入


复制代码


这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。


相关链接:浏览器内核控制 Meta 标签说明文档


百度禁止转码


通过百度手机打开网页时,百度可能会对你的网页进行转码,**你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加



复制代码


相关链接:SiteApp 转码声明


SEO 优化部分


页面标题标签(head 头部必须)



  1. your title
复制代码


页面关键词 keywords


复制代码


页面描述内容 description


复制代码


定义网页作者 author


复制代码


定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。


复制代码


相关链接:WEB1038 - 标记包含无效的值


viewport


viewport 可以让布局在移动浏览器上显示的更好。 通常会写



复制代码


width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)


content 参数:


  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:




复制代码


而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。


复制代码


相关链接:非响应式设计的viewport


适配 iPhone 6 和 iPhone 6plus 则需要写:




复制代码


大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。


ios 设备


添加到主屏后的标题(iOS 6 新增)



复制代码


是否启用 WebApp 全屏模式


复制代码


设置状态栏的背景颜色


复制代码




只有在 "apple-mobile-web-app-capable" content="yes" 时生效


content 参数:


  • default 默认值。
  • black 状态栏背景是黑色。
  • black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。



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



复制代码


iOS 图标


rel 参数: apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57x57 像素,必须有



复制代码


iPad,72x72 像素,可以没有,但推荐有


复制代码


Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有


复制代码


Retina iPad,144x144 像素,可以没有,但推荐有


复制代码


IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 适配iPhone 6 plus,则需要在中加上这段


复制代码


iOS 启动画面


官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/


iPad 的启动画面是不包括状态栏区域的。


iPad 竖屏 768 x 1004(标准分辨率)



复制代码


iPad 竖屏 1536x2008(Retina)


复制代码


iPad 横屏 1024x748(标准分辨率)


复制代码


iPad 横屏 2048x1496(Retina)


复制代码


iPhone 和 iPod touch 的启动画面是包含状态栏区域的。


iPhone/iPod Touch 竖屏 320x480 (标准分辨率)



复制代码


iPhone/iPod Touch 竖屏 640x960 (Retina)


复制代码


iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)


复制代码


添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)


复制代码


iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。




复制代码


Windows 8


Windows 8 磁贴颜色



复制代码


Windows 8 磁贴图标


复制代码


rss订阅


复制代码


favicon icon


复制代码


比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet


移动端的meta

































复制代码


这是来自 toobug 的分享总结。


更多的 meta 标签参考





参考文章:






作者:paddingme (http://padding.me) - 一个茁壮成长的前端菜鸟


via:http://fex.baidu.com/blog/2014/10/html-head-tags/



声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML5:标准及其对Web开发的影响HTML5:标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等,提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage,支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性,简化处理和验证。

H5代码示例:实际应用和教程H5代码示例:实际应用和教程Apr 25, 2025 am 12:10 AM

H5提供了多种新特性和功能,极大地增强了前端开发的能力。1.多媒体支持:通过和元素嵌入媒体,无需插件。2.画布(Canvas):使用元素动态渲染2D图形和动画。3.本地存储:通过localStorage和sessionStorage实现数据持久化存储,提升用户体验。

H5和HTML5之间的连接:相似性和差异H5和HTML5之间的连接:相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一个版本,包含新元素和API;H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码,H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础:密钥元素及其目的H5代码的基础:密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等,用于构建现代网页。1.定义头部内容,2.用于导航链接,3.表示独立文章内容,4.组织页面内容,5.展示侧边栏内容,6.定义页脚,这些元素增强了网页的结构和功能性。

HTML5和H5:了解常见用法HTML5和H5:了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别,H5是HTML5的简称。1.HTML5是HTML的第五个版本,增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用,适用于各种移动设备。

HTML5:现代网络的基础(H5)HTML5:现代网络的基础(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本,由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强,提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签,如、、、等,使网页结构更清晰,SEO效果更好。HTML5支持多媒体元素和,无需第三方插件,提升了用户体验和加载速度。HTML5增强了表单功能,引入了新的输入类型如、等,提高了用户体验和表单验证效率。

H5代码:编写清洁有效的HTML5H5代码:编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码?答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等,提升代码可读性和SEO效果。2.保持代码结构化和可读性,使用适当缩进和注释。3.优化性能,通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误,如标签未闭合,确保代码有效性。

H5:如何增强网络上的用户体验H5:如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1)多媒体支持:H5的和元素简化开发,提升用户体验。2)离线存储:WebStorage和IndexedDB允许离线使用,提升体验。3)性能优化:WebWorkers和元素优化性能,减少带宽消耗。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具