web前端开发PPT

1、1,2020/7/3,2,2020/7/3,Web前端开发,网页设计师、Web前端设计师与交互设计师、网站开发工程师等的区别：网页设计师是指精通Photoshop、CorelDRAW、Flash、Illustrator、Dreamweaver等多项网页设计工具的网页设计人员,请叫我周某人武夷学院广播台,NO.1Web前端开发设计？,3,2020/7/3,Web前端开发是从网页制作演变而来的，是web2.0的产物，包括三个要素：HTML、CSS和JavaScript,Web前端开发,请叫我周某人武夷学院广播台,NO.1Web前端开发设计？,4,2020/7/3,Web前端开发,网页设计师、Web

2、前端设计师与网站开发工程师、交互设计师等区别：交互设计师：秉承以用户为中心的设计理念，应用“以目标为导向的设计”方法，进行互联网产品的设计。,请叫我周某人武夷学院广播台,NO.1Web前端开发设计？,5,2020/7/3,Web前端开发,网页设计师、Web前端设计师与网站开发工程师、交互设计师等区别：网站开发工程师：掌握ASP、PHP、.NET、JSP等开发语言，熟悉运用Access、SQL语言、SQL数据库等；对IIS、Apache等服务器有一定的理解等,请叫我周某人武夷学院广播台,NO.1Web前端开发设计？,6,2020/7/3,请叫我周某人武夷学院广播台,XHTML是更严谨更纯净的HT

3、ML版本。XHTML与HTML4.01标准没有太多的不同。（目前最新为HTML5）XHTML是HTML与XML（扩展标记语言）的结合物。XHTML1.0在2000年1月26日成为W3C的推荐标准。（其标准应用为CSS+DIV）,Web前端开发,NO.2Web标准？Xhtml？,例如：所有标签都必须小写在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。错误：正确：标签必须成双成对像是.、.、.标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。错误：大家好我是muki正确：大家好我是muki标签顺序必须正确标签由外到

4、内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。错误：大家好正确：大家好,7,2020/7/3,请叫我周某人武夷学院广播台,如何验证Xhtml？/css-validator//学习网站推荐：,Web前端开发,NO.2Web标准？Xhtml？,8,2020/7/3,请叫我周某人武夷学院广播台,如何新建Xhtml文件？（初期建议用记事本书写代码！）无标题文档,Web前端开发,NO.2Web标准？Xhtml？,W3C将XHTML1.0分为三

5、种规范：transitional是过渡版（默认选择）strict是严格版、frameset为框架版,9,2020/7/3,请叫我周某人武夷学院广播台,Xhtml（html）语法规则：元素必须被正确地嵌套元素必须被关闭（如）、非空标签必须使用结束标签（）元素必须小写（标签名和属性对大小写敏感）（）属性值必须加引号（）,Web前端开发,NO.2Web标准？Xhtml？,10,2020/7/3,请叫我周某人武夷学院广播台,Xhtml（html）语法规则：属性不能简写（）用id属性代替name属性（）在/符号前添加一个额外的空格，以使你的XHTML与当今的浏览器相兼容,Web前端开发,NO.2Web标

6、准？Xhtml？,11,2020/7/3,请叫我周某人武夷学院广播台,Xhtml（html）语法规则：不要在注释内容中使“-”，如（是不行的！）把所有和/*Firefox背景变蓝色*/*+background:green!important;/*IE7背景变绿色*/_background:orange;/*IE6背景变橘色*/background:black0;/*IE8背景为黑色*/background:red90;/*IE9背景为红色*/body:nth-of-type(1)background:red;/*ChromeSafari背景为红色*/,请叫我周某人武夷学院广播台,Web前端开发

7、,NO.3纠结的浏览器兼容问题,20,2020/7/3,CSSHack（解决兼容问题）：（使ie8、ie9使用ie7模式显示）,请叫我周某人武夷学院广播台,Web前端开发,NO.3纠结的浏览器兼容问题,21,2020/7/3,CSSHack（解决兼容问题）：除IE外都可识别所有的IE可识别IE6以下版本可识别IE6以及IE6以上版本可识别结语：积累经验解决兼容问题,请叫我周某人武夷学院广播台,Web前端开发,NO.3纠结的浏览器兼容问题,22,2020/7/3,HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markup

