篇一：做web软件开发入门教程
做web软件开发入门教程
遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学习。我建议是自学,实在是觉得自己没有这个能力,确实是需要一个老师的话,那你还是自己做主找个老师吧!为什么要自学呢,现在的老师水平都可以说是参差不平,运气好,你遇到个好老师,把毕生的经验和技巧都教给了你,运气不好,遇到个照本宣科的老师,那你的知识也会仅仅局限于教材!也许还有更糟糕的是,学到的书本知识两年前就已经开始有了大的变化,你并不知道关于更多的web设计这方面的知识。如果在这样的情况下,都还不如那些闭关自学的学生。
学习最好的老师就是兴趣,没有兴趣而言,这条路我相信你是走不长远的,除非你有其他比如说生活压力,工作压力等让你不得不这样坚持下去。我刚开始接触web网页设计的时候,教材都是以table来布局的,看到插入table生成了很多标签代码后,tr里面一个个td,理不清楚这个里面怎么回事。敷衍的学习了一个学期。还是没学到什么。真正学到的还是停留在怎么新建,怎么保存。
如果你还是在校学生,那你得好好上课,大学的教材普遍来讲都是知识面浅的。虽然很多知识看起来用处不大,学起来也很枯燥,让你觉得浪费时间。但这些书本上最基础的知识你都不能掌握,那你以后怎么追求更精湛的技术呢。所以不要逃课,把基础知识掌握了,别小看这个基础知识,它非常重要,基础扎实是否也会决定你在一个职业能走多远。
我是毕业了后从文员转到编辑再到技术员当然这期间工资就像是阶梯一样,虽然这差距也不是很大,都离不开那些曾经被我遗落角落的专业课本。生活上的压力迫使我这样做,我知道自己要什么,当一个文员没有追求,感觉过着30、40岁人的生活,接电话、发email、整理报表,每个月都有白领的工资...浪费的不仅仅是自己的青春,还有这大学几年昂贵的学费。后来就愈来愈想掌握一门技术,想去培训学校学习一段时间,但是现实是我没有钱,闭关一个星期,重拾课本,再看看那些讨厌的table,虽然out了,但是确实会发现很多基础再基础不过的东西,利用互联网,不明白的就百度,作为一个过来人,我觉得我自己走了不少弯路,所以,有必要提醒你们一下,一定要明确自己的目标,摆正自己的位置,最好掌握一门技术。
了解web前端
Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网
页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上
软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。说得直白点就是美工photoshop,交互设计,flash,js,html+css。就小规模公司而言,一个技术员都得会这几样技能,这样很锻炼人的,慢慢的你就会成为公司的主力。大规模的公司把这些分得很细,所以,你可以精通一门,熟悉其他的,进军大公司。
网页开发工具
学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage。还有一个常用的是Dreamweaver。这两种都是使用最多的HTML网页制作工具,我使用的是Dreamweaver cs6,因为这套软件提供了一套直观的可视界面,融合了html5一些新的内容。包括网格布局什么的。
学习内容
HTML、CSS和JavaScript。html是内容,css是表现,javascript是行为。前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的初入点。也正因为如此,前端开发的领域有很多自学成“才”的同行。html是最基础的,现在流行的是html5设计,先学会网页布局。css是用来美化html页面的为页面提供布局和格式。最后再学javascript。如果你把每天看电影、看电视剧的时间用来学习,我想一个星期入门是没有问题的。
基础知识:
1. html + css。这部分建议在.cn 上学习,边学边练,每章后还有小测试。之后可以模仿一些网站做些页面。本站提供的个人博客模板
/download/都是比较简单的单页,可以下载下来模仿自己做一个。理解css每个元素的属性,样式的实现不一定只有一种写法,多想一想还有没有什么需要改进的地方。
《10条HTML代码编写技巧》
《CSS简明教程》
《Div+CSS 规则整理 以及注意问题》
2、JavaScript。不是所有的网页都必须有js,但是要想实现一些超酷的功能和界面的时候,就需要涉及到js。如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》
《JS经典实例》
3、Photoshop、flash。熟悉会一点儿就行了,没必要全部都学得精通,当然如果你在学习的过程中,发现你ps或者flash比较感兴趣的话,也可以尝试做美工这一行。
4、html5和css3。可以先了解一下,然后再入手。毕竟IE的浏览器大多还不支持。
《学习Html5建站教程(一)Html5简介》
《学习Html5建站教程(二)Html5 语法与规则》
《学习Html5建站教程(三)Html5博客页面设计之理论》
《学习Html5建站教程(四)用HTML5做个人的网站》
5、浏览器兼容。懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准。代码能兼容主流浏览器Firfox,Chrome、Safari、IE、Opera。虽然IE6很多都不兼容,但现在还使用的人还是有的。W3C验证地
址:http://jigsaw.w3.org/css-validator/ 通过验证指定URI的CSS内容,可以帮我们检查一下有没有错误。
6、熟悉一门后台编程语言 asp、php、jsp等《关于asp、php、asp.net、jsp的学习心得、介绍及优缺点比较》
web前端设计师前景
遇到很多想换行的朋友,第一句就问,这行赚钱吗?我相信一句话,没有付出,是没有回报的!前面已经说过了,咱们这行门槛是很低的,所以薪资阶段也不一样。2000初入这行的现在还普遍,工作经验2年以上,有很多代表性作品的时候,工资在4000左右;高手级别的估计在6000左右,大师级别这个阶段的薪资参考:10000以上(上海北京深圳为例)网页设计师课程一般包括:Photoshop、Fireworks、用户界面设计实操,xhtml、css、dreamweaver、网站架构与网站策划、flash动画制作,域名与空间、ftp、dhtml、javascript、动态交互网站(asp、php、aja)
（ps：本文章由北大青鸟广安门校区搜集自互联网）
篇二：web前端开发：第一阶段html+css基础知识
1 HTML入门
1.1 安装工具
1)编辑器 —— Sublime Text
安装插件：
按Ctrl+`（Esc下方的按钮）调出console ；复制：import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if notos.path.exists(ipp) else
None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())到代码底部命令行中 ；按回车键执行；重启Sublime Text；浏览器 —— Chrome、Safari 、Firefox 、360浏览器、遨游等。
2) 图形工具 —— PhotoShop
3) 版本管理工具 —— TortoiseSVN
SVN是什么？意义何在？
SVN是版本管理工具。当大家都在共同开发一个项目的时候，可以有效避免协作开发中的代码冲突问题；历史版本的保存也使得项目变得有据可查，当项目需要回滚到之前版本的时候，可以轻松的找到代码。此外一些开源项目也在使用SVN，这是一个使协同开发和版本维护变得方便的工具。
4) 环境集成工具 —— WAMP
1.2 创建项目文件夹（名字自起）
(1) 创建html文件 （常起名 index.html，一个项目有多个html文件） 创建项目文件夹
(2)创建css文件夹（用来放css层叠样式文件）
(3)创建images文件夹（用来放网页中需要的图片）
1.3 HTML介绍
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言。
HTML语言是一种标记语言,不需要编译,直接由浏览器执行。
HTML文件是一个文本文件,包含了一些HTML元素,标签等。
HTML文件必须使用html或htm为文件名后缀。
HTML是大小写不敏感的,HTML与html是一样的。
HTML是由W3C的维护的。
1.4 前端介绍
前端页面=结构html+样式css+行为js
2 HTML结构
2.1 HTML结构
头部head+身体body
(1)head
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、 编码格式等；绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
<meta charset="UTF-8"> —— 声明文档编码格式 为 UTF-8
<title> 文档标题 </title> ——— 网页名称
<link rel="stylesheet" href=" 外链样式表地址 "> —— 链接样式表
<style type="text/css"> css样式 </style> —— css样式
<script type="text/javascript"> 定义客户端脚本 </script>
<base href="全站默认地址"/>
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
(2)body
<body> 元素定义文档的主体。
<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） 网页需展示的内容需嵌套在<body>标签中。
2.2 HTML标签
HTML标签是HTML语言中最基本的单位，也是最重要的一部分。浏览器以某种方式显示相应的标签样式。
(1)HTML标签特点
?由尖括号包围的关键词，比如 <html>。
?通常是成对出现的，比如 <div> 和 </div>。
?标签对中的第一个标签是开始标签，第二个标签是结束标签。
?开始和结束标签也被称为开放标签和闭合标签。
?也有单独呈现的标签，如：<img src="images/1.jpg" />等。
?一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋
值。如<h1>标题</h1>和 <input type="text" value="按钮" />。
(2)块属性标签
?<h1> - <h6>： 标题
?<p>： 段落<br/> ：换行，空标签
?<div> : 无实际意义（通常用作装其他标签的盒子）
?<dl>:定义列表（结合dt和dd使用）
<dt>:定义列表中的项目
<dd>:描述列表中的项目
?<ol>:有序列表（结合li使用）
<li>：定义列表项。有序列表可以是数字或字母顺序。
? <ul> : 无序列表 （结合li使用）
<li>：定义列表项
? <table> : 表格（结合tr、th、td使用）
<tr>：定义表格行
<th>:定义表头
<td>:定义表格单元
(3)行属性标签
?<span>:无实际意义
?<a href="链接地址" title="当前标签中的内容">: 超文本链接
?<img src="图片链接" alt="图片说明"> : 为被引用的图像创建占位符
?<b>:粗体文本。
?<em>:强调文本
?<i>:斜体的文本
?
?<var> :定义变量
?<cite> :引用。如引用的书籍或杂志的标题。
?<form>: 用于创建供用户输入的 HTML 表单
form 元素包含一个或多个表单元素，比如：button、input、select、textarea等。 ?<button> : 按钮
?<textarea> : 多行的文本输入区域
? <input> : 规定用户可输入数据的输入字段。（俗称类型）根据不同的 type 属性，输入字段有多种形态。button 按钮、checkbox复选框、file文件、hidden(隐藏的input)、password密码输入框、radio单选框、reset重置按钮、submit提交按钮、text单行文本输入框。input标签显示的原始内容在input标签上的 value属性中设置 ，如： <select> :创建下拉列表（与option连用）。<option> : 定义下拉列表中的一个选项
?<!-- ... --> : 注释
(4)标签语义化
?标签语义化优点：语义化标签就是尽量使用与结构相对应的含义的Html的标签！ ?重要性：
a)去掉或样式丢失的时候能让页面呈现清晰的结构：
b)PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱），所以如果有良好的html结构，就能更好的将页面表现出来；
c)搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
d)你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
e)便于团队开发和维护
(5) 标签嵌套原则
a) p不可以嵌套div。
b) a不可以嵌套a。
c) 行属性尽量不要嵌套块属性标签。
(6)块属性标签与行属性标签区别
块属性标签独占一行、支持设置宽高、默认宽度自动充满整行、margin定义四个方向属性值。
行属性标签不独占一行、不支持设置宽高、内容充满整行，margin只能定义左右方向属性值。
3 CSS（层叠样式表）入门
3.1 CSS引入方式
引入方式优先级：标签内联样式>页面内嵌>外部文件样式>浏览器默认样式
(1)引入外部CSS文件
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
这种方法是最难体现DIV+CSS中结构与显示分离的思想，也最容易改版维护，代码看起来也是最美观的一种。
一个css文件可以控制多个页面，便于维护，从整站上减少代码量，有效利用缓存机制。
(2)head部分加入CSS
<style tyle=”text/CSS”>CSS样式代码</style>
Style表示引入文件类型的标签。Type表示文件类型。
优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的CSS命令。再者不用外链的CSS文件，从而减少了向服务器请求的次数。直接在HTML文件中读取样式。
缺点：改版麻烦，单个页面显得臃肿，CSS样式不能被其他HTML页面引用造成代码量相对较多，维护比较麻烦。
通常在访问量大的网站使用这种方法，首页。
(3)在标签内直接写CSS
Style这种写法不提倡使用，因为前端开发追求结构与样式分离。一般用于测试用。
3.2 CSS选择器及优先级
CSS选择器分为标签tag选择器，ID选择器，类选择器，后代（派生）选择器，群组选择器，伪类（a标签\nth-child（n））选择器，通配（*）选择器，子选择器（A>B），临近选择器（a+b)，CSS属性选择器（input[type=”button”]）。
篇三：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：只读（会被提交到服务
器）
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"
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