篇一：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定义区块：header nav article section aside footer div span
三.表单表格
1. <form method="post" action="show.php" enctype="multipart/form-data">...</form>
2. 表单元素的组织：<fieldset>...</fieldset><fieldset>...</fieldset>
3. 创建各种框: <input type="text" id="name" name="name" class="zky" required="required" placeholder="请输入" value="http://" autofocus="autofocus" size="12" maxlength="20" pattern=".." />
注：text→password/url/tel/email
Id:为了让对应的标签识别，添加CSS
Name：为了让服务器和脚本识别，通常与id设为一样
Size：文本框大小
Maxlength：能输入的最大字符数
Pattern：正则表达式
4. 添加标签： <label for="idname">?</label>
5. 单(多)选按钮：
<input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" />
<label for="aaa">北京</label>
<input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" />
<label for="bbb">上海</label>
注：id各自唯一，name必须相同。checked：默认选择
6. 下拉框：
<select id="zky" name="zky" size="12" multiple="multiple">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chengdu">成都</option>
</select>
注：size:选择框的高度 multiple：允许多选 selected：默认选择 用<optgroup label="东北">?</label>对选择框进行分组
7. 上传文件：<input type="file" id="zky" name="zky" size="5" />
注：size：输入路径和文件名的字段的宽度
8. 禁用表单元素：<input ? disabled>
9. 创建提交按钮：<input type="submit" value="点此提交" />
创建带图像的提交按钮：<button type="image"><img src="1.jpg">点击这里</button> 创建图像按钮：<input type="image" alt="提交" src="1.jpg" />
Submit→reset重置
10. 文本区域：<textarea name="zky" maxlength="30" rows="5" cols="5">请在此输入字符</textarea>
11. 表格 :
<table>
<caption></caption>
<thead>
<tr>
<th scope="rowgroup">..</th>
<th scope="col">..</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">..</th>
<td rowspan="3">..</td>
<td>..</td>
</tr>
</tbody>
</table>
四.文本格式化
1. {font：（斜体 粗体 小型大写字母） 字体大小(必有) 行距 字体集（必有）;}
2. 文本背景：{ background：#foc url（1.jpg）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-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:url(1.jpg) inside square;}
五.CSS布局
1. width：不包括padding，border，margin；max-width设置外围限制；
2. 浮动：float:left; 清除浮动：clear:both;
3. 设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)
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-(safari) –moz-(firefox) –ms-(IE) –o-(opera)
11. 创建圆角：
{-moz-border-radius-topleft:50px;
-webkit-border-top-left-radius:50px;
border-top-left-radius:50px;} (左上角,角的半径是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. 元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999; 5px 10px 2px #555(多重阴影);}
16. 多重背景：{background:#000 url(1.png) 50% 102% no-repeat,#222 url(2.png) 12px -150px repeat-x;}
17. 透明度： {opacity:.5;} 0→1 透明→不透明
18. 渐变背景：{background:linear-gradient(left,#000,#999);} (left ：渐变线沿逆时针方向转至水平线的角度)
六.html5视频音频
1. html5支持3种视频：.ogg/.ogv .mp4/.m4v .webm
2. 添加视频：<video src="1.webm"></video>
视频属性：src autoplay controls muted loop poster width height preload
3. 为视频添加多个来源：
<video controls="controls">
<source src="1.mp4" type="video/mp4">
<source src="1.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="1.swf?videourl=1.mp4&control=true">
<param name="movie" value="1.swf?videourl=1.mp4&control=true">
</object> //嵌入Flash动画
<a href="1.mp4">下载该视频</a>
</video>
4. html5支持5中音频：.ogg .mp3 .wav .aac .mp4
5.添加音频：<audio src="1.ogg"></audio>
音频属性：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. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：<br />等，
并且有正确的层次；
12. 其它特殊符号：
1) <(<)
2) >(>)
八.命名空间
8.1外挂样式名称
全局：public.css
全局样式为全站公用，为页面样式基础，页面中必须包含。
结构：layout.css
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。 私有：style.css
独立页面所使用的样式文件，页面中必须包含。
模块 module.css
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
默认 default.css
文章 article.css
图片 photo.css
下载 soft.css
主题 themes.css
实现换肤功能时应用。
补丁 mend.css
基于以上样式进行的私有化修补。
8.2常用名称
(1)页面结构
容器: container
页头：header
内容：content/container/content(A)
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
篇二：前端开发心得
web前端核心技术
从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html5、css3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。
关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6\7\8\9，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。
前端的开发工具很多，比较常见的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,检查错误等。调试代码的工具我使用的Firebug。Firebug是网页浏览器Mozilla firefox 下的一款开发类插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom 以及Javascript代码。
以上是自己做前端开发的一点心得，它所涵盖的知识面远远不止这些，我也在不断的学习，不断地丰富自己，希望自己能在前端这个职位上开阔自己的一片天地！
篇三：web心得体会
Web学习心得体会
这学期接近尾声的一个月里我们又继续我们开学本就该学的《web应用与技术》。在开学初，刚开始的两节课里听老师的介绍，感觉这门课还是很有兴趣的，它不像《计算机网络》那么的只是理论，又不像语言类那么的空洞，敲着代码出来个黑框框。它运用着语言，展现着生动的画面，只有你有想法，你很可能就会在小小的浏览器里实现呢。
这门课是理论和实践的结合，虽然实验课相对来说少了点，每次实验课都会很有收获。从一窍不通到慢慢的深入了解。其中老师起着非常大的作用，老师讲课很丰富，展示例子多，并且很幽默。老师还很和蔼可亲。使对这门课的学习很有信心，每每实验课上的提问，不管简单难易，老师总是不厌其烦的解答，实验课老师是最忙碌的。使我对学习这门课的信心倍增。
首先接触的是开发运行环境，Tomcat的配置，以及对MyEclipse的使用。不得不佩服人类的大脑，它就是个小宇宙，这些神奇的东西都是上辈的智慧结晶，我们在运用着这些结晶，一直为选择计算机专业而后悔，天天对着电脑敲着代码，今天带着另一种眼光来看计算机，其实是很有趣的，我们在一点点的学习着先辈们的智慧结晶。这些神奇的软件，它是怎么样的应运而生的。实在是让人遐想万千，他们是怎么知道要做这些的。配置好了Tomcat，新建的web工程部署进去就可以在浏览器里访问自己编写的html.。学习总是一个由浅到深的过程，慢慢的接触css，javascript，servlet，jsp。由于实用以及方便性，软件在不断的更新，语言也在不断的更新。很不幸的是我曾经把jsp和javascript弄混淆了。这学期课程是很繁重的，虽然不太多，但是内容是相当的难。可能有时对web的偷懒就是以忙为借口的吧。终于其它课程结束了，可以好好的学习web了。不管你学或者不学，web就在那里，不来不去。
期末web课程设计如期而至，说实话，web学的是半深半浅，考考试，做做实验还可以，做一个系统恐怕、、、、、、就这样打开电脑好好的研究web了。好的web工程不是一两个html，jsp就可以完成的，其实要思考，要想的很多。夸张点说web课程设计我们可谓“衣带渐宽终不悔，为伊消得人憔悴”。晚上做梦还是jsp。由于开始的基础不好，后期付出的代价是可想而知的，如今课程设计已经结束，在web学习方面，收获的比其他的要多的多，它的连接性，它的应用性，甚至让我想到今后是否要从事网页的开发。这是我在大学里接触的最有意义的一门学科。花的时间最短而学习的一门学科。“无可奈何花落去，似曾相识燕归来。”一直以来很欣赏古人的这两句词，觉得很是雅美而深沉，每每读来总是能触动心灵深处那根恍然生锈的丝弦。于这“似曾相识”的心境，经常忍不住的敛眉沉思，心弦独奏。闭上眼睛回想着写过的web代码，竟有种“似曾相识”之感。或许是老朋友了吧。总而言之，web学习有趣，收获，只可意会不可言传。
《web前段学习心得体会》
由：免费论文网互联网用户整理提供,链接地址：
http://m.csmayi.cn/show/95922.html
转载请保留,谢谢!
- 上一篇：党员6个能否心得体会
- 下一篇：人社部门面临的新形势