整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5中常用meta头文件

页面需默认用极速核,增加标签:

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

若页面需默认用ie兼容内核,增加标签:

<meta name="renderer" content="ie-comp">

若页面需默认用ie标准内核,增加标签:

<meta name="renderer" content="ie-stand">

<!-- 字体编码 -->

<meta charset="utf-8" />

<!-- 关键字 -->

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

<!-- 说明 -->

<meta name="description" content="" />

<!-- 作者 -->

<meta name="author" content="" />

<!-- 设置文档宽度、是否缩放 -->

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

<!-- 优先使用IE最新版本或chrome -->

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

<!-- 360读取到这个标签立即钱换到极速模式 -->

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

<!-- 禁止百度转码 -->

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

<!-- UC强制竖屏 -->

<meta name="screen-orientation" content="portrait" />

<!-- QQ强制竖屏 -->

<meta name="x5-orientation" content="portrait" />

<!-- UC强制全屏 -->

<meta name="full-screen" content="yes" />

<!-- QQ强制全屏 -->

<meta name="x5-fullscreen" content="true" />

<!-- QQ应用模式 -->

<meta name="x5-page-mode" content="app" />

<!-- UC应用模式 -->

<meta name="browsermode" content="application">

<!-- window phone 点亮无高光 -->

<meta name="msapplication-tap-highlight" content="no" />

<!-- 安卓设备不自动识别邮件地址 -->

<meta name="format-detection" name="email=no" />

<!-- iOS设备 -->

<!-- 添加到主屏幕的标题 -->

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

<!-- 是否启用webApp全屏 -->

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

<!-- 设置状态栏的背景颜色,启用webapp模式时生效 -->

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

<!-- 半透明/黑色/默认白色 -->

<!-- 禁止数字识别为电话号码 -->

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

<!--

iOS图标

iPhone/iTouch默认是57*57

iPad,72*72,可以没有,但推荐有

Retina iPhone/Retina iTouch,114*114,可以没有,但推荐有

Retina iPad,144*144,可以没有,但推荐有

iPhone 6 plus是180*180,iPhone 6 是120*120

-->

<link rel="apple--touch-icon-precomposed" sizes="width*height" href="xxx.png" />

<!-- iOS启动画面 -->

<!-- iPad启动是不包含状态栏的 -->

<!-- 标准分辨率:1、竖屏(768*1004);2、横屏(1024*748)

Retina:1、竖屏(1536*2008);2、横屏(2048*1496) -->

<!-- iPhone/iTouch启动是包含状态栏的 -->

<!-- 标准分辨率(320*480)、Retina(640*960)、iPhone 5/iTouch 5(640*1136) -->

<link rel="apple-touch-startup-image" sizes="width*height" href="xxx.png" />

<!-- iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 -->

<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:375px)">

<link rel="apple-touch-startup-image" href="xxx.png" media="(device-width:414px)">

<!-- 智能添加广告条 -->

<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

<!--强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; -->

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<!-- iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;-->

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

<!-- iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;-->

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

TML5的基本结构和它的语法变化

HTML5的兼容性,它可以在老版本的浏览器上正常运行。

HTML5的实用性,内部没有特别的复杂功能,只是封装了一些常用的简单功能。

HTML5的基本结构,文档的根元素依然是<html.../>,这个不变。在<html.../>元素里包含<head.../>和<body.../>两个子元素。<head.../>元素主要定义HTML5的页面头,<title.../>元素用于定义页面标量,除了这些在<head.../>元素中定义meta、样式单等信息;<body.../>元素用于定义页面主体,包括页面的文本内容和大部分标签。

HTML5的语法变化

1、标签不再区分大小写

在HTML5中如:<P>程序世界</p>元素的开始标签和结束标签大小写不匹配,但是这符合HTML5的规范。

2、元素可以省略结束标签

HTML5非常宽容,它允许部分HTML元素省略标签,甚至允许同时省略开始标签和结束标签。具体来说有一下三种:

(1)空元素语法的元素:area base br col command embed hr img input keygen link mate param source wbr 。

这些空元素标签不允许将开始标签和结束标签分开定义。

(2)可以省略结束标签的元素:colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th。

这种语法纯属向以前那些不规范的HTML页面妥协。

(3)可以省略全部标签的元素:html head body tbody。

3、允许省略属性值的属性

XHTML要求所有元素的所有属性名都应该小写,所有属性都必须指定属性值,不能简写,而且所有属性值必须使用引号引起来。

HTML5相比起来比较松散,允许部分“标志性”的属性可以省略属性值。当然也支持那种严格的语法。

4、允许属性值不使用引号

传统的XHTML按XML规范对属性值进行要求,要求所有的属性值都必须用引号引起来,但HTML5允许直接给出属性值,即使不放在引号中也是正确的。

TML5的基本元素

HTML5保留的基本元素有以下几种:

1、<!--...-->定义HTML注释。

2、<html>:它是HTML5文档的根元素,HTML5允许完全省略这个元素。

3、<head>:它用于定义HTML5文档的页面头部分,HTML5也可以省略这个元素。

4、<title>:它用于定义HTML5文档的页面标题。

5、<body>:用于定义HTML5文档的页面主体部分,该标签可以指定id、class、style等核心属性,还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性,这些属性用于指定JavaScript脚本。

6、<style>:该元素用于引入样式定义。

7、<h1>到<h6>:定义标题一到标题六。

8、<p>:定义段落,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

9、<br>:插入一个换行,该标签可以指定id、class、style等核心属性。

10、<hr>:定义水平线,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。HTML5中<hr.../>还代表了主题结束的语义。

11、<div>:定义文档中的节。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

12、<span>:与<div>基本相似,区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。