韩顺平htmlcssjavascript笔记.docx
- 文档编号:8306529
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:31
- 大小:1.73MB
韩顺平htmlcssjavascript笔记.docx
《韩顺平htmlcssjavascript笔记.docx》由会员分享,可在线阅读,更多相关《韩顺平htmlcssjavascript笔记.docx(31页珍藏版)》请在冰豆网上搜索。
韩顺平htmlcssjavascript笔记
HTML
一、HTML有关知识点
1.html介绍
html是一种标记语言,主要的用途是开发网页,使用html可以展现文字、图片、视频、声音,html是我们web开发(网站开发)。
2.html可以做什么
Øhtml可以编写静态网页
Ø该静态网页可以包括文字、图像、动画、声音、表格、链接。
从而构成一个个漂亮的网页
3.Html发展历史
4.Html的基本结构
5.是标记(也叫元素),标记的一般格式:
<元素名[属性=“属性值”]>元素内容标签>
如果没有内容可以用:
<元素名[属性=“属性值”]/>
6.Html实体标记
7.Html常用标记
Øhtml超链接
●_blank新的窗口
●_self本窗口
●_parent父窗口
●_top整个浏览器窗口
Øhtml图像元素
Øhtml表格
Ø无序列表
Ø有序列表
Ø框架
Ø表单元素
文本框:
密码框:
单选框:
复选框:
隐藏域:
图片按钮:
Ø文本域:
请在这里写····
Ø下拉菜单:
Ø
Ø
#=rrggbb;这些是16进制的,红绿蓝(red-green-blue,RGB)值来表示
Ø标尺线:
Ø文字布局标记
●
表示一段
#=left/center/right
Ø图像:
Ø会移动的文字
Ø多媒体页面
Ø背景音乐:
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的好处是:
●内容和样式分离
●代码可以重复利用。
5. 20px;color: blue”> 从上面使用的span元素,可以看出css的基本格式: <元素名style=”属性名: 属性值;属性名2: 属性值”> 元素可以是任意元素: 属性名和属性值可以参考W3Cschool给出的文档 6.使用CSS的基本语法: Ø使用内部css: 引用内部css: <元素class=”style”> 注意: 没有. Ø使用外部css: 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: 0; } 外边距: 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)行内元素,又叫做内联元素: (2)块元素(blockelement): 块元素一般都从新行开始,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满遗憾,块元素也要把整行占满。 常见的块元素有 注意: 块元素转换为行内元素: style=”display: inline” 行内元素转换为块内元素: style=”diplay: block” 11.标准流/非标准流: (1)流: 在网页设计中指的是元素(标签)的排列方式 (2)标准流: 元素在网页中就像流水,排在前面的元素,内容前面出现;排在后面的元素,内容就后面出现。 (3)非标准流: 当某个元素(标签)脱离了标准流的【比如因为相对定位】排列,我们统称为非标准流排列。 12.盒子模型: 13.浮动: 浮动是css中很重要的概念,必须掌握。 浮动分为左浮动,右浮动,清除浮动。 清除浮动: 如果不希望别的元素在某个元素的左边或者是右边,可以使用清除浮动的方法: clear: left;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)标签中添加javascript代码,在之间的代码块,不是用于显示html元素,而是需要浏览器进行处理的脚本代码,在标记之间包围的代码块,称为脚本块。 ☞如果没有使用包含起来的话,则浏览器则会视为普通文本 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的例子: vara; window.alert("a的数据类型"+typeofa); (2)null的例子: vara=null; window.alert("a的数据类型"+typeofa); 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){ window.alert(“ok”); }else{ window.alert(“faile”); } 14.函数: 为完成某一个功能的代码的集合。 函数定义: 函数名位于关键字function之后,为了让代码易于理解,函数名应具有一定的意义。 注意点: 函数没有返回值类型。 形参数不写具体的类型。 15.eval()可以将一个字符串当成一个脚本运行 例如: 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){ window.alert(“a是person的实例”) } 19.带var和不带var的区别: varabc=89; functiontest(){ //在函数里,如果你不带var,则表示使用全局的abc变量。 //如果你带上var,则表示在test()中,定义一个新的abc变量 abc=900; } test(); window.alert(abc); 20.this问题的提出 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。