web前端学习报告Word格式文档下载.docx
- 文档编号:3830385
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:14
- 大小:23.56KB
web前端学习报告Word格式文档下载.docx
《web前端学习报告Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《web前端学习报告Word格式文档下载.docx(14页珍藏版)》请在冰点文库上搜索。
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(/xuexibaogao_1223/1.jpg)repeat-xscroll00;
3.字间距:
word-spacing:
12px;
4.字偶距:
letter-spacing:
5.缩进增加:
text-indent:
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(/xuexibaogao_1223/1.jpg)insidesquare;
五.CSS布局
1.width:
不包括padding,border,margin;
max-widt
h设置外围限制;
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.绝对定位:
absolute;
}相对于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:
border-top-left-radius:
}(左上角,角的半径是50px)
{border-radius:
}(所有角简写)
12.创建椭圆角:
{?
border-radius:
40px/20px;
}(x半径/y半径)
13.创建圆形:
}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.渐变背景:
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前端开发学习路线
首语:
刚接触前端的小伙伴可能会不理解,html是什么?
html其实是web前端的基础,下面会为大家讲解什么是前端,以及如何才能把前端学好。
我们应该怎么学习web前端开发这门技术呢?
现在很多小伙伴喜欢在互联网上找视频资料学习网页制作,但是光看视频你是不可能学会网页制作的,没有人指导你,而且很多视频已经过时了,并没有什么用!
如果你真的想学习网页制作这门技术,你可以来这个裙,前面是494,中间是〇六思,最后是久叁肆!
在这里有最新的HTML课程免费学习也有很多人指导你进步,不需要你付出什么,只要你是真心想学习的,随便看看的就不要加了,加了也是浪费大家的时间。
Web前端的学习误区
网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。
入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。
此时,很多人会陷入一个误区,那就是既然借助这么帅的IDE,通过鼠标点击菜单就可以快速方便地制作网页。
那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?
这不是舍简求繁吗?
但是随着学习的深入,就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质,知其然但不知其所以然。
因此在页面效果出现问题时,我们便手足无措,更不用提如何进行页面优化以及完成一些更高级的应用了。
其原因是显而易见的——聪明的IDE成全了我们的惰性,
使我们忽略了华丽的网页背后最
本质的内容——code。
青春是学习的季节,青春是奋斗的岁月,不要停止我们前进的步伐,因为青春的路正长。
有空的时候静下心来好好看看书,回头想想自己走过的路,为自己的人生做好一个规划,把自己的理想铭刻在心中,做一个甘于寂寞,敢于创新、干劲十足的年青人。
我们要抓住金色青春,让人生中留下永恒的光辉!
前端开发前景怎么样?
行业发展好
从我们身边的方方面面考虑,互联网行业无疑是现在发展前景最好的行业之一。
潭州教育致力于改变中国IT实践教学模式,引领中国IT教学技术标准与人才培养标准。
让想学习的人随时随地都可以进行学习!
人才需求大
互联网对人们的影响越来越大,各类职业也需求更多,前端的人才需求比以前也有了质的飞跃。
我们希望从业者:
“我们不是为了学技术而去学技术,我们学技术是为了能更好去做产品”。
最后引用乔布斯的话,Web就是未来,我们作为前端开发工作者也是未来。
相信Web前端开发的明天会更好。
篇三:
WEB前端开发经验总结
ASP.NET前端开发经验总结
通过此次大作业的设计到完成,我负责的是web前端的开发,经过此次作业和结合W3C上的自学,我渐渐有了一些对前端开发的小小经验(仅为个人意见)。
WEB标准是什么?
说是WEB标准,不过我这里主要是对HTML5和CSS3.0的一些经验总结。
因为WEB含盖的内容实在是太多了,“WEB标准”是一系列标准的总称,包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。
所以这里要跟大家指出来一下,WEB标准不是我们所说的DIV+CSS。
刚刚上面提到了――DIV+CSS,这里要说明下,这样说其实是不正确的。
DIV+CSS准确的说法(个人的理解)应该是:
采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法,DIV应该指的是HTML标签,而CSS显示是指的CSS样式表了。
采用WEB标准开发的好处
那么W3C为什么会推荐这样的页面制作方法呢?
下面我们就简单的看看采用WEB标准开发(个人理解的)相对以前TABLE布局的优势有哪些?
1、节约运营成本
看看我们的WEB标准制作方法是如何做到的?
采用WEB标准制作,我们可以做到表现很形式的分离,我们用XHTML来表现(数据),用CSS来控制(页面元素呈现的)形式。
写的好的页面,XHTML代码中基本上都是用户要看的数据,还其他修饰性的东西,全部由我们的CSS来控制。
这样一来我们的(XHTML)页面的体积就大大减小了,这样你在带宽上的费用就会大家降低了,这个怎么降低的,你可以想象一下,YAHOO的首页小1K,100W个人一起访问,那么带宽节约了多少?
而且可以更充分的利用带宽。
而我们的CSS控制了,所有的页面元素的样式,现在想改网站的整体风格,你只需要花几分钟修改一下一个CSS文件,就可以轻松搞定了。
维护的成本也下来了,省了不少钱了吧?
还有,你开这个页面的速度会快很多啊,一个让你等半分钟的页面,除非里面的信息对你很有用,不然我们大家基本都没有太多的时间去用来等待的。
2、对用户友好更友好,且有机会获得更多的用户
现在来说说用户友好。
首先我想把我们的用户来分下类。
第一类:
普通用户(每个访问我们网站的人);
第二类:
搜索引擎;
采用WEB标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。
普通用户访问的时候,页面打开速度快,而且不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的数据可以很方便的浏览到。
而对搜索引擎来说,一个好的采用WEB标准开发的页面,都是做过SEO优化的,它访问起来很友好,很容易理解你的页面中哪里是标题(H1~H6标签),哪里是段落(p标签),哪里是段落里要强调的内容(strong标签)等,它可以很容易的分析出来。
而一个SEO好的站点,大家都知道,被搜索引擎收录的机会更多,这个也意味着您的网站会被更多的普通用户访问到,给你的站点带来更多的用户。
一个能帮我们省下大笔费用,提高工作效率。
同时又能够提高页面浏览速度,对用户友好,甚至能够不花钱宣传,就能给你带来更多用户的技术。
你说你会不会去使用它?
这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。
而这个技术也得到了我们广大用户的认可,所以现在需要学习WEB标准啊。
合理的布局
前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。
这些东西,都是我做了合理布局的结果。
而且我个人觉得,我们采用WEB标准制作的一切都是从这个知识点开始的,所以我这里就先来说这个话题。
也许有人会问,怎样的一个页面,才算是合理的布局的呢?
这个问题问题问得好,也是我们大家刚开始学用WEB标准的问得最多的问题之一,我也曾经常被这个问题所困扰,这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前,我们还是用个实例来讲解会更直观些。
先来看看这个图片:
不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局。
这是此次实验中customer(前端的一项)部分的完整代码:
Inherits="
Customer"
%>
"
name="
description"
/>
keywords"
/>
BorderWidth="
0px"
CellPadding="
0"
GridLines="
None"
Height="
1px"
OnPageIndexChanged="
DataGrid1_Page"
PagerStyle-HorizontalAlign="
Right"
PageSize="
4"
ShowHeader="
False"
Width="
237px"
>
href='
Customer_More.aspx?
ID='
[ "
pub_date"
"
{0:
d}"
)%>
]
看出来什么没有?
(代码是很多)可能大家已经发现,整个页面里基本上都是用户要看的数据,其中只包含了很少(必要)的布局(XHTML)标签(请允许我这么说)。
整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”,看看我的这个例子做到了没有?
结构清晰--也就是我们常说的,HTML标签要结构化。
什么叫结构化?
由于个人认为这个知识点是十分重要的,我采用WEB标准的方法制作页面的优势就体现在页面结构清晰。
我以前用table布局的时候,我的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而我上面给大家展示的代码,很明显,结构十分清晰。
h1~h6--如果你要显示的数据是作为标题显示的时候,就用这些标签,因为这个标签的意思就是说,这个是一个标题,不仅我们的用户很容易理解h-head的英文字母缩写,我们的另外一个用户搜索引擎也可以很容易理解它。
呵呵,看到了吧,一个充分结构化
的页面,对用户是十分友好的。
p--Paragraph(段落)
ul--unorglizedlist(无序的列表)
ol--orglizedlist(有序的列表)
li--listitem(列表项)
form--表单
div--division(区域)
我写成这样就便于理解了,原来HTML标签是有着自己的意义的(至于其他的标签的语意义,大家可以自己到W3C看看它的解释,也可以查看语义化你的HTML标签和属性),所以我们讲要语意化的意思,就是用合理的标签来显示数据,比如前面提到的,是标题,就应该用h1~h6标签,如果是一个段落的介绍文字,那么就应该使用p标签,如果是显示的一个没有顺序的列表,就应该用ul标签,如此...
所以看这个例子里
标签导航实例详解
这么写就是很合理的,h2标签就说明这里是个标题。
而这么写:
复制内容到剪贴板代码:
.title{
font-size:
18px;
...
}
虽然用了strong来强调说明这部分文字,但是还是没有h2标签来的直接明了。
还有这么写
Ajax标签导航实例详解
我并不喜欢写成这样,可以不用嵌套层的地方,我们尽量不要去过多的嵌套层,减少嵌套会让浏览器解析起来会更容易,速度更快。
所我们使用WEB标准开发页面,绝对不是单纯的把以前的table换成DIV就OK了。
而采用标准制作页面,也不意味着我们就不使用table。
只要把握我刚才说的原则,使用合理的标签显示相应特征的数据。
其实我的table标签是一个很好的用来显示二维数据的标签,而table标签也确实是设计出来用来显示数据的,而不是用来布局的,只是很多人都会用table标签来布局了。
。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 前端 学习 报告