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

表格标签

caption

表示一个单元格

表示标题，定义在第一行，居中

rowspan

设置单元格占的行

数

colspan

设置单元格占的列

数

action表单提交地址

get：显示提交参数，将参数用?和&拼接到url上

带到服务器端

method

post：隐式提交参

数optgroup 表示分组,分组不能选,只能选分组中的option

下拉菜单

selected默认选中

multiple 设置下拉菜单为多选模式

表单项

rows: 显示文本的行数(高度)

文本域</p><p>cols: 显示文本的列</p><p>数(宽度)</p><p>name：参数名</p><p>size：显示字符长度（控制文本框长</p><p>度）maxlength：最大可</p><p>输入字符数</p><p>input文本框type=“text”</p><p>placeholder：提示</p><p>内容</p><p>disabled：不会被提交到服务器readonly：只读（会被提交到服务</p><p>器）</p><p>value：默认值</p><p>密码框</p><p>type=“password”单选按钮type=“radio”复选框</p><p>type=“checkbox”文件选择框type=“file”</p><p>按钮</p><p>type=“button”提交</p><p>type=“submit”checked：默认选</p><p>中</p><p>input</p><p>按钮</p><p>重置type=“reset”</p><p>noresize：不能改变框架大小</p><p>frame：表示框架</p><p>scolling：是否显示滚动条（yes、no、auto）设置框架集在纵向上的拆分策略设置框架集在横向上的拆分策略</p><p>rows</p><p>cols</p><p>border</p><p>框架集<frameset></p><p>框架边框的宽度</p><p>borderColor框架边框颜色</p><p>frameBorder</p><p>设置框架是否有边框(yes|no)_blank:新窗口中</p><p>打开_self:在当前窗口</p><p>打开</p><p>框架集中的超链接打开方式target_parent:父窗口</p><p>中打开_top在最顶层窗口中打开frameName：在对应name框架打</p><p>开</p><p>ifame</p><p>在页面中嵌入框架</p><p>dl、dt、dd其他标签</p><p><dl></p><p><dt>数码</dt> <!--dt不会缩进--><dd>手机</dd> <!--dd会缩进--></dl></p><p>marquee：滚动标签</p><p><img src=“usemap_img.jpg” usemap=“#yifuMap”></p><p><map name=“yifuMap” id=“yifuMap”><area</p><p>shape=“circle”</p><p>coords=“309,257,20”target=“_blank”</p><p>href=“http://5新标签</p><p>number：数字输入</p><p>date picker：日期选择</p><p>datalist：自动提示</p><p><datalist id=”arealist“><option>sichuan</option><option>chongqing</option><option>guangzhou</option><option>shanghai</option><option>beijing</option><option>tianjin</option></datalist></p><p><input type=”text“ list=”arealist“></p><p>video：动画</p><p>媒体</p><p>radio：音频</p><p>autocomplete：是否关闭自动提示（off |</p><p>on）html5新标签</p><p>autofocus: 自动获得</p><p>焦点</p><p>required: 表示控件</p><p>必须输入内容</p><p>controls : 播放控制条</p><p>autoplay ：自动播放</p><p>loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload</p><p>CSS知识点总结</p><p>内联：直接在标签的style属性上编写</p><p>样式<input type=”text“ style=”color: blue;background-color: #eeeeff;“>样式定义方式</p><p>样式块：在style标签中编写样式块，并通过一定规则（选择器）应用到对应的那些标签上(通常写在head中)</p><p><style>span {</p><p>color: green;</p><p>background-color: #eeffee;}</p><p></style></p><p>外部样式文件：将样式块编写在外部的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)</p><p><link href=”hehe.css“ rel=”stylesheet“></p><p>id选择器#xxx 针对id为xxx的标签</p><p>类选择器.xxx 针对class属性为xxx的标</p><p>签</p><p>标签选择xxx 针对标签名为xxx的标签</p><p>*选择器选择所有元素选择器</p><p>后代元素关系选择selector1 selector2 {...} 针对selector1下的所有的selector2</p><p>子元素关系选择selector1 > selector2 {...} 只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)</p><p>紧邻兄弟关系选择selector1 + selector2 {...} 只针对紧接在selector1后的selector2元素</p><p>所有随后的兄弟关系selector1 ~ selector2 {...} 针对selector1后的所有的selector2兄弟元素</p><p>color：字体颜色</p><p>font-size：字体大小</p><p>font-family：字体样式</p><p>字体</p><p>font-weight: bolder(加粗)| normal(不加粗)font-style: 设置字体倾斜(normal | italic | oblique)*italic和oblique实际显示效果</p><p>几乎一致font-variant: 设置字体显示为小型大写字母</p><p>text-align: 水平对齐方式(left | center | right)常用属性</p><p>vertical-align: 垂直对齐方式(top | middle |</p><p>bottom)</p><p>line-height: 设置行高(通常用于设置文本居</p><p>中)</p><p>white-space: nowrap 不换行, pre 当做pre标签</p><p>border: 边框(1px solid</p><p>red)</p><p>文本</p><p>width: 宽度</p><p>underline 下划线</p><p>height: 高度</p><p>overline 上划线</p><p>text-decoration: 文本装</p><p>饰</p><p>line-through 贯穿线(删</p><p>除线)</p><p>blink 闪烁</p><p>none 无</p><p>dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)</p><p>text-shadow: 文本阴影</p><p>第二个参数: 阴影垂直位置(y轴上的偏移量)</p><p>第三个参数: 模糊程度第四个参数: 阴影颜色</p><p>padding：内边距</p><p>padding: xxpx;</p><p>padding: xxpx xxpx;</p><p>padding: xxpx xxpx xxpx;</p><p>padding: xxpx xxpx xxpx xxpx;padding: auto;</p><p>padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型</p><p>margin：外边距</p><p>margin: xxpx;</p><p>margin: xxpx xxpx;</p><p>margin: xxpx xxpx xxpx;</p><p>margin: xxpx xxpx xxpx xxpx;margin: auto;</p><p>margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom</p><p>border：边框</p><p>color：颜色；width：宽度；</p><p>style：outset|inset|solid|double|dottedborder-radius: 10px;/* 同时设置4个角*/</p><p>background-color: 背景颜色</p><p>background-image: 背景图片</p><p>background-repeat: no-repeat | repeat-x |</p><p>repeat-y | repeat背景</p><p>background-position: xxxpx xxpx | xx%</p><p>xx%;(可以为负数)</p><p>background-size: xxxpx xxpx | xx% xx% |</p><p>cover | contain;(不能为负数)</p><p>cover: 拉伸,可以超出contain: 拉伸不能超出</p><p>background-attachment: scroll(随着内容</p><p>一起滚动)| fixed(不滚动)</p><p>hidden：隐藏</p><p>scroll：滚动</p><p>overflow：当内容溢出</p><p>时的处理方式</p><p>visible：直接显示</p><p>auto：如果溢出就滚动，否则不显示滚动条</p><p>visible 显示</p><p>visibility：设置元素是</p><p>否显示</p><p>hidden 隐藏，保留占位</p><p>none：隐藏，不保留占</p><p>位</p><p>block：设置为块级元</p><p>素</p><p>display：设置元素是否</p><p>显示</p><p>inline：设置为行级元</p><p>素</p><p>布局</p><p>inline-block：设置为行</p><p>内块元素</p><p>left 左浮动</p><p>float: 浮动right 右浮动</p><p>none 不浮动</p><p>left 不允许左边有浮动</p><p>clear: 清除浮动right 不允许右边有浮动</p><p>both 不允许两边有浮动</p><p>ul或ol 自带样式：</p><p>列表样式</p><p>list-style-type: 列表项的样式</p><p>margin: 16px 0px;padding: 0px 0px 0px</p><p>40px;</p><p>absolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位</p><p>position</p><p>定位</p><p>z-index: 设置z轴的值，越大越在最前</p><p>relative：相对定位参照元素本身的位置</p><p>fixed：固定位置，不</p><p>会滚动</p><p>link 超链接默认样式</p><p>hover 鼠标悬停样式</p><p>active 鼠标点击样式</p><p>visited 访问之后的样式（主要控制颜色）</p><p>伪类</p><p>focus 获得输入焦点的样式</p><p>first-child 第一个元素</p><p>last-child 最后一个元素</p><p>:not 不包含指定的选</p><p>择器</p><p>:noly-child 是父元素的唯</p><p>一子元素</p><p>cursor 鼠标样式</p><p>其他样式</p><p>box-shadow 阴影</p><p>translate:平移</p><p>rotate：旋转transform：变换</p><p>scale：缩放</p><p>skew：扭曲</p><p>matrix：以变换矩阵变换</p><p>第一个值表示需要过渡的样式属性transition 过渡</p><p>transition:transform2s,background-color.5s;</p><p>第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation 动画</p><p>@keyfarmes 关键帧用于定义动画的细节（每一帧如何显示）</p><p>@keyframes myanimation {0% { background-color: #cfc;}30% {</p><p>background-color: #ccf;border-radius: 50px;}80% {</p><p>width: 300px;</p><p>background-color: #fcc;}</p><p>100% {</p><p>width: 300px;height: 300px;</p><p>background-color: #000;}}</p><p>@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}</p><p>需要显示动画的地方通过animation属性来使用声明的关键帧</p><p>.ac:active {</p><p>animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明，1.0 完全不透明浏览器兼容前缀</p><p>-webkit-chrome，safari, opera-o-opera</p><p>-moz-firefox</p><p>-ms-ie（ie9以上）</p><p>JavaScript</p><p>javascript代码必须包含在<script></script>标签中</p><p>也可以书写到外部的.js文件中,通过<script src=”xxx.js“></script>来引入</p><p>script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码</p><p>通过alert来弹出提示框</p><p>通过document.write来输入文本到页面上(可以输入标签)Number: 数值型整数和小数Boolean: 布尔型(true |</p><p>false)</p><p>String: 字符串</p><p>字符串必须被”“或''包含必须对称</p><p>如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号</p><p>也可以使用'来表示一个单引号”来表示一个双引号</p><p>n 表示换行数据类型</p><p>t 表示制表符表示书写方式</p><p>NaN: Not A Number 当使用非数字来进行运算时的值</p><p>undefied: 未定义</p><p>null: 空值</p><p>substring 截取子串, 从start到end-1处,如果</p><p>没指定end则取到最后一个字符</p><p>toUpperCase 将所有字符变成大写</p><p>toLowerCase 将所有字符变成小写</p><p>indexOf 查找子串首次出现的位置, 如果找不到则</p><p>返回-1字符串处理</p><p>lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾</p><p>开始计数split 将字符串按照指定的字符进行拆分成为数组</p><p>获取当前时间var now = new Date()</p><p>获取指定时间的日期对象</p><p>var date = new Date(yyyy,MM,dd,HH,mm,ss)</p><p>设置指定时间(将时间对象设置为一个指定时间)</p><p>now.setFullYear(yyyy,MM,dd,HH,mm,ss)</p><p>now.setMonth日期Date</p><p>now.setDatenow.setHours</p><p>...获取指定时间信息</p><p>now.getFullYear()// 年只能取出年份,如: 2015</p><p>now.getMonth // 月0-11月</p><p>now.getDate // 日</p><p>now.getDay // 星期0-6(0表示星期天)</p><p>now.getHours // 时24小时制</p><p>now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒</p><p>通过new Array()来创建数组var names = new Array();</p><p>var names = new Array(“小王”, “大王”, “炸弹”);// 创建时给数组设置默认值</p><p>//用json格式表示数组</p><p>var names = [];</p><p>var names = [“小王”, “大王”, “炸弹”];数组Array</p><p>可以通过length来设置或获取数组的长度</p><p>push : 往数组末尾添加元素</p><p>pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序</p><p>sort: 按“字符串”的自然排序规则进行升序</p><p>splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)</p><p>slice: 获取start到end处的子数组</p><p>join: 将数组元素以指定分隔符进行连接成为字符串</p><p>function xxx(....){</p><p>声明函数</p><p>....}</p><p>var xxx = function(...){</p><p>...函数变量</p><p>}var ooo = xxx;</p><p>ooo();函数</p><p>function fn(fx){</p><p>fx();</p><p>将函数作为参数</p><p>}fn(function(){</p><p>...});（function(...){</p><p>立即执行函数</p><p>....})(...);</p><p>getElementById 根据id获取唯一的元素var xx = document.getElementById(“xx”);DOM(Document Object Model)文档对象模型</p><p>获取元素</p><p>getElementsByTagName 根据标签名获取元</p><p>素数组</p><p>onclick 鼠标点击事件</p><p>getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组</p><p>中删除)</p><p>onmouseover 鼠标进入事件</p><p>onmouseout 鼠标离开事件</p><p>onmousemove 鼠标被移动</p><p>onmousedown 鼠标按钮被按下事件机制</p><p>onmouseup 鼠标按钮被松开</p><p>onkeydown 某个键盘按键被按下</p><p>onkeyup某个键盘按键被松开</p><p>onload 一张页面或图像被完成加载</p><p>onchange 域的内容被改变</p><p>onfocus 元素获得焦点</p><p>onblur 元素失去焦点</p><p>setTimeout: 延迟执行(只会执</p><p>行一次)var xx = setTimeout(xxx, 1000);setTimeout(“fn();”, 3000);BOM(Browser Object Model)</p><p>window</p><p>清除使用clearTimeout(xx);setInterval: 定时执行(间隔指</p><p>定时间循环执行)</p><p>xx.offsetLeft获取元素的位置和尺寸(只读)</p><p>xx.offsetTopxx.offsetWidthxx.offsetHeight</p><p>var xx = setInterval(xxx,1000);</p><p>清除使用clearInterval(xx);</p><p>[] 表示[]中的字符任意取一个</p><p>在[] 中的^ 表示非不包含该字符</p><p>()表示将多个表达式合并为一个表达式</p><p>在()中的|表示将两个匹配条件进行逻辑“或”（Or）运算。+ 前一个表达式出现至少一次1~n {1,}* 前一个表达式出现任意次0~n {0,}? 前一个表达式出现0~1次{0,1}{n} 前一个表达式出现n次</p><p>{n,} 前一个表达式出现至少n次{n,m} 前一个表达式出现n~m次.任意字符(不包含rn)正则表达式</p><p>^ 匹配字符串的开头$ 匹配字符串的结尾</p><p>w 表示一个任意的单词字符包括_ [a-zA-Z0-9_] * 不包含破折号</p><p>W 对w取反(不包含单词字符)[^a-zA-Z0-9_]d 表示一个数字字符[0-9]D 对d取反[^0-9]s 表示一个任意空白字符空格中文状态的空格制表符全角空格</p><p>S 对s取反非空格n 换行符b 单词边界</p><p>B 不是单词边界(对b取反)</p><p>eval</p><p>执行字符串形式的代码。</p><p>for(var i in array){var item = array[i];</p><p>}</p><p>for(var key in obj){var value = obj[key];</p><p>}</p><p>迭代数组迭代出的值为数组的下标</p><p>for...in</p><p>迭代对象迭代出的值为对象的属性名其他</p><p>with</p><p>设置以某个对象为代码块作用域对象</p><p>delete attribute删除属性</p><p>isNaN</p><p>如果被判断值不是一个数字则返回true，否则为false</p><h2><a name="2" >第二篇：WEB前端开发经验总结</a></h2><p>ASP.NET前端开发经验总结</p><p>通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。WEB标准是什么？</p><p>说是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样式表了。</p><p>采用WEB标准开发的好处</p><p>那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？</p><p>1、节约运营成本</p><p>看看我们的WEB标准制作方法是如何做到的？</p><p>采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。</p><p>而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。</p><p>2、对用户友好更友好，且有机会获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问我们网站的人）； 第二类：搜索引擎；</p><p>采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。</p><p>而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。</p><p>一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习WEB标准啊。合理的布局</p><p>前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。</p><p>也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。</p><p>在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：</p><p>不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。</p><p>这是此次实验中customer（前端的一项）部分的完整代码：</p><p><%@ 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></p><p><title><%=Titlep %></title></p><p><meta http-equiv=“Content-Type” content=“text/html;charset=gb2312” /> <meta content=“<%= Descriptionp%>” name=“description”/> <meta content=“<%=Keywordsp %>” name=“keywords” /></p><p><link href=“Images/css.css” rel=“stylesheet” type=“text/css” /> </head></p><p><body style=“text-align: center”> <form id=form1 runat=server></p><p><table border=“0” align=“center” cellpadding=“0” cellspacing=“0” style=“width: 778px”></p><p><tr></p><p><td style=“width: 100px”></p><p><uc1:Top ID=“Top1” runat=“server” /></p><p></td></p><p></tr> </table></p><p><table border=“0” align=“center” cellpadding=“0” cellspacing=“0” style=“width: 778px;background-color: #ffffff;”></p><p><tr></p><p><td style=“height: 395px”></p><p><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”></p><p><tr></p><p><td><div align=“left”></p><p><uc2:Left ID=“Left1” runat=“server” /></p><p><h2><a name="3" >第三篇：WEB前端开发经验总结</a></h2><p>WEB前端开发经验总结</p><p>发布时间：2009-04-20 09:05:33来源：作者：shengman点击：21015</p><p>这里跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从WEB标准开始吧。</p><p>WEB标准是什么？</p><p>说是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样式表了。</p><p>采用WEB标准开发的好处</p><p>那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？</p><p>1、节约运营成本</p><p>看看我们的WEB标准制作方法是如何做到的？</p><p>采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。</p><p>而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。</p><p>2、对用户友好更友好，且有机会获得更多的用户</p><p>现在来说说用户友好。首先我想把我们的用户来分下类。</p><p>第一类：普通用户（每个访问我们网站的人）；</p><p>第二类：搜索引擎；</p><p>采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。</p><p>而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。</p><p>一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以您现在需要学习WEB标准啊。温习完了基础课程，现在正式开始讲XHTML和CSS的技巧了。</p><p>合理的布局</p><p>有朋友会开始问了，怎么一开始就开始讲合理的布局了呢?前面我们提到了一些知识点――“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。</p><p>那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。</p><p>在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片： 不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。</p><p>我这里先把代码写给大家看看（省略了部分代码）：</p><p><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” <html xmlns=“http://.cn”>domain</a>来源：<a href=“http://” target=“_blank”>domain.com</a>发布时间：2008年4月28日</div></p><p>代码篇</p><p>之前整理发表了《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!</p><p>效果大家看到了，核心功能有：<br /></p><p>1、将当前选中标签以特殊的样式显示<br /></p><p>2、将异步加载的页面信息显示到指定的DOM节点中</p><p>我们来看看处理脚本的代码吧：</p><p><div class=“code-title”>程序代码：ajaxtab.js</div></p><p><div class=“js code” name=“code” id=“js-code”></p><p><!--<br /></p><p>// 判断是否支持ActiveX<br /></p><p>var useActiveX=(typeof ActiveXObject!= “undefined”);<br /></p><p>// 判断是否支持DOM<br /></p><p>var useDom=document.implementation && document.implementation.createDocument;<br /></p><p>// 判断是否支持XMLHttpRequest对象<br /></p><p>var useXmlHttp=(typeof XMLHttpRequest!= “undefined”);<br /></p><p>// XMLHttpRequest对象版本<br /></p><p>var ARR_XMLHTTP_VERS = [“MSXML2.XmlHttp.6.0”,“MSXML2.XmlHttp.3.0”];<br /></p><p>// DOM对象版本 <br /></p><p>var ARR_DOM_VERS = [“MSXML2.DOMDocument.6.0”,“MSXML2.DOMDocument.3.0”];<br /> /* =============<br /></p><p>* 函数名称：$(i)<br /></p><p>* 参数说明：i超链接<br /></p><p><span></span>-标签间的分割线<br /></p><p>我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。</p><p>本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！！</p><p>不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来改变指定DOM内的HTML字符串的，而不用刷新页面。详细的信息大家还是google</p><p>一下吧，我也要休息下啊！喝口茶先！^-^！</p><p>以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：</p><p><ol></p><p><li>XHTML</li></p><p><li>CSS</li></p><p><li>Javascript</li></p><p><li>DOM</li></p><p><li>XMLHttpRequest对象</li></p><p><li>innerHTML</li></p><p></ol></p><p>还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！</p><p>当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今天就收工了，谢谢捧场先！！</p><p></div></p><p>Copyright ©2007-2008 <a</p><p>href=“domain.comhttp://”>domain.com</a>, All rights reserved.Powered By: <a href=“domainmailto:haixiao_yao@yahoo.com.cn”>domain</a></p><p></body></p><p></html></p><p>看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。</p><p>说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？</p><p>结构清晰--也就是我们常说的，XHTML标签要结构化（语意化）。</p><p>什么叫结构化？</p><p>由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。</p><p>说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？</p><p>h1~h6--如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化的页面，对用户是十分友好的。</p><p>p--Paragraph（段落）</p><p>ul--unorglized list(无序的列表)</p><p>ol--orglized list(有序的列表)</p><p>li--list item(列表项)</p><p>form--表单</p><p>div--division(区域)</p><p>我这么一写，大家估计开始明白了，原来XHTML标签是有着自己的意义的（至于其他的标签的语意义，大家可以自己到W3C看看它的解释，也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用h1~h6标签，如果是一个段落的介绍文字，那么就应该使用p标签，如果是显示的一个没有顺序的列表，就应该用ul标签，如此...所以看这个例子里</p><p><p><strong>Ajax标签导航实例详解</strong></p></p><p>这么写就是很合理的，h2标签就说明这里是个标题。而这么写：</p><p>复制内容到剪贴板代码:</p><p>.title{</p><p>font-size:18px;</p><p>...}</p><p><div class=“title”>Ajax标签导航实例详解</div></p><p>虽然你用了strong来强调说明这部分文字，但是还是没有h2标签来的直接明了。</p><p>还有这么写</p><p><div class=“ariticle-title”><p><strong>Ajax标签导航实例详解</strong></p></div></p><p>也不是我们推荐的，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让我们的浏览器解析起来会更容易，速度更快。</p><p>所我们使用WEB标准开发页面，绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面，也不意味着我们就不使用table。只要把握我刚才说的原则，使用合理的标签显示相应特征的数据。其实我们的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是我们当时的设计师们都用table标签来布局了。</p><h2><a name="4" >第四篇：Web前端开发学习笔记分享</a></h2><p>www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障</p><p>Web前端开发学习笔记</p><p>对于Web前端初学者而言，前人的学习经验及总结，能让自己的学习事半功倍；我在泛艺学苑学习Web前端开发已经有一段日子了，课程内容个人觉得很全面、专业；下面是我通过这段时间学习，总结的一些Web前端开发学习笔记【前端开发需要学哪些？>>】，一是为了给自己加深印象，二是希望能帮助其他Web前端学习者们；以后内容会持续更新，也欢迎大家进行补充。【获取全套学习资料>>】</p><p>HTML篇总结</p><p>非可视化标签：head meta style scrpit...可视化标签：img div span a ul li… 只有可视化标签，才能用css改变它 单标签：meta link base img input br hr 双标签：html head body div a p span..ul li ol dl ….常用可视化标签 div：一般用它来布局 a 超链接标签</p><p>href*属性：设置跳转的网页地址 target属性：设置跳转的目标</p><p>结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签 img：src*属性用来设置图片的url数据、alt提供给搜索引擎搜索的 ul li：列表；结论：只要将来设计页面中有固定样式的列表，就用ul和li table caption tr td(th)：慢慢已经被淘汰了 被ul li代替 如果是合并竖排的就是合并行（rowspan）www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障</p><p>如果是合并横排的就是合并列（colspan）HTML部分导图总结 标签集合</p><p>www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障</p><p>www.xiexiebang.com免费试学/ 一对一辅导/项目实训/就业保障</p><p>以上即为我在泛艺学苑这一阶段学习关于Web前端开发的总结以及笔记，接下来将要学习CSS；后续我会将Web前端开发学习总结陆续进行更新。</p><p>泛艺学苑采用的在线教育，对于身处三线城市的我而言提供了很大的便利，平时有经验丰富的老师直播授课，课后有专业的老师进行一对一辅导，还给我提供了大量的学习资料，虽然现在才刚开始学习，但是我有信心学完后，能够找到一份满意的工作。情>>】</p><p>【了解课程详</p><h2><a name="5" >第五篇：web项目前端开发经验总结</a></h2><p>web项目前端开发经验总结</p><p>最近这一个月完成了自己的第一个java web项目，是给某杂志社做的在线投稿系统，虽然进度很慢，但是中间确实学到了不少东西，深刻体会到了自己看几个月书都不如做一个项目来的实在。这个项目自己主要负责的是JSP页面、JS脚本、CSS样式表的编写，虽然主要做的是前端，但是在设计前端后台交互功能时，对MVC架构和数据库又多了一分了解，这一个月的时间，自己在技术上也确实成长了不少。下面分成几块总结一下自己的这个项目中的心得吧：</p><p>1.项目开发流程：从确认需求开始，到原型设计，再到原型测试，这些都没什么说的了，主要是刚开始开发前端JSP页面时，自己走了很多弯路，想到有什么页面就写什么页面，GET和POST的路径也是随心所欲，想到什么名字就起什么名字，结果发现这样做严重影响了项目开发的进度，后来经过主管的提点后，我幡然醒悟，其实，面向对象的思想就贯穿在整个项目当中，在前面的原型设计的过程中，除了页面的设计还有数据库的设计，数据库的每个表就对应着Java中的每个实体类，这个类封装了数据库中的列作为属性，封装了数据库的增删改查作为方法，就拿这个投稿系统为例，实体主要有用户、稿件等等，实体间还有着一对一映射或者一对多映射等对应关系。其实，整个系统的开发就是围绕着这些个实体进行的，甚至于我们可以把实体名字做为二级目录，把实体的增删改查作为GET或POST的路径，譬如account/add、paper/delete等等，有了这些路径，那么与之对应的GET和POST的Controller也就有了，接下来我们要做的就是，定义Controller中返回的视图，写完Controller后再把与实体相关的增删改查方法写到服务层中，再把项目的整个骨架搭起来，再去处理细节，很快的，这个项目就成型了。这里前端和后台的配合尤为重要，数据交互是整个系统的核心。</p><p>2.JSP页面设计：提到JSP页面，在这里我想说的一点是，其实JSP页面是在服务器生成的，那么传给JSP页面的变量、参数都会在服务器转化为它们具体的值，然后再传给客户端。JSP页面可以实现很多服务器端的功能，因为可以直接在页面嵌入JAVA代码，但是我们必须明确的一点是，JSP页面主要是用来呈现视图的，不要再其中套入大量的代码，要明确前端与后台的分工。</p><p>3.JSTL标签：JSTL标签就是JSP standard taglib，即JSP标准标签库，首先，EL表达式可以非常方便的取出Controller返回的View包含的Model，甚至都无需声明EL表达式。其次，JSTL标签可以实现很多的逻辑控制功能，比如最基本的c:if判断、c:forEach循环，甚至有更强大的c:choose，有了这些，我们可以大大简化代码量，JSP页面中用几十行java写的代码，有时用几句JSTL标签组合就实现了，此外，像fmt:parseDate和fmt:formatDate也是很好用的标签，用于日期的解析和格式化，此外JSTL更有强大的函数标签库fn:，项目中我也只用到了fn:length取后台传的list的长度。要善用JSTL标签，但是又不要完全依赖于它，JSTL标签很方便、快捷，但是切记，JSTL功能有限，不要完全依赖于它。</p><p>4.shiro框架：shiro框架是apache的一款面向java web项目的权限控制框架，这个框架无论前端、后台都十分好用，在前端，我们可以使用shiro强大的标签库，通过用户角色赋予用户不同的访问权限。譬如，如果一个系统的用户有访客、用户、管理员三种角色，我们就可以通过shiro标签来控制游客不能访问哪些内容，页面向用户和管理员呈现的不同内容，这就是shiro标签的神奇之处。</p><p>5.sitemesh框架：这个主要是用来将所有页面套用固定格式，用以页面的复用，其实有些时候标签更为方便，而且sitemesh框架的内存开销是的二倍，还会导致拦截器出现一些莫名的bug，所以并不推荐使用。</p><p>6.jquery：在这个项目中写了很多的jquery代码，发现jquery确实是个神奇的东西，jquery的神奇之处就在于jquery强大的选择器可以方便的取到页面的DOM元素，并且给这些元素绑定不同的事件，提到绑定事件，说一下on、live和bind的区别：bind是jquery最早的绑定事件方法，on是jquery 1.7.0以后才有的方法，bind和on都不能将事件绑定给DOM加载完毕后后添加到页面的DOM元素，这时就需要live了。还有一个经常使用的就是jquery的ajax了，其实在做这个项目之前自己一直不理解ajax的作用机理，只是心里又个概念而已，但是，在真正使用的ajax之后，才发现ajax的强大之处，确实如AJAX自身描述一样，异步加载javascript，这就允许我们在不打开新页面的情况POST一些参数给后台，后台得到并处理这些参数后将JSON返回给前端，这个JSON的处理function就写在ajax的success处理function中。在这个项目JSON和AJAX最主要的应用就是翻页，加载一个页面，把页面传给后台然后把得到的JSON呈现给用户，翻页时重新POST参数，然后在用js重新处理一下翻页区域即可。</p><p>7.jquery.validate.js：这是一个轻量的jquery框架，主要用于表单的验证，非常方便。</p><p>8.twitter bootstrap.js：bootstrap自带的js框架，里面定义了许多与bootstrap样式相关联的函数，使用起来也很方便。</p><p>9.正则表达式：正则表达式的模式匹配是很强大的，灵活运用正则表达式，也会简化代码，甚至我们在查找替换时都可以使用正则表达式。</p><p>总体上说，这个项目极大的锻炼了自己的代码编写功能，从以前写一句代码要敲无数次backspace，现在居然可以将某些简单的函数一气呵成了。今天项目终于上线了，总结一下，希望以后自己能够取得长足的进步！</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载web前端开发知识点总结word格式文档"> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">下载web前端开发知识点总结.doc</div> <div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div> </div> <div class="download_card_btn"> <img src="//static.xiexiebang.com/skin/default/images/icon_download.png"> <div class="downlod_btn_right"> <div>点此处下载文档</div> <p>文档为doc格式</p> </div> </div> </a> <div class="post-tags mt20 mb30"><span>相关专题</span> <a href="/tag/webqdzsdhz/" target="_blank">web前端知识点汇总</a> <a href="/tag/webqdkfgzzj/" target="_blank">web前端开发工作总结</a> <a href="/tag/webqdkfzsd/" target="_blank">web前端开发知识点</a> </div> <div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a1/2019051215/0c387521035310d8.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div> <div class="single-xg mb40"> <div class="con-title"> <h3><a name="6"></a>相关范文推荐</h3> </div> <div class="sticky mb20"> <ul><h2 class="mb20"><a href="/a6/2019051513/b88b4e7826bc5152.html" target="_blank">Web前端开发笔试题</a></h2><p>Web前端开发笔试题 一．单选题 1. div.box{color:red;} #box{color:blue;} div{ color: yellow !important;} 华章汉辰 Div里的字体的颜色是：（） A:红色B:蓝色 C:绿色 D:黄色 2.......</p><h2 class="mb20"><a href="/a1/2019051215/9f4bcca624c725cb.html" target="_blank">web前端面试总结</a></h2><p>1. 常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2) 内核：Trident，Gecko，Presto，Webkit。 2. 说下行内元素和块级元素的区别？行......</p><h2 class="mb20"><a href="/a4/201905125/91f0eb21ee1e3710.html" target="_blank">WEB前端开发工程师笔试试题（范文模版）</a></h2><p>WEB前端开发工程师笔试试题1.HTML的含义是什么?其主体部分由什么标记构成?2.说明在网页设计中div标签的作用3.CSS指的是什么?在网页制作中为什么要使用CSS技术4.css 中id和c......</p><h2 class="mb20"><a href="/a1/2019051215/3ef300ef805c4ad6.html" target="_blank">Web前端开发培训中es5与es6语法知识点总结</a></h2><p>Web前端开发培训中es5与es6语法知识点总结（百读易莱胜） 热点：web前端开发培训百读易莱胜官网前端开发易莱胜官网#es6的写法： 1.利用import...form....代替require 方式一：导入......</p><h2 class="mb20"><a href="/a12/201905144/93610f309620c69e.html" target="_blank">web前端个人简历</a></h2><p>个人简历 个人信息 姓名：xxxx 性别：男 出生日期：1993.03 婚姻状况：未婚 工作所在地：北京 家庭所在地：湖北 联系电话：18xxxxxx 电子邮箱：xxxxxx@qq.com专业技能 1、熟练使用Sublime......</p><h2 class="mb20"><a href="/a2/2019051214/f8e237d4bcf5309a.html" target="_blank">Web前端工作总结</a></h2><p>Web前端学习总结 一.名词解释 1. 横切 在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2. 留白 两个容器或碎片之间的上、下、左、右的空白距离......</p><h2 class="mb20"><a href="/a1/2019051215/d4f5da23df5250bb.html" target="_blank">web前端学习总结2</a></h2><p>1.WEB标准以及W3C标准是什么？ 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。1.xhtml和html有什么区别 XHTML 元素必须被正确地嵌套，闭合，区分大小写，文......</p><h2 class="mb20"><a href="/a1/2019051123/2bc3c60d716d950d.html" target="_blank">WEB前端开发经验总结1（写写帮推荐）</a></h2><p>WEB前端开发经验总结1 结构，结构，刚才我提到了标签有块级元素和行内元素之分的，要是不理解好这两个概念，我们也不会很好的了解怎么合理的结构化页面，现在就来介绍它们： 块级元素......</p></ul> </div> </div> </div> </div> <div class="right-content-box wow fadeInRight delay300 right-content"> <script src="/e/member/login/loginjs.php"></script> <div class="sidebar"> <div id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜欢</h3> <ul class="new-list"><li><a href="/a10/201905147/89261fed7bac3b16.html" title="Web前端开发技术人才培养模式研究" target="_blank">Web前端开发技术人才培养模式研究</a></li><li><a href="/a1/2019051212/7d7988947a3c5acb.html" title="web知识点总结" target="_blank">web知识点总结</a></li><li><a href="/a2/2019051219/39cd3ebe48d2ef88.html" title="Web前端程序员简" target="_blank">Web前端程序员简</a></li><li><a href="/a3/2019051211/c1cdc64f63497a0c.html" title="web前端实习经验" target="_blank">web前端实习经验</a></li><li><a href="/a1/2019051215/78242e56bcaab53f.html" title="最新web前端学习路线" target="_blank">最新web前端学习路线</a></li><li><a href="/a6/201905130/0b9cc70312ed972d.html" title="web前端培训学习心得" target="_blank">web前端培训学习心得</a></li><li><a href="/a6/2019051513/7eafc99efd48b52a.html" title="Web前端代码规范" target="_blank">Web前端代码规范</a></li><li><a href="/a15/2019051513/3cd4f42fff81dab5.html" title="web前端个人简历（5篇）" target="_blank">web前端个人简历（5篇）</a></li><li><a href="/a7/201905132/c33170f0027517b4.html" title="腾讯web前端开发工程师笔试题及答案" target="_blank">腾讯web前端开发工程师笔试题及答案</a></li><li><a href="/a6/2019051514/a74d73e74120263c.html" title="2017年web前端开发学习路线规划小结" target="_blank">2017年web前端开发学习路线规划小结</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div class="container"> <div class="footer-top clearfix"> <div class="copyr"> <div class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li> </ul> </div> <p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved   <a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP备11058632号</a>   <script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div> </div> </div> </section> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script> <div class="right_bar hidden-xs "> <ul> <li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li> <li class="rtbar_li5"><a href="#1">第一篇</a></li> <li class="rtbar_li6"><a href="#2">第二篇</a></li> <li class="rtbar_li7"><a href="#3">第三篇</a></li> <li class="rtbar_li8"><a href="#4">第四篇</a></li> <li class="rtbar_li9"><a href="#5">第五篇</a></li> <li class="rtbar_li10"><a href="#6">更 多</a></li> <li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> </body> </html>