当前位置：文档之家 › 韩顺平 轻松搞定网页设计html (DIV、CSS) javascript视频笔记

韩顺平 轻松搞定网页设计html (DIV、CSS) javascript视频笔记

  • 格式：doc
  • 大小：8.13 MB
  • 文档页数：69

韩顺平轻松搞定网页设计html (DIV、CSS) javascript视频笔记韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><a href="mailto:yanli457352797@">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><frame src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密&nbsp;&nbsp;码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br> <input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br> <input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>DIV+CSS部分笔记当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

合集下载

韩顺平html笔记

韩顺平html笔记

HTML一、HTML有关知识点1.html介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。

2.html可以做什么➢html可以编写静态网页➢该静态网页可以包括文字、图像、动画、声音、表格、链接。

从而构成一个个漂亮的网页3.Html发展历史4.Html的基本结构5.<html></html>是标记（也叫元素），标记的一般格式：<元素名[属性=“属性值”]>元素内容</标签>如果没有内容可以用：<元素名[属性=“属性值”]/>6.Html实体标记7.Html常用标记➢html超链接<a href=”” target=”_blank”></a>●_blank 新的窗口●_self 本窗口●_parent 父窗口●_top整个浏览器窗口➢html图像元素<img src=”文件路径” width=”宽度” height=”高度”/>➢html表格<table border=”边框宽度” width=”” cellspacing=”空隙大小” cellpadding=”填充大小”> <tr>--用于说明行<td></td>--用于说一小格</tr></table>➢无序列表<ul><li></li><li></li></ul>➢有序列表<ul><li></li><li></li></ul>➢框架<frameset frameborder=”边框的大小” cols=”按照列的百分比分隔” rows=”按照行的比分比分隔”><frame src=”” noresize /></frameset>➢表单元素<from action=”” method=”post/get”>文本框：<input type=”text name=””/>密码框：<input type=”password” name=””/>单选框：<input type=”radio”name=””>复选框：<input type=”checkbox” name=”” checked>checked是指默认选中的隐藏域：<input type=”hidden” name=””>图片按钮：<input type=”image” src=””></from>➢文本域：<textarea cols=”” rows=”” > wrap=off自动换行请在这里写····</textarea>➢下拉菜单：<select name=”” size= > size 是指显示大小<option value=””>-----请选择------</option><option value=”shanghai” selected> 上海</option> selected是指被选中<option value=”beijing”> 北京</option></select>➢<meta http-equiv="content-type" content="text/html " charset="utf-8" />➢<body bgcolor=# text=# alink=# vlink=#>#=rrggbb;这些是16进制的，红绿蓝(red-green-blue,RGB)值来表示<body topmargin=0px leftmargin=0px>➢标尺线：<hr size=>➢<a href=url target=”指向一个frame的名字”>➢文字布局标记●<p align=”#”></p>：表示一段#= left /center/right➢图像：<img src=” ” alt=”提示信息”>➢会移动的文字<marquee direction=”left/right” behavior=”scroll/slide/alternate” loop= 循环的次数scrollamount=速度></marquee>➢多媒体页面<embed src=”文件路径” width= height=></embed>➢背景音乐：<bg src=” ” loop=””>CSS1.div元素是用来HTML文档内大块(block-level)的内容提供结构和背景元素。

最新韩顺平__jsp和selverlt原完整版课件_笔记_.doc

最新韩顺平__jsp和selverlt原完整版课件_笔记_.doc

