前端总结(未完成)

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 ?

时间: 2024-10-27 19:04:53

前端总结(未完成)的相关文章

现代软件工程团队项目贝塔阶段_开发日志_2018.01.15-2018.01.19

现代软件工程团队项目贝塔阶段_开发日志_2018.01.15-2018.01.19 2018.01.15 已完成: 1.版本上线 1.1上线操作步骤 1.1.1将网站整体文件夹拷贝到keqi1 1.1.2修改microDefinition.php的数据库名和根目录名 1.1.3修改注册界面发送验证码后直接填充功能 1.1.4修改del的主id的class为hide 1.1.5重新运行根目录的111.php(消除红点,也就是消除服务器返回的多余字符) 1.2修复上线过程中遇到的bug  1.2.1

《现代前端技术解析》第一章读书笔记(未完成)

今天是2017年6月26日,星期一,开始从第一章看起.第一章主要讲的是前端技术的发展概况以及一些必须掌握的浏览器基础知识与常用开发技术. 页面内容多而复杂,为了保证开发效率,我们可以借助符合特定场景的前端框架来提高开发效率,例如使用JQuery丶MVVM等开发框架,对常用的 HTML DOM 操作进行高效封装,大大简化开发工作量,提高效率. 前端项目代码越来越多丶结构越来越复杂,我们必须考虑用模块化和组件化的思路来管理.所谓的模块化和组件化是指采用代码管理中分治的思想,将复杂的代码结构拆分成多个

精选!15 个必备的 VSCode 插件(前端类)

精选!15 个必备的 VSCode 插件(前端类) 15 天前 ? Plugins, Web前端 ? 暂无评论 Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件.为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些实用.有趣的插件与大家分享. 1. Open-In-Browser 由于 VSCode 没有提供直

我想写一个前端开发工具(一):在npm发布模块

有必要说说我为什么要开始写这个 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整,我从原来的广告项目中调整到新业务线的前台页面开发了,和以前一样,还是带着3.4个兄弟姐妹.不同的是以前的项目周期普遍偏长,可以让每个同学有时间从头到尾的把项目吃透,而现在做C端的前台页面往往开发时间非常的短,比如我们就要在1.2个月完成业务线所有前台页面的开发.联调.测试.部署,以及下一步的迭代.由于是从零开始,不存在基于

前端必备的js知识点(转载)

1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的. 2.js是一门什么样的语言及特点?        js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言.也是一种广泛用于web客户端开发的脚本语言,常用来给html网页添加动态功能,如响应用户的各种操作.        主要的目的是为了解决服务器端语言遗留的速度问题,为客户提供更流畅的浏览效果.        (详细拓展:ht

前端必会html知识整理

1.浏览器内核: 1.ie:trident(三叉戟)内核 2.firefox:gecko(壁虎)内核 3.safari:webkit(浏览器核心)内核 4.opera:以前是presto(急速)内核,现在改用谷歌的blink(闪烁)内核 5.Chorme:blink(基于webkit,谷歌和opera software共同开发) (附:浏览器内核的理解?) 浏览器内核分成两部分:渲染引擎和js引擎. 1.渲染引擎:负责取得网页内容.整理讯息,以及计算网页的显示方式,然后输出至显示器或打印机.浏览

[转] 大前端年终总结与展望:大前端时代即将来临?

回顾 2016 iOS 和 Android 系统不约而同学习了对方的优点,长得越来越象:3D touch.权限控制.夜间模式.电话防骚扰... 原本属于桥的两侧的开放与封闭,越来越往一个中心靠:由此看来,真正在 OS 里的应用 App 才是系统的灵魂. 像「微信」,不论你用 iOS 还是 Android,很多人平常耗电量最多的 App 就是它.而微信借助大量的用户与使用时长,也在 2016 年末期,推出了「小程序」的内测,继续百度「轻应用」未完成的使命,在微信应用里再打造一个「小程序」生态市场.

未完成的IT路停在回车键---2014年末总结篇

时间都去哪儿了? 一晃而过,越来越能体会到这个词的真实感.特别是过了二十岁,这种感觉越来越深刻,越来越强烈,犹如小编做公交车的时候一直向后排排倒的香樟树,还记得有首歌叫时间都哪儿了,而后,这首歌传遍了大江南北,或许在电视机屏幕另一端的那个你,在听到旋律与歌词的那一瞬,你的心是否也被重重的戳了一下,因为她唱出了心声,击中内心最柔软的地方,你是否也像小编一样陷入了深深的沉思,就像歌词里面唱的那样:时间都去哪儿了?这些年,我们的时间都去哪儿了.都说岁月苍老了父母的容颜,苍老的何止是他们的容颜啊."时间

前端和用户体验

虽说俺是个前端工程师,写写代码生成网页就行了,然而这几年工作下来养成的严谨精神和对美学的追求,反而对用户体验的要求越来越高.很多人觉得用户体验是交互和设计负责的领域,前端只要负责生成代码就行.其实作为一个有经验的前端工程师,很有必要弄清楚自己在整个网站开发过程中的地位,以及明白在用户体验这块所具有的影响力. 前端是UI部分最后的也是最全的质量控制员.因为页面的静态代码包括动态交互都是由前端来实现的,这样就会涉及到方方面面的细节.在重构的过程中,我常常以一个普通用户角度去揣摩这样的设计是否符合用户