web前端工作总结
来源:工作计划 发布时间:2014-09-01 点击:
web前端工作总结篇一
web前端开发知识点总结
HTML知识总结
span
行级元素,多个
同行块级元素,独占
一行块级元素,前后
保留一行
标题标签,h1~h6表6个等级,加粗,前后保留一行width:设置宽
度height:设置高
度alt:图片加载失败显示的文本
div
文本类
p
h
图片标签img
color:颜色
水平线
常用标签
hr
size:高度(粗
细)width:宽度(长度)herf:超链接转到的地址
超链接a
target
_self:默认值,在当前页面打开_blank:在新窗口
打开
带标题的框fieldsetlegend设置标题
disc:实心圆
无序列表
列表标签
有序列表
ul
square:小方块
olcircle:空心圆
tr表示行
th
表示标题单元格,居中、加粗
td
表格标签<table>
caption
表示一个单元格
表示标题,定义在第一行,居中
rowspan
设置单元格占的行
数
colspan
设置单元格占的列
数
action表单提交地址
get:显示提交参数,将参数用?和&拼接到url上
带到服务器端
method
post:隐式提交参
数optgroup 表示分组,分组不能选,只能选分组中的option
下拉菜单<select>
<option>
selected默认选中
multiple 设置下拉菜单为多选模式
表单项<form>
rows: 显示文本的行数(高度)
文本域<textarea>
cols: 显示文本的列
数(宽度)
name:参数名
size:显示字符长度(控制文本框长
度)maxlength:最大可
输入字符数
input文本框type=“text”
placeholder:提示
内容
disabled:不会被提交到服务器readonly:只读(会被提交到服务{web前端工作总结}.
器)
value:默认值
密码框
type=“password”单选按钮type=“radio”复选框
type=“checkbox”文件选择框type=“file”
按钮
type=“button”提交
type=“submit”checked:默认选
中
input
按钮
重置type=“reset”
noresize:不能改变框架大小
frame:表示框架
scolling:是否显示滚动条(yes、no、auto)设置框架集在纵向上的拆分策略设置框架集在横向上的拆分策略
rows
cols
border
框架集<frameset>
框架边框的宽度
borderColor框架边框颜色
frameBorder
设置框架是否有边框(yes|no)_blank:新窗口中
打开_self:在当前窗口
打开
框架集中的超链接打开方式target_parent:父窗口
中打开_top在最顶层窗口中打开frameName:在对应name框架打
开
ifame
在页面中嵌入框架
dl、dt、dd
其他标签
<dl>
<dt>数码</dt> <!--dt不会缩进--><dd>手机</dd> <!--dd会缩进--></dl>
marquee:滚动标签
<img src="usemap_img.jpg" usemap="#yifuMap">
<map name="yifuMap" id="yifuMap"><area
shape="circle"
coords="309,257,20"target="_blank"
href="/s?wd=帽子"><area
shape="poly"
coords="258,316,277,283,340,280,356,314"target="_blank"{web前端工作总结}.
href="/s?wd=t恤"></map>
img usemap
ruby:用rt包含的内容对前面
的普通文本进行注释
<ruby>
漢<rt>ㄏㄢˋ</rt>
呵呵呵<rt>hehehe</rt>
吃了没?<rt>are you chi le?</rt></ruby>
range:范围选择
color:颜色选择
输入控件
html5新标签
number:数字输入
date picker:日期选择
datalist:自动提示
<datalist id="arealist"><option>sichuan</option><option>chongqing</option><option>guangzhou</option><option>shanghai</option><option>beijing</option><option>tianjin</option></datalist>
<input type="text" list="arealist">
video:动画
媒体
radio:音频
autocomplete:是否关闭自动提示(off |
on)
html5新标签
autofocus: 自动获得
焦点
required: 表示控件
必须输入内容
controls : 播放控制条
autoplay :自动播放
loop :循环播放preload :预加载,如果设置了autoplay,就可以不用设置preload
web前端工作总结篇二
WEB前端开发经验总结
WEB前端开发经验总结
发布时间:2009-04-20 09:05:33 来源: 作者:shengman 点击:21015
这里跟大家谈谈个人对WEB前端开发的一些经验(当然都是个人的一些理解,有什么地方说的欠妥或不对的地方还请包含和指正),这里我就从WEB标准开始吧。
WEB标准是什么?
说是WEB标准,不过我这里主要是对XHTML1.1 和 CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了,“WEB标准”是一系列标准的总称,包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下,WEB标准不是我们所说的DIV+CSS。 刚刚上面提到了――DIV+CSS,这里要说明下,这样说其实是不正确的。DIV+CSS准确的说法(个人的理解)应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法,DIV应该指的是XHTML标签,而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标准啊。 温习完了基础课程,现在正式开始讲XHTML和CSS的技巧了。
合理的布局
有朋友会开始问了,怎么一开始就开始讲合理的布局了呢?前面我们提到了一些知识点――“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西,都是我们做了合理布局的结果。而且我个人觉得,我们采用WEB标准制作的一切都是从这个知识点开始的,所以我这里就先来说这个话题。
那么大家又会开始问,怎样的一个页面,才算是合理的布局的呢?这个问题问题问得好,也是我们大家刚开始学用WEB标准的问得最多的问题之一,我也曾经常被这个问题所困扰,这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前,我们还是用个实例来讲解会更直观些。先来看看这个图片: 不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局,在稍后的文章中我会详细的介绍浮动元素。好,回到刚才的话题,大家看到了这个页面了。
我这里先把代码写给大家看看(省略了部分代码):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns=".cn">domain</a> 来源:<a href="" target="_blank">domain.com</a> 发布时间:2008年4月28日</div>
<h3>代码篇</h3>
<p>
之前整理发表了《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的(还被很多网站收录了哦),现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含!
</p>
<p>
效果大家看到了,核心功能有:<br />
1、将当前选中标签以特殊的样式显示<br />
2、将异步加载的页面信息显示到指定的DOM节点中
</p>
<p>
我们来看看处理脚本的代码吧:
</p>
<div class="code-title">程序代码:ajaxtab.js</div>
<div class="js code" name="code" id="js-code">
<!--<br />
// 判断是否支持ActiveX<br />
var useActiveX=(typeof ActiveXObject != "undefined"); <br />
// 判断是否支持DOM<br />
var useDom=document.implementation && document.implementation.createDocument;<br />
// 判断是否支持XMLHttpRequest对象<br />
var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />
// XMLHttpRequest对象版本<br />
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];<br />{web前端工作总结}.
// DOM对象版本 <br />
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; <br /> /* ===========================================================<br />
* 函数名称:$(i)<br />
* 参数说明:i - 目标节点名称<br />
* 函数功能:获取指定的目标DOM节点<br />
* 返 回 值:返回要搜索的目标DOM节点<br />
* 使用方法:$("frmSearch")<br />
============================================================ */<br />
function $(i){<br />
if(!document.getElementById)return false;<br />
if(typeof i==="string"){<br />
if(document.getElementById && document.getElementById(i)) {<br />
// W3C DOM<br />
return document.getElementById(i);<br />
}<br />
else if (document.all && document.all(i)) {<br />
// MSIE 4 DOM<br />
return document.all(i);<br />
}<br />
else if (document.layers && document.layers[i]) {<br />
// NN 4 DOM.. note: this won't find nested layers<br />
return document.layers[i];<br />
} <br />
else {<br />
return false;<br />
}<br />
}<br />
else{return i;}<br />
}<br />
//-->
</div>
<p>
id="news" - news就是我们的导航标签的ID;<br />
id="newsCnt" - newsCnt就是我们要写入信息的目标DOM节点;<br />
class="first" - first当前(第一个)标签的样式;<br />
id="news-0" - news-0 通过”-“分开,我们就分别可以得到news(导航标签ID),0(标签[li]在导航标签中的索引值)<br />
<a href="news/news0.htm">网站重构</a> - 超链接<br />
<span></span> - 标签间的分割线<br />
</p>
<p>
我罗列的这些东西,相信大家开始看出了些头绪了,呵呵,不过别急!在我们看处理的脚本之前,先让我们来看看导航标签的样式,主要是看看我们对分割线的处理(一点CSS处理的技巧)。
</p>
<p>
本来想偷个懒,让大家看我上边说的那篇文章,想想也就是Ctrl+C&Ctrl+V,都贴出来吧!呵呵!!! </p>
<p>
不过还没有完,最后要说的就是innerHTML这个特性,这里我们还要感谢微软啊,innerHTML就是它的专利,我们就是用它来改变指定DOM内的HTML字符串的,而不用刷新页面。详细的信息大家还是google
一下吧,我也要休息下啊!!喝口茶先!!^-^!
</p>
<p>
以上讲了这么多,我们最后来看看,我们这个ajax标签导航都用到了那些技术吧:
</p>
<ol>
<li>XHTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>DOM</li>
<li>XMLHttpRequest对象</li>
<li>innerHTML</li>
</ol>
<p>
还有XML,我们这个例子没有涉及到。东西虽小,包含的(web前端开发)知识可是都用到了啊,我把我会的点东西都端出来了(要失业了),呵呵!
</p>
<p>
当然我很喜欢跟大家多交流,以后有时间,我们在来谈谈CSS的HACKS技巧,Javascript DOM编程等等的,今天就收工了,谢谢捧场先!!!
</p>
</div>
<p id="copyright">
Copyright © 2007-2008 <strong><a
href="domain.com">domain.com</a></strong>, All rights reserved. Powered By: <a href="domainmailto:haixiao_yao@yahoo.com.cn">domain</a>
</p>
</body>
</html>
看出来什么没有?(代码是很多)可能大家已经发现,整个页面里基本上都是用户要看的数据,其中只包含了很少(必要)的布局(XHTML)标签(请允许我这么说)。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”,看看我的这个例子做到了没有?
结构清晰--也就是我们常说的,XHTML标签要结构化(语意化)。
什么叫结构化?
由于个人认为这个知识点是十分重要的,所以请允许我在这里多罗嗦几句,我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候,我们的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而大家再看看我上面给大家展示的代码,很明显,结构十分清晰。
说了半天,还是没有说什么是结构化,什么才是结构清晰啊?不要急。还记得我刚才提到的那几个标签吗?
web前端工作总结篇三
程序员-web前端-个人年度工作总结
2016个人年度工作总结
工作回顾
在我进入公司的这七个月里,我陆续接触了公司的软件开发平台,一些已经完成的项目,b2b,收银等。在工作之余,我也在努力的学习,和同事及客户友商进行交流,学习先进的开发技术,请教别人相关开发技术问题。
存在问题
1.由于开始对公司开发平台不是很熟悉,所以在了解客户所要开发的功能及表单过程中多次出现因为需求的原因,而不断修改的情况。在与客户交流的时候,这个问题多次困扰着我,对方的需求不明,每次交流的过程中都在变更需求,从而导致了效率比较低的问题。
2.在工作过程中,用到很多我所不知道或很多我知道但不太熟悉的领域,在这个领域内,我需要不断的学习。
3.学习的知识不够广泛。对专业知识技能方面还需要努力的加强,这方面也是目前最欠缺,希望高总能给予指导和培养。一个项目中,涉及的技术往往有多种,知识多了,就会灵活变通,所以我会加强这方面的学习。
工作心得
1. 每一个项目在开始着手的第一步,一定要和客户把需求沟通清楚,只有了解了项目的需求,才有可能真正做好一个项目。
2. 工作中,有一个无论是技术,还是经验都比较让人肯定的前辈带领,将任务详细化,详细到,每个页面、甚至是一个页面中的图片什么时候做好,做到什么程度,这样把工作进度有计划有方向的赞定下来,做事很有效率。所以希望高总多给予我们一些指导。
3. 每周的工作小结真的很重要,这让我们每天都有计划的知道自己干了什么,不是漫无目的的工作,所以我们应该养成,周记、月记、年记的工作习惯。
4. 工作并不是一成不变的,也许有一天你要去其他岗位帮忙,所以同事之间的技术要互相学习,也许有一天,公司需要你发挥其他的技能帮忙,所以互相学习也是很重要的。自己的工作不能仅仅局限于自己的业务范畴。
工作计划
1. 要提高工作的主动性,做事干脆果断,不拖泥带水。
2.工作要注重实效、注重结果,一切工作围绕着目标的完成。
3. 要提高大局观,是否能让其他人的工作更顺畅作为衡量工作的标尺。
4. 精细化工作方式的思考和实践。
5. 虚心请教比我做的优秀的其他同事,向他们学习技术或经验。 其实作为一个新员工,所有的地方都是需要学习的,多听、多看、多想、多做、多沟通,向每一个员工学习他们身上的优秀工作习惯,丰富的专业技能,配合着实际工作不断的进步,不论在什么环境下,我都相信这两点:一是三人行必有我师,二是天道酬勤。
在参加工作的这短短的七个月中,我深刻的体会到,把自己所有的精力都投入进去,技术工作都不可能做到完美程度,毕竟技术工作太繁杂,项目多而人手少,但多付出一些,工作就会优化一些,这就需要认认真真沉下心去做事情,职业做事,诚信待人。
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标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。普通用户访问的时候,页面打开速度快,而且不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的数据可以很方便的浏览到。
而对搜索引擎来说,一个好的采用WEB标准开发的页面,都是做过SEO优化的,它访问起来很友好,很容易理解你的页面中哪里是标题(H1~H6标签),哪里是段落(p标签),哪里是段落里要强调的内容(strong标签) 等,它可以很容易的分析出来。而一个SEO好的站点,大家都知道,被搜索引擎收录的机会更多,这个也意味着您的网站会被更多的普通用户访问到,给你的站点带来更多的用户。
一个能帮我们省下大笔费用,提高工作效率。同时又能够提高页面浏览速度,对用户友好,甚至能够不花钱宣传,就能给你带来更多用户的技术。你说你会不会去使用它?
这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可,所以现在需要学习WEB标准啊。
合理的布局
前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西,都是我做了合理布局的结果。而且我个人觉得,我们采用WEB标准制作的一切都是从这个知识点开始的,所以我这里就先来说这个话题。
也许有人会问,怎样的一个页面,才算是合理的布局的呢?这个问题问题问得好,也是我们大家刚开始学用WEB标准的问得最多的问题之一,我也曾经常被这个问题所困扰,这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前,我们还是用个实例来讲解会更直观些。先来看看这个图片:
不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局。
这是此次实验中customer(前端的一项)部分的完整代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Customer.aspx.cs"
Inherits="Customer" %> <%@ Register Src="Controllers/Bottom.ascx" TagName="Bottom" TagPrefix="uc4" %> <%@ Register Src="Controllers/Top.ascx" TagName="Top" TagPrefix="uc1" %>
<%@ Register Src="Controllers/Left.ascx" TagName="Left" TagPrefix="uc2" %>
<html>
<head>
<title><%=Titlep %></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta content="<%= Descriptionp%>" name="description"/>
<meta content="<%=Keywordsp %>" name="keywords" />
<link href="Images/css.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align: center">
<form id=form1 runat=server>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 778px"> <tr>
<td style="width: 100px">
<uc1:Top ID="Top1" runat="server" />
</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 778px; background-color: #ffffff;">
<tr>
<td style="height: 395px">
<table border="0" cellpadding="0" cellspacing="0" style="width: 778px"> <tr>
<td width="183" align="left" valign="top"><table width="183" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left">
<uc2:Left ID="Left1" runat="server" />
</div></td>
</tr>
</table></td>
<td width="595" valign="top"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/a4.jpg" height="37"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 12px"> <asp:DataGrid ID="NewGrid" runat="server" AllowPaging="True" AutoGenerateColumns="False"
BorderWidth="0px" CellPadding="0" GridLines="None" Height="1px"
OnPageIndexChanged="DataGrid1_Page"
PagerStyle-HorizontalAlign="Right" PageSize="4" ShowHeader="False" Width="237px">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="10" width="560"> <tr>
<td style="height: 24px" width="20">
<div align="center">
<img height="13" src="Images/35.jpg" width="11"></div>
</td>
<td class="text03" style="height: 24px" width="403"> <a
href='Customer_More.aspx?ID=<%#DataBinder.Eval(Container.DataItem,"id")%>'>
<%#DataBinder.Eval(Container.DataItem,"title")%>
</a>
</td>
<td class="text03" style="height: 24px" width="77">
[<%#DataBinder.Eval(Container.DataItem,
"pub_date", "{0:d}")%>]
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle Width="12px" />
</asp:TemplateColumn>
</Columns>
<PagerStyle HorizontalAlign="Right" NextPageText="下一页" PrevPageText="上一页" />
</asp:DataGrid></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 100px">
<uc4:Bottom ID="Bottom1" runat="server" />
</td>
</tr>
</table></form>
</body>
</html>
看出来什么没有?(代码是很多)可能大家已经发现,整个页面里基本上都是用户要看的数据,其中只包含了很少(必要)的布局(XHTML)标签(请允许我这么说)。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”,看看我的这个例子做到了没有?
结构清晰--也就是我们常说的,HTML标签要结构化。
什么叫结构化?
由于个人认为这个知识点是十分重要的,我采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我以前用table布局的时候,我的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而我上面给大家展示的代码,很明显,结构十分清晰。
h1~h6--如果你要显示的数据是作为标题显示的时候,就用这些标签,因为这个标签的意思就是说,这个是一个标题,不仅我们的用户很容易理解h-head的英文字母缩写,我们的另外一个用户搜索引擎也可以很容易理解它。呵呵,看到了吧,一个充分结构化
的页面,对用户是十分友好的。
p--Paragraph(段落)
ul--unorglized list(无序的列表)
ol--orglized list(有序的列表)
li--list item(列表项)
form--表单
div--division(区域)
我写成这样就便于理解了,原来HTML标签是有着自己的意义的(至于其他的标签的语意义,大家可以自己到W3C看看它的解释,也可以查看语义化你的HTML标签和属性),所以我们讲要语意化的意思,就是用合理的标签来显示数据,比如前面提到的,是标题,就应该用h1~h6标签,如果是一个段落的介绍文字,那么就应该使用p标签,如果是显示的一个没有顺序的列表,就应该用ul标签,如此...
所以看这个例子里
<h2>标签导航实例详解</h2>
这么写就是很合理的,h2标签就说明这里是个标题。而这么写:
复制内容到剪贴板代码:
.title{
font-size:18px;
...
}
<div class="title"><strong>标签导航实例详解</strong></div>
虽然用了strong来强调说明这部分文字,但是还是没有h2标签来的直接明了。 还有这么写
<div class="ariticle-title"><h2>Ajax标签导航实例详解</h2></div>
我并不喜欢写成这样,可以不用嵌套层的地方,我们尽量不要去过多的嵌套层,减少嵌套会让浏览器解析起来会更容易,速度更快。
所我们使用WEB标准开发页面,绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面,也不意味着我们就不使用table。只要把握我刚才说的原则,使用合理的标签显示相应特征的数据。
其实我的table标签是一个很好的用来显示二维数据的标签,而table标签也确实是设计出来用来显示数据的,而不是用来布局的,只是很多人都会用table标签来布局了。。
web前端工作总结篇五
WEB前端技术总结
前端部分总结
(概念、应用性、如何应用)
1. HTML
2. CSS
a) 语法选择器{属性:值;属性:值} id选择器# class选择器.标签选择器
b) 常用样式:1.背景样式,2.文字相关,3.文本4.边框的样式,5.盒子模型。
c) 导入外部样式的方式@import "test.css"
<link rel="stylesheet" type="text/css" href="test.css" />
d) Css3 css第三个版本<样式增加,兼容性>
概念:层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言 a) HTML5 html第五个版本<视屏处理,兼容<手机,pc>>
3. JS(JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。)
a) 控制客户端元素dom模型
<window->document<getElementById,getElementsByName,getElmentsByTagName
>,history,location,status>
b) 表单验证:
正则表达式 \w \W \d \D [4,9] ? +
4. Ajax:异步数据的请求和响应,提供静态和服务器数据交互减少跳转,客户体验更好,减少网
络流量
a) 创建xmlHttpRequest对象
i. 属性
1. onreadystatechange
2. readyState0 1 2 3 4
3. status 200400
4. responseText
ii. 方法{web前端工作总结}.
1. Open(url)
2. Send(data)
<script>
varxmlHttprequest;
function validateServer() {
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlHttprequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//异步请求到哪里?
xmlHttprequest.open("GET","
ng_mybaties_bootstrap/validate.do,true);
//设置属性。
xmlHttprequest.onreadystatechange = doMessage;
xmlHttprequest.send(no="+document.getElementById("inputNo").v
alue);
}
function doMessage(){
if (xmlHttprequest.readyState == 4 &&xmlHttprequest.status == 200)
{
alert(xmlHttprequest.responseText);
}
}
</script>
5. Jquery:轻量级<200多kb>的js函数库,内置浏览器的判断和界面兼容性
a) 语法:支持链式写法 $