meta 标签的使用,以及常用的属性:
1、指示浏览器用哪个html版本编写的指令,常用:<!DOCTYPE html>编写版本为html5
2、<meta charset="utf-8"> 页面的编码格式
3、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,
实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
4、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
适用于手机端,用于控制网页的缩放
5、<meta http-equiv="cache-control" content="no-cache"> 缓存机制
6、<meta name="keywords" content=""> 和<meta name="description" content=""> keywords和description 用于搜索引擎的优化
7、<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式
(不是特别清楚,说是用于360浏览器以及存在ie和chrome的内核模式)
8、 额外:<meta name="revised" content="设计网, 6/24/2015"/> 文件的最新修改时间,方便多人操作
html5 新标签的使用
1、对于不支持最新h5和css3的浏览器,引用modernizrJs或者html5shiv(生成modernizr时注意默认勾选html5shiv)
2、新标签的使用不熟练
3、canvas和svg的使用问题
提高css 的性能以及命名要求:
1、尽量把样式写在单独的css文件中,head中引用,少使用style标签以及直接写在内联上
2、css 可以缓存、重用,降低维护成本;
3、不用试@import,import会影响css文件的加载速度
4、避免使用复杂的选择器,层级越少越好(嵌套层级,尽量不超过3个)
5、利用css继承减少代码量
6、注意命名、备注,提取重复样式
7、注意书写顺序
文字系列(font、line-height、letter-spacing、color、text-align)
背景(background、border)
位置属性(position、top、right、z-index、display、float)
大小(width、height、padding、margin)
其他(animation、transition)
8、模块化css:base基础样式、layout布局样式、module模块样式 、state状态样式、theme皮肤样式
9、使用字体图标以及相关css sprites,减少界面http的请求
10、常见的命名:
头部:header ; 内容:content/container ; 尾: footer ; 导航: nav ; 侧栏: sidebar
栏目:columns ; 左右中:left right center ; 登录条: loginbar ; 标志: logo
广告:banner ; 页面主体:main ; 热点: hot ; 新闻:news ; 下载:download
子导航:subnav ; 菜单:menu ; 子菜单:submenu ; 搜索:search ; 友情链接: friendlink
版权:copyright ; 滚动:scroll ; 标签: tags ;列表:list ;信息:msg ; 提示:tips
标题:title ; 指南:guide ;服务:service ; 加入:join ; 注册:register ; 登录: login
状态:status ; 投票:vote ;合作伙伴:partner ;主导航:mainnav ;子导航:subnav
顶导航:topnav ; 左边导航:leftnav ;右边导航:rightnav ; 边导航:sidenav
摘要:summary
11、css内部的分类以及顺序
1)、重置(reset)和默认(base)
2)、统一处理
3)、布局(grid)(.g-)
4)、模块(module)(.m-)
5)、元件(unit)(.u-)
6)、功能(function)(.f-)
7)、皮肤(skin)(.s-)
8)、状态(.z-)
sass/less的使用注意点
1、变量统一定义在一个scss或者less文件中,方便查找和使用
js的多个文件过来使用requirejs
1、不是太熟requirejs
2、为什么使用requirejs要使用commonjs ?