目录 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 文件 输出界面： 注意： 其余的就不多说了，大家可以看 Person( n ) 中的参数，在后期乃可用，因为 Function 对象内部本身封装有一个 arguments 数组，用于存储传递过来的参数，arguments[0] 赋值给了变量 n ，这个变量 n 为局部变量也就是对象的私有变量。 所以，为了简化书写，连声明私有变量的步骤都可以省略了。
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"> // 打印方法 function println(date){document.write(date + "<br/>");} function Person(n){ // 相当于构造器 // 声明私有变量 var name; // 声明私有方法 function init(){ name = n; println(name + " : new Person count = " + ++Person.count); // 用于测试静态变量是否是共享于对象的 }; init(); // 公开方法 this.getName = function(){return name;}; this.setName = function(value){name = value;}; this.getN = function(){return n;}; //用于测试传进来的参数是否还可用 } // 声明静态变量 Person.count = 0; // 声明静态函数 Person.rest = function() {Person.count = 0;}; var p1 = new Person("斌哥"); var p2 = new Person("雨烟"); println("n = " + p1.getN()); println("n = " + p2.getN()); Person.rest(); // 重置计数器 println("Person.count = " + Person.count); </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
