浅谈web前端技术
浅谈web前端技术
作者：周凯工作单位：成都信息工程学院
摘要
最近几年 WEB 前端开发已经成为一个很专业的方向，从业大军也与日俱增，仅杭州的D2交流会上就有 500 多人参加，且不乏许多高中同学。这说明前端开发行业在我国的兴起，已经是大势所趋。因此学习和掌握WEB相关技术如HTML 、CSS、JavaScript在日后的学习生活和工作中将大有益处。
关键词：HTMLCSSJavaScript
Abstract
In recent years the WEB front-end development has become a very professional direction from industry main forces, also grow with each passing day, only the Hangzhou D2 exchange will have more than 500 people attended, and there are many high school students. The software development industry in our country is arisen, already represent the general trend. Therefore the study and mastery of WEB related technologies such as HTML 、CSS 、JavaScript study in future life and work will be helpful。
Keywords:HTML CSS JavaScript
web前端开发技术：
前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。Web开发技术：World Wide Web（简称Web）是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。Web技术涉及的内容相当广泛，本书涵盖了其中诸多方面，如：HTML标识语言、Java、Applet、CGI、脚本语言、ASP和JSP
技术等。本书取材得当、覆盖面广、实例丰富、图文并茂，既可作为计算机专业本、专科学生学习和掌握Web技术的教科书，也可以作为广大 Web技术爱好者学习和应用Web技术的参考书，同时也有一些web开发技术的网站有时间去看看，比如久久技术网。我的理解是一个不包含服务器后端开发，一个是客户端和服务器端的技术都包含。
Web前端的组成：
现代在网页技术，分为三个层面：内容(HTML)+表现(CSS)+行为(JavaScript)，在这里我也把这三个技术分开来说。
1.内容(HTML)：
1.1
使用 XHTML 1.0 或 HTML5 规范的代码，网页最终是由浏览器来解析的，而浏览器又是根据Web规范来解析网页的，所以，遵守规范可以确保在各种浏览器中都能正确解析，但如果碰到了浏览器的Bug那就另外算了，那不是我们的错，是浏览器的错。
1.2
布局采用先上下后左右的结构原则，尽量不要出现一个容器里面有上下左右多种布局的元素，这样可以减少各种浏览器的布局排版的差异，为什么呢？一个左右要浮动上下又要清除浮动，麻烦，二个，内容要修改的时候，发现一个高了或者矮了，不对齐了，又要调整几个块的。那左中右怎么办？先分左右再从其中一个再分左右。
1.3
全页布局，一般分为 Topbar(顶栏) ,Header(头部) ,Nav(导航栏) ,Content(内
容) ,Footer(脚部)，也就是对于页面整体从上往下看。如果还有横幅广告(Banner)和帮助栏(像淘宝那种)，就另外再加。
1.4
整理自己的模板库，自己写过的代码Copy一份，以后就不用再重新写了，例如头部，注册表单，网银列表等。
2.表现(CSS)：
2.1
设定默认样式，每种浏览器都会为元素设定一套初始样式(默认样式)，设定默认样式可以减少各种浏览器渲染样式的差异。常用的设置有：
body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,form,input,textarea,p,th,td{margin :0;padding:0;} /* 默认内边距和外边距设置为0 */
caption,th{text-align:left;} /* 默认对齐方式设置为左对齐 */
img{border:0;} /* 去掉带链接图片的边框线 */
ul{display:block;} /* 设置列表为块显示 */
li{list-style:none;} /* 去掉默认添加的项目符号 */
table{border-collapse:collapse;border-spacing:0;} /* 去掉表格的内边框线和单元格间隔 */
body{font-family:Verdana, Geneva,
sans-serif;font-size:12px;color:#000;line-height:12px;} /* 设置文本字体 */
a:link, a:visited{font-size:12px;text-decoration:none;font-family:Verdana, Geneva, sans-serif;color:#000;line-height:12px;} /* 设置链接字体 */
a:hover{text-decoration:underline;}
2.2
为元素赋予样式特征，尽量少用ID而用类来设定。
2.3
不用内联样式，全部样式通过外部文件引用，并且放在
里面。2.4
合理分类，如公共样式、首页样式、分类页样式、搜索页样式，需要时才引用。
2.5
模块化设定样式，一般规则是 ".mod_name .class_column tag" (模块名+布局名+元素名/类) ，如：
.header 头部
.header .left h1 头部左边的标题
.search .keyword 搜索栏的关键词输入框
.nav a 导航栏的链接
.mod_good .good_name 产品模块的产品名
.user_info a 用户信息的链接
2.6
有自己一套自定义元素类，例如表单控件有很多种，很多都是 input 元素，只对文本输入框设定样式怎么办？设一个自定义类 .input_text ，然后设定高度、宽度、圆角都行，加文本框的时候习惯加上自己的类。
2.7
浮动问题，如果一个上下排列的容器，包含的内容全部是浮动，那么该容器就要清除浮动了(clear:both)，否则下面的容器有可能跑到右边去了。另外，如果某元素设置了浮动，那么，最好给他一个宽度，否则，IE6下会变成竖排文字，但是，如果我要自适应宽度怎么办？很简单，里面的文字加一个并设为块显示(display:block)。
2.8
定位问题，相对定位(relative)能使元素变成一个定位容器，如果使用 left top 则可以相对于它本来的位置进行偏移，绝对定位(absolute)能使元素从文档流抽出作为一个独立的层(也是一个定位容器)，那么他就不再占用其容器的空间，再加上margin-left 和margin-top 则可以相对于原来的位置定位，如使用 left top right bottom 则可以相对于定位容器进行绝对定位，定位容器就是最近的祖先定位节点(relative or absolute)，如果没有则是document。定位容器有自己的显示范围，如果内容超出范围则隐藏(这个特征有点像Flash的遮罩效果)。常见的应用：头部里面的混排模块，弹出菜单，浮动按钮，浮动工具栏，焦点广告图。
2.9
边距问题，由外至内，由前至后。由外至内的方法是：父元素用内边距限制子元素，子元素用外边距限制兄弟元素，先设定内边距(padding)再设定外边距(margin)；由前至后的方法是：前一个元素用右边距(margin-right)和下边距(margin-bottom)限制后一个元素。好处：模块调转顺序时不用再考虑谁排在最上面(左面)，而且能解决IE6的双边距Bug。
2.10
溢出问题，凡是给元素设置块元素时，顺便设置上溢出隐藏(over-flow: hidden)，防止IE6的溢出撑开问题。
2.11
整理自己的样式库，写过的样式Copy一份(包括图片)，下次再需要改改就行了。
3. 行为(JavaScript)
3.1
使用JavaScript框架，我本人就喜欢用jQuery，当然了，如果是简单的特效，还是可以写纯js的。
3.2
整理自己的js库，这里不是叫你自己js框架，而是常用的特效，例如设为首页，加入收藏夹，表单检查，弹出菜单，广告图等。
需要留意的是：
HTML5
使用 HTML5 时候加上
让 IE 正常识别 HTML5 标签，或者下载到自己网站引用也可以，当然了，Google 的服务器远比我们的快，做开发时才需要下载到本地。
CSS3
目前的原则是：低端用户正常显示，高端用户更好享受。
因为IE8以下版本均不支持CSS3属性，所以CSS3在现时只能做优化处理，等到IE8以下都被淘汰了的时候就可以毫无顾虑的使用了。当然了，你还可以用js检测IE8以下，提示用户升级，如果用户不在意外观享受的话那也不用管了。现在能做的是，在CSS2的基础上再添加更好的效果，如圆角、阴影、动画效果(目前Webkit核心支持比较好)。
参考文献及部分参考网址
HTML5 教学投影片
HTML 5 Demos and Examples
网站建设教程（金旭亮、吴彬），高等教育出版社；
Flash ActionScript 3 殿堂之路（孙颖）电子工业出版社；
站长之家 : https://www.wendangku.net/doc/148459104.html,；
站长网 : https://www.wendangku.net/doc/148459104.html,；
谢辞
通过一个学期的选修课学习，我初步了解了WEB前端的相关技术，在这里谢谢任课老师的讲解以及相关同学、相关资料、网站的帮助，我学习到了很多专业课程学习不到的知识，知识面有了很大扩展,谢谢！
web前端毕业设计论文
2015版 毕业论文 题目：响应式企业网站设计与实现 学生姓名：罗智刚学号：1202012132 专业班级：B12计算机科学与技术2班 指导教师：李莉 企业导师：林志宏 二级学院：电气与信息工程学院
摘要 在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越被人们接受，并且融入我们的生活。在2015年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。 本论文主要围绕写意集团的HTML5响应式网站为开发主题，用到的也是最必备的三个技能元素，在布局页面时，用HTML将元素进行定义，布局基础布局；css对展示的HTML元素布局进行定位渲染，然后利用Javascript或者jQuery实现相应的效果和交互。虽然这么看起来很简单，但这里需要认真了解的东西很多。在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能等各种问题。 分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及HTML5响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析 实现中的难点和重点； 关键词：HTML5; CSS3; 响应式; javascript; 网站美化; 交互设计
abstract In this era of rapid development of information and network as the most convenient media now increasingly being accepted and integrated into our lives. In 2015, with the rise of HTML5 in the country, has also been advancing the development of the information age, the site is also moving away from the traditional boring page style, and now HTML5 compared to the previous HTML is easier to maintain and management, but also to achieve cross-platform development, reduce development costs. This paper mainly around Freehand Group HTML5 Responsive website development topics, used in the three most essential elements of skill, in the layout of the page, using HTML to define the elements, layout basic layout; css to display HTML elements positioning layout rendering, then use Javascript or jQuery to achieve the appropriate effects and interactions. Although such looks very simple, but here need to understand a lot of serious things. Before development, the need to clarify these concepts in the development process, but
web前端开发技术实验报告 实验三
长春大学 20 15 —2016学年第二学期Web前端开发技术课程 实验报告 学院：计算机科学技术专业：软件工程 班级：软件15402
学号：041440210 姓名：王悦 任课教师：车娜 实验三 CSS网页布局 一、实验目的 1.掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面； 2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素； 3.理解块元素与行内元素的区别，能够对它们进行转换。 二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果，满足如下要求： 1.网页弹出框由上面的标题和下面的宣传内容两部分组成； 2.标题通过h2定义； 3.在段落文本中内容部分由h3和p标记进行定义； 4.应用
基于WEB的电子商务网站开发(毕业设计开题报告)
X X大学 毕业设计开题报告 题目名称基于WEB的电子商务网站开发题目类别毕业设计 学院（系）计算机科学学院 专业班级 学生姓名 指导教师 辅导教师 开题报告日期
一、题目来源 生产/社会实际 二、研究目的和意义 随着网络的普及和其技术的日趋成熟，在世界范围内，作为一种新的经济形态，电子商务将在日常生活中扮演着越来越重要的角色，在采购——供应链条所构成的经济活动中，电子商务将不仅仅承担辅助渠道的角色，更将成为一种重要的、独立的渠道，满足更多的个人消费和组织购买。电子商务也必将成为一种独立的产业，在整个经济结构中，占据越来越重要的地位。 三、阅读的主要参考文献及资料名称 主要的参考书籍： 1、《JSP编程思想与实践》，吴其庆编著—北京：冶金工业出版社，2003； 2、《JSP应用开发详解》（第二版）电子工业出版社，2005； 3、《JAVA2实用教程》耿祥义张跃平编著—清华大学出版社，2003 4、《数据库系统概论》萨师煊王珊编著—高等教育出版社，2000 5、《SQL SERVER 2000实用教程》黄心渊主编—人民邮电出版社 6、网上相关资料 四、国内外现状和发展趋势与研究的主攻方向 通过认真比较后，我决定选择JSP+SQL完成我的电子商务网站开发。 JSP的英文全称是Java Server Page,中文全称是Java服务器端语言。自JSP推出后，众多大公司都提供支持JSP技术的服务器，如IBM、Oracle公司等，所以JSP迅速成为商业应用的服务器端语言。据调查显示，在过去的一年中，对JSP的使用飞速增长了94%。JSP的支持语言是JAVA，所以它的核心技术就是JAVA 技术。JSP有以下优势： 1．方便与HTML混合。JSP可以方便的使用HTML和JAVA语言，在处理JAVA 语言的过程中可以灵活的应用各种HTML标识。 2．JSP运行速度更快。JSP由客户端运行之后，便生成实例保存在服务器中，他的共享对象可以提供多个客户端同时访问，而不需要重新运行，所以运 行速度更快。 3．JSP有技术有众多大软件公司支持。 4．JSP有众多开放性代码组织支持。如Apache。 5．可以跨平台运行。既可运行在Windows平台，有可以运行在LINUX平台和
web前端实习报告三篇
ｗｅb前端实习报告三篇 ?篇一 一、实训项目?简易记事本 二、实训目得与要求?本次实训就是对前面学过得所有面向对象得编程思想以及ＪAVAWEB编程方法得一个总结、回顾与实践，因此,开始设计前学生一定要先回顾以前所学得内容，明确本次作业设计所要用到得技术点并到网上搜索以及查阅相关得书籍来搜集资料.通过编写采用JSP＋Sｅｒv ｌeｔ+JaｖａＢeaｎ技术框架得应用系统综合实例，以掌握JavaWＥB开发技术。 具体要求有以下几点： １、问题得描述与程序将要实现得具体功能。? 2、程序功能实现得具体设计思路或框架，并检查流程设计.3、代码实现.4、设计小结。 三、实训项目得开发环境与所使用得技术?基于J2SE基础,利用以上版本得集成开发环境完成实训项目，界面友好，代码得可维护性好,有必要得注释与相应得文档。 四、实训地点、日程、分组情况:?实训地点:４栋303机房日程: 阶段:1、班级分组,选定课题,查阅相关资料半天２、划分模块、小组成员分工半天3、利用CASＥ工具进行系统设计与分析，并编制源程序5天
第二阶段:上机调试,修改、调试、完善系统2天 第三阶段：撰写、上交课程设计报告，上交课程设计作品源程序（每人１份）2天 五、程序分析 功能模块说明弹出菜单 fｏr(intf=0；f 创建保存文件对话框? publｉｃvｏｉdsaveFile {? 创建打开文件对话框?ｐｒｉvatevoｉdｏｐenFilｅ｛Ｊ；iｎtrｅsuｌt=(null）；if(resulｔ==_OPTIOＮ)｝?{try｛? ;(（int) ;char[］conｔext=newcｈａr[ｌen];（context，０，ｌｅｎ); ；? (newSｔｒｉnｇ（context))；?J ；intresｕlt＝（null）;if（result ＝=＿ＯPTＩＯN)}?{try{ ；(fiｌe);（）; ;?｝ｃatch(Exceｐtione)｛（＂保存文件失败！"）;｝｝elseｒeturn； }catch(Ｅxceptｉonｅ)｛(”打开文件失败！")；｝｝eｌｓeｒetｕｒn；?六、程序设计及实现?1、实现弹出菜单(JpopupＭeｎu)2、设置字型,字体大小,字体颜色 3、实现自动换行 七、实训总结 通过３天得实训,虽然实训得时间不长，但就是总体上收获就是很大得,我们得jaｖａ课程学到得只就是javａ与皮
WEB前端页面设计毕业论文设计模板
WEB前端页面设计毕业论文设计模板 目录 1摘要 (2) 第1章前端开发工具及相关技术 (3) 1.1选题背景及意义 (3) 1.2前端开发工具 (5) 1.3前端开发相关技术 (6) 1.4本章小结 (10) 第2章前端布局分析与设计 (10) 2.1前端总体开发流程及设计 (10) 2.2前端UI设计 (17) 2.3交互设计与UI (20) 2.4点，线，面的运用 (22) 2.5网站结构布局及设计 (23) 2.6网站前台页面设计 (30) 2.7本章小结 (31) 第3章主要功能的实现 (31) 3.1界面设计 (31) 3.2具体设计文档 (33) 3.3前台新闻文摘显示 (33) 3.4可视化设计 (34) 3.5具体实现技术 (34)
3.6本章小结 (37) 第4章总结 (37) 4.1总结 (37) 致谢 (38) 1摘要 21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。 本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。 分析并解决实现中的若干技术问题介绍了个性化页面的背景及jsp+javascript +mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。 该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值。
web前端开发技术试卷三
总分100分考试时间：120分钟考试形式：闭卷、选择题(每题1分，共20 分) 1. HTMLI旨的是___________ (A)超链接的文本标记语言(B) 超文本标识语言 (C)家庭工具标记语言(D) 以上都不是 2. 下列能够实现美化页面的语言是。 (A) HTML (B) CSS (C) VFP (D) JavaScript 3. 以下标记中用于设置内部样式表的标记的是。 (A)