下载文档原格式
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网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师201 年月日课题名称第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；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
传智播客《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；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
div+css详解◆ div+css的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例：test.html：<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"><html><head><title>div+css入门案例</title><link href="my.css" type="text/css" rel="stylesheet"/> </head><body><div class="style1"><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr > <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table></div></body></html>my.css中指定：.style1{width:300px;height:200px;border:1px solid red;margin:100px 0px 0px 200px;}.style1 table{border:1px solid black;width:298px;height:190px;}.style1 table td{border: 1px solid black;text-align:center;}<span style="font-size:30px;color: blue;">栏目一</span><br/> 从使用span元素我们可以看到，css的基本语法<元素名 style=”属性名：属性值；属性名：属性值2；”/> 元素可以是html的任意元素：属性名：属性值要参考 w3c组织给出的参考文档◆使用css可以统一网站的风格css分类：外部css 内部css<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>css1.html</title><meta http-equiv="keywords" content="杨萌,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css">.style1{}</style> font-size: 20px; color:red; font-weight: bold; font-style: italic;</head><body><span class="style1">栏目一</span><br/> <spanclass="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> </body></html>使用滤镜<style type="text/css">/*使用滤镜将图片变成黑白色*/img {}</style>/*使用滤镜*/a:link img { filter:gray;} filter:gray; a:hover img{ } filter:"";</style><!--<link rel="stylesheet" type="text/css"href="./styles.css">--></head><body><a href="#"><img src="images/1.jpg" width=170pxborder=1/></a> <a href="#"><img src="images/2.jpg" width=170px border=1/></a> <a href="#"><img src="images/3.jpg" width=170px border=1/></a> <a href="#"><img src="images/4.jpg" width=170px border=1/></a> <a href="#"><img src="images/5.jpg" width=170px border=1/></a> <a href="#"><img src="images/6.jpg" width=170px border=1/></a> <a href="#"><img src="images/7.jpg" width=170px border=1/></a> </body>1．类选择器的基本语法:.类选择器名{属性名:属性值;…}.style1{font-weight: bold;font-size: 20px;background-color: pink;}<link rel="stylesheet" href="my.css" type="text/css"></link> </head><body><span class="style1">新闻一</span><span class="style1">新闻二</span><span class="style1">新闻三</span><span class="style1">新闻四</span><span class="style1">新闻五</span></body>2．id选择器基本语法：#id选择器名{属性名：属性值；}案例：#style2{font-size: 30px;background-color: skyblue;}在html文件中如果要引用id选择器，则<元素 id=‘id选择器的名称’></元素><span id="style2">这是一则重要的新闻</span>3．Html选择器 /*html选择器body(button,input,form...)*/ body{color:silver;}结论：当一个元素同时被id选择器类选择器 html选择器修饰时，优先级为： id选择器>类选择器>html选择器>通配符选择器<span class="style1" id="style2">这是一则重要的新闻</span> 案例：假设，我们希望所有的超链接（1）默认样式是黑色，24px，没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色。
.《H TML5+CSS3 网站设计基础教程?课程授课大纲〔课程英文名称〕课程编号： 202101210011学分：5学分学时： 76 学时〔其中：讲课学时：47 学时上机学时： 26 学时〕先修课程：计算机基础、计算机网络、计算机应用后续课程： UI 设计、JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程?是面向计算机相关专业的一门专业基础课，涉及网页基础、 HTML 标记、 CSS样式、网页布局、变形与动画等内容，经过本课程的学习，学生能够认识网页 web 睁开历史及其未来方向，熟悉网页设计流程、掌握网络中常有的网页布局收效及变形和动画收效，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践授课环节需明确必要的理论知识的生化与知识层面的拓展，不能够限制于单纯的技术训练。
单纯的技术训练不是提高升等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和平生学习的能力，实现一站式授课理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行授课内容设计，以学生为主体，以案例〔工程〕实训为手段，设计除理论学习与技术掌握订交融的课程内容系统。
授课整体设计“以职业技术培养为目标，以案例〔工程〕任务实现为载体、理论学习与时间操作相结合〞。
.三、授课条件要求开发工具： Dreamweaver CS6四、课程的主要内容及根本要求第一章初识 HTML5学习单元初识HTML5学时10 学时1.认识 HTML5 睁开历程2.理解 HTML5 阅读器支持情况学习目标3.熟悉 HTML5 根本语法 ,掌握 HTML5 语法新特点。
4.掌握 HTML5 相关标记及属性，能够制作简单的网页页面。
知识点认识掌握重点难点HTML5 睁开历史√HTML5 的优势√HTML5 阅读器支持情况√创立第一个 HTML5 页面√HTML5 文档根本格式√HTML5 语法√HTML 标记√标记的属性√学习内容HTML5 文档头部相关标√记标题和段落标记√文本格式化标记√特别字符标记√常用图像格式√图像标记 <img/>√绝对路径和相对路径√创立超链接√锚点链接√√第二章HTML5 页面元素及属性学习单元HTML5 页面元素及属性学时 6 学时1.掌握结构元素的使用，能够使页面分区更明确。
一、HTML语言简介HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。
自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息，简单来说就是用来在浏览器中对文字、图片、flash动画等进行排版布局的一种格式语言。
HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html 或.htm的文件扩展名。
生成一个HTML文档主要有以下三种途径：1.手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2.通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3.由Web服务器（或称HTTP 服务器）一方实时动态地生成。
HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。
虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。
这就是为什么同一文档在不同的浏览器中展示的效果会不一样。
目前HTML语言的版本是2.0，它是基于SGML（Standard Generalized Markup Language，标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。
虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。
javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。
编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。
2.html dom层次图dom编程的核心是各个dom 对象。
HTML DOM定义了访问和操作HTML文档的标准方法。
HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。
3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。
bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。
可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。
要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。
在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。
注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。
常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。
1,Web标准的组成：结构，表现和行为；结构标准对应的主要语言是XHTML表现标准对应的主要语言是CSS行为标准对应的主要语言是javascript制作成一个静态页面，主要用到的就是xhtml和css，所以制作标准页面的技术就是xhtml+css;2,css定义的技巧：1，为了将来的css代码优化，建议所有的属性值后面都要带上";";2,某些xhtml标签，有自己默认的css属性值；例如，h1标签就有自己默认的属性值。
3，为了兼容主流的浏览器，或者为了统一效果，建议我们在设置时，将所有元素的css属性，重置为一个标准的；4，不同的浏览器，有各自不同的css属性值---就是浏览器的兼容性5，css可以重新设置html标签的默认设置；3，CSS应用给网页的方法：1，内联式样式表：直接写在现有的标记中，如<p style="color:red">这里文字是红色的</p>2, 嵌入式样式表：使用<style></style>标签嵌入到HTML文件的<head>标签中。
如：<style type="text/css">body {background:white;color:black;}</style>3，外部链接式样式表：将样式表写在一个独立的.css文件中，然后在页面<head></head>标签内使用<link>标签调用它，主要用于实现表现与结构的分离，如：<link href = "main.css" rel="stylesheet" type="text/css"/>4, 导入式样式表[用的较少]：导入式样式表与链接式样式表的功能基本相同，只是语法与动作方式略有不同，同样也将导入样式代码写在<head></head>标记内。
javascript 2===============================================================================1.js面向/基于对象编程-----类（原型对象）与对象（实例）(1)js面向/基于对象特征介绍Javascript是一种基于对象（object-based）的动态脚本语言，你遇到的所有东西都是对象。
js的面向对象技术广泛应用于AJAX等优秀框架。
☞特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。
从本质上并无区别，所以这两个概念在课程中是一样的。
因为javascript中没有class(类)，所以有人把类也称为原型对象。
其实这两个概念在编程中发挥的作用都看成一个意思。
(2)为什么需要原型对象（类）？例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。
(3)类（原型对象）————如何自定义类（原型对象）和对象创建类的方式有5中方法：工厂方法——使用new Object创建对象并添加相关属性使用构造函数来定义类（原型对象）：上面的Cat类就是用此种方法基本语法：function 类名/原型对象名(){}创建对象：var 对象名=new 类名/原型对象名();使用prototype构造函数及原型混合方式动态原型方式2.如何判断一个对象实例是不是Cat类型？✧if(a instanceof Cat){window.alert(“a是Cat的实例”)}✧if(a.constructor== Cat){window.alert(“a是Cat的实例”)}3.带var和不带var的区别var abc=89;function test(){abc=900;//在函数里，如果不带var，则表示使用全局的abc变量89。
//如果带var，则表示在函数中，定义一个新的私有的abc变量。
韩顺平html笔记HTML一、H TML有关知识点1.h tml介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。
2.h tml可以做什么➢html可以编写静态网页➢该静态网页可以包括文字、图像、动画、声音、表格、链接。
从而构成一个个漂亮的网页3.H tml发展历史19931995htm1996htm2001xh2000xhtm1999htm2008ht 4.H tml的基本结构5.<html></html>是标记（也叫元素），标记的一般格式：<元素名[属性=“属性值”]>元素内容</标签> 如果没有内容可以用：<元素名[属性=“属性值”]/>6.H tml实体标记7.H tml常用标记➢html超链接<a href=”” target=”_blank”></a>●_blank 新的窗口●_self 本窗口●_parent 父窗口<html><head><title>html的基本结构</title> </head>●_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.d iv元素是用来HTML文档内大块(block-level)的内容提供结构和背景元素。
韩顺平2011javascript笔记（全）JavaScript1.javascript基本介绍：(1)javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：○1网页游戏○2地图搜索○3股市信息查询○4web聊天····(2)在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。
(3)javascript是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。
2.脚本语言：(1)脚本语言往往不能独立使用(单独使用没有什么意义)，它一般与html/asp/jsp/php(2)脚本语言有自己的变量，函数，控制语句。
(3)脚本语言是一种解释性语言。
3.JS一般在客户端的浏览器执行。
但也可以对服务器进行编程(非常少)4.JavaScript简介JavaScript是一种解释型的语言。
Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。
Javascript的第一个版本出现在Netscape Navigator2浏览器中。
人们最初给javascript 起的名字是LiveScript。
然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。
随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript，即Jscript。
脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript和perl语言(1)<script>标记：第一个简单的javascript程序在网页中添加<script></script>标签中添加javascript代码，在<script></script>之间的代码块，不是用于显示html元素，而是需要浏览器进行处理的脚本代码，在<script>标记和对应的</script>标记之间包围的代码块，称为脚本块。
传智播客网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计的基本概念，了解HTML、CSS和JavaScript等网页编程语言的作用和关系。
2. 学会使用HTML构建网页结构，掌握常用的HTML标签及其属性。
3. 学会使用CSS对网页进行美化，掌握选择器、样式属性和盒子模型等基本概念。
4. 了解JavaScript的基本语法，能够编写简单的交互式程序。
技能目标：1. 培养学生独立编写网页代码的能力，提高编程技巧。
2. 培养学生运用所学知识解决实际问题的能力，能够设计和制作简单的个人网页。
3. 培养学生团队协作和沟通能力，能够与他人共同完成网页项目。
情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发学生学习编程的积极性。
2. 培养学生良好的审美观念，注重网页设计的实用性和美观性。
3. 培养学生严谨的学术态度，遵循编程规范，养成良好的编程习惯。
4. 培养学生面对困难的勇气和毅力，勇于尝试和创新，不断提升自我。
课程性质：本课程为信息技术课程，旨在让学生了解网页设计的基本知识，学会使用HTML、CSS和JavaScript等编程语言制作简单的网页。
学生特点：学生为初中生，对新鲜事物充满好奇，有一定的计算机操作基础，但编程经验不足。
教学要求：结合学生特点，课程设计应注重实践操作，以任务驱动法引导学生主动学习，同时注重培养学生的团队协作能力和创新能力。
通过本课程的学习，使学生能够掌握网页设计的基本技能，为后续深入学习打下基础。
二、教学内容1. 网页设计基础知识- 网页的基本概念- 网页编程语言（HTML、CSS、JavaScript）简介2. HTML基础- HTML文档结构- 常用HTML标签及其属性- 表格、列表和表单的使用3. CSS基础- CSS选择器- 样式属性和值- 盒子模型- 布局和定位4. JavaScript基础- JavaScript语法- 变量和数据类型- 运算符和表达式- 简单的流程控制语句- 函数的定义和调用5. 网页制作实践- 制作个人网页项目- 网页布局与设计- 交互式程序编写- 团队合作与分工教学内容安排与进度：第1周：网页设计基础知识，HTML基础第2周：CSS基础，布局与定位第3周：JavaScript基础，函数与流程控制第4周：网页制作实践，团队合作与分工教材章节关联：《信息技术》教材第3章：网页设计与制作内容涵盖：HTML、CSS、JavaScript基本知识，网页制作实践等。
HTML+CSS学习笔记此笔记用于记录视频[韩顺平]轻松搞定网页设计(html.css.js)中html和css部分，自己整理用于记忆的，便于以后查阅。
经供参考。
2014.08.26于北航图书馆hujunjob@目录一、第一个网页 (3)1.第一行文字 (3)2.超链接 (3)3.图片 (4)4.表格 (4)4.1 菜谱 (5)5.无序列表 (6)6.有序列表 (6)7.表单元素：文本框、密码框、复选框、单选框、隐藏域、提交按钮重置按钮 (7)二、html 加强 (11)1.超链接 (11)2.标尺线 (11)3.字体 (11)4.移动的文字 (12)5.嵌入多媒体 (13)6.综合2：邮箱 (13)三、CSS (13)1.div+css (13)2.CSS分类 (14)3.css的滤镜功能： (15)4.css选择器 (16)4.1 类选择器： (16)4.2 id选择器 (16)4.3 html选择器 (17)4.4 通配符选择器 (18)5.选择器深入探讨 (18)四、css核心内容——流 (20)4.1盒子模型： (20)4.2 浮动： (26)4.3 css核心内容——定位 (27)4.4综合案例：仿sina首页 (29)一、第一个网页<html><元素属性=‘属性值’。
>内容</元素>如果没有内容<元素属性=‘属性值’。
/><html><!--head--><head><title>我的第一个网页</title></head><body><!--html内容放在body体-->1.第一行文字<b>粗体文字</b><p>第二行文字，换行。
段落标记</p><p><b>第二行粗体文字，元素可以相互嵌套</b></p><p><font color=red>font color=red 红色字体</font></p><p><font size=6>font size=6 大字体</font></p><font size=7>利用br/实现这一行的换行</font><br/><font size=7>font size=7 最大的字体</font><br/>*********字符实体**********<br/><font size=7>© £</font></body></html>2.超链接<html><head><title>使用超链接</title><head><body><a href='Myhtml.htm'>老鼠爱大米，打开新链接，原页面替换</a><br/><!--target=_blank打开新的页面，默认是_self原页面替换--> <a href='Myhtml.htm' target=_blank>老鼠爱大米，打开新链接，打开新页面</a><br/><a href='' target=_blank>百度</a><br/><a href='/index.aspx' target=_blank>北航bt</a><br/> <a href="mailto:hujunjob@">给管理员写信</a></body></html>3.图片<html><head><title>显示图片</title></head><body><font size=5 color=red>图片显示</font><br/><img src='naruto.png' width=400px /><br/><img src='/templates/default/images/logo.png'width=700px border=2/></body></html>4.表格表格的用处：显示数据和图片，并且可以布局<html><head><title>表格</title></head><body><font size=5 color=red>********表格********</font><br/><table border=1width=500px align="center" bgcolor=yellowcellspacing=5 bordercolor=red><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr align="center"><td>1</td><td>2</td><td>3</td></tr></table></body></html><tr></tr>表示行<td></td>表示列cellspacing空隙大小，指两个列、行之间的距离cellpadding:表示填充大小，各行各列中的内容被填充，会在一定程度上撑大格子4.1 菜谱<html><head><title>菜谱</title></head><body><font size=5 color=red>********菜谱********</font><br/><table width=400px border=1 bordercolor=pinkcellspacing=0 height=180><tr><td colspan=3 align="center">星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒</td></tr><tr><td>小臭豆腐</td><td>白菜</td></tr><tr><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>红烧肉</td></tr><tr><td>水煮鱼<img src="naruto.png" width=200px/></td><td>大虾</td></tr></table></body></html>5.无序列表<html><head><title>无序列表</title></head><body>********无序列表********<br/><ul ><li type=disc>dota</li><li type=square>wow</li><li type=circle>lol</li></ul></body></html>默认是实心小圆点type=”disc”默认实心小圆点type=”circle”空心圆type=square 实心方块6.有序列表<html><head><title>有序列表</title></head><body>********有序列表order list********<br/> <ol type=I><li >dota</li><li >wow</li><li >lol</li></ol></body></html>type属性有1,a,i,Istart=5框架frameset/frame将整个页面分为几个部分，分别进行编码。
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，但是它取了一个新的名字叫原型对象。
（因此类等同于原型对象。
）◆ ♦面向对象特征介绍Javascript是一种基于对象（object-based）的语言，你遇到的所有东西机会都是对象☞特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。
从本质上并无区别，所以这两个概念在课程中是一样的。
因为javascript中没有class(类)，所以有人把类也称为原型对象。
因为这两个概念在编程中发挥的作用看都市一个意思总结：JS中基于对象=JS面向对象JS中没有类的概念，按标准的说法原型对象。
其实就是类javascript是一种面向（基于）对象的动态脚本语言，是一种基于对象（Object）和事件驱动(EventDriven)并具有安全性能的脚本语言。
◆ 一个简单的案例：问题提出：张老太养了两只猫猫：一只名字叫小白，今年3岁，白色。
还有一只叫小花，今年10岁，花色。
请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。
当用户输入小猫名错误，则显示张老太没有这只猫猫。
//解决方法：把猫的属性集中，创建一种新的数据类（原型对象/类）//用面向对象的方法来解决上面的问题：//这里就是一个Cat类function Cat(){} //如果你这样用//Cat();//函数var cat1=new Cat();//类//这时cat1就是一个对象（实例）cat1.namr=”小白”;cat1.age=3; cat1.color=”白色”; //从上面的代码我们可以看出//1. js中的对象的属性可以动态的添加//2.属性没有限制.◆ 创建对象的方式有五种在js中一切都是对象window.alert(Person.construcotr); 输出：function Function(){native code} 思考：如何判断一个对象实例是不是Person类型？方法一：方法二：◆补充说明：(带var和不带var的区别)//全局变量var abc=89;function test(){//在函数里，如果你不带var，则表示使用全局的abc变量//如果你带上var，则表示在test（）中，定义一个新的abc变量。
