前端总结（未完成）

时间 2019-11-22

标签前端总结未完成繁體版

原文原文链接

meta 标签的使用，以及经常使用的属性：css

一、指示浏览器用哪一个html版本编写的指令，经常使用：<!DOCTYPE html>编写版本为html5html

二、<meta charset="utf-8"> 页面的编码格式html5

三、<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浏览器内核，并且支持IE六、七、8等多个版本的IE浏览器。css3

四、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
适用于手机端，用于控制网页的缩放web

五、<meta http-equiv="cache-control" content="no-cache"> 缓存机制chrome

六、<meta name="keywords" content=""> 和<meta name="description" content=""> keywords和description 用于搜索引擎的优化

七、<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式
（不是特别清楚，说是用于360浏览器以及存在ie和chrome的内核模式）

八、额外：<meta name="revised" content="设计网, 6/24/2015"/> 文件的最新修改时间，方便多人操做canvas

html5 新标签的使用浏览器

一、对于不支持最新h5和css3的浏览器，引用modernizrJs或者html5shiv（生成modernizr时注意默认勾选html5shiv）缓存

二、新标签的使用不熟练sass

三、canvas和svg的使用问题

提升css 的性能以及命名要求：

一、尽可能把样式写在单独的css文件中，head中引用，少使用style标签以及直接写在内联上

二、css 能够缓存、重用，下降维护成本；

三、不用试@import，import会影响css文件的加载速度

四、避免使用复杂的选择器，层级越少越好（嵌套层级，尽可能不超过3个）

五、利用css继承减小代码量

六、注意命名、备注，提取重复样式

七、注意书写顺序
文字系列（font、line-height、letter-spacing、color、text-align）
背景（background、border）
位置属性（position、top、right、z-index、display、float）
大小（width、height、padding、margin）
其余（animation、transition）

八、模块化css：base基础样式、layout布局样式、module模块样式、state状态样式、theme皮肤样式

九、使用字体图标以及相关css sprites，减小界面http的请求

十、常见的命名：
头部：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

十一、css内部的分类以及顺序
1）、重置（reset）和默认（base）
2）、统一处理
3）、布局（grid）（.g-）
4）、模块（module）（.m-）
5）、元件（unit）（.u-）
6）、功能（function）（.f-）
7）、皮肤（skin）（.s-）
8）、状态（.z-）

sass/less的使用注意点

一、变量统必定义在一个scss或者less文件中，方便查找和使用

js的多个文件过来使用requirejs

一、不是太熟requirejs

二、为何使用requirejs要使用commonjs ？