首页 / HTML / 【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose

【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7910字，纯文字阅读大概需要12分钟。

内容图文

【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose

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 文档。

o 非怪异（标准）模式

o 怪异模式

o 部分怪异（近乎标准）模式关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE 标签。

charset

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

html5 之前网页中会这样写：

这两个是等效的，具体可移步阅读：?vs?，（这个链接是stackoverflow的一个问题和答案）所以建议使用较短的，易于记忆。

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 内核进行渲染。

百度禁止转码

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

SEO 优化部分

页面标题标签(head 头部必须)</p> <p> </p> <p class="sycode"> <ol> <li><title>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 标签参考

· COMPLETE LIST OF HTML META TAGS

· 18 Meta Tags Every Webpage Should Have in 2013

参考文章：

· 常用的 HTML 头部标签

· amazeui css

来自为知笔记(Wiz)

内容总结

以上是互联网集市为您收集整理的【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose全部内容，希望文章能够帮你解决【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/402799.html

来源：【匿名】

【上一篇】关于css中overflow:hidden的使用_html/css_WEB-ITnose 【下一篇】PHP 和 HTML

更多 ►

【【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

HTML中button标签点击实现页面跳转【代码】

方法1：使用onclick事件<input type="button" value="按钮" onclick="javascrtpt:window.location.href=‘http://www.baidu.com/‘" />或者直接使用button标签<button onclick="window.location.href = ‘https://www.baidu.com/‘">百度</button> 方法2：在button标签外套一个a标签<a href="http://www.baidu.com/"><button>百度</button> </a>或使用<a href="http://www.baidu.com/"><input type="button" value=‘百度‘></a> ...

HTML表格标签【代码】

<table>表格标签　　常用属性：　　border指定边框　　width宽　　height高，内容多不用指定，自动适应　　bgcolor背景颜色　　align对齐方式，控制表格　　background背景图片<caption>表格标题<th>表头单元格<tr>行　常用属性：　　bgcolor背景颜色　　align对齐方式，控制内容　　background背景图片<td>列table>tr>td【此时按下Tab（制表键），输入内容中间和后面都不能留有空格和换行等内容】表格合并　　colspan跨列　　...

如何使用JS脚本从HTML中分离图片标签与文本，替换文本中指定的内容并加粗（原创）【代码】

var html=‘ddfsdfsdfdsd dfsdfsdffds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}" src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" class="kfformula">dfsdfsrewewrererew ds<img _src="http://localhost:8490/60E86EA7-FE7B-44BF-8270-4DF2036B2118.PNG" data-latex="x=\frac {-b\pm \sqrt {{b}^{2}-4ac}} {2a}...

HTML5 常用标签属性【代码】

<input type="submit" value="提交" autofocus="on" formaction="b.jsp"><input type="submit" value="提交" formaction="c.jsp">提交不同的界面上传<input type="file" multiple="multiple">multiple 允许上传多个文件<input type="text" pattern="[0-9]{6}" required="required" placeholder="请输入六位邮箱" title="格式不正确"> pattern里面填正则 required不能为空 placeholder提示内容 title错误后的提示信息原文：http:...

HTML标签总结【代码】

