【www.zgzsclpt.com--个人总结】
html总结
#HTML >HyperText MarkUp Language 超文本标记语言 ##特点 * 语法比较简单 * 没有逻辑性 * 对于语法的要求不是很严格大小写不规范 符号使用不严格 *不是别换行 或者多个空格只识别一个空格 ## xhtml >严格版的 html 对于语法的要求更加严格 ## html 版本问题 >h5 出现之前 html4.0 strict/下 html.0 2014 html5 的版本规范才正式推出 ##html > b i strong em h1~h6 br p pre a img ul li ol dl dt dd table tr td th captiond div span form input textarea select option iframe >header main footer nav section hgroup article aside figure figcaption canvas video audio source >html head body meta title link script style ##html 实体 >在 html 代码当中有一些不方便直接输入的内容 可以通过特定的符号完成 |实体|含义| |:----:|:----:| |\ |空格| |\<|小于| |\>|大于| |amp;|&| |\"|"| |\©|版权标志| ###html 表单 >input ###h5 之前 |类型|用途| |:----:|:----:| |type=text|普通的文本输入框| |type=password|密码输入框| |type=radio|单选框| |type=checkbox|复选框| |type=file|文件域| |type=hidden|隐藏域| |type=submit|提交按钮| |type=reset|重置按钮| |type=button|自定义按钮| |testarea|多行文本框| |select|下拉选项| ###h5 新增的 |类型|用于| |:----:|:----:| |email|输入一个邮箱| |url|输入一个网址| |date|选择一个日期| |time|选择一个时间| |month|选择一个月份| |week|选择一周| |datetime-local|选择一个日期+时间| |number|输入一个数字| |range|滑块选择数字| |color|选择一个颜色| ###表单的属性 * type 表单的类型 * name 表单的名字 * value 表单的值 * checked 被默认选中的单选或者多选 * selected 被默认选中的下拉选项 * maxlength 输入的最大长度 * readonly 表示表单只读 不能修改 * disabled 表示禁用表单 * autofocus 表示自动获取焦点 * placeholder 表单默认的提示文字 * required 表示表单是必须要填写的 * pattern 添加正则验证 * min max 在输入数值的时候设置最大值和最小值 * step 在输入数值的时候设置进步值 * form 当前表单控件所在的表单 #css >层叠样式表 ##引入方式 1. 行内样式 ```html <div style="width:100px"></div> ``` 2. 嵌入样式 ```html <style> .div{ width: 100px; } </style> ``` 3. 外部样式 ```html <link rel="stylesheet" href=""> ``` 3. 引入样式 ```css @import url(css/demo.css) ``` >四中引入方式 只有行内时候优先级的，其他的引用方式只有覆盖 没有优先级 ##选择器 * 标签名选择器 div * 类名选择器 .class * id 选择器 #id * 通用选择器 * * 群组选择器 * 交叉选择器 div#one * 后代选择器 * 子选择器 ul>li * 相邻选择器 div+p div~p * 属性选择器 [src] [src=1.jpg] [src^=1] [src$=2] [src*=1] * :first-child nth-child(2n) last-child nth-last-child() * :first-of-type :nth-of-type() :last-of-type() :only-of-type() * 链接状态 ：link :hover :active :visited * 表单状态 :focus :checked :enabled :disabled * :root :empty :target * :before :after ##属性 * font-family 设置字体 * font-size 设置大小 * color 颜色 * font-weight * font-style 倾斜 itailc * word-break break-all 英文自动换行 * white-space：nowrap 中文不换行 * text-overflow：ellipsis 一行文字超出用省略号代替 * text-algin 文本居中 * text-decoration 文本修饰 下划线 * line-height 行高设置 * text-indent 文本缩进 * letter-spacing 字体间距 * 宽度 width * 高度 height * 边框 border * 外边距和内边距 margin padding * 设置盒子模型 box-sizing：border-box * 浮动 float left/right * 转换 display block inline inline-block none flex * min-width max-width * overflow overflow-X overflow-y scroll 滚动条 auto * 背景 * backgruond-imag * background-repeat * background-position * background-color * background-arrachment 固定方式 scroll 背景图滚动 fixed 背景相对于视口定位 * background-clip 截取位置 * background-orgin 定位原点 * background-size * 定位 * position：absolute relative fixed * left * z-index * border-radius * outline 外边框 * box-shadow text-shadow 可以设置多组值 * 渐变图案 * liner-gradient * repeating-liner-gradient 重复线性渐变 * radial-gradient * repeating-radial-gradient * 过渡属性 transition * 转换 2d/3d local 滚动元素背景图滚动 * transform * translate() translateX() translateY() translateZ() translate3d() * rotate * scale * skew * transform-origin * perspective * transform-style：preserve-3d * perspective-origin 设置观察者的位置 * 动画 animation @keyframes ```css @keyframes name{ 0%{} 30%{} 100%{} } ``` * animation：名称 动画方式 时间 延迟 次数 播放方式 播放状态 播放结束时的状态 * infinite 无限播放 * 响应式 * @media screen and （）{} * 自定义栅格化系统 * 移动端布局 * 百分比 * 响应式 * rem * 弹性盒模型 * display：flex * flex-self 自己的对齐方式 flex-grow flex-shirnk * 移动端布局使用 css3 的时候一 * 浮动属性和定位属性一定不要乱加 * 浮动 多个属性在一行显示 * 多个元素需要在同一个位置叠加显示的时候 * a 标签包裹图片定要加-webkit-前缀 * a 转化为块元素需要设置宽高 * img 默认边框去掉 在 ie 有蓝色边框 * 浮动引发的问题
HTML5总结
HTML5 总结前些天看了 IT 最新动向，发现 HTML5 发展非常之快，所以这两天花了些时间学了一下， 在网上查到的东西一般都很琐碎，我在这里稍微整理一下。起步首先，先了解一下 HTML5 的发展起步。
HTML5 是 W3C 和 WHATWG 合作的结果。
注： W3C 指 World Wide Web Consortium，万维网联盟。
WHATWG 指 Web Hypertext Application Technology Working Group。网络超 文本应用技术工作组 他们对 HTML5 建立了一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript 减少对外部插件的需求（比如 Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应该对公众透明 HTML5 中一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如：calendar、date、time、email、url、search 最新版本的 Safari、Chrome（谷歌浏览器） 、Firefox 以及 Opera 支持某些 HTML5 特性， IE9 将支持某些特性。Web 视频现如今，大多数的视频都是插件（比如 Flash）来显示的，但是并非所有的浏览器都拥 有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法（不需要插件的 哦！！强大吧） ！ 当前，video 元素支持三种视频格式：Ogg、MPEG4、WebM 在 HTML5 中显示视频，您所需的只是这样写： <video src="movie.ogg" controls="controls"> 您的浏览器不支持该功能！ </video> <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使 用第一个可识别的格式： <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持该功能！ </video> <video>标签的属性Web 音频和视频一样，大多数音频都需要插件（比如 Flash）才能播放，HTML5 规定了一种通过 audio 元素来包含音频的标准方法。Audio 元素能够播放声音文件或者音频流。
Audio 元素支持三种音频格式：Ogg Vorbis、MP3、Wav 使用方法和 video 标签的方法一摸一样，超像的！ <audion>标签的属性Canvas（在网页上绘制图形） （在网页上绘制图形）HTML5 的 canvas 元素使用 Javascript 在网页上绘制图形。
画布是一个矩形区域，您可以控制其每一像素 Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 向 HTML5 中添加 canvas 元素，方法如下： <canvas id="myCanvas" width="200" height="100"></canvas> 另外需要声明的是 canvas 元素本身没有绘图能力，所有的绘制工作必须在 JavaScript 内 部完成。
现在绘制一个红色的矩形 红色的矩形，如下： 红色的矩形 <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> 现在对这段代码进行解析： JavaScript 使用 id 寻找 canvas 元素 var c=document.getElementById("myCanvas"); 然后，创建 context 对象 var cxt=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符 以及添加图像的方法。
下面的两行代码绘制一个红色的矩形： cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
想看更多例子，请上 W3School 的 HTML5 课程！在客户端存储数据HTML5 的这个功能是让我感到最不可思议的， HTML5 提供了两种在客户端存储数据的 新方法 localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些存储工作都是由 cookie 完成的，现在 cookie 看来要换人了，cookie 不适合存 储大量的数据，因为它们由每个对服务器的请求来传递，这使得 cookie 的速度慢而且效率 低。
在 H5 中数据不是由每个服务器请求传递的，而是只有在请求时使用数据，他使在不影 响网站性能的情况下，存储大量数据成为可能。
对于不同的网站，数据存储在不同的区域，而且一个网站只能访问其自身的数据。
H5 使用 JavaScript 存储和访问数据。发现了没，H5 的很多功能都需要利用 JS 来实现， 呵呵，看来还是离不了 Java 现在，首先介绍第一种存储方式，localStorage localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然 可用。
创建和访问 localStorage <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> 这样就 OK 了，是不是很简单哈！ 第二个，sessionStorage sessionStorage 方法针对一个 session 进行数据存储。
当用户关闭浏览器窗口后， 数据会 被删除。创建和访问 sessionStorage 的方法和 localStorage 的差不多一样，只是名称不一样， 效果不一样而已。
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>HTML5 新的 Input 类型H5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。
现在介绍的输入类型有以下几种： email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color 看张截图EmailEmail 类型用于应该包含 email 地址的输入域，在提交表单时，会自动验证 email 域的值。
E-mail: <input type="email" name="user_email" /> 是不是很简单，就跟 HTML 的普通标签是一样的。URLUrl 的用法好 Email 的一样，用于包含 Url 地址的输入域，在提交表单时，会自动验证 url 域的值。Number number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定： Points: <input type="number" name="points" min="1" max="10" /> 这个应该不用解释了吧 Number 的属性如下Rangerange 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定： <input type="range" name="points" min="1" max="10" /> Range 的属性和 number 的是一样的，相互借鉴以下就 OK 了Date Pickers（数据检出器） （数据检出器）HTML5 拥有多个可供选取日期和时间的新输入类型： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） 下面的例子允许您从日历中选取一个日期： Date: <input type="date" name="user_date" /> MyGod！我现在才发现文笔不好的时候，文字显得是那么的苍白，我实在是描绘不出 H5 的效果，实在是太炫了，还是亲自试一下就知道了，在这里我表示很无力……searchsearch 类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。HTML5 新的表单元素HTML5 拥有若干涉及表单的元素和属性。
datalist keygen outputdatalist 元素datalist 元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id： Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value=".cn" /> <option label="Google" value="" /> <option label="Microsoft" value="" /> </datalist> 其最终效果就像是百度中的搜索下拉框一样，想象以下。keygen 元素keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator） 。当提交表单时，会生成两个键，一个 是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于 之后验证用户的客户端证书（client certificate） 。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> 以上关于 keygen 的用法我是全盘复制，因为我看不懂他是什么意思，想着可能也不会 用了。
output 元素 output 元素用于不同类型的输出，比如计算或脚本输出： <output id="result" onforminput="resCalc()"></output> 其效果就像是动态计算器，你直接输入数字，结果立马就会发生变化，神吧 还有一些 H5 的新的表单属性，实在是太多了，我写不下去了，呵呵，等用到的时候， 再搜，我觉得这是一个不错的学习方法，可以加深印象。
前端工程师年终总结
前端工程师年终总结年终总结如何写 ? 写一些什么内容呢 ? 本文是小编精心 编辑的年终总结范文，希望能帮助到你! 一、前端工程师年终总结 时光飞快，自八月份转前端以来，已经过去了半年时间。这期间经历了第一次真正意 义上的项目前后端分离的开发模式。对于之前从事了三年后 端 java 开发的我来说，一切都很新鲜与刺激。当然，收获 颇丰。
下面， 就具体从这个项目中学习的东西进行一次总结。
首先，这次项目的开发环境是基于, 引入了 npm 包管理 工具来对各种 js 插件进行管理。
这种方式避免了以前引入 js 插件时分别到各自的官网 网站去下载， 用了 npm 后只需要在终端进行全局安装或者 局部安装，后续只需要在 js 文件中 require 就能进行调用。
这种统一管理的方式不仅使开发变的更加简单，减少了很多 无谓的操作，也分离了一些开发人员不需要关注的关注点。
其次，项目引用了 gulp + webpack，基于构建工具的开 发更接近现代 web 开发，一套流程走下来，自动打包，自动 对 html，css,js，图片文件进行压缩，合并和版本号管理以 及对文件的改动进行自动监控。
这样不仅仅是方便了开发 人员，更重要的是极大地提升了客户端页面性能。
与以前 需要分别手动的对文件进行压缩，合并，混淆处理相比，这 种自动构建工具效率更高,减少出错率。 最后，项目引入了 coala 框架，使我更加清晰的明白基 于 web component 的开发，页面上每一个功能块，都可以化 为一个组件，每个组件有它自己的生命周期与初始的属性。
在不同的交互方式上绑定不同的事件用以来响应用户的行 为，具体体现在个体的组件数据变化不会影响到页面上其他 组件，这样就做到了页面性能的提升和用户体验的双赢。
另外，在页面布局和 html，css 实现页面的时候，如何 能够绘制出更规范，更有结构化的页面也是一个考验。从前 期的 id,class 命名不规范，html 结构混乱到现在一点点的 提升，终于也领会到了前端开发的细致活。
这次的前后端分离和后端开发人员进行了接口联调。不 得不承认前期花费了很多时间在沟通上面。
基于 QQ 工具的一问一答低效率的沟通和问题表述不清 都会花费时间和打断工作中的思维，使人不能专注很长一段 时间。另外,接口文档编写不规范，格式不美观等都是不能 忽视的问题。当然，这些沟通技巧和提升效率的工具需要花 费时间去慢慢的提升，包括我,包括团队里面所有的人员， 只有这样，每个开发人员才能专心有效率的进行项目开发。
新的一年开始了，希望自己能够保持良好的学习态度和 状态继续迎接新的挑战。尤其感谢同事和领导的厚爱，才能 让自己 不断成长，不断进步。在此，祝愿公司所有开发人 员快乐生活，生活快乐。 二、前端工程师年终总结今天是 20xx 年的第 4 天，长沙多数公司上班了。跟夏总偶尔聊了项目及文字沟通的事 儿，忽然想起，自己也应该写写年终总结了。
先列大纲： 1、操作了几个真正有协作、有成就感的项目。
2、认识了几个能坦诚交流的新朋友。
3 、 在 前 端 技 术 上 ， 基 本 放 弃 了 AS3 编 程 ， 坚 持 HTML+CSS3+JQUERY 的方向， 把前几年的积累做进了真实的项 目，产生了收益。XX-XX 年，上房房地产系列的项目，带来 前端编程技术方向的磨练。
4、在手机微场景的技术追寻过程中，感悟一个新产品 品类的学习过程。
5、互联网健身联盟，篮球队的兄弟们让我懂得协作与 沟通，人脉进一步拓展。
七月份的“有心思”电商项目，周总的执行力给我印象 很深。他只用了几天时间，找到我--劝说我加入项目--邀请 王老师加入 -- 打预付款给我们 -- 准备机票 -- 全组人到达大 理--开工。整个过程就象他的性格一样透明、爽朗。有心思 项目较严谨，有全套的项目文档、原型设计--这也是当初打 动我的原因。项目各阶段总能看到牛人的平面、影视宣传作 品，老板们在项目投入上很是舍得。人员方面，大家也紧密 配合，任劳任怨，有压力但是无戾气--这让我见识到一个电 商项目的真实推进。
很惭愧，周总高估了我在设计上的实力，我没有能帮到 项目组，只是在 bootstrap 等前端开发层面，做了一些小小 的工作。与“有心思”项目组一起在大理度过愉快一个月。
早起跑步、洗完澡开始工作、比较健康的小食堂餐饮，没有 太多生活琐事的打扰。空气好，心情也好。还认识了新来、 小胖、刘先生、小术、中亮、俊哥这些新生代的开发年轻人， 在项目完成后，大家也成了好朋友，经常交流。
小胖是一个前后端均通的小牛人，之后参加了我介绍的 诸多健身活动。他也给我介绍了另外的资源。从他身上，我 体会到了乐观和进取。
大理之行跟王老师较多交流。每天早上，我 6 点出门跑 步，回来洗完澡，老王就起来跑步了，虽然有点晚，但是略 胜于其它根本不起床的人。有一天，他早起了，我又跟着他 跑了 5 公里，那是我生平第一个 10 公里...我们可能是同类 人，有普通的生活，有幸福的家庭，有弱弱的艺术和事业追 求，意气相投。
八月，一个机缘认识了夏总--他给我的运动生活带来了 转变--把我带进了互联网健身联盟篮球队。夏总又给我介绍 了云咖啡项目。年底，他的“芒果游”项目碰到了小小难题， 我们终于有了携手的机会。他是一个勇敢和坦白的人，我很 少看到一个带头人，在不太熟的朋友面前，直陈己失--相信 他的努力必有回报。
健身联盟篮球队的经历，虽然跟工作并没有太多关系， 但是其中得失，有益身心。这个组织，至少给我增加了二十 个密切互动的圈内人脉，还有更多时有关注的外围人群。组 队比赛的过程，也更新了我自己一些陈旧的观念，与年轻人 更能相处相容。特别感谢老丁、明祥的付出，其它同队兄弟 不一一罗列，新的一年，有新的配合、合作的机会。
我从 XX 年开始，在上房科技的房地产系列网站，担任 一段时间的前端制作。写了不少奇奇怪怪的模块，并且居然 都搞成了，并上线运行了。这系列项目，推动我的前端技术， 真正从学习到应用。谢谢、刘焱、小肖、张威、黄杉、国栋 等各位兄弟。
上房是真正做事情的节奏， 永远向前破冰而行。
看过“华中心”项目那一列出来近 200 条的修改清单，以后 还有什么小修小改不能承受？ 九月份的时候，司马丢给我一个手机微场景滑动模板的 演示，问我能不能做，什么价位。从此开始，就不断有人问 起这个东西的制作。当然现在我们知道了，这就是一个的主 框架+一些时间线动画。可是当时，想做出这样一个东西， 还是太急促了。有几天时间，我边分析边陷入两难，是购买， 还是破解，还是自行开发？各方面得到的信息都不太对称。
接着几个月，象恋爱一样，追寻这个框架的进展，技术思路 渐渐清楚： 1、先是有朋友的公司可以提供收费的简单框架，一千 多。
2、有大牛团队可以提供定制。
3、接着有天，刘浩告诉我，在某网上出现了免费下载 的框架，我去问了问价，200 块，一时没舍得，自己花了点 时间，分析了被混淆的代码，发现了核心的 swiper 的调用 方式及微信分享的代码，到其官网看了看，发现了这个牛 B 的插件。
4、广电的小黄拿他的新作给我炫耀，这才看到了完全 没混淆的版本，果然就是 swiper。接下来几天，他又给了我 更多的信息，带声音的版本，带 3D flow 的版本。
5、我自己写了一个测试，至此，这个技术完全掌握。
虽然一分钱没赚到，但感觉很开心，如同炸完珍珠港的那个 返航--总有一天搞定你。
对技术的追求体验，大体如是。
还有一个能力也得到了提升， 那就是， 接单的判断能力。
不再象早两年，什么单都想接，花了不少的时间在一些不相 干的事情上。现在，很明确，询单电话过来，不出 5 句话， 基本就能判断，这是不是我的菜，有没有档期，如果做不了， 要转给哪个朋友。非我特长，就不拖泥带水。
移动互联网来势汹汹，用了十年的老知识，已经明显不 够用了，前端已经变成最热门的开发点。新的一年，我的小 工作室诚意滔滔，为所有需要我们的客户提供服务。
我儿已经五岁，月前，教他背的那首诗，多年之后，仍 会在他心中响起： 百川到东海，何时复西归，少壮不努力，老大徒伤悲。