HTML的CSS样式和JavaScript CSSCSS介绍概念和作用示例代码 CSS的规则和3种位置CSS规则CSS的位置行内样式内部样式外部样式三种样式的代码 CSS基本选择器(重点)CSS选择器作用语法格式选择器的分类选择器之间优先级代码 扩展选择器的使用什么是扩展选择器常用的扩展选择器示例代码 CSS背景样式常用背景样式示例代码 CSS常用文本样式和字体样式CSS的文本样式CSS的字体样式示例代码 CSS边框样式设置边框的样式示例代码关于块级元素居中 两种盒子模型盒子模型概述盒子模型的属性如何计算盒子的尺寸标准盒子计算方式怪异盒子计算方式 示例代码 JavaScriptJavaScript概述和体验JavaScript的基本概述网页中各技术的作用示例代码JavaScript与Java的区别 script标签的使用说明(重点)JavaScript语言组成script标签的说明script标签两个属性示例代码JavaScript的注释 JS变量的定义定义语法注意事项示例代码 JS五种数据类型五种数据类型typeof操作符示例代码 JS数据类型的转换函数全局函数示例代码 JS常用的运算符算术运算符赋值运算符比较运算符示例代码逻辑运算符三元运算符 JS流程控制：if语句if 语句if...else 语句if...else if....else 语句非布尔类型作为条件示例代码 JS流程控制：switch语句语法一：case后使用常量，与Java相同语法二：case后使用表达式示例代码 JS流程控制：循环语句while语句do-while语句for 语句break和continue示例代码 JS命名函数和匿名函数(重点)JS函数的概述命名函数的格式示例代码匿名函数示例代码 JS函数不支持重载注意代码 JS变量的作用域在浏览器中调试JS代码设置断点断点调试的流程 CSS CSS介绍 概念和作用
CSS: Cascading Style Sheet 层叠样式表 样式表,有很多的样式,通过不同的样式可以让网页根漂亮,样式也可叠加得到最终的效果
CSS作用: 对网页进行美化,让网页变得更漂亮
示例代码将一个表格中所有的单元格居中，如果不使用CSS，每个td或tr都要设置align属性为center，而使用CSS则方便得多。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS介绍</title> <!--type="text/css"表示是一个CSS样式的代码--> <style type="text/css"> /*现在可以一次选择所有td,设置相应的属性*/ td { text-align: center; color: blue; } </style> </head> <body> <table border="1" width="400"> <tr> <!--以前的做法,每个td都要设置成align=center,内容要添加font--> <td align="center"><font color="blue">111</font></td> <td align="center"><font color="blue">111</font></td> <td align="center"><font color="blue">111</font></td> </tr> <tr> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td>333</td> <td>333</td> <td>333</td> </tr> </table> </body> </html> CSS的规则和3种位置就近原则：哪个离元素?较近，哪个就起作?，后?的样式会覆盖前?的样式
CSS规则css/01_css.css:
h3 { background-color: deeppink; } CSS基本选择器(重点) CSS选择器作用?于选择需要添加样式的元素。在对??中的元素进?样式设置之前，先选择对哪些元素进?操作，选择器就是?于选元素的。
语法格式 选择器 { 样式名: 样式值; } <h1>我们是害虫h1</h1> <h2>h2</h2> <h4 class="c4" id="i4">h4</h4>样式名和样式值是固定的
选择器的分类在基本选择器的基础上，进行组合，实现更复杂的选择
常用的扩展选择器字体样式会改变文字的形状
所有的元素都可以设置边框
边框的样式网页上任何一个元素都是一个盒子
任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)， 这些属性可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。
内容（content）就是盒子里装的东西内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(border)就是盒子本身了；外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。 盒子模型的属性网页中的每一个元素都是一个盒子
盒子模型分为两种，分别是：标准盒模型(content-box) 和 怪异盒模型(border-box)。绝大多数元素的尺寸默认是按照标准盒模型计算的。下面是元素的尺寸分别在两种盒模型下计算规则：
内容不变，盒子被撑大
实际宽度 = 设置宽度 + 左右内边距 + 左右边框 实际高度 = 设置高度 + 上下内边距 + 上下边框 怪异盒子计算方式盒子不变，内容被缩小
实际宽度 = 设置宽度 实际高度 = 设置高度 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> /*标准盒子: 内容不变,宽高被撑大*/ .one { box-sizing: content-box; /*默认就是标准盒子*/ border: 15px solid gray; /*边框的样式:粗细 线型 颜色*/ width: 200px; height: 200px; padding: 10px; } /*怪异盒子: 宽高就是指定大小,内容会被缩小*/ .two { box-sizing: border-box; border: 15px solid gray; width: 200px; height: 200px; padding: 10px; } </style> </head> <body> <div class="one"> 标准盒子 </div> <div class="two"> 怪异盒子 </div> </body> </html> JavaScript JavaScript概述和体验 JavaScript的基本概述JavaScript简称JS。JavaScript是在1995年时，由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。 JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
网页中各技术的作用在JS中的字符和字符串引号
在JS中没有字符和字符串的区别，都是字符串，既可以使用双引号也可以使用单引号关于弱类型
一个变量可以赋值为不同的数据类型var定义变量的特点
var关键字可以省略，建议不要省略。同一个变量可以重复定义。在大括号外也能使用大括号中定义的变量。 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS变量</title> </head> <body> <script> // 整数 var a = 10; document.write("a: " + a + "<br/>"); // 浮点数 var f = 3.14; document.write("f: " + f + "<br/>"); // 布尔 var b = true; document.write("b: " + b + "<br/>"); // 在JS中没有字符和字符串的区别，都是字符串，既可以使用双引号也可以使用单引号 // 字符串 var c = 'abc'; document.write("c: " + c + "<br/>"); // 字符串 var ss = "abc"; document.write("ss: " + ss + "<br/>"); // 一个变量可以赋值为不同的数据类型 var x = 10; document.write("x: " + x + "<br/>"); x = true; document.write("x: " + x + "<br/>"); // var关键字可以省略 y = 20; document.write("y: " + y + "<br/>"); // 同一个变量可以重复定义 y = false; document.write("y: " + y + "<br/>"); { var z = "大家好"; } document.write("z: " + z + "<br/>") </script> </body> </html> JS五种数据类型 五种数据类型作用：获取变量的类型
写法：typeof(变量名)或 typeof 变量名
示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据类型</title> </head> <body> <script type="text/javascript"> // 输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型 var i = 5; document.write("整数类型：" + typeof(i)+ "<br/>"); var d = 3.14; document.write("小数类型：" + typeof(d)+ "<br/>"); var i = 'a'; document.write("字符串：" + typeof(i)+ "<br/>"); var i = "abc"; document.write("字符串：" + typeof(i)+ "<br/>"); var i = true; document.write("布尔：" + typeof(i)+ "<br/>"); var u; document.write("未定义：" + typeof(u)+ "<br/>"); var o = { name:"牛魔王", age: 18 }; //定义一个对象 document.write("对象类型：" + typeof(o)+ "<br/>"); var n = null; //null表示对象类型，只是这个对象没有值 document.write("null的类型：" + typeof(n) + "<br/>"); </script> </body> </html> JS数据类型的转换函数 全局函数概念：在JS中任何地方都可以直接引用的函数
算术运算符用于执行两个变量或值的算术运算
JS算术运算符和Java中一模一样
赋值运算符赋值运算符用于给JavaScript 变量赋值
JS赋值运算符和Java中一模一样
比较运算符比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。 数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较
示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS运算符</title> </head> <body> <script> var m = 5; var n = 5; document.write((m == n) + "<br/>"); // true var x = "5"; // 会将字符串自动转成数字再比较 document.write((m == x) + "<br/>"); // true // ===:恒等于,即比较值,也比较类型 document.write((m === n) + "<br/>"); // true,值相等,类型也相同 document.write((m === x) + "<br/>"); // false,值相等,但是类型不相同 </script> </body> </html> 逻辑运算符逻辑运算符用来确定变量或值之间的逻辑关系，支持短路运算 逻辑运算符不建议单与&、单或|, 会变成数字
三元运算符 格式： 判断条件? 值1:值2; JS流程控制：if语句 if 语句在一个指定的条件成立时执行代码。
if (条件表达式) { // 代码块; } if…else 语句在指定的条件成立时执行代码，当条件不成立时执行else的代码。
if (条件表达式) { // 代码块1; } else { // 代码块2; } if…else if…else 语句使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式1) { // 代码块1; } else if (条件表达式2) { // 代码块2; } else { // 代码块3; } 非布尔类型作为条件条件表达式值为 true 时循环执行代码
while (条件表达式) { 需要执行的代码; } do-while语句最少执行1次循环
do { 需要执行的代码; } while (条件表达式); for 语句循环指定次数
for (var i = 0; i < 10; i++) { 需要执行的代码; } break和continue break: 跳出整个循环 continue：结束本次循环,接着下次循环 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>乘法表</title> <style> table { /*细边框样式*/ border-collapse: collapse; } td { /*设置内边距*/ padding: 4px; } </style> </head> <body> <script type="text/javascript"> //用户输入 var num = window.prompt("请输入乘法表的行数：","9"); // " 表示字符串里面的双引号 document.write("<table border=\"1\">"); for(var i=1; i<=num; i++) { // 外循环，每次是一行 document.write("<tr>"); for (var j=1; j<=i; j++) { // 内循环，每次是一个单元格 document.write("<td>"); document.write(j + "×" + i + "=" + i*j); document.write("</td>"); } document.write("</tr>"); } document.write("</table>"); </script> </body> </html> JS命名函数和匿名函数(重点) JS函数的概述什么是函数：类似于Java中方法，将可以重用的代码起个名字，以后就可以通过这个名字并且传递参数来调用它
JS的两种函数：命名函数(有名字的函数)，匿名函数(没有名字的函数)
命名函数的格式 function 函数名(参数列表) { // 代码; return 结果; } 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>命名函数</title> </head> <body> <script type="text/javascript"> // 定义函数 function sum(a,b) { return a + b; } // 调用函数 var result = sum(4, 3); document.write(result + "<br/>"); </script> </body> </html> 匿名函数 var 变量 = function(参数列表) { // 代码; return 结果; } 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>匿名函数</title> </head> <body> <script> // 定义一个匿名函数,并将匿名函数赋值给变量 var sum = function (a, b) { return a + b; } // 通过变量名调用函数 var num = sum(10, 20); document.write(num + "<br/>") </script> </body> </html> JS函数不支持重载 注意 关于函数的重载：在JS中没有函数的重载，后面的方法会覆盖前面同名的方法在每个函数的内部都有一个隐藏的数组：arguments，有个属性length 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏数组arguments</title> </head> <body> <script type="text/javascript"> function sum(a,b) { document.write("隐藏数组的长度：" + arguments.length + "<br/>"); for (var i = 0; i < arguments.length; i++) { document.write("第" + i + "个元素：" + arguments[i] + "<br/>"); } document.write("<hr/>"); document.write("a=" + a + "<br/>"); document.write("b=" + b + "<br/>"); } //调用 //sum(8); //参数不够 sum(8,9,10); //参数超出 </script> </body> </html> JS变量的作用域JS的变量分为全局变量和局部变量
全局变量：定义在函数外部的
局部变量：定义在函数内部的
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量的位置</title> </head> <body> <script> var a = 888; // 全局变量会被保存到window function add() { var a; // 方法中定义局部变量，变量的声明会被提前到函数的最前面 document.write(window.a + "<br/>"); // 访问外部的全局变量 // var a = 10; // 局部变量,定义在方法内,只能在本方法中使用 a = 10; // document.write(x + "<br/>"); } // document.write(a + "<br/>"); document.write(x + "<br/>"); add(); </script> </body> </html> 在浏览器中调试JS代码 设置断点谷歌浏览器的调试界面: F12
注：设置断点以后要重新刷新页面才会在断点停下来
断点调试的流程 按F12打开浏览器的调试模式选择Source选项卡找到相应的网页打断点F5刷新网页,执行到断点的地方控制断点
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |