web前端学习报告篇一：web前端学习总结Web总结一.名词解释1. 横切在固定页面的宽度并且对高度没有限制的容器称为一个标准横切2. 留白两个容器或碎片之间的上、下、左、右的空白距离3. 继承元素可以从其父级元素中获得一些可为自己使用的属性或值。
4. 图片定位把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图5. 底图页面中在标签中使用的背景图6. 齐底线用于区分横切或碎片结束的线或图7. 页面结构页面的基础框架，由横切、布局元素组成8. 焦点区最易注意的区域9. 导航在页面中具有导向性的链接集合10. 头图页面主题图片11. 间距碎片或文字间的距离12. 行高文字段落中行与行之间的距离13. 首行缩进文字段落首行缩进14. 浮动使被定义的区域脱离正常的页面文档流15. 碎片由文字、图片组合成的内容区域16. 通栏广告与页面内容区同宽的广告区域17. 功能按钮具有交互属性的按钮18. 私有样式当前页面独立使用的样式，不具备公用性19. 水平居中在页面中的某个元素处于父级的上下或左右的相同距离20. 标准头定义相同的页面头或尾元素集合二.文本格式化1. 段落：p2. 斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3. 粗体：strong（重要）b（提醒）4. 图片块：figure5. 引述文段，段落缩进：blockquote6. 背景颜色：mark7. 虚线下划线：abbr8. 上标下标：sub/sup9. 下划线：ins10. 删除线：del（标记已删除内容）s（标记不准确内容）11. 等宽字体：code12. 预格式化：pre13. 字号减小，表注释：small14. 时间：time15. 换行：br16. html5定义区块：header nav article section aside footer div span三.表单表格1. ...2. 表单元素的组织：......3. 创建各种框:注：text→password/url/tel/emailId:为了让对应的标签识别，添加CSSName：为了让服务器和脚本识别，通常与id设为一样Size：文本框大小Maxlength：能输入的最大字符数Pattern：正则表达式4. 添加标签：?5. 单选按钮：北京上海注：id各自唯一，name必须相同。
checked：默认选择6. 下拉框：北京上海成都注：size:选择框的高度multiple：允许多选selected：默认选择用?对选择框进行分组7. 上传文件：注：size：输入路径和文件名的字段的宽度8. 禁用表单元素：9. 创建提交按钮：创建带图像的提交按钮：点击这里创建图像按钮：Submit→reset重置10. 文本区域：请在此输入字符11. 表格:..........四.文本格式化1. {font：（斜体粗体小型大写字母）字体大小行距字体集（必有）;}2. 文本背景：{ background：#foc url （）repeat-x scroll 0 0；}3. 字间距：word-spacing:12px;4. 字偶距：letter-spacing:12px;5. 缩进增加：text-indent:12px;6. 小型大写字母: font-variant:small-caps;7. 文本对齐：text-align:left；适用于block，inline-block8. 单词大小写: text-transform:capitalize/uppercase/lowerc ase9. 文本上的线：text-decoraion:underline/overline/line-thro ugh;11. 空格：white-space:pre/nowrap （非断行空格）；12. h3—16px; h5—12px; verdana,Geneva,sans-serif;13. 列表属性：li{list-style:url inside square;}五.CSS布局1. width：不包括padding，border，margin；max-width设置外围限制；2. 浮动：float:left; 清除浮动：clear:both;3. 设置边框：border:dotted 4px red;4. 使元素对齐：vertical-align:baseline/middle/text-bottom. .5. 显示：display:black/inline/inline-block;6. 显示：visibility:visible/hiddle;7. 相对定位：{position:relative; top:5px;} 相对于该元素的原始位置8. 绝对定位：{position:absolute; top:5px;} 相对于body或离他最近定位的祖先元素9. 三维位置：{z-index:50;} 越大的在最上面10. 厂商前缀：-webkit- –moz- –ms-–o-11. 创建圆角：{-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}{border-radius:50px;}12. 创建椭圆角：{? ? border-radius:40px/20px;} （x半径/y半径）13. 创建圆形：{? ? border-radius:50px;} 50px为元素半径大小14. 文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径15. 元素加阴影：{box-shadow:2px 5px 5px #999; 5px 10px 2px #555;}16. 多重背景：{background:#000 url 50% 102% no-repeat,#222 url 12px -150px repeat-x;}17. 透明度：{opacity:.5;} 0→1 透明→不透明18. 渐变背景：{background:linear-gradient;}六.html5视频音频1. html5支持3种视频：.ogg/.ogv .mp4/.m4v .webm2. 添加视频：视频属性：src autoplay controls muted loop poster width height preload3. 为视频添加多个来源：//嵌入Flash动画下载该视频4. html5支持5中音频：.ogg .mp3 .wav .aac .mp45.添加音频：音频属性：src autoplay controls muted loop preload 。
多个来源同video。
七.一些约定我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。
1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；2. 样式名尽量语义化或简写；3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword；4. 使用px为基本计量单位；5. 页面中空格的使用：全角：中文空格半角；6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；7. 减少DIV的嵌套层数；8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；9. 使用正确的注释方法（详见“注释”章节）；10. 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等；11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：等，并且有正确的层次；12. 其它特殊符号：1)八.命名空间外挂样式名称全局：全局样式为全站公用，为页面样式基础，页面中必须包含。
结构：页面结构类型复杂，并且公用类型较多时使用。
多用在首页级页面和产品类页面中。
私有：独立页面所使用的样式文件，页面中必须包含。
模块产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
默认文章图片下载主题实现换肤功能时应用。
补丁基于以上样式进行的私有化修补。
常用名称页面结构容器: container页头：header内容：content/container/content页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper篇二：web前端开发学习路线首语：刚接触前端的小伙伴可能会不理解，html是什么?html其实是web 前端的基础，下面会为大家讲解什么是前端，以及如何才能把前端学好。
我们应该怎么学习web前端开发这门技术呢？现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了，并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个裙，前面是494，中间是〇六思，最后是久叁肆！在这里有最新的HTML课程免费学习也有很多人指导你进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间。
Web前端的学习误区网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。
入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。
此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。
那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗?但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE 导致我们不清楚其实现的本质，知其然但不知其所以然。
因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。
其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。
青春是学习的季节，青春是奋斗的岁月，不要停止我们前进的步伐，因为青春的路正长。
有空的时候静下心来好好看看书，回头想想自己走过的路，为自己的人生做好一个规划，把自己的理想铭刻在心中，做一个甘于寂寞，敢于创新、干劲十足的年青人。
我们要抓住金色青春，让人生中留下永恒的光辉！前端开发前景怎么样？行业发展好从我们身边的方方面面考虑，互联网行业无疑是现在发展前景最好的行业之一。