web前端学习报告.docx
《web前端学习报告.docx》由会员分享，可在线阅读，更多相关《web前端学习报告.docx（13页珍藏版）》请在冰豆网上搜索。
web前端学习报告
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.段落：
p
2.斜体：
address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）
3.粗体：
strong（重要）b（提醒）
4.图片块：
figure
5.引述文段，段落缩进：
blockquote
6.背景颜色：
mark
7.虚线下划线：
abbr
8.上标下标：
sub/sup
9.下划线：
ins
10.删除线：
del（标记已删除内容）s（标记不准确内容）
11.等宽字体：
code
12.预格式化：
pre
13.字号减小，表注释：
small
14.时间：
time
15.换行：
br
16.html5定义区块：
headernavarticlesectionasidefooterdivspan
三.表单表格
1....
2.表单元素的组织：
......
3.创建各种框:
注：
text→password/url/tel/email
Id:
为了让对应的标签识别，添加CSS
Name：
为了让服务器和脚本识别，通常与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：
#focurl（）repeat-xscroll00；}
3.字间距：
word-spacing:
12px;
4.字偶距：
letter-spacing:
12px;
5.缩进增加：
text-indent:
12px;
6.小型大写字母:
font-variant:
small-caps;
7.文本对齐：
text-align:
left；适用于block，inline-block
8.单词大小写:
text-transform:
capitalize/uppercase/lowercase
9.文本上的线：
text-decoraion:
underline/overline/line-through;
11.空格：
white-space:
pre/nowrap（非断行空格）；
12.h3—16px;h5—12px;verdana,Geneva,sans-serif;
13.列表属性：
li{list-style:
urlinsidesquare;}
五.CSS布局
1.width：
不包括padding，border，margin；max-width设置外围限制；
2.浮动：
float:
left;清除浮动：
clear:
both;
3.设置边框：
border:
dotted4pxred;
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:
2px5px5px#999;}x/y/模糊半径
15.元素加阴影：
{box-shadow:
2px5px5px#999;5px10px2px#555;}
16.多重背景：
{background:
#000url50%102%no-repeat,#222url12px-150pxrepeat-x;}
17.透明度：
{opacity:
.5;}0→1透明→不透明
18.渐变背景：
{background:
linear-gradient;}
六.html5视频音频
1.html5支持3种视频：
.ogg/.ogv.mp4/.m4v.webm
2.添加视频：
视频属性：
srcautoplaycontrolsmutedloopposterwidthheightpreload
3.为视频添加多个来源：
//嵌入Flash动画
下载该视频
4.html5支持5中音频：
.ogg.mp3.wav.aac.mp4
5.添加音频：
音频属性：
srcautoplaycontrolsmutedlooppreload。
多个来源同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。
青春是学习的季节，青春是奋斗的岁月，不要停止我们前进的步伐，因为青春的路正长。
有空的时候静下心来好好看看书，回头想想自己走过的路，为自己的人生做好一个规划，把自己的理想铭刻在心中，做一个甘于寂寞，敢于创新、干劲十足的年青人。
我们要抓住金色青春，让人生中留下永恒的光辉！
前端开发前景怎么样？
行业发展好
从我们身边的方方面面考虑，互联网行业无疑是现在发展前景最好的行业之一。
潭州教育致力于改变中国IT实践教学模式，引领中国IT教学技术标准与人才培养标准。
让想学习的人随时随地都可以进行学习！
人才需求大
互联网对人们的影响越来越大，各类职业也需求更多，前端的人才需求比以前也有了质的飞跃。
我们希望从业者：
“我们不是为了学技术而去学技术，我们学技术是为了能更好去做产品”。
最后引用乔布斯的话，Web就是未来，我们作为前端开发工作者也是未来。
相信Web前端开发的明天会更好。
篇三：
最新web前端学习路线
最新web前端的学习路线
程序设计之道无远弗届，御晨风而返。
————杰佛瑞·詹姆士很多前端初学者总会问以下两个问题：
第一种一直在问：
如何学习前端？
第二种总说：
前端很简单，就那么一点东西。
我从没有听到有人问：
如何做一名优秀、甚至卓越的WEB前端工程师。
详细了解成为一个优秀的前端工程师，都需要具备哪些特质？
何为前端工程师
前端工程师，也叫Web前端开发工程师。
他是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：
HTML、CSS和JavaScript!
HTML甚至不是一门语言，他仅仅是简单的标记语言!
CSS只是无类型的样式修饰语言。
当然可以勉强算作弱类型语言。
Javascript的基础部分相对来说不难，入手还算快。
此篇文章中就HTML、CSS、JS都有哪些区别？
进行了全面的解读！
前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
现在市场很需要优秀的、高级的前端工程师。
一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统;另一方面，大学里面没有这种课程，可以加入web前端学习君羊：
前面数字是五一四，中间数字是一六七，后面三位数字是六七八，将数字串联起来，了解学习更多在学校学不到的技术干货。
如何学习前端知识
我们生活在一个充满规则的宇宙里面。
社会秩序按照规则运行，计算机语言几乎全部是规则的集合。
计算机前辈们定义规则，规则约束我们，我们用规则控制数据。
大部分时候，对数据的合理控制，来自于你对规则的掌握。
学习HTML，CSS应该先跟着书仔细、扎实的学一遍。
然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
而学习Javascript首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!
如果你只想当一个普通的前端程序员，你只需要记住大部分Javascript函数，做一些练习就可以了。
如果你想当深入了解Javascript，你需要了解Javascript的原理、机制。
需要知道他们的本源，需要深刻了解Javascript基于对象的本质。
还需要深刻了解浏览器宿主下的Javascript的行为、特性。
初学者全面了解JavaScript，用心读这篇文章掌握六大JavaScript框架，薪水就是比同级别高！
作为一个优秀的前端工程师还需要深入了解、以及学会处理Javascript的这些缺陷。
优秀的前端工程师应具备什么条件
首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度!
做到这两点，其实很难。
所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。
技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。
成为一个优秀的前端工程师，都需要具备哪些特质？
现在，只掌握这些已经远远不够了。
无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，它的主要职能就是把网站的界面更好地呈现给用户。
优秀的Web前端开发工程师应该具备快速学习能力
Web发展的很快，甚至可以说这些技术几乎每天都在变化!
如果没有快速学习能力，就跟不上Web发展的步伐。
前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。
Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
说到这里，我想起了一个大师说过的一句话：
对于新手来说，新技术就是新
技术。
对于一个高手来说，新技术不过是就技术的延伸。
优秀的前端工程师需要具备良好的沟通能力
因为前端工程师至少都要满足四类客户的需求：
1、产品经理。
这些是负责策划应用程序的一群人。
他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。
一般来说，产品经理都追求丰富的功能。
2、UI设计师。
这些人负责应用程序的视觉设计和交互模拟。
他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。
一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成1px的误差。
3、项目经理。
这些人负责实际地运行和维护应用程序。
项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。
项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
4、最终用户。
指的是应用程序的主要消费者。
尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。
最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
总结
要做优秀的前端工程师，还需要继续努力：
《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“jQuery库”、“前端框架”、“HTML5”、“CSS3”这些都要深入研究!
万事开头难！
如果你能到这个境界，剩下的路自己就可以走下去了。
人们常说：
不想当裁缝的司机，不是个好厨师。
在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳，如果你对前端开发有更多的见解以及不同的意见，欢迎留言将您的见解分享给所有web前端开发爱好者。
程序设计之道无远弗届，御晨风而返。
————杰佛瑞·詹姆士
现在互联网的大环境的发展如日中天，网络已经深入到每个人生活的的各个
方面，各种项目层出不穷，以及各种定制化的ui风格神马的，PC端、手机端、mobile端，各种兼容问题真的很浪费时间，大家在不断的摸索中发现，把html+css+js这部分工作独立出来一个新的岗位来处理。
发展前景我是看好的，对于一个技术行业，我认为首先如何提升自己的个人能力是保持行业发展的源动力。
没有真是过硬的技术，前景发展都是免谈。
那么很多情况又是这样：
第一种一直在问：
如何学习前端？
第二种总说：
前端很简单，就那么一点东西。
我从没有听到有人问：
如何做一名优秀、甚至卓越的WEB前端工程师。
详细了解成为一个优秀的前端工程师，都需要具备哪些特质？
何为前端工程师
前端工程师，也叫Web前端开发工程师。
他是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：
HTML、CSS和JavaScript!
HTML甚至不是一门语言，他仅仅是简单的标记语言!
CSS只是无类型的样式修饰语言。
当然可以勉强算作弱类型语言。
Javascript的基础部分相对来说不难，入手还算快。
此篇文章中就HTML、CSS、JS都有哪些区别？
进行了全面的解读！
前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
现在市场很需要优秀的、高级的前端工程师。
一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统;另一方面，大学里面没有这种课程，可以加入web前端学习君羊：
前面数字是五一四，中间数字是一六七，后面三位数字是六七八，将数字串联起来，了解学习更多在学校学不到的技术干货。
如何学习前端知识
我们生活在一个充满规则的宇宙里面。
社会秩序按照规则运行，计算机语言几乎全部是规则的集合。
计算机前辈们定义规则，规则约束我们，我们用规
则控制数据。
大部分时候，对数据的合理控制，来自于你对规则的掌握。
学习HTML，CSS应该先跟着书仔细、扎实的学一遍。
然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
而学习Javascript首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!
如果你只想当一个普通的前端程序员，你只需要记住大部分Javascript函数，做一些练习就可以了。
如果你想当深入了解Javascript，你需要了解Javascript的原理、机制。
需要知道他们的本源，需要深刻了解Javascript基于对象的本质。
还需要深刻了解浏览器宿主下的Javascript的行为、特性。
初学者全面了解JavaScript，用心读这篇文章掌握六大JavaScript框架，薪水就是比同级别高！
作为一个优秀的前端工程师还需要深入了解、以及学会处理Javascript的这些缺陷。
优秀的前端工程师应具备什么条件
首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度!
做到这两点，其实很难。
所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。
技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。
成为一个优秀的前端工程师，都需要具备哪些特质？
现在，只掌握这些已经远远不够了。
无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且
升级会员 