web前段学习心得体会.docx
《web前段学习心得体会.docx》由会员分享，可在线阅读，更多相关《web前段学习心得体会.docx（22页珍藏版）》请在冰豆网上搜索。
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（1.jpg）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:
url（1.jpg）insidesquare;}
五.CSS布局
1.width：
不包括padding，border，margin；max-width设置外围限制；
2.浮动：
float:
left;清除浮动：
clear:
both;
3.设置边框：
border:
dotted4pxred;（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:
2px5px5px#999;}x/y/模糊半径
15.元素加阴影：
{（-moz-/-webkit-）box-shadow:
（inset内阴影）2px5px5px#999;5px10px2px#555（多重阴影）;}
16.多重背景：
{background:
#000url（1.png）50%102%no-repeat,#222url（2.png）12px-150pxrepeat-x;}
17.透明度：
{opacity:
.5;}0→1透明→不透明
18.渐变背景：
{background:
linear-gradient（left,#000,#999）;}（left：
渐变线沿逆时针方向转至水平线的角度）
六.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）<（<）
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开发技术及其应用学习心得
大三第一学期开始，我们学习了《web应用与技术》。
在开学初，刚开始的两节课里听老师的介绍，感觉这门课还是很有兴趣的，它不像《计算机网络》那么的只是理论，又不像语言类那么的空洞。
它运用着语言，展现着生动的画面。
这门课是理论和实践的结合，虽然实验课相对来说少了点，每次实验课都会很有收获。
从一窍不通到慢慢的深入了解。
其中老师起着非常大的作用，老师讲课很丰富，展示例子多，并且很幽默。
老师还很和蔼可亲。
使对这门课的学习很有信心，每每实验课上的提问，不管简单难易，老师总是不厌其烦的解答。
一、什么是Web应用程序
接触了Web应用程序开发，才知道原己一直在接触使用Web应用程序，像在学校使用的教务管理系统还有经常用上的人人网，都是Web应用程序，我刚开始学习的是java和C应用程序，这些程序只能在本机上运行，Web应用程序首先是“应用程序”和用标准的程序语言。
然而Web应用程序又有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。
二、Web应用程序开发常用语言
Web应用程序开发常用语言有JSP、ASP、ASP.NET等，我起初学习Web编程的时候是学的JSP，它的底层语言是JAVA，由于有过Java和网页设计的基础学习起来也不是很麻烦，上手还是比较快的，但是
随着系统的复杂度的提高我发现开发越来越麻烦，每个表单和控件都要自己定义引用，由于这学期我们也开始着手学习ASP.NET,对于学习Web应用程序有很大的帮助。
ASP.NET一般分为两种开发语言，VB.NET和C#，C#相对比较常用，我们学习的也是用C#开发。
三、心得体会
我是从大学开始接触Web应用开发技术，开始时我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。
本学期的实验课很多，我们基本上一半都是在机房中实践中度过的，在这样的环境和动力下，通过自己动手、动脑，通过网络资源、老师的指导，在不断发现问题和解决问题的过程中，我学到了很多知识，也增强了我的创作能力和动手能力。
由于平时学习比较繁忙，时间比较少，对于网页设计软件的强大功能运用的还不够。
在网页设计过程中，由于缺乏练习，所以在设计时也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。
在网页设计过程中，想提高设计水平，想有个理想的网页，必须要勤奋练习，我将在以后的学习中不断努力、不断完善自己。
四、结语
总体来说，我已迈入了web技术开发设计的大门，只要我再认真努力的去学习、去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业、更完善。
在web学习方面，收获的比其他的要多的多，它的连接性，它的应用性，甚至让我想到今后是否要从事网页的开发。
这是我在大学里接触的最有意义的一门学科。
花的时间
最短而学习的一门学科。
“无可奈何花落去，似曾相识燕归来。
”一直以来很欣赏古人的这两句词，觉得很是雅美而深沉，每每读来总是能触动心灵深处那根恍然生锈的丝弦。
于这“似曾相识”的心境，经常忍不住的敛眉沉思，心弦独奏。
闭上眼睛回想着写过的web代码，竟有种“似曾相识”之感。
或许是老朋友了吧。
总而言之，web学习有趣，收获，只可意会不可言传。
Web开发技术心得体会
学院：
姓名：
杨
班级：
计科
学号：
数学与计算机科学学院蒙12106031xx032xx.12.25
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学习有趣，收获，只可意会不可言传。
内容仅供参考
升级会员 