目录 HTML HyperText Markup Language 界面: 标签分两种: HTML操作:就是用标签中的属性对数据进行操作,标签相当于容器。 标签是可以被嵌套的,一定要记住。 界面: < 特殊字符和标签不用刻意的去记,常用的特殊字符就几个如空格 ,常用标签必须掌握记住的。 界面: 直接敲空格无论敲多少个都是直接一个空格。 如上面,我把</html>结束标签换成</haha>标签,同时把<title>标签写到<html>外面,看看会发生什么? 改了</html>结束标签没有影响到整个界面,并且没有影响到<title>标签的解析。 我们来看看代码审查: 没错,浏览器自动的把错误代码改正了过来。 CSS 即 层叠样式表 (Cascading Style Sheets)用来定义网页的显示效果。 CSS是HTML中标签的样式属性,早期并没有CSS,HTML把标签中的样式属性抽取出来后,就用CSS语言样式表代替了。 加大了HTML对代码样式的复用率,提高了代码的可维护性,增强了网页的显示效果功能。也就是 HTML 中的标签和属性,进行分开封装,提高了代码的显示效果。 HTML 提供了两个标签,仅用于封装数据,没有特殊含义,常用属性style用于封装CSS样式属性代码: 块级标签:整行(如要修改此封装数据的背景颜色,会直接修改整行的背景) 一些块级与行内标签: 例子: 界面: 使用了 HTML 的一个 style 属性 界面: style 属性的值,封装的都是 CSS 的属性和值代码,格式(属性名 冒号 值 分号) 观察以下代码,多个标签属性重复了,我们必须想办法向上抽取出来: 使用 HTML 提供的 style 标签: style 标签的 type 属性只有一个值 text/css 界面: 如果多个 HTML 页面的属性样式重复了,我们就用 CSS 文件的方式复用重复样式。 div.css : span.css : index.html: 在style标签中 用 @impor url(css文件); 导入相应的css文件 界面: theme.css: index.html: 也是同样的效果 选择器:就是指 CSS 样式代码要作用(设置)到哪个标签,寓意:选择一个标签(容器)来设置 CSS 样式代码。 CSS 样式代码格式:选择器名称 { 属性名 : 属性值 ; 属性名 : 属性值 ; . . . N ~ } 三种选择器: 界面: css代码中的注释是(/* */) 根据上述代码,我们发现 class 类选择器和 id 选择器的功能感觉没什么两样,那不是重复了吗?是的,class 和 id 属性值重复了,上面是个演示例子,真实开发中我们需要把 id 属性值设置成唯一的。 例子: 界面(直接作用于 style 属性的 css 样式): 关联选择器例子: 选择器 与 选择器之间 空格 隔开 界面: 组合选择器例子: 每组选择器之间用 “,” 逗号隔开 界面: 很简单,技术含量 0. 何为伪元素选择器?其实就是 HTML 中预定义的某种状态的选择器,如我们可以在一个选择器的某个状态更换一种样式。 有四种常见的伪元素选择器: 必须按照使用顺序来写代码:L ——> V ——> H ——> A 语法(选择器 : 伪元素) 使用例子: 界面(下面是鼠标放上去变成了悬停状态): JavaScript 是基于对象和事件驱动的脚本语言,主要应用在客户端。 特点: JavaScript 与 Java 不同 JavaScript 代码 用 HTML 标签 <script> 进行封装,要在 <body> 标签中: 使用第二种方式注意:使用属性 src 引入 JS 文件后,不能再在此处写 JS 脚本代码,如果写了当废话。 hello.js 文件: 界面: JS 的语法(程序设计语言基本都具备以下语法,只是表现形式不同): 变量的定义用关键字 var 完成,没有明显类型: 界面: 不但可以把分号去掉,更恐怖的还可以把 var 变量声明去掉 效果是一样的,不会报错。真实开发中一定要规范。 显示: 和其它程序设计语言不同的是逻辑与位运算符: 界面: 界面: show()方法:undefined + undefined 非法错误 showParam()方法,显示1~5: getValue()方法: 所以,真实开发中,有几个参数就传几个参数 定义函数就会在内存中创建一个对象,函数名即保存了内存中 Function 类型的对象的引用地址。 界面: 界面: func() 方法 funcs 变量引用 全局变量演示: 界面: 局部变量演示: IE6 显示的错误信息: 而且,全局变量和局部变量重名重复var声明还是会使用相同的内存进行赋值,不会产生新的内存: 显示: 输出界面显示: 封装演示: 真正开发的时候,我们需要把 JavaScript 中描述的对象单独封装成一个 .JS 文件 显示界面: new Person() 对象 p.show() 方法 p2.show() 方法 JavaScript 继承的6种实现方式,以及优缺点链接:
HTML HyperText Markup Language
<html> <head> <title>网页标题<title/> <head/> <body> <h1>测试内容</h1> <body/> </html>
1. 标签的表现形式&操作思想
<html> <head> <title>我是网页标题</title> </head> <body> 这个文字没有进行标签封装,后面br标签换行<br/> <font color="#FF0000" size="20px">用font标签封装的文字+属性</font> <hr/> 水平线标签:默认前后都回进行换行 <!-- 我是注释,注释内容不会被执行 --> <h1><!-- 标签是可以被嵌套的 --> <font color="#0000FF"> 我是被h1标签封装和font标签封装的文字,有h1~h6级的标签,有默认的字体大小 </font> </h1> </body> </html>
2. 特殊字符
<
>
>
&
&
"
“
®
®
©
©
™
™
空格
<html> <head> <title>网页标题</title> </head> <body> <h1><font color="#0000FF" size="20px">测试内容</font></h1> <hr/> <p><</p> <p>></p> <p>空 格</p> <p>空 格</p> <p>&</p> <p>™</p> <p>©</p> </body> </html>
3. HTML 的严谨性&现代浏览器自动安全解析
<html> <head> </head> <body> <h1><font color="#0000FF" size="20px">测试内容</font></h1> <hr/> </body> </haha> <title>网页标题</title>
CSS 与 HTML
标签
封装区域
结尾换行
div
是
span
行内标签:数据范围(如要修改此封装数据的背景颜色,只有数据范围背景被更改)
否
块级标签
行内标签
dl
a
table
img
tr
input
td
p
<html> <head> <title>我是网页标题</title> </head> <body> <div>DIV区域一</div> <div>DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
1. CSS 与 HTML 结合一(style属性)
<html> <head> <title>我是网页标题</title> </head> <body> <div style="color: red; font-size: 24px; background-color: orange;">DIV区域一</div> <div>DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
2. CSS 与 HTML 结合二 (style标签)
<html> <head> <title>我是网页标题</title> </head> <body> <div style="color: red; font-size: 24px; background-color: orange;">DIV区域一</div> <div style="color: red; font-size: 24px; background-color: orange;">DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
<html> <head> <title>我是网页标题</title> <!-- style 标签 CSS 代码一般放在 head 标签中先加载 --> <style type="text/css"> div { color: red; font-size: 24px; background-color: orange; } </style> </head> <body> <div>DIV区域一</div> <div>DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
3. CSS 与 HTML 结合三 (CSS文件)
div { color: red; font-size: 24px; background-color: orange; }
span { color: green; font-size: 20px; background-color: red; }
<html> <head> <title>我是网页标题</title> <!-- style 标签 CSS 代码一般放在 head 标签中先加载 --> <style type="text/css"> @import url(div.css); @import url(span.css); </style> </head> <body> <div>DIV区域一</div> <div>DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
3.1 CSS文件中导入CSS文件
@import url(div.css); @import url(span.css);
<html> <head> <title>我是网页标题</title> <!-- style 标签 CSS 代码一般放在 head 标签中先加载 --> <style type="text/css"> @import url(theme.css); </style> </head> <body> <div>DIV区域一</div> <div>DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
3.2 link 标签导入css文件
<html> <head> <title>我是网页标题</title> <!-- link 标签 CSS 代码一般放在 head 标签中先加载 --> <link rel="stylesheet" href="theme.css" type="text/css"/> </head> <body> <div>DIV区域一</div> <div>DIV区域二</div> <span>SPAN区域一</span> <span>SPAN区域二</span> </body> </html>
4. 复用属性样式代码场景总结
5. 三种基本选择器
<html> <head> <title>我是网页标题</title> <style type="text/css"> /* class 选择器 */ .haha { color: red; font-size: 24px; background-color: orange; } /* id 选择器 */ #xixi { color: blue; font-size: 20px; background-color: yellow; } /* 标签名 选择器 */ p { color: green; font-size: 25px; background-color: red; } </style> </head> <body> <div class="haha">DIV演示区域一</div> <div class="haha">DIV演示区域二</div> <span id="xixi">SPAN演示区域一</span> <span id="xixi">SPAN演示区域二</span> <p>段落演示区域一</p> <p>段落演示区域二</p> </body> </html>
5.1 选择器的优先级
优先级
1 <
2 <
3 <
4
选择器
标签名
class
id
style 属性
<html> <head> <title>我是网页标题</title> <style type="text/css"> /* class 选择器 */ .haha { color: red; font-size: 24px; background-color: orange; } /* id 选择器 */ #xixi { color: blue; font-size: 20px; background-color: yellow; } /* 标签名 选择器 */ p { color: green; font-size: 25px; background-color: red; } </style> </head> <body> <div class="haha" id="xixi" style="color: white; font-size: 30px; background-color: black;">DIV演示区域一</div> </body> </html>
6. 关联&组合选择器
<html> <head> <title>我是网页标题</title> <style type="text/css"> div span { color: red; background-color: orange; } .haha span { color: blue; background-color: yellow; } #xixi span { color: green; background-color: red; } </style> </head> <body> <div><span>DIV</span>演示区域一</div> <div class="haha">DIV<span>演示</span>区域二</div> <div id="xixi">DIV演示<span>区域</span>三</div> </body> </html>
<html> <head> <title>我是网页标题</title> <style type="text/css"> div span, .haha span, #xixi span { color: red; background-color: orange; } </style> </head> <body> <div><span>DIV</span>演示区域一</div> <div class="haha">DIV<span>演示</span>区域二</div> <div id="xixi">DIV演示<span>区域</span>三</div> </body> </html>
7. 伪元素选择器
未点击(初始)
被访问后
悬停状态(光标移动到标签上)
点击状态(未松手)
link
visited
hover
active
<html> <head> <title>伪元素选择器</title> <style type="text/css"> /* 未访问 */ a:link { color: blue; font-size: 20px; text-decoration: none; background-color: red; } /* 访问后 */ a:visited { color: gray; font-size: 20px; background-color: white; } /* 悬停 */ a:hover { color: red; font-size: 24px; background-color: blue; } /* 点击 */ a:active { color: white; font-size: 30px; background-color: black; } </style> </head> <body> <a href="#">我是超链接-伪元素选择器演示</a> </body> </html>
JavaScript 语法注意
1. JavaScript 和 HTML 代码结合
<html> <head> <title>JavaScript</title> </head> <body> <!-- JavaScript 和 HTML 结合一 --> <script type="text/JavaScript"> // 弹窗 alert("我是弹窗内容"); </script> <!-- JavaScript 和 HTML 结合二 --> <script type="text/JavaScript" src="hello.js">/* 注意使用属性 src 引入 JS 文件后,不能再在此处写 JS 脚本代码 */</script> </body> </html>
alert("Hello JavaScript");
2. 变量的定义 & 语法非严谨 & 默认值
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> /* var 类型:啥数据都能装,不用明显的数据类型 */ var x = 123; alert(x); alert(x = 12.3); alert(x = "abc"); alert(x = true); </script> </body> </html>
2.1 语法非严谨
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> /* var 类型:啥数据都能装,不用明显的数据类型 */ x = 123 alert(x) alert(x = 12.3) alert(x = "abc") alert(x = true) </script> </body> </html>
2.2 变量默认值
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> var x; alert(x); // undefined </script> </body> </html>
3. 运算符 – 一些注意
逻辑运算符
&&
||
位运算符
&
|
3.1 字符串转数字 & 非法转换错误
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> /* 字符串除了用 + 号链接符外,用标准数学运算符计算会自动转换成数字 */ alert("13" - 1); // 12 alert("12" / 3); // 4 alert("10" * 2); // 20 alert("a" - 1); // NaN:非法的转换,只能是数字 </script> </body> </html>
3.2 判断数据类型的全局方法
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> /* typeof()方法会返回一个字符串 判断一个数据类型是否是等于一个类型直接用 == 双等号即可 */ alert(typeof(123)); // number alert(typeof(12.3)); // number alert(typeof("abc")); // string alert(typeof(false) == "boolean"); // boolean,弹出内容:true </script> </body> </html>
3.3 boolean 布尔类型的数值
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> alert(true + 1); // 2,true 就是非 0 或非 null。 alert(false + 1); // 1,false 就是 0 或者 null。 if (true + 10) { alert("if is true"); } </script> </body> </html>
4. 函数的定义和细节
4.1 函数内部数组可变 & 函数参数传递问题
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> // 定义函数和参数 function show(x, y) { alert(x + y); } // 无参函数 function showParam() { for (var i = 0; i < arguments.length; i++) { alert(arguments[i]); } } // 带返回值的函数 function getValue(x, y) { return x + y; } /* 函数必须调用才执行,虽然没有在函数方法定义参数,但是乃然可以传递参数 如果有参数的函数,不传递任何一个参数也是可以的 */ show(); // 不传递参数 showParam(1, 2, 3, 4, 5); // 调用无参函数,并传递参数 var num = getValue(10, 20); // 正常使用 alert(num); </script> </body> </html>
4.2 函数对象引用传递
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> // 无参函数 function showParam(str) { alert(str); } var sum = showParam; // 用函数名的引用地址赋值给 sum 变量 alert(sum); // 将 sum 指向的函数对象转换成字符串,(其实就是调用了对象的toString()方法,函数的字符串表现形式就是定义函数时的表现形式) sum("OK"); // 调用 sum 变量指向的函数对象 </script> </body> </html>
4.3 动态函数 & 匿名函数
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> // 动态函数 var func = new Function("x, y", "var sum = x + y; return sum;"); var sum = func(5, 5); alert(sum); // 匿名函数,没有名字无法调用,需要一个变量进行引用 var funcs = function(str) { alert(str); } funcs("Yes"); </script> </body> </html>
5. 全局和局部变量的作用域
<html> <head> <title>JavaScript</title> </head> <body> <!-- script 标签一 --> <script type="text/JavaScript"> var a = "OK"; // 同样的直接写在语句里面的变量也是全局的 for (var n = 0; n < 1; n++) { // null } </script> <!-- script 标签二 --> <script type="text/JavaScript"> alert("a = " + a); alert("n = " + n); </script> </body> </html>
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> function showVar() { var k = "null"; } alert("k = " + k); // 无效,变量 k 只在函数内部有效,说白了就是对象里面的变量 </script> </body> </html>
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> var a = 10; var a = 20; alert(a); function showVar() { var a = 30; var a = 40; alert(a); } showVar(); </script> </body> </html>
6. 数组的语法细节
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> // 数组的两种声明方式 var arr1 = [0,1,2,3,4]; // 直接明确元素和数组长度 var arr2 = []; // 定义空数组,存储不确定的数据 // 定义一个打印数组的方法 function printArr(arr) { document.write("["); for (var index = 0; index < arr.length; index++) { var str = arr[index]; if (index != arr.length - 1) { //document.write(arr[index] + ","); str += ","; } else { //document.write(arr[index] + "]<br/>"); str += "]<br/>"; } document.write(str); } } printArr(arr1); arr1[9] = 10; // arr1 数组的预定义长度为5,而我直接在下标9的位置进行赋值是允许的,因为数组长度是可变的 document.write("数组长度是可变的:");printArr(arr1); document.write("<br/>"); // 元素类型是任意的,由程序员主观决定元素类型 arr2[0] = "10"; arr2[1] = "12.3"; arr2[2] = "abc"; arr2[3] = 'q'; arr2[4] = "true"; arr2[5] = null; arr2[6] = undefined; document.write("元素类型是任意的:");printArr(arr2); // 要获取数组的字符串形式:可以直接使用数组对象的 toString() 方法 document.write("使用数组对象的 toString() 方法:" + arr2.toString()); </script> </body> </html>
7. JavaScript 面向对象编程
多态:声明变量用 var 关键字。
<html> <head> <title>JavaScript</title> </head> <body> <script type="text/JavaScript"> /* JavaScript 创建对象 */ // JavaScript 描述对象用 function function Person() { // 参数相当于构造器 alert("My Object Person"); } // 使用 new 关键字创建对象 var p = new Person(); // 创建后直接会运行函数 // 为当前引用对象添加新成员 p.name = "雨烟"; p.age = 19; p.show = function() { alert("name = " + this.name + ", age = " + this.age); // 使用 this 调用对象上下文中的成员 }; p.show(); /* 问:如果再次创建 Person 对象是否还有添加的成员? 答案:否,上面的方式只是为当前变量引用的对象添加新的成员。 */ /* JavaScript 描述对象 使用这种方式就能解决上述的问题 */ function Person2(name,age) { this.name = name; this.age = age; this.show = function() { alert("name = " + this.name + ", age = " + this.age); }; } var p2 = new Person2("克斌",20); p2.show(); </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算