8、language)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页HTML标签是由尖括号包围的关键词，比如HTML标签通常是成对出现的，比如和,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,23,2020/7/3,武夷学院广播台官方网站！,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。,标签可告知浏览器其自身是一个HTML文档。与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。,这些标签可用在

9、head部分：,以及。定义文档的标题，它是head部分中唯一必需的元素。,元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签永远位于head元素内部。必须属性为content，可选属性有http-equiv、name、scheme,24,2020/7/3,1、标签：http-equiv：content-type、expires、refresh、set-cookie；name：author、description、keywords、generator、revised、；content=text/html;charset=gb2312:c

10、harset=gb2312/GBK/utf-8（5秒刷新）（搜索引擎）,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,25,2020/7/3,2、常见使用的标签：（标题标签）（段落）;（换行）;（水平线），不支持任何属性（文本）（图像）（来组合文档中的行内元素）（链接CSS样式表，在插入）（定义客户端脚本，如javascript）；如:（链接JS文件）,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,26,2020/7/3,3、表单标签：（创建一个html表单）（用于搜集用户信息）（定义多行的文本输入控件）Volvo（select创

11、建单选或多选菜单；optgroup定义选项组；option定义下拉列表中的一个选项）（input等表单元素必须在之间）,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,27,2020/7/3,3、表单标签：,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,不使用accept属性！,28,2020/7/3,4、列表标签：无序列表：咖啡茶红茶乌龙茶.,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,29,2020/7/3,4、列表标签：有序列表：咖啡茶牛奶.注：基本都使用无序列表！列表标签自带的属性很少，基本

12、不使用,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,定义列表：计算机用来计算的仪器.显示器以视觉方式显示信息的装置.,30,2020/7/3,5、表格标签：MonthSavingsJanuary$100,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,tr元素定义表格行，th元素定义表头，td元素定义表格单元。,31,2020/7/3,5、表格标签：表格标题：caption元素定义表格标题。caption标签必须紧随table标签之后。通常这个标题会被居中于表格之上。：标签为表格中一个或多个列定义属性值。只能在table或colg

13、roup元素中使用标签。：标签用于对表格中的列进行组合，以便对其进行格式化。只能在table元素中使用。：标签定义表格的表头。thead元素应该与tbody和tfoot元素结合起来使用。但不使用！,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,32,2020/7/3,6、其他标签：:加粗；:倾斜加粗（创建样式）h1color:redpcolor:blue7、html5新标签：,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,33,2020/7/3,7、html5新标签：(min=1max=10)（导航）我在情人节有个约会。：标签定义

14、公历的时间（24小时制）或日期，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。更多新标签：,请叫我周某人武夷学院广播台,Web前端开发,NO.4html标签/元素和属性,34,2020/7/3,CSS指层叠样式表(CascadingStyleSheets)把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,35,2020/7/3,CSS有外部样式表、内部样式表（位于标签内部）、内联样式（在HTML

15、元素内部）内联样式具有最高优先权，但不建议使用内部样式表和内敛样式！如何导入外部样式表（在之间）？武夷学院广播台官方网站首页,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,36,2020/7/3,CSS基本语法:如果值为若干单词，则要给值加引号：pfont-family:sansserif;多重声明，需要用分号(;)将每个声明分开，在每条声明的末尾都加上分号。尽可能小写，使用空格。ptext-align:center;color:red;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,37,2020/7/3,CSS高级

16、语法:选择器的分组：h1,h2,h3,h4,h5,h6color:green;font-family:sansserif;继承及其问题（根据CSS，子元素从父元素继承属性）：bodyfont-family:Verdana,sans-serif;pfont-family:Times,TimesNewRoman,serif;派生选择器：liafont-size:14px;line-height:22px;color:blue;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,38,2020/7/3,CSSid选择器（常与js结合使用）:id属性只能在每个HTML

17、文档中出现一次！？id值必须以字母或者下划线开始；不能以数字开始，下划线也不是个好主意！id选择器以#来定义：即使被标注为header的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次：#headerptext-align:right;margin-top:5px;#headeraline-height:24px;font-size:14px;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,39,2020/7/3,CSSid选择器（常与js结合使用）:div#top_linka:linkborder:1pxsolid#000;pad

18、ding:1px;text-decoration:underline;（只对起作用）,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,40,2020/7/3,CSS类选择器（用法与id选择一样）：在CSS中，类选择器以一个点号显示：.news_maintext-align:center选择id还是class?？两者的区别？,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,41,2020/7/3,CSS属性（千变万化的网页样式）：(1)CSS背景属性（Background）:background-color（背景颜色）、ba