1. HTML常用标记：属性值需要带等号连接，属性值需要带引号(单、双引号都可以文本标题：h1~h6 i. h1:一般应用在网页文章标题，网站的logo处 ii. h2:新闻稿件的标题，或者是二级标题处 iii. h3:新闻稿件居多，布局元素中有加粗效果 iv. h4~h6:根据实际情况选择应用段落文本：p空格： &emsp;(能够实现空出一个字符)换行：<br/>水平线：<hr/>加粗： i. <b>加粗的内容</b> 只是显示加粗 ii. <strong>强调的内容</strong> 突出的文...

解决JSON包含HTML标签无法显示的问题

主要是将json无法识别的字符进行转义 function dotran($str) { $str = str_replace(‘"‘,‘//"‘,$str); $str = str_replace("/r/n",‘//r//n‘,$str); $str = str_replace("/t",‘//t‘,$str); $str = str_replace("//",‘//‘,$str); $str = str_replace("/b",‘//b‘,$str); return $str; }这样返回的数据就可以正常显示，下面是转换后的内容：jsontext=‘{"jqry":[{"id":"12...

HTML5笔记1——HTML5的发展史及标签的改变【代码】【图】

记得第一次接触HTML5还是在《联信永益》实习那会儿（2011），当时一个项目技术选型的时候面临两种选择，分别是Silverlight和HTML5，记得当年用的最新的IE浏览器版本还是IE9，才刚刚开始支持HTML5。后来考虑到当时各个版本的浏览器对HTML5的支持都不怎么好，最终公司还是选择了Silverlight，想不到多年以后Silverlight没落了，HTML5却随着移动互联网的兴起而焕发出强大的活力。HTML5的发展路程一路走来，我们回顾一下HTML的发展之路...

html页面标签元素总结【代码】【图】

html页面标签元素总结前言学习python的flask架构对于有丁点C功底的人来说代码问题研究研究还能勉强跟得上脚步，但是html前端就蒙圈了，完全小菜比一枚。故此总结下我目前接触过的标签以及经常需要用的小功能(例如下拉框，单选框等等)。本篇仅从为w3c官网http://www.w3school.com.cn/收藏以供自己日后方便使用。PART I ：常用的html标签 1.1 基础篇标签描述 <!DOCTYPE> 定义文...

一个完整的html 每个标签的含义【代码】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 5<title>无标题文档</title> 6<script type="text/javascript" src="js/index.js"></script...

html5 form表单常用标签【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <form><input type="email"><input type="submit"><input type="tel"><input type="submit"><input type="url"><input type="submit"><input type="search"><input type="submit"><input type="r...

超级简单却不知道：html标签的嵌套规则

XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限嵌套的，但是，嵌套也需要有一定规则，不能任由自己的个人习惯胡乱嵌套，那么，html标签的嵌套规则有哪些呢？　　一、HTML 标签包括块级元素(block)、内嵌元素（inline）　　1、块级元素　　一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：　　address、blockquote、...

JS HTML标签尺寸距离位置定位计算【图】

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：...

html标签中英文对照,更好理解html标签

HTML标签英文全称中文释义aAnchor锚abbrAbbreviation缩写词acronymAcronym取首字母的缩写词address Address地址dfn Defines a Definition Term定义定义条目kbd Keyboard键盘（文本）samp Sample示例（文本var Variable变量（文本）tt Teletype打印机（文本）codeCode源代码（文本）prePreformatted预定义格式（文本）blockquote Block Quotation区块引用语cite ...

HTML标签marquee实现滚动效果【代码】

页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：<marquee>...</marquee>；说明：在标记之间添加要进行滚动的内容。重要属性：1.滚动方向direction（包括4个值：up、 down、 left和 right）　　语法：<marquee direction="滚动方向">...</marquee>2.滚动方式behavior（scro...

freemarker 集成 sitemesh 装饰html页面 shiro 标签

guest标签：验证当前用户是否为“访客”，即未认证（包含未记住）的用户；　　shiro标签：<shiro:guest></shiro:guest> ；　　freemark中： <@shiro.guest> </@shiro.guest> user标签：认证通过或已记住的用户　　shiro标签：<shiro:user> </shiro:user> ；freemark中： <@shiro.user> </@shiro.user> authenticated标签：已认证通过的用户。不包含已记住的用户，这是与user标签的区别所在。　　 shiro标签：<shiro:auth...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / 【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose

【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose

内容导读

内容图文

DOCTYPE

charset

lang属性

优先使用 IE 最新版本和 Chrome

360 使用Google Chrome Frame

百度禁止转码

SEO 优化部分

viewport

ios 设备

iOS 图标

iOS 启动画面

Windows 8

rss订阅

favicon icon

移动端的meta

内容总结

内容备注

内容手机端

【【03】HTML?head?头部分的标签说明和手机头部标签说明_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章

HTML - 相关标签

CSS - 相关标签

WEB - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程