韩顺平htmlcssjavascript笔记Word下载.docx
《韩顺平htmlcssjavascript笔记Word下载.docx》由会员分享，可在线阅读，更多相关《韩顺平htmlcssjavascript笔记Word下载.docx（31页珍藏版）》请在冰豆网上搜索。
/ul>
有序列表
框架
framesetframeborder=”边框的大小”cols=”按照列的百分比分隔”rows=”按照行的比分比分隔”>
<
framesrc=””noresize/>
/frameset>
表单元素
fromaction=””method=”post/get”>
文本框：
inputtype=”textname=””/>
密码框：
inputtype=”password”name=””/>
单选框：
inputtype=”radio”name=””>
复选框：
inputtype=”checkbox”name=””checked>
checked是指默认选中的
隐藏域：
inputtype=”hidden”name=””>
图片按钮：
inputtype=”image”src=””>
/from>
文本域：
textareacols=””rows=””>
wrap=off自动换行
请在这里写·
·
/textarea>
下拉菜单：
selectname=””size=>
size是指显示大小
optionvalue=””>
-----请选择------<
/option>
optionvalue=”shanghai”selected>
上海<
selected是指被选中
optionvalue=”beijing”>
北京<
/select>
metahttp-equiv="
content-type"
content="
text/html"
charset="
utf-8"
/>
bodybgcolor=#text=#alink=#vlink=#>
#=rrggbb;
这些是16进制的，红绿蓝（red-green-blue,RGB）值来表示
bodytopmargin=0pxleftmargin=0px>
标尺线：
hrsize=>
文字布局标记
●<
palign=”#”>
/p>
：
表示一段
#=left/center/right
图像：
imgsrc=””alt=”提示信息”>
会移动的文字
marqueedirection=”left/right”behavior=”scroll/slide/alternate”loop=循环的次数scrollamount=速度>
/marquee>
多媒体页面
embedsrc=”文件路径”width=height=>
/embed>
背景音乐：
bgsrc=””loop=””>
CSS
1.div元素是用来HTML文档内大块（block-level）的内容提供结构和背景元素。
2.css是CascadingStyleSheets（层叠样式表单）的缩写。
它是一种用来表现HTML或XML等文件样式的计算机语言
3.div+css是网站标准的（或者称为“web标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别，因为XHTML网站设计的标准中，不再使用表格定位，而是采用DIV+CSS的方式定位。
我们可以这样简单的这样理解div+css:
div是用于存放内容（文字，图片，元素）的容器。
css是用于指定放在div中的内容的样式（大小，颜色，背景，位置）。
4.div+css的好处是：
●内容和样式分离
●代码可以重复利用。
spanstyle=”font-size:
20px;
color:
blue”>
/span>
从上面使用的span元素，可以看出css的基本格式：
元素名style=”属性名：
属性值；
属性名2：
属性值”>
元素可以是任意元素：
属性名和属性值可以参考W3Cschool给出的文档
6.使用CSS的基本语法：
使用内部css:
引用内部css:
元素class=”style”>
注意：
没有.
使用外部css:
linktype=”text/css”href=”css文件的路径”rel=”stylesheet”>
7.使用滤镜：
8.四种选择器的用法：
（1）类选择器，又叫做class选择器：
类选择器的基本格式：
.类选择器名{
属性名：
属性值;
```
}
（2）id选择器：
\
基本语法格式：
#id选择器名称：
{
属性名：
````
例如：
#tyle2{
font-size:
30px;
ackground-color:
green;
在html文件中使用id选择器的格式是：
<
元素名id=””>
（3）html选择器：
html选择器的语法格式：
html元素名称{
属性名：
```
（4）通配符选择器：
*{
·
margin:
0;
padding:
外边距：
margin：
上右下左；
//是按顺时针旋转的
margin：
10px20px30px是代表上下外边距是10px,右外边距是20px,左边距是30px
可以让所有的html元素的外边距和内边距都默认为0
当一个元素被id选择器，类选择器，html选择器修饰的时候，则优先级是：
id选择器>
class选择器>
html选择器
9.选择器深入探讨：
（四种选择器可以组合使用）
（1）父子选择器
#stylespan{
子选择器标签必须是html可以识别的标记
可以有多层子选择器
例如：
#stylespanspan{
```
}
（2）一个标签既可以用class选择器，也可以用id选择器；
但是id的选择器的优先级高于class选择器
（3）一个元素最多有一个id选择器，可以拥有多个class选择器
10.块元素和行内元素的概念：
（1）行内元素，又叫做内联元素：
内联元素只能容纳文本或者内联元素，常见的内联元素有<
span>
a>
（2）块元素（blockelement）:
块元素一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满遗憾，块元素也要把整行占满。
常见的块元素有<
div>
p>
块元素转换为行内元素：
style=”display:
inline”
行内元素转换为块内元素：
style=”diplay:
block”
11.标准流/非标准流：
（1）流：
在网页设计中指的是元素（标签）的排列方式
（2）标准流：
元素在网页中就像流水，排在前面的元素，内容前面出现；
排在后面的元素，内容就后面出现。
（3）非标准流：
当某个元素（标签）脱离了标准流的【比如因为相对定位】排列，我们统称为非标准流排列。
12.盒子模型：
13.浮动：
浮动是css中很重要的概念，必须掌握。
浮动分为左浮动，右浮动，清除浮动。
清除浮动：
如果不希望别的元素在某个元素的左边或者是右边，可以使用清除浮动的方法：
clear:
left;
clear:
both;
14.定位——基本概念：
css定位（Positioning）属性允许你对元素进行定位。
position属性值：
（1）static（默认值）：
元素框正常生成。
块级元素生成一个矩形框，作为文档流/标准流的一部分。
行内元素则会创建一个或多个行框，置于其父元素中。
（2）relative（相对定位）：
元素偏离某个距离。
元素仍保持其未定位的形状，它原来所占的空间仍然保留，从这一角度，好像该元素仍然在文档流/标准流中一样
运行效果图：
（3）absolute（绝对定位）：
元素框从文档流完全删除，并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流所占的空间会关闭，就好像原理不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
（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的第一个版本出现在NetscapeNavigator2浏览器中。
人们最初给javascript起的名字是LiveScript。
然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。
随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript，即Jscript。
脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript和perl语言
（1）<
script>
标记：
第一个简单的javascript程序
在网页中添加<
/script>
标签中添加javascript代码，在<
之间的代码块，不是用于显示html元素，而是需要浏览器进行处理的脚本代码，在<
标记和对应的<
标记之间包围的代码块，称为脚本块。
标记可以放在html页面的头部，即<
head>
/head>
之间。
标记具有一些属性，其中最重要的属性就是type属性。
前面提到了javascript并不是唯一可用的脚本语言，可以的脚本语言需要按不同的方式进行处理。
我们需要浏览器，在当前的页面中我们所使用的是何种脚本语言。
scripttype=”text/javascript”>
****************************************************************************************<
noscript>
/noscript>
是一种防御性编码，如果用户的浏览器不支持javascript或者是设置过高的安全级别，那么就会显示出相应的提示洗洗，避免了在用户不知情下停止运行或者的都错误结果。
*******************************************************************************
（2）在javascript中用分号表示一个语句的结束
（3）Javascript是弱类型语言。
什么叫做弱类型语言。
在强类型语言中，使用变量之前，必须先声明变量的类型，才能使用。
而javascript则不需要这样使用。
5.案例1：
你的第一个程序，javascript高手都是从这里开始的，这个程序完成一个非常简单功能，在网页中弹出一个对话框，显示“helloworld！
”
（1）js的位置：
js的位置可以随意，但是一般用在<
标签
（2）js必须用
scriptlanguage=”javascript”>
js代码
☞如果没有使用<
包含起来的话，则浏览器则会视为普通文本
6.案例2：
对前面的程序，改成一个简单加法运算程序
◆js的变量的类型是怎样决定？
（1）js的数据类型是弱数据类型语言。
即在定义变量的时候，统一使用var表示，甚至可以去掉var关键字
（2）js中的数据类型是有js引擎来决定的。
数据类型可以变化的。
varname=”shopping”;
//js引擎知道name是字符串
name=22;
//这时name自动变成了数
varkk=2;
//kk是整数
varyy;
//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.32193.985E7等
✧特殊数值：
NaN（notisanumber）、Infinity、isNaN（）、isFinite（）
（2）Boolean（布尔类型）
true和false
（3）String字符串
“thisisabook”
复合数据类型：
特殊数据类型：
（1）undefine的例子：
scriptlanguage="
javascript"
>
vara;
window.alert（"
a的数据类型"
+typeofa）;
（2）null的例子：
vara=null;
11.javascript的基本语法---定义变量、初始化、赋值：
（1）定义变量：
vara;
（2）初始化变量：
在定义变量的时候，就赋值：
vara=45;
（3）给变量赋值：
先定义变量：
varnum;
再赋值：
num=33
12.javascript的基本语法---数据类型转换：
（1）自动转换：
javascript的数据类型是动态的
请看一个案例：
//num先定义成Number数据类型
varnum=22;
num="
helloword"
;
window.alert（"
num的数据类型"
+typeofnum）;
（2）强制转换：
请看案例：
如何将字符串转换成数字
//num先定义成String数据类型
vars="
123"
varnum=parseInt（s）;
window.alert（typeofnum）;
13.javascript中的运算符和java中的一样的,但是有几个注意点：
（1）案例一：
b先转成9，在比较
vara=9;
varb=’9’
if（a==b）{
window.alert（“ok”）;
}else{
window.alert（“faile”）;
}
（2）在逻辑运算中，0、“”、false、null、undefined、NaN均表示false
vara=0;
if（a）{
14.函数：
为完成某一个功能的代码的集合。
函数定义：
函数名位于关键字function之后，为了让代码易于理解，函数名应具有一定的意义。
注意点：
函数没有返回值类型。
形参数不写具体的类型。
15.eval（）可以将一个字符串当成一个脚本运行
scriptlanguage=”javascript”type=”text/javascript”>
varstr=”window.alert（“ok”）”;
eval（str）;
16.escape（）可以将中文或日文转为ascii码：
unescape（）反之。
一般这个函数相互配合，防止在浏览器中出现乱码：
varstr=”江西”;
varstr2=escape（str）;
//转回来
varstr3=unescape（str2）;
17.数组：
（1）为什么需要数组？
将一组数据放在一起，组成集合。
它由一对方括号[]包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据
（2）创建数组：
var数组名=[元素值，元素值，```]
vara=[“shopping”,123,1.1,4.5,true]
（3）二维数组：
vara=[[1,2,3],[“hello”,”world”,”jiangxi”]]
=============================================================================================================================================================================================================================================
18.JS面向（基于）对象编程-----类（原型对象）与对象（实例）
（1）JS面向（基于）对象特征介绍
在学习这个知识点之前，我们有必要给大家明确几个概念，这样大家在后续的学习中才不会犯晕：
Javascript是一种基于对象（object-based）的语言，你遇到的所有东西机会都是对象
☞特别说明：
基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。
从本质上并无区别，所以这两个概念在课程中是一样的。
因为javascript中没有class（类），所以有人把类也称为原型对象。
因为这两个概念在编程中发挥的作用看都市一个意思
总结：
JS中基于对象=JS面向对象
JS中没有类的概念，按标准的说法原型对象。
其实就是类
（2）为什么需要原型对象（类）？
例子：
张老太养了两只猫猫：
一只猫叫小白，今年3岁，白色；
还有一只叫小花，今年5岁，花色。
请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。
如果用户输入的小猫名字错误，则显示张老太没有这只猫。
（3）类（原型对象）————如何自定义类（原型对象）和对象。
创建类的方式有5中方法：
工厂方法——使用newObject创建对象并添加相关属性
使用构造函数来定义类（原型对象）注意：
上面的cat类就是用此种方法
基本语法：
function类名/原型对象名（）{
}
创建对象：
var对象名=new类名（）;
使用prototype
构造函数及原型混合方式
动态原型方式
注意：
JS中的一切都是对象。
如何判断一个对象实例是不是Person类型？
if（ainstanceofPerson）{
window.alert（“a是person的实例”）
}
if（a.constructor==Person）{
19.带var和不带var的区别：
varabc=89;
functiontest（）{
//在函数里，如果你不带var，则表示使用全局的abc变量。
//如果你带上var,则表示在test（）中，定义一个新的abc变量
abc=900;
test（）;
window.alert（abc）;
20.this问题的提出
升级会员 