19、ckground-image（背景图片）、background-repeat（背景重复）、background-attachment（背景固定与否）、background-position（背景位置）#navbackground:#00FF00url(bgimage.gif)no-repeatfixedtop;repeat:X轴及Y轴重复;repeat-x:X轴重复;repeta-y:Y轴重复;scroll:不固定随内容滚动;fixed:固定不滚动;top/left/bottom/right/center（可组合使用）;0px-36px;(csssprite),请叫我周某人武夷学院广播台,We

20、b前端开发,NO.5CSS禅意花园+DIV别具光芒,1.IE6PNG背景问题解决方法(csshack)：#slide_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=icon_home.png);_background-image:none;/*IE6*/2.背景透明设置兼容各浏览器：#sbackgournd:#000;filter:alpha(opacity=50);/*IE*/-moz-opacity:0.5;opacity:0.5;-khtml-opacity:0.5;,42,2020/7/3,CSS属性（千变万

21、化的网页样式）：(2)CSS边框属性（Border）：border-width(边框宽度)、border-style(边框样式)、border-color(边框颜色)pborder:2pxsolidred;border-bottom/top/left/right(上下左右边框)solid(实线)/dotted(点状)/double(双线)/dashe(虚线);,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,43,2020/7/3,CSS属性（千变万化的网页样式）：(3)CSS文本属性（Text）：color(颜色)、line-height(行距)、text

22、-align(水平对齐方式)、text-decoration(下划线)、text-indent(首行缩进)、text-shadow(阴影效果,IE不支持)、text-transform(大小写)、white-space(空白设置)、word-spacing(单词间距)pcolor:#00ff00;line-height:24px;text-align:left/right/center;text-decoration:underline/none/overline/line-through/blink;text-indent:200px;text-shadow:0px0px1pxwhite;w

23、hite-space:normal/pre/nowrap/;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,44,2020/7/3,CSS属性（千变万化的网页样式）：(4)CSS字体属性（Font）：font-weight(字体粗细)、font-size(字体大小)/line-height(字行距)、font-family(字体系列,如:宋体;)pfont-size:14px;line-height:24px;font-weight:normal/bold/bolder/lighter;font-family:TimesNewRoman,Georgia,S

24、erif;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,45,2020/7/3,CSS属性（千变万化的网页样式）：(5)CSS尺寸属性（Dimension）:height、max-height/min-height、width、max-width/min-widthpheight:100px/100%;width:125px/100%;(6)CSS内外边距属性（Padding,Margin）：padding-bottom/top/left/right(内边距)margin-bottom/top/left/right(外边距),请叫我周某人武夷学院广播台,

25、Web前端开发,NO.5CSS禅意花园+DIV别具光芒,46,2020/7/3,CSS属性（千变万化的网页样式）：(6)CSS内外边距属性（Padding,Margin）：ppadding:6px8px10px5px;marin:10px5px;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,假设元素有10px的外边距和5px的内边距。如果希望这个元素框达到100px，就需要将内容的宽度设置为70px,IE6会把border、margin、padding计入width值,47,2020/7/3,CSS属性（千变万化的网页样式）：(6)CSS内外边距属性（P

26、adding,Margin）：ppadding:6px8px10px5px;marin:10px5px;,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,假设元素有10px的外边距和5px的内边距。如果希望这个元素框达到100px，就需要将内容的宽度设置为70px,IE6会把border、margin、padding计入width值,48,2020/7/3,CSS属性（千变万化的网页样式）：(7)CSS列表属性（List）应用于ul和li:list-style-type、list-style-position、list-style-imagelilist-s

27、tyle:none/disc/circle/square/decimalinside/outsideurl(img/nav_bg.gif);基本都只是使用list-style:none;（通过其他方式定义列表样式,如:background等）,请叫我周某人武夷学院广播台,Web前端开发,NO.5CSS禅意花园+DIV别具光芒,49,2020/7/3,CSS属性（千变万化的网页样式）：(8)难点CSS定位属性（Positioning）:bottom/top/left/right、cursor(光标形状)、display、float(浮动)、overflow(内容溢出时)、position(定位类型)、vertical-align(垂直对齐方式)、visibility(元素可见性)、z-index(堆叠顺序)bottom/top/left/right:100px/-100