html只需要页面的70%,HTML5开发规范

1、总体规范——采用html5的结构标签进行页面布局，注意结构的语义化，并注意页面大纲的层级结构。使用css3.0进行样式的设计。

b.Html5大纲算法概念及如何如何在浏览器中添加网页大纲生成的插件

2、Html5文档结构规范——html5作为新一代标签语言的标准，不需要再显式的声明mine类型及版本号。

a.简化的Doctype，可直接写成《!DOCTYPE html》

b.无需书写Xml的类型，即直接写成《html》《/html》

c.采用html5进行页面布局时，页面结构应遵循以下结构模板：

*注：以上的结构模板中，关键词、及描述必须要书写，其余可根据页面需求删改。

另，若是移动端开发，可加上另一个《meta》元标签，表示全屏显示。

禁止页面缩放时，在以上的meta标签中添加以下属性：

minimum-scale=1,maxinum-scale=1,user-scalable=no

3、Html5标题——html5页面不再以hn中的n作为网页标题的级数及权重，而是以header、section、article等块元素的嵌套层次来作为级数，每一个块中可以有自己的h1及标签组。

a.《header》标签——当header元素作为body的直接子元素时，其中的标题将作为页面的第一级标题，把页面当做一本书，则此处的标题就是书本的书名。Body中只能设置一个直接的head标签，其他section等块中的head标签中的标题将根据嵌套的层数充当二级标题或三级标题。

b.若某个块中没有标题，不使用section元素，转而使用div进行布局。

c.使用aside或者nav时可以允许没有标题。

例子：

以上生成的网页大纲为：

1.爱GO网•旅游攻略

1.1.旅游推荐

1.2.这是我的旅游攻略

1.2.1.旅行的意义

1.2.2.旅行的过程

4、书写规范——html5中不区分大小写，但是在进行爱GO网页面布局时，统一使用小写。Html5中部分新增的部分新功能中，使标签可以不用写结束标记，如li,dt,dd，p等，但是在进行爱GO网页面开发时，一律需要使用结束标记。

5、针对微信页面的标准——微信页面源于其自身拥有头部和底部的皮肤，故而在进行微信页面的开发时只需要构造中间主要内容的区域。

a.头部布局：

酒店房型列表页时header部分抽取出来公用化。

b.底部布局：

底部布局统一使用footer元素，鉴于微信中底部有定制的菜单，在进行微信页面开发时，不使用body的直接footer元素。

c.中间部分：

6、微信页面css布局

a.头部添加meta元标签

b.对于结构元素的宽度，一律使用百分比的单位，如左边的aside宽度设置为30%，右边article宽度设置为70%；

c.字体的书写，一开始设置body的font-size为62.5%，让所有的元素继承该设置，使得1em = 10px。最后在需要使用font-size时使用1em(10px)或者1.2em(12px)；

d.尽量不要使用过多的背景图片，若使用了背景图片，当图片的宽或者高占满元素的宽或者高时，则需要为元素添加属性：background-size:contain;让背景图片根据元素尺寸的变化而变化；

e在页面中直接使用图片时应用一个额外标签包含，并用百分比设置该标签的宽度，以及将被包含图片的宽度设置为100%；

f.Margin、padding、border、box-shadow等的元素可以使用px单位；

g.使用@media screen and (max-XXpx){selector{  } }来制定当屏幕过小时的重载样式。如当屏幕小于320px时，标题变小或者其他。不推荐使用link @media再重新加载另一份样式。

设计需要推敲，以下是建议：

a.少用渐变——目前在css3中新增渐变属性，但各浏览器的支持度不高均已私有属性的形式进行支持，目前还不建议在非个人站点中使用。若使用渐变，移动端屏幕尺寸过小时，前端工作会根据屏幕的尺寸而制定相应的样式，到时就需要重新加载不同的渐变图片。

b.设计时，可根据主流的移动端尺寸，或者根据用户对象所使用移动端设备的屏幕尺寸来初步确定设计的页面宽度等尺寸，前端在布局时使用百分比，字体在一定的屏幕尺寸范围内不改变，而如果根据主流屏幕的尺寸来确定尺寸，就不会出现开发时觉得字体太大或者太小的现象。

7、移动端js框架——使用zepto.js