资源描述
HTML
一、 HTML有关知识点
1. html介绍
html是一种标记语言，重要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。
2. html可以做什么
Ø html可以编写静态网页
Ø 该静态网页可以涉及文字、图像、动画、声音、表格、链接。从而构成一个个美丽的网页
3. Html发展历史
1993标记语言第一版
1995html2.0
1996html3.2w3c推荐标准
2023xhml1. 1w3c推荐标准
2023xhtml1.0w3c推荐标准
1999html4.0.1w3c推荐标准
2023html5
4. Html的基本结构
<html>
<head>
<title>html的基本结构</title>
</head>
<body>
</body>
</html>
5. <html></html>是标记（也叫元素），标记的一般格式：
<元素名[属性=“属性值”]>元素内容</标签>
假如没有内容可以用：<元素名[属性=“属性值”]/>
6. Html实体标记
7. Html常用标记
Ø html超链接
<a href=”” target=”_blank”></a>
l _blank 新的窗口
l _self 本窗口
l _parent 父窗口
l _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的名字”>
Ø
Ø 文字布局标记
l <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=””>
CSS
1. div元素是用来HTML文档内大块(block-level)的内容提供结构和背景元素。
2. css是Cascading Style Sheets(层叠样式表单)的缩写。它是一种用来表现HTML或XML等文献样式的计算机语言
3. div+css是网站标准的(或者称为“web标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别，由于XHTML网站设计的标准中，不再使用表格定位，而是采用DIV+CSS的方式定位。
我们可以这样简朴的这样理解div+css:
div是用于存放内容(文字，图片，元素)的容器。
css是用于指定放在div中的内容的样式（大小，颜色，背景，位置）。
4. div+css的好处是：
l 内容和样式分离
l 代码可以反复运用。
5. <span style=”font-size:20px; color:blue”></span>
从上面使用的span元素，可以看出css的基本格式：
<元素名 style=”属性名：属性值 ；属性名2：属性值”>
元素可以是任意元素：属性名和属性值可以参考W3Cschool给出的文档
6. 使用CSS的基本语法：
Ø 使用内部css:
<style type=”text/css”>
.sytle{
font-size:20px;
color:red;
font –weight:bold;
font-style:itlic;
}
</style>
引用内部css:
<元素 class=”style”>
注意：没有.
Ø 使用外部css:
<link type=”text/css” href=”css 文献的途径” rel=”stylesheet”>
7. 使用滤镜：
<style type=”text/css”>
a:link img{
filter:gray;
}
</style>
8. 四种选择器的用法：
(1) 类选择器，又叫做class选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试1</title>
</head>
<link type="text/css" rel="stylesheet" href="1.css" />
<body>
<span class="style">新闻一</span>
<span class="style">新闻二</span>
<span class="style">新闻三</span>
<span class="style">新闻四</span>
</body>
</html>
/* .style是类选择器 */
.style{
font-size:10px;
font-weight:bold;
color:#FF0000;
}
类选择器的基本格式：
.类选择器名{
属性名：属性值;
```
}
(2) id选择器：\
基本语法格式：
#id选择器名称：{
属性名：属性值;
````
}
例如：
#tyle2{
font-size:30px;
ackground-color:green;
}
在html文献中使用id选择器的格式是：
<元素名 id=””>
(3) html选择器：
html选择器的语法格式：
html元素名称{
属性名：属性值;
```
}
(4) 通配符选择器：
*{
属性名：属性值；
···
}
例如：
*{
margin:0;
padding:0;
}
外边距：margin：上 右 下 左；//是按顺时针旋转的
margin：10px 20px 30px 是代表上下外边距是10px,右外边距是20px,左 边距是30px
可以让所有的html元素的外边距和内边距都默认为0
注意：当一个元素被id选择器，类选择器，html选择器修饰的时候，则优先级是：
id选择器>class选择器>html选择器
9. 选择器进一步探讨：(四种选择器可以组合使用)
(1) 父子选择器
例如：
#style span{
属性名：属性值;
}
注意：子选择器标签必须是html可以辨认的标记
可以有多层子选择器
例如：
#style span span{
属性名：属性值;
```
}
(2) 一个标签既可以用class选择器，也可以用id选择器；但是id的选择器的优先级高于class选择器
(3) 一个元素最多有一个id选择器，可以拥有多个class选择器
10. 块元素和行内元素的概念：
(1) 行内元素，又叫做内联元素：
内联元素只能容纳文本或者内联元素，常见的内联元素有<span> <a>
(2) 块元素(block element):
块元素一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满遗憾，块元素也要把整行占满。常见的块元素有<div><p>
注意：块元素转换为行内元素：style=”display:inline”
行内元素转换为块内元素：style=”diplay:block”
11. 标准流/非标准流：
(1) 流：在网页设计中指的是元素(标签)的排列方式
(2) 标准流：元素在网页中就像流水，排在前面的元素，内容前面出现；排在后面的元素，内容就后面出现。
(3) 非标准流：当某个元素(标签)脱离了标准流的【比如由于相对定位】排列，我们统称为非标准流排列。
12. 盒子模型：
13. 浮动：
浮动是css中很重要的概念，必须掌握。浮动分为左浮动，右浮动，清除浮动。
.style{
background-color:#CC0066;
width:150px;
height:100px;
border:1px;
border-color:green;
border-style:solid;
float:left; //设立为左浮动
}
清除浮动：假如不希望别的元素在某个元素的左边或者是右边，可以使用清除浮动的方法：clear:left; clear:left; clear:both;
14. 定位——基本概念：
css定位(Positioning)属性允许你对元素进行定位。position属性值：
(1) static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分。行内元素则会创建一个或多个行框，置于其父元素中。
(2) relative(相对定位)：元素偏离某个距离。元素仍保持其未定位的形状，它本来所占的空间仍然保存，从这一角度，仿佛该元素仍然在文档流/标准流中同样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试1</title>
</head>
<link type="text/css" rel="stylesheet" href="1.css" />
<body>
<div class="style" >div1</div>
<div class="style" id="special">div2</div>
<div class="style">div3</div>
<div class="style">div4</div>
</body>
</html>
.style{
background-color:#CC0066;
width:150px;
height:100px;
border:1px;
border-color:green;
border-style:solid;
float:left;
}
#special{
position:relative;
top:140px;
left:50px;
}
运营效果图：
(3) absolute(绝对定位)：元素框从文档流完全删除，并相对于其包含块定位。包含块也许是文档中的另一个元素或者是初始包含块。元素原先在正常文档流所占的空间会关闭，就仿佛原理不存在同样。元素定位后生成一个块级框，而不管本来它在正常流中生成何种类型的框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试1</title>
</head>
<link type="text/css" rel="stylesheet" href="1.css" />
<body>
<div class="style" >div1</div>
<div class="style" id="special">div2</div>
<div class="style">div3</div>
<div class="style">div4</div>
</body>
</html>
.style{
background-color:#CC0066;
width:150px;
height:100px;
border:1px;
border-color:green;
border-style:solid;
float:left;
}
#special{
position:relative;
top:140px;
left:50px;
}
运营效果图：
(4) fixed：元素框的表现类似于将position设立成为absolute，但是其包含块是视图自身。
JavaScript
1. javascript基本介绍：
(1) javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：
网页游戏
地图搜索
股市信息查询
web聊天
····
(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>标记之间包围的代码块，称为脚本块。
<script>标记可以放在html页面的头部，即<head></head>之间。
<script>标记具有一些属性，其中最重要的属性就是type属性。前面提到了javascript并不是唯一可用的脚本语言，可以的脚本语言需要按不同的方式进行解决。我们需要浏览器，在当前的页面中我们所使用的是何种脚本语言。
<script type=”text/javascript”>
<html>
<head>
<title></title>
</head>
<body bgcolor="white">
<script type="text/javascript"> document.bgColor="red";</script>
</body>
</html>
<html>
<head>
<title>Example 1.1 hello world</title>
<script type="text/javascript">
document.write("hello world");
</script>
</head>
<noscript>
您的浏览器不支持javascript，请检查浏览器的版本或者安全设立，谢谢
</noscript>
<body bgcolor>
</body>
</html>
**************************************************************************************** <noscript></noscript>是一种防御性编码，假如用户的浏览器不支持javascript或者是设立过高的安全级别，那么就会显示出相应的提醒洗洗，避免了在用户不知情下停止运营或者的都错误结果。
*******************************************************************************
(2) 在javascript中用分号表达一个语句的结束
(3) Javascript是弱类型语言。什么叫做弱类型语言。在强类型语言中，使用变量之前，必须先声明变量的类型，才干使用。而javascript则不需要这样使用。
5. 案例1：
你的第一个程序，javascript高手都是从这里开始的，这个程序完毕一个非常简朴功能，在网页中弹出一个对话框，显示“hello world！”
<html>
<head>
<title>第一个javascript程序</title>
<script language="javascript">
window.alert("hello world");
</script>
</head>
<body>
</body>
</html>
(1) js的位置：js的位置可以随意，但是一般用在<head></head>标签
(2) js必须用
<script language=”javascript”>
js代码
</script>
☞假如没有使用<script></script>包含起来的话，则浏览器则会视为普通文本
6. 案例2：
对前面的程序，改成一个简朴加法运算程序
<html>
<head>
<title>第一个javascript程序</title>
/*js中的变量定义，变量都用var表达，不管实际类型如何*/
var num1=456;
var num2=226;
var result=num1+num2;
window.alert("结果是"+result);
</head>
<body>
</body>
</html>
u js的变量的类型是如何决定？
(1) js的数据类型是弱数据类型语言。即在定义变量的时候，统一使用var表达，甚至可以去掉var关键字
(2) js中的数据类型是有js引擎来决定的。数据类型可以变化的。
var name=”shopping”; //js引擎知道name是字符串
name=22; //这时name自动变成了数
var kk=2; //kk是整数
vary y; //y是undefined类型
7. javascript中的标记符
标记符指的是javascript中定义的符号，例如，变量名，函数名，数组名等。标记符可以有任意顺序的大小小字母、数字，下划线和美元符号（$）组成，但是标记符不能以数字开头，不能是javascript的保存关键字。
8. javascript是严格区分大小写的。javascript中每条语句用分号“;”结束。
9. 注释：单行注释// 多行注释 /* */
10. javascript的基本语法---数据类型：
Ø 基本数据类型：
通过typeof关键字，可以看到数据的类型
(1) Number(数值类型)
² 整型常量（10进制\8进制\16进制）
16进制以0x或者是0X开头，例如：0x83;
8进制必须 以0开头：
² 实型常量
12.32 193.98 5E7等
² 特殊数值：NaN(not is a number)、Infinity、isNaN()、isFinite()
(2) Boolean(布尔类型)
true和false
(3) String 字符串
“this is a book”
Ø 复合数据类型：
Ø 特殊数据类型：
(1) undefine的例子：
<script language="javascript">
var a;
window.alert("a的数据类型"+typeof a);
</script>
(2) null的例子：
<script language="javascript">
var a=null;
window.alert("a的数据类型"+typeof a);
</script>
11. javascript的基本语法---定义变量、初始化、赋值：
(1) 定义变量： var a;
(2) 初始化变量：
在定义变量的时候，就赋值：var a=45;
(3) 给变量赋值：
先定义变量： var num;
再赋值： num=33
12. javascript的基本语法---数据类型转换：
(1) 自动转换：javascript的数据类型是动态的
请看一个案例：
<script language="javascript">
// num先定义成Number数据类型
var num=22;
num="hello word";
window.alert("num的数据类型"+typeof num);
</script>
(2) 强制转换：
请看案例：如何将字符串转换成数字
<script language="javascript">
// num先定义成String数据类型
var s="123";
var num=parseInt(s);
window.alert(typeof num);
</script>
13. javascript中的运算符和java中的同样的,但是有几个注意点：
(1) 案例一：b先转成9，在比较
<script language=”javascript”>
var a=9;
var b=’9’
if(a==b){
window.alert(“ok”);
}else{
window.alert(“faile”);
}
</script>
(2) 在逻辑运算中，0、“”、false、null、undefined、NaN均表达false
<script language=”javascript”>
var a=0;
if(a){
window.alert(“ok”);
}else{
window.alert(“faile”);
}
</script>
14. 函数：为完毕某一个功能的代码的集合。
函数定义：
function 函数名(参数列表){
语句;//函数(方法)主体
return 返回值;
}
函数名位于关键字function之后，为了让代码易于理解，函数名应具有一定的意义。
注意点：函数没有返回值类型。形参数不写具体的类型。
15. eval()可以将一个字符串当成一个脚本运营
例如：
<script language=”javascript” type=”text/javascript”>
var str=”window.alert(“ok”)”;
eval(str);
</script>
16. escape()可以将中文或日文转为ascii码：unescape()反之。一般这个函数互相配合，防止在浏览器中出现乱码：
<script language=”javascript” type=”text/javascript”>
var str=”江西”;
var str2=escape(str);
//转回来
var str3=unescape(str2);
</script>
17. 数组：
(1) 为什么需要数组？将一组数据放在一起，组成集合。它由一对方括号[]包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据
(2) 创建数组：var 数组名=[元素值，元素值，```]
例如：var a=[“shopping”,123,1.1,4.5,true]
(3) 二维数组：var a=[[1,2,3],[“hello”,”world”,”jiangxi”]]
=============================================================================================================================================================================================================================================
18. JS面向(基于)对象编程-----类（原型对象）与对象（实例）
(1) JS面向（基于）对象特性介绍
在学习这个知识点之前，我们有必要给大家明确几个概念，这样大家在后续的学习中才不会犯晕：
Ø Javascript是一种基于对象（object-based）的语言，你碰到的所有东西机会都是对象
☞特别说明：基于对象也好，面向对象也好，事实上都是以对象的概念来编写程序。从本质上并无区别，所以这两个概念在课程中是同样的。
Ø 由于javascript中没有class(类)，所以有人把类也称为原型对象。由于这两个概念在编程中发挥的作用看都市一个意思
Ø 总结：JS中基于对象=JS面向对象
JS中没有类的概念，按标准的说法原型对象。其实就是类
(2) 为什么需要原型对象（类）？
例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；尚有一只叫小花，今年5岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。假如用户输入的小猫名字错误，则显示张老太没有这只猫。
//一般的解决方法是，但是这种方法比较麻烦
var cat1_name="小白";
var cat1_age=3;
var cat1_color="白色";
//定义原型对象,也就是类
function Cat(){
}
//假如这样用，就成了函数
//Cat();
//创建cat1的一个对象（实例）
var cat1=new Cat();
//可以在后面添加对象的属性
cat1.name="小白";
cat1.age=3;
cat1.color="白色";
window.alert(cat1.name);
(3) 类（原型对象）————如何自定义类（原型对象）和对象。创建类的方式有5中方法：
Ø 工厂方法——使用new Object创建对象并添加相关属性
Ø 使用构造函数来定义类（原型对象）注意：上面的cat类就是用此种方法
基本语法：
function 类名/原型对象名(){
}
创建对象：
var 对象名=new 类名();
例子：
function Cat(){
}
//假如这样用，就成了函数
//Cat();
//创建cat1的一个对象（实例）
var cat1=new Cat();
//可以在后面添加对象的属性
cat1.name="小白";
cat1.age=3;
cat1.color="白色";
window.alert(cat1.name);
window.alert(cat1.constructor); //可以打印出实例对象的构造方法
window.alert(typeof cat1); //显示cat1的类型
Ø 使用prototype
Ø 构造函数及原型混合方式
Ø 动态原型方式
注意：JS中的一切都是对象。
如何判断一个对象实例是不是Person类型？
if(a instanceof Person){
window.alert(“a是person的实例”)
}
if(a.constructor== Person){
window.alert(“a是person的实例”)
}
19. 带var和不带var的区别：
var abc=89;
function test(){
//在函数里，假如你不带var，则表达使用全局的abc变量。
//假如你带上var,则表达在test()中，定义一个新的abc变量
abc=900;
}
test();
window.alert(abc);
20. this问题的提出：
function Person(){
}
var p1=new Person();
p1.name=”小明”;
p1.age=22;
window.alert(p1.name+” ”+p1.age);
var p2=new Person();
window.alert(p2.name);
在这里我们可以看到window.alert(p2.name)会输出undefined；
在实际的编程中，我们也许有这样的需求，当我们创建了一个对象后，就希望该对象自动的 拥有某些属性。【比如：当我们创建了一个Person对象后，就希望该对象自动拥有name和age属性，这又怎么办？】可以使用this解决。
function Person(){
this.name=”abc”;
this.age=10;
}
var p1=new Person();
var p2=new Person();
window.alert(p1.name+” ”+p2.name);
注意点：this不能在类定义的外部使用，只能在类定义的方法中使用。否则就变成了window的。
21. 私有成员变量和公有成员变量
22. 成员函数
<script language="javascript">
function Person(name,age){
//这个就是使用传入实际参数，去初始化形参
this.name=name;
this.age=age;
//输出自己名字的函数
this.show=function(){
document.write("名字："+this.name);
}
this.jisuan=function(){
var res=0;
for(var i=0;i<1000;i++){
res+=i;
}
return res;
}
//函数可以接受参数
this.jisuan2=function(n){
var res=0;
for(var i=0;i<n;i++){
res+=i;
}
return res;
}
}
var person=new Person("张三",22)
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
