前端自我总结

精品文档 2016 全新精品资料 全程指导写作 独家原创 1 / 45 前端自我总结 篇一： 端开发经验总结 通过此次大作业的设计到完成，我负责的是 端的开发，经过此次作业和结合 渐渐有了一些对前端开发的小小经验（仅为个人意见）。 说是 准，不过我这里主要是对 一些经验总结。因为 一系列标准的总称，包括 以这里要跟大家指出来一下， 准不是我们所说的 刚刚上面提到了 里要说明下，这样说其实是不正确的。 确的说法（个人的理解）应该是：采用 荐的 准中的 合 式表制作页面的方法， 采用 那么 什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用 准开发（个人理解的）相对以前 1、节约运营成本 精品文档 2016 全新精品资料 全程指导写作 独家原创 2 / 45 看看我们的 采用 准制作，我们可以做到表现很形式的分离，我们用 表现（数据），用 控制（页面元素呈现的）形式。写的好的页面， 码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的 控制。这样一来我们的（ 面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下， K， 100么带宽节约了多少？而且可 以更充分的利用带宽。 而我们的 制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个 可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。 2、对用户友好更友好，且有机会获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。 第一类：普通用户（每个访问我们网站的人）； 第二类：搜索引擎； 采用 准开发的 页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，精品文档 2016 全新精品资料 全程指导写作 独家原创 3 / 45 且页面的结构清晰，要找的数据可以很方便的浏览到。 而对搜索引擎来说，一个好的采用 准开发的页面，都是做过 访问起来很友好，很容易理解你的页面中哪里是标题（ 6 标签），哪里是段落（ p 标签），哪里是段落里要强调的内容（ 签） 等，它可以很容易的分析出来。而一个 家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更 多的普通用户访问到，给你的站点带来更多的用户。 一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？ 这个也正式我们的 荐使用 准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习 合理的布局 前面我提到了一些知识点“结构清晰、 面体积小、 码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用 以我这里就先来说这个话题。 也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用 准的精品文档 2016 全新精品资料 全程指导写作 独家原创 4 / 45 问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。 在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片： 不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。 这是此次实验中 端的一项）部分的完整代码： % 精品文档 2016 全新精品资料 全程指导写作 独家原创 5 / 45 精品文档 2016 全新精品资料 全程指导写作 独家原创 6 / 45 00 14 237 D= 精品文档 2016 全新精品资料 全程指导写作 独家原创 7 / 45 0:d)% 精品文档 2016 全新精品资料 全程指导写作 独家原创 8 / 45 看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是 用户要看的数据，其中只包含了很少（必要）的布局 (签（请允许我这么说）。整个页面基本都是由最基础的 h1p、 说到这里就要讲到我在前面提到的“结构清晰、 化、页面体积小、 看看我的这个例子做到了没有？ 结构清晰 签要结构化。 什么叫结构化？ 由于个人认为这个知识点是十分重要的，我采用 准的方法制作页面的优势就体现在页面结构清晰。我以前用局的 时候，我的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而我上面给大家展示的代码，很明显，结构十分清晰。 h1用这些标签，因为这个标签的意思就是说，这个是一个标题，精品文档 2016 全新精品资料 全程指导写作 独家原创 9 / 45 不仅我们的用户很容易理解 英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化 的页面，对用户是十分友好的。 落） 序的列表 ) 序的列表 ) 表项 ) 域 ) 我写成这样就便于理解了，原来 于其他的标签的语意义，大家可以自己到 可以查看语义化你的 所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用 h1果是一个段落的介绍文字，那么就应该使用 p 标签，如果是显示的一个没有顺序的列表，就应该用 签，如此 . 所 以看这个例子里 标签导航实例详解 这么写就是很合理的， 签就说明这里是个标题。而这么写： 复制内容到剪贴板代码 : 精品文档 2016 全新精品资料 全程指导写作 独家原创 10 / 45 8. 标签导航实例详解 虽然用了 强调说明这部分文字，但是还是没有 还有这么写 我并不喜欢写成这样，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让浏览器解析起来会更容易，速度更快。 所我们使用 准开发页面，绝对不是单纯的把以前的采用标准制作页面，也不意味着我们就不使用 要把握我刚才说的原则，使用合理的标签显示相应特征的数据。 其实我的 签是一个很好的用来显示二维数据的标签，而 不是用来布局的，只是很多人都会用 篇二： 精华版 ) 一 1. 横切 精品文档 2016 全新精品资料 全程指导写作 独家原创 11 / 45 在固定页面的宽度 (按栅格化进行 )并且对高度没有限制的容器称为一个标准横切 2. 留白 两个容器或碎片之间的 上、下、左、右的空白距离 3. 继承 元素可以从其父级元素中获得一些可为自己使用的属性或值。 4. 图片定位 把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用 用于页面中的修饰图 5. 底图 页面中在标签中使用的背景图 6. 齐底 (图 )线 用于区分横切或碎片结束的线或图 7. 页面结构 页面的基础框架，由横切、布局元素组成 8. 焦点区 (图 ) 最易注意的区域 9. 导航 在页面中具有导向性的链接集合 10. 头图 精品文档 2016 全新精品资料 全程指导写作 独家原创 12 / 45 页面主题图片 11. 间距 碎片或文字间的距离 12. 行高 文字段落中行与行之间的距离 13. 首行缩进 文字段落首行缩进 14. 浮动 使被定义的区域脱离正常的页面文档流 15. 碎片 由文字、图片组合成的内容区域 16. 通栏广告 与页面内容区同宽的广告区域 17. 功能按钮 具有交互属性的按钮 18. 私有样式 当前页面独立使用的样式，不具备公用性 19. 水平 (垂直 )居中 在页面中的某个元素处于父级的上下或左右的相同距离 20. 标准头 (尾 ) 定义相同的页面头或尾元素集合 二 精品文档 2016 全新精品资料 全程指导写作 独家原创 13 / 45 1. 段落： p 2. 斜体： 系信息） 调） i（突出不同）用） 次定义术语） 3. 粗体： 要） b（提醒） 4. 图片块： . 引述文段，段落缩进： . 背景颜色： . 虚线下划线： . 上标下标： . 下划线： 0. 删除线： 记已删除内容） s（标记不准确内容） 11. 等宽字体： 2. 预格式化： 3. 字号减小，表注释： 4. 时间： 5. 换行： 6. 义区块： 1. . 2. 表单元素的组织： . 3. 创建各种框 : 精品文档 2016 全新精品资料 全程指导写作 独家原创 14 / 45 注： d:为了让对应的标签识别，添加 了让服务器和脚本识别，通常与 本框大小 输入 的最大字符数 则表达式 4. 添加标签： ? 5. 单 (多 )选按钮： 北京 上海 注： 认选择 6. 下拉框： 北京 上海 成都 注： 择框的高度 许多选 认选择 用 ?对选择框进行分组 7. 上传文件： 精品文档 2016 全新精品资料 全程指导写作 独家原创 15 / 45 注： 入路径和文件名的字段的宽度 8. 禁用表单元素： 9. 创建提交按钮： 创建带图像的提交按钮：点击这里 创建图像按钮： 10. 文本区域：请在此输入字符 11. 表格 : . . . . . 精品文档 2016 全新精品资料 全程指导写作 独家原创 16 / 45 四 1. 斜体 粗体 小型大写字母） 字体大小 (必有 ) 行距 字体集（必有） ; 2. 文本背景： #） 0； 3. 字间距： 24. 字偶距： 25. 缩进增加： 26. 小型大写字母 : 7. 文 本 对 齐 ： 适 用 于 . 单词大小写 : 词首字母大写 )/写 )/写 ) 9. 文本上的线：11. 空格： 示所有空格回车 )/断行空格）； 12. 161213. 列 表 属 性 ： li独家原创 17 / 45 五 1. 包括 围限制； 2. 浮动： 清除浮动： 3. 设置边框： px 状、线、 4. 使元素对齐： 5. 显示： 6. 显示： 7. 相对定位： 相对于该元素的原始位置 8. 绝对定位： 相对于9. 三维位置： 0; 越大的在最上面 10. 厂商前缀： E) o-(11. 创建圆角： 000 (左上角 ,角的半径是精品文档 2016 全新精品资料 全程指导写作 独家原创 18 / 45 500(所有角简写 ) 12. 创建椭圆角： ? ? 00 （ 13. 创建圆形： ? ? 0 50元素半径大小 14. 文本加阴影： 2999; x/y/模糊半径 15. 元素加阴影： (2999; 50555(多重阴影 ); 16. 多重背景： 000 50% 102% 222 12150 17. 透明度： 5; 0 1 透明不透明 18. 渐 变 背 景 ：000,#999); (渐变线沿逆时针方向转至水平线的角度 ) 六 频音频 1. 持 3 种视频： . 添加视频： 视频属性： . 为视频添加多个来源： 精品文档 2016 全新精品资料 全程指导写作 独家原创 19 / 45 /嵌入 下载该视频 4. 持 5 中音频： 音频属性： 多个来源同 七 我们结合常用的一些命名习惯，再结合 实际应用，整理出一些较好的命名习惯。 1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符； 2. 样式名尽量语义化或简写； 3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即： 4. 使用 素 )为基本计量单位； 5. 页面中空格的使用：全角：中文空格 半角； 精品文档 2016 全新精品资料 全程指导写作 独家原创 20 / 45 6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名； 7. 减少 8. 给重要图片加上 重要的元素和截断的元素加上 9. 使用正确的注释方法（详见“注释”章节）； 10. 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如： ； 11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /” ,例如： 等， 并且有正确的层次； 12. 其它特殊符号： 1) 2) () 八 全局： 局样式为全站公用，为页面样式基础，页面中必须包含。 结构： 面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。 私有： 品文档 2016 全新精品资料 全程指导写作 独家原创 21 / 45 独立页面所使用的样式文件，页面中必须包含。 模块 品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。 默认 章 片 载 题 现换肤功能时应用。 补丁 于以上样式进行的私有化修补。 (1)页面结构 容器 : 头： 容： ) 页面主体： 尾： 航： 栏： 目： 品文档 2016 全新精品资料 全程指导写作 独家原创 22 / 45 页面外围控制整体布局宽度： 三： 发布 时间： 20099:05:33 来源： 作者： 点击： 21015 这里跟大家谈谈个人对 端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从 说是 准，不过我这里主要是对 为 一系列标准的总称，包括 等。所以这里要跟大家指出来一下， 准不是我们所说的 刚刚上面提到了 里要说明下，这样说其实是不正确的。 人的理解）应该是：采用 采用 那么 什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用 准开发（个人理解的）相对以 前精品文档 2016 全新精品资料 全程指导写作 独家原创 23 / 45 1、节约运营成本 看看我们的 采用 准制作，我们可以做到表现很形式的分离，我们用 表现（数据），用 控制（页面元素呈现的）形式。写的好的页面， 码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的 控制。这样一来我们的（ 面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下， K， 100么带宽节约了多少？而且 可以更充分的利用带宽。 而我们的 制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个 可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。 2、对用户友好更友好，且有机会获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。 第一类：普通用户（每个访问我们网站的人）； 第二类：搜索引擎； 采用 准开发 的页面，结构清晰，页面体积小，浏览精品文档 2016 全新精品资料 全程指导写作 独家原创 24 / 45 器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。 而对搜索引擎来说，一个好的采用 准开发的页面，都是做过 访问起来很友好，很容易理解你的页面中哪里是标题（ 6 标签），哪里是段落（ p 标签），哪里是段落里要强调的内容（ 签） 等，它可以很容易的分析出来。而一个 家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被 更多的普通用户访问到，给你的站点带来更多的用户。 一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的 荐使用 这个技术也得到了我们广大用户的认可，所以您现在需要学习 温习完了基础课程，现在正式开始讲 合理的布局 有朋友会开始问了，怎么一开始就开始讲合理的布局了呢 ?前面我们提到了一些知识点“结构清晰、 化、 页面体积小、 这些东西，都是我们做了合理布局的结果。而且我个人觉得，我精品文档 2016 全新精品资料 全程指导写作 独家原创 25 / 45 们采用 以我这里就先来说这个话题。 那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。 在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片： 不错，这个是一个文章详细页， 没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。 我这里先把代码写给大家看看（省略了部分代码）： 来源： 发布时间： 2008年 4 月 28日 代码篇 之前整理发表了 属性和方法简介 ,它 使用的核心的技术之一，现在就来实际运用它。这个 签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个 人能力有限，有什么不对的地方还请多包含 ! 精品文档 2016 全新精品资料 全程指导写作 独家原创 26 / 45 效果大家看到了，核心功能有： 1、将当前选中标签以特殊的样式显示 2、将异步加载的页面信息显示到指定的 我们来看看处理脚本的代码吧： 程序代码： 是我们的导航标签的 精品文档 2016 全新精品资料 全程指导写作 独家原创 27 / 45 - 前 (第一个 )标签的样式； - 过” -“分开，我们就分别可以得到 航标签 0（标签 导航标签中的索引值） 网站重构 - 超链接 - 标签间的分割线 我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理 (一点 理的技巧 )。 本来想偷个懒，让大家看我上边说的那篇文章，想想也就是 &,都贴出来吧！呵呵！ 精品文档 2016 全新精品资料 全程指导写作 独家原创 28 / 45 不过还没有完， 最后要说的就是 个特性，这里我们还要感谢微软啊， 端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！ 当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈程等等的，今天就收工了，谢谢捧场先！ 2007y: 品文档 2016 全新精品资料 全程指导写作 独家原创 29 / 45 看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局 (签（请允许我这么说）。整个页面基本都是由最基础的 h1p、 说到这里就要讲到我在前面提到的“结构清晰、 化、页面体积小、 看看我的这个例子做到了没有？ 结构清晰 意化）。 什么叫结构化？ 由于个人 认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用 准的方法制作页面的优势就体现在页面结构清晰。我们以前用 们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。 说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？ 篇四： 隐藏一个 精品文档 2016 全新精品资料 全程指导写作 独家原创 30 / 45 更改元素的 为 外还可以将 为 明度设为 0，或长、宽设为 0。 横向居中对齐的布局，请写出主要的 1. ” 2. 3. 4. 5. 居中 6. 7. 6008. 0 9. 0; 0 10. 11. 12. 13. 居中 14. 15. 精品文档 2016 全新精品资料 全程指导写作 独家原创 31 / 45 外边距，属于元素之外，相邻元素的 以融合。 内边距，在元素之内，相邻元素的 写出函数实现 = ” ; 求网页上实时动态显示“年还剩天时分秒” 这个看我论坛右上角的就知道了 题目貌似有问题，应该是减少数据量吧。 最显著的方法是启用 外保持好的编码习惯，避免重复和 码，多余的 鼠标单击后 精品文档 2016 全新精品资料 全程指导写作 独家原创 32 / 45 ，将 a、 b 打包为 令是（ ） 不知道。 使用中如何取舍？ 缺点是需要客户端安装 较大，且更改了默认的 面行为；但可以方便地实现很多特效及动画，且具有较高权限。 缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是 供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。 此外，二者都不能被搜索引擎索引（ 支持 不利于 建议 :重要和关键部分直接用互部分可以使用 杂的动画可采用 百度 2010 1、 5 分 答：主要的类型有 及 型 ,其他两种类型为 精品文档 2016 全新精品资料 全程指导写作 独家原创 33 / 45 2、 10分 答： 如为链接添加描述性文字。 为不能显示图像、窗体或用户代理（ 用 3、 0分 答： 、 列，左边宽度自适应，右边宽 度固定 2005分 1. #00%;00px; 2. #00px;px 00%; 3. #00px;00%;px;px;px 4. 5. 6. 精品文档 2016 全新精品资料 全程指导写作 独家原创 34 / 45 7. 5、 20分 1. 2. 3. 4. ; 5. o in o)=o=o; 7. 8. 6、动态打 印时间，格式为 hh:mm:15 分 1. 2. ; 3. ; 4. 年月 /g,-); 5. 日 /,); 6. 7. ,1000); 7、如何提高网页运行性能？ 20 分 没写。 精品文档 2016 全新精品资料 全程指导写作 独家原创 35 / 45 8、 删除当前目录下扩展名为 c 的文件（如 a.c，5 分 r *.c * f /;找到当前目录（ .）下扩展名为 (文件并拷贝到指定目录【注意 f 指普通文件， 列出文件，最后加上 】 cp制 9、 面向对象方面的异同？10分 答：面向对象方面， 到了 向对象被引入了，但它实质上是动态脚本语言，虽然已经有了类的概念和 对象支持还是基于类似 制 动态继承。 时支持静态类型，即基于类的继承方式；以及动态类型，即基于 荐用静态类型。 10、 自的优缺点，在使用中如何取舍？ 10分