最新韩顺平__jsp和selverlt原完整版课件_笔记_.doc◆背景知识介绍J2EE的13种技术java->servlet->jsp [技术总是有⼀个演变过程]zip粘贴到word设置◆回顾⼀下我们现有的技术java 基础(⾯向对象,集合,界⾯,线程,⽂件,⽹络)jdbc (java 的数据库编程)oracle / mysql / sqlserverhtml css javascript (web 开发) ->⽹页设计xmlserlvet+jsp ->java web开发[使⽤java技术做web开发]◆java ee 体系的介绍◆servlet项⽬演⽰◆web 开发介绍①静态页⾯(html)②动态页⾯1.⽤户可以输⼊数据，和页⾯交互(注册,购物,发帖⼦,付款...)2.不同时间打开页⾯，内容是变化.3.⽬前⽐较流⾏的左动态页⾯的技术( servlet/jsp , php , /doc/b83fffd680eb6294dd886c36.html , asp, cgi )◆动态⽹页技术的⽐较(了解)◆bs 和cs的⽐较（1）BS：browser server 浏览器服务器（2）cs client server 客户服务为什么需要的web服务器/web究竟是⼲什么的?模拟⼀个web服务器MyWebServer.javaimport java.io.*;import /doc/b83fffd680eb6294dd886c36.html .*;public class MyWebServer{public static void main(String []args) throws Exception{ServerSocket ss=new ServerSocket(80);Socket s=ss.accept();//提⽰⼀句话System.out.println("在9999 上等待连接...");OutputStream os=s.getOutputStream();BufferedReader br=new BufferedReader(new FileReader("d:\\hello.html"));String buf="";while((buf=br.readLine())!=null){os.write(buf.getBytes());}//关闭流br.close();os.close();s.close();}}◆通过tomcat来讲解BS结构◆安装tomcat服务器(1)解压即可(2)配置①在环境变量中添加JA V A_HOME= 指向你的jdk的主⽬录（并不是bin⽂件⽬录）②在不配置JA V AHOME的前提下启动tomcat 在startup.bat的第25⾏中添加set JA V A_HOME=JKD路劲(3)启动tomcat服务器到tomcat 主⽬录下bin/startup.bat(4)验证是否安装成功http://localhost:8080（8080是默认端⼝如果该端⼝已经被占⽤需要修改端⼝）◆tomcat安装后问题解决（1）tomcat⽆法正常启动的原因分析1.JA V A_HOME 配置错误，或者没有配置2.如果你的机器已经占有了8080 端⼝，则⽆法启动，解决⽅法(1) 你可以8080 先关闭netstat –annetstat –anb 来查看谁占⽤该8080(2) 主动改变tomcat的端⼝.到conf/server.xml ⽂件中修改server.xml的端⼝号）protocol="org.apache.coyote.http11.Http11NioProtocol" redirectPort="8443"/>(3) 能够正常启动，但是会导航到另外⼀个页⾯.去修改⼯具->管理加载项，把默认的导航给禁⽤即可.(4) 在访问tomcat时候，⼀定保证tomcat 服务器是启动◆tomcat的⽬录结构⽂件bin: 启动和关闭tomcat的bat⽂件conf: 配置⽂件-->server.xml: 该⽂件⽤于配置和server 相关的信息, ⽐如tomcat启动端⼝后,配置Host, 配置Context 即web应⽤-->web.xml : 该⽂件配置与web应⽤(web应⽤就相当于是⼀个web站点)-->tomcat-users.xml: 该⽂件⽤户配置tomcat 的⽤户密码和权限lib⽬录: 该⽬录放置运⾏tomcat 运⾏需要的jar包logs⽬录：存放⽇志, 当我们需要去查看⽇志的时候，很有⽤!,当我们启动tomcat错误时候，可以查询信息.webapps⽬录: 该⽬录下，放置我们的web应⽤(web 站点), ⽐如:建⽴web1 ⽬录下⾯放置我们的html ⽂件jsp ⽂件..图⽚... 则web1就被当做⼀个web应⽤管理起来(?特别说明tomcat 6.0 以后⽀持tomcat 5 版本还有别的设置)work: ⼯作⽬录: 该⽬录⽤于存放jsp被访问后⽣成的对应的server⽂件和.class⽂件如何去访问⼀个web 应⽤的某个⽂件◆⾸页⾯设置及⽬录规范结构现在我们要求：把hello.html⽂件设置成该web应⽤的⾸页，则需要把web应⽤的⽬录格式做的更加规范:①在web⽂件夹下配置WEB-INF⽂件夹②在web.xml ⽂件中添加配置的代码:hello1.html③通过http://localhost:8088/web1来访问hello1.htmlweb-inf⽬录下的classes⽬录将来是存放class⽂件lib ⽬录将来时存放jar⽂件web.xml 配置当前这个web应⽤的信息.◆tomcat如何去管理虚拟⽬录需求: 当我们把web 应⽤放到webapps⽬录，tomcat会⾃动管理，如果我们希望tomcat 可以管理其它⽬录下的web应⽤?->虚拟⽬录配置我在d 盘有⼀个web应⽤.◆虚拟⽬录配置步骤：①找到server.xml⽂件②编辑host节点添加Context path在server.xml中添加：myweb2：是访问时输⼊的web名,实际取出的是web2中的资源"d:\web2"：绝对路径下web2中存放资源如：hello2.html实际访问时输⼊的地址：http://localhost:8088/myweb2/hello2.html绝对路径：从根分区找某个⽂件相对路径：从该⽂件位置去找另⼀个⽂件③需要重启tomcat，才能⽣效.（因为是采⽤的dom技术讲信息加载到内存中）◆context 的⼏个属性的说明path:docbase:reloadable;如果设为ture ，表⽰tomcat 会⾃动更新web应⽤，这个开销⼤，建议在开发过程中，可以设为true, 但是⼀旦真的发布了，则应当设为false;upackW AR: 如果设为ture ，则⾃动解压，否则不⾃动解压.①：打war包cd:d/web2 然后jar –cvf web2.war *②：浏览打好的war包Deploy发布后会在webapps中⾃动⽣存改⽂件◆配置域名我们看和⼀个如何配置⾃⼰的主机名:我们在实际访问⽹站的过程中，不可能使⽤http://localhost:8080/web应⽤/资源名的⽅式去访问⽹站，实际上使⽤类似/doc/b83fffd680eb6294dd886c36.html 或者/doc/b83fffd680eb6294dd886c36.html 的⽅式去访问⽹站，这个⼜是怎么实现的呢?看看ie浏览器访问⼀个web站点的流程.实现的步骤如下:(1) 在C:\WINDOWS\system32\drivers\etc 下的host⽂件添加127.0.0.1/doc/b83fffd680eb6294dd886c36.html(2) 在tomcat 的server.xml⽂件添加主机名(3) 在d:\web3 加⼊了⼀个/WEB-INF/web.xml 把hello2.html设为⾸页⾯如果连端⼝都不希望带，则可以吧tomcat的启动端⼝设为80即可.(4) 重启⽣效◆tomcat体系的再说明图:如何配置默认主机:在tomcat/conf/server.xml ⽂件◆为什么需要servlet技术?⽐如需求：我们希望⽤户可以贴，⽤户还可以回复....这样⼀些和⽤户可以交互的功能，⽤普通的java技术就完成不了, sun 就开发了servlet技术供程序员使⽤.◆servlet的介绍①servlet 其实就是java程序(java类)②该java 程序(java 类)要遵循servlet开发规范③serlvet是运⾏在服务端④serlvet 功能强⼤,⼏乎可以完成⽹站的所有功能⑤是学习jsp基础◆tomcat 和servlet 在⽹络中的位置servlet的⽣命周期是怎样的/servlet究竟是怎样⼯作的UML 时序图帮助⼤家理解参看execel⾯试题: 请简述servlet的⽣命周期(⼯作流程)答:标准版本：①WEB服务器⾸先会检查是否已经装载并创建了该servlet实例对象。

传智播客韩顺平轻松搞定网页设计(html+css+javascript)之javascript

传智播客韩顺平轻松搞定网页设计(html+css+javascript)之javascript

Javascript的基本介绍•JS是用于WEB开发的脚本语言：•脚本语言是什么：•脚本语言不能独立使用，它和HTML/JSP/PHP/配合使用•脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环）•脚本语言实际上是解释性语言（即在执行时直接对源码进行执行）•Java程序.java→.class→jvm , js→浏览器（js引擎来解释执行）•Js在客户端（浏览器）执行•因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><script language="javascript">function test(){window.alert("hello world!");}</script><title> New Document </title></head><body><input type="button" onclick="test()" value="点击一下吧"/></body></html>案例：1需求：打开网页后，显示hello ！<html><head><!----js代码是放在head标签间,但实际上也可以放在别的位置--><script language="javascript">window.alert("hello!");</script><title> New Document </title></head><body><input type="button" onclick="test()" value="点击一下吧"/></body></html>问题：•js的位置可以随意放•js必须使用 <script language="javascript"> 代码</script>•在一个html文件中（JSP/PHP/）可以出现多对（script）片段，浏览器会按照先后顺序一次执行案例2:Hello world程序改进•如何定义变量：•如何运算：<html><head><title> New Document </title></head><body><!----js代码是放在head标签间,但实际上也可以放在别的位置--><script language="javascript">//js中变量的定义（js中变量用var表示，无论什么类型）var num1=1;var num2=60;var result=num1+num2;window.alert("结果是"+result); //alert函数window.alert表示弹出一个对话框 </script></body></html>•Js的变量类型是怎样决定的1)Js是弱数据类型语言，即：在定义变量侍候，统一使用var表示，甚至可以去点var这个关键字2)Js中的变量的数据是由js引擎决定的Var name=”shunping”; //name是字符串Var kk=2 //kk是数字Name=234; //这事name自动变成数•Js的命名规范（函数/变量）：1)使用大小写字母，数字，$可以命名2)不能以数字打头3)不能使用js保留字和关键字（即java里的关键字）4)区分大小写5)单行注释：//6)多行注释：/*…….*/韩顺平JS第三讲•Js的数据类型：•基本数据类型•数值类型•字符串类型•布尔类型通过typeof可以看到变量的具体数据类型举例：<html><head><title> New Document </title><script language="javascript">var vi="abc";var v2=890;window.alert("v1是"+typeof v1);window.alert("v2是"+typeof v2);vi=456; //体现js是动态语言：即数据类型可以任意变化window.alert("v1是"+typeof v1);//体现js是动态语言</script></head><body></body></html>•复合数据类型•数组•对象•特殊数据类型•Null 即：var=null•Undefined即：如下代码<script language="javascript">window.alert(tt ); //直接报错：未定义var tt; //未给值</script>•Js定义变量，初始化，赋值•定义变量：即var=a•初始化：即在定义变量时就给值•赋值：即：比如你先定义一个变量 var=tt ，然后再给值：tt=780；•js数据类型转换：•自动转换例子：var=123; //a是数值a=”hello” //a的类型是string •强制转换例子：字符串转换成数字Var a="123” ;a=parseInt(a); //使用系统数强制转换Var b=90 ; //b是numberb=b+””, //b就是string•运算符•+ — * / %•%(取摸：即两个数相除的余数) 强调：取模主要用于整数之间取模例子：编写一个程序，判断两个数是否能够整除<script language="javascript">var a=90;var b=8;if(a%b==0){window.alert("能整除");}else{window.alert("不能整除");}</script>•++，运算符a++ = a=a+1a-- = b=b-1++a 表示先把自己加1再赋值--a 表示先把自己减1再赋值例子：Var a=56;Var b=++a; //b=++a等同于[a=a+1;b=a] b=a++等同于[b=a; a=a+1;] Window.alert(b);Window.alert(a);•--运算符•Var a=56;•Var b=--a; //b=--a等同于[a=a-1;b=a] b=a--等同于[b=a; a=a-1;] •Window.alert(b);•Window.alert(a);例子：编写一个程序，判断两个数是否能够整除 <script language="javascript">var a=90;var b=8;if(a%b==0){window.alert("能整除");}else{window.alert("不能整除");}</script>•++，运算符a++ = a=a+1a-- = b=b-1++a 表示先把自己加1再赋值--a 表示先把自己减1再赋值例子：Var a=56;Var b=++a; //b=++a等同于[a=a+1;b=a] b=a++等同于[b=a; a=a+1;] Window.alert(b);Window.alert(a);•--运算符•Var a=56;•Var b=--a; //b=--a等同于[a=a-1;b=a] b=a--等同于[b=a; a=a-1;] •Window.alert(b);•Window.alert(a);错误案例：更正：输出：myfuns.js代码：调用myfuns.js案例一：Js文件：调用：案例2：Js文件：调用：abc（5）；输出：3 3 4Js文件：调用：数组数组在内存中的存在形式：内存数据调用案例：输出：900 内存数据分析:输出：35 90 900 内存数据调用分析：输出： hello world abc 顺平输出： h e l l o w o r l d a b c 顺平输出： hello world输出：0=451=902=0gg=9000二维数组的遍历：输出：shunping 123 4.5a b c优化排序：输出：输出：找到下标为4数组转置：输出：JavaScript面向（基于）对象编程澄清概念js中基于对象==js 面向对象 js中没有类class，但是它取了一个新的名字叫原型对象。

《HTML+CSS+JavaScript网页制作案例教程》课程教学Design

《HTML+CSS+JavaScript网页制作案例教程》课程教学Design

传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。

但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。

本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。

教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施教学难点：有序列表、定义列表、链接伪类。

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。

教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。

1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。