HTML & CSS & Javascript 课程期末复习总览-CSDN博客

本文链接：https://blog.csdn.net/XcantloadX/article/details/135084604

HTML

基本标签

<!-- 注释 -->

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p>段落</p>
<div>块级元素</div>
<span>内联元素</span>

<br> <!-- 换行 -->
<hr> <!-- 分割线 -->

<mark>高亮</mark>
<strong>强调（粗体）</strong>
<em>强调（斜体）</strong>
<b>粗体 b = bold</b>
<i>斜体</i>
<small>小号文字</small>
<sub>下标 sub = subscript</sub>
<sup>上标 sup = superscript</sup>

<a href="链接" target="_self">在本窗口打开</a>
<a href="链接" target="_blank">在新窗口打开</a>
<a href="#ID123">跳转到 ID 为「ID123」的元素</a>
<img src="图片链接" alt="提示文本" />

<ol>
	<li>有序列表 第 1 项</li>
	<li>有序列表 第 2 项</li>
	<li>有序列表 第 3 项</li>
</ol>
<ul>
	<li>无序列表 第 1 项</li>
	<li>无序列表 第 2 项</li>
	<li>无序列表 第 3 项</li>
</ul>
<dl>
	<dt>描述列表 术语 1</dt>
	<dd>描述列表 描述 1</dd>
	<dt>描述列表 术语 2</dt>
	<dd>描述列表 描述 2</dd>
	<dt>描述列表 术语 3</dt>
	<dd>描述列表 描述 3</dd>
</dl>

表格

基本框架

<table>：表格的根元素。
<thead>：定义表格的头部。（可选）
<tbody>：定义表格的主体。（可选）
<tfoot>：定义表格的尾部。（可选）
<tr>：table row，表格行。
<td>：table data，表格单元格。
<caption>：表格标题。
rowspan：这个单元格跨多少行。
colspan：这个单元格跨多少列。

<table border="1">
	<caption>表格标题</caption>
	<thead>
		<tr>
			<td>第一行 第一列</td>
			<td>第一行 第二列</td>
			<td rowspan="3">合并行 第三列</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="2">第二行 合并列</td>
		</tr>
		<tr>
			<td>第三行 第一列</td>
			<td>第三行 第二列</td>
		</tr>
	</tbody>
</table>

表格样式

样式属性：

border：设置边框。单位 px。
cellpadding：单元格内容边距。单位 px 或 %。
cellspacing：单元格与单元格之间的距离。单位 px 或 %。
width、height：宽、高。单位 px 或 %。
（px 可以省略不写）

<table border="1" cellpadding="6" cellspacing="5" width="500" height="100">
	<tr>
		<td>我是数据</td>
		<td>我是数据</td>
	</tr>
	<tr>
		<td>我是数据</td>
		<td>我是数据</td>
	</tr>
	<tr>
		<td>我是数据</td>
		<td>我是数据</td>
	</tr>
</table>

表单

表单通过 <input> 和 <form> 元素实现。

<input> 元素通用属性：

type：表单元素的类型。
name：表单元素名称，可以随意设置。下面代码演示中不再赘述。
value：表单元素初始值。
disabled：禁用这个表单元素。加上后表单元素处于禁止状态，无法输入。

<!-- 文本输入框 -->
<input type="text" value="我是显示的文本"/>

<!-- 密码输入框 -->
<input type="password" value="我是显示的密码"/>

<!-- 单选框 -->
<!-- 同一组单选框的 name 必须相同。 -->
<!-- checked 表示选中。 -->
<input type="radio" name="单选框名字"> A：XXX
<input type="radio" name="单选框名字"> B：XXX
<input type="radio" name="单选框名字"> C：XXX
<input type="radio" name="单选框名字" checked> D：XXX

<!-- 多选框 -->
<!-- 同一组多选框的 name 必须相同。 -->
<!-- checked 表示选中。 -->
<input type="checkbox" name="多选框名字" checked> A：XXX
<input type="checkbox" name="多选框名字" checked> B：XXX
<input type="checkbox" name="多选框名字"> C：XXX
<input type="checkbox" name="多选框名字" checked> D：XXX

<!-- 下拉框 -->
<!-- select 表示默认选中该项。 -->
<select>
	<option>选项 1</option>
	<option selected>选项 2</option>
	<option>选项 3</option>
</select>

<!-- 文本域（长文本框） -->
<textarea maxlength="最大字符长度">这里是默认显示的文本</textarea>

<!-- 提交按钮 -->
<input type="submit" value="提交按钮的名称">


<!-- 标签 -->
<!-- 标签的 for 属性必须与其绑定的表单元素的 name 属性一致 -->
<label for="username">用户名：</label><input type="text" name="username">

<form> 元素用来将以上的表单元素包裹起来（可选）。

<form>
	<label for="username">用户名：</label>
	<input type="text" name="username">
	<!-- 等等... -->
</form>

框架

主页面（index.html）：
<frame> 元素用来定义一个框架，这些框架都放到 <frameset> 元素下。
<frameset> 元素的 cols 属性用来定义「分列」。下面示例中定义了两列，第一列宽度 120，第二列占满剩余宽度。
<frame> 元素的 name 属性定义该框架的「名称」，用于 <a> 元素的跳转。

<html>
	<frameset cols="120,*">
		<frame src="tryhtml_contents.html" name="sidebar"/>
		<frame src="frame_a.html" name="content"/>
	</frameset>
</html>

子页面（可以有多个）：
frame_a.html：

<html>
	<p>这里是 frame_a.html 文件</p>
	<a href="frame_b.html" target="content">点击这里在 content 框架中跳转到 frame_b.html</a>
</html>

frame_b.html：

<html>
	<p>这里是 frame_b.html 文件</p>
	<a href="frame_c.html" target="content">点击这里在 content 框架中跳转到 frame_c.html</a>
</html>

frame_c.html：

<html>
	<p>这里是 frame_c.html 文件</p>
	<a href="frame_a.html" target="content">点击这里在 content 框架中跳转到 frame_a.html</a>
</html>

CSS

基础知识

CSS 的三种引入方式：

<!-- 内部样式表 -->
<style>
CSS代码
</style>

<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="CSS文件地址">

<!-- 内联样式 -->
<p style="CSS代码"></p>

三种方式的优先级：外部样式 < 内部样式 < 内联样式。

CSS 基本语法：

/* 注释  */

/* 规则 1  */
选择器 {
	属性1: 值;
	属性2: 值;
	/* ... */
}

/* 规则 2  */
选择器 {
	属性1: 值;
	属性2: 值;
	/* ... */
}

/* ... */

选择器规则

/* 元素选择器 */
p { } /* 所有 <p> */
h1, h2, h3 { } /* 所有 <h1>~<h3> */
* { } /* 所有元素 */

/* 类选择器 */
.cls { } /* 所有包含 cls 类的元素 */
.cls, .a { } /* 所有包含 cls 类或 a 类的元素 */
.cls.a { } /* 所有包含 cls 类和 a 类的元素 */

/* ID选择器 */
#hello { } /* ID 为 hello 的元素 */

文本样式

/* 文本颜色 */
p {
	color: green; /* 1. 内置颜色单词 */
	color: #ffffff; /* 2. 十六进制颜色 */
	color: rgb(0, 0, 0); /* 3. rgb() 函数颜色 */
}

/* 字体 */
p {
	/* 字体名称 */
	font-family: "Times New Roman";
	/* 字体大小  单位 px/em */
	font-size: 18px;
	/* 字体粗细 */
	font-weight: bold; /* 1. bold、normal、light */
	font-weight: 200; /* 2. 100~900 之间的整百数 */
	/* 字体风格 */
	font-style: italic; /* normal、italic（斜体）、oblique（倾斜） */
}

/* 装饰 */
p {
	text-decoration: none; /* 无 */
	text-decoration: underline; /* 下划线 */
	text-decoration: overline; /* 上划线 */
	text-decoration: line-through; /* 删除线 */
}

/* 布局 */
p {
	/* 对齐方式 */
	text-align: center; /* left、right、center、justify（两端对齐） */
	/* 行高 */
	line-height: 10px; /* 1. 设置具体值 */
	line-height: 200%; /* 2. 设置百分数 */
	line-height: normal; /* 3. 正常行高 */
	/* 字符间距 */
	letter-spacing: 10px; /* 1. 设置具体值 */
	letter-spacing: normal; /* 2. 正常间距（0） */
	/* 单词间距（同上） */
	word-spacing: 10px;
	word-spacing: normal;
}

背景样式

body {
	/* 背景颜色 */
	background-color: #cccccc; /* 颜色的格式和 color 一样 */
	
	/* 背景图片 */
	background-image: url("图片地址");
	/* 背景重复 */
	background-repeat: repeat-x; /* X 轴重复 */
	background-repeat: repeat-y; /* Y 轴重复 */
	background-repeat: no-repeat; /* 不重复 */
	/* 背景定位 */
	background-position: top left; /* top、center、bottom 和 left、center、right 两组词的组合 */
}

表格样式

/* 边框 */
th, td {
	/* 设置边框 */
	border: 1px solid black; /* 粗细 样式 颜色 */
	/* 样式可以为：dotted、solid、double、dashed */
	/* 颜色同 color */
}
table {
	/* 边框折叠。即两个相邻的边是否合并 */
	 border-collapse: collapse;
}

Javascript

引入 Javascript

<script>
// Javascript 代码
</script>

<script src="JS源文件路径" />

基础语法

变量

var global_var = 123; // 全局变量
function func() {
	var local_var = 114; // 局部变量
}

// 注意 var 关键字的「声明提前」特点。
// 即在后面声明的变量在前面也能用

console.log(local_var); // Error: local_var is not defined
// V.S.
console.log(local_var); // undefined
var local_var = 123;

数据类型

// 数字
var a = 123
var b = 123.456

// 字符串
var str1 = '字符串';
var str2 = "单双引号皆可";

// 布尔
var b = true || false;

// 数组
var arr = [1, 2.3, "js 的数组可以包含不同类型的值", false];

// null 与 undefined
// undefined 表示变量未赋值，null 表示空。
var n = null;
var u = undefined;

// 对象
var obj = {
	属性: "值",
	属性2: "值2"
};

类型互转

// 字符串 -> 整数
parseInt(str); // 失败返回 NaN
// 字符串 -> 小数
parseFloat(str); // 失败返回 NaN
// 字符串 -> 数字
Number(str);
// 数字 -> 字符串
num.toString(base); // base 为进制。默认为 10
// * -> 布尔
Boolean(val);

运算符

a + b
a - b
a * b
a / b // 结果为浮点数
a % b

a++
++a
a--
--a

a == b // 值相等
a === b // 值和类型都相等
a != b // 值不等
a !== b // 值和类型有一个不相等

a > b
a >= b
a < b
a >= b

a ? b : c

!a
a && b
a || b

a = b
a += b
a -= b
a *= b
a /= b
a &= b // 位与

流程控制

只列举特殊的。

for-in 循环：
（见对象）

for (var prop in obj) {
	console.log(obj[prop]);
}

数组

// 数组的创建
var arr1 = new Array(5); // 长度为 5，和下面的等价
var arr2 = [undefined, undefined, undefined, undefined, undefined];

// 增
arr[arr.length] = 1122; // 在数组最后追加
arr.push(1122); // 在数组最后追加
arr.unshift(3344); // 在数组开头插入

// 删
delete arr[0]; // 删除下标为 0 的元素。删除后数组长度不变
arr.pop(); // 删除数组最末尾元素。
arr.shift(); // 删除数组最开头元素。

// 遍历
for (var i = arr.length - 1; i >= 0; i--) {
	console.log(arr[i]);
}
arr.forEach(function(element, index, arr){
	console.log(element);
});

常用方法

// 搜索
arr.indexOf(element);
arr.lastIndexOf(element);
// 合并
c = a.contact(b); // c = a + b
// 倒置
arr = arr.reverse();
// 合并为字符串
arr.join(sep);
// 排序
arr.sort([compareFunc]);
// 取子数组
subArr = arr.slice(a[, b]); // subArr = arr[a, b)

函数

函数的定义：

// 1.
function foo(arg1, arg2) {
	return 114 + 514;
}

// 2.
var foo = function(arg1, arg2) {
	return 114 + 514;
}

函数的参数：

// 调用时未传入的参数会被赋值为 undefined
function a(arg1, arg2) {
	console.log(arg1);
	console.log(arg2);
}
a(1); // 输出：1 undefined

// 变长参数可以通过「arguments」变量实现
function sum() {
	var sum = 0;
	for (var i = arguments.length - 1; i >= 0; i--) {
		sum += arguments[i];
	}
	return sum;
}
console.log(1, 2, 3); // 输出：6

对象

对象的五种构造方法：

// 1. 字面量
var obj1 = {
	prop1: "value1",
	prop2: "value2",
	// ...
};

// 2. new Object
var obj2 = new Object();
obj2.prop1 = "value1";
obj2.prop2 = "value2";
// ...

// 3. 工厂方法
function createObj(value1, value2) {
	var obj = new Object();
	obj.prop1 = value1;
	obj.prop2 = value2;
	// ...
	return obj;
}
var obj3 = createObj("value1", "value2");

// 4. 构造方法
function Obj(value1, value2) {
	this.prop1 = value1;
	this.prop2 = value2;
}
var obj4 = new Obj("value1", "value2");

// 5. 原型链
function Obj() { }
Obj.prototype.prop1 = "value1";
Obj.prototype.prop2 = "value2";
var obj5 = new Obj();

对象属性的增删查改：

// 1. 查
// 获取值
obj.prop
obj["prop"]
// 判断属性是否存在
prop in obj // 判断属性
obj.hasOwnProperty("prop"); // 判断自有属性（即非来自原型链上级的属性）
// 遍历属性
for (var prop in obj)
	console.log(prop);
obj.getOwnPropertyNames(); // 获取对象所有的自有属性名称
obj.keys(); // 获取对象所有的自有可枚举属性名称

// 2. 增/改
obj.prop = 123; // 不存在会自动增加

// 3. 删
delete obj.prop // 只能删除自有属性

异常处理

try {
	throw new Error("错误信息");
}
catch {

}
finally {

}

内置库

字符串

[] 内的参数表示可选。

// 查找子字符串
str.indexOf(子字符串[, 开始位置]);
// 倒找子字符串
str.lastIndexOf(子字符串[, 开始位置]);
// 取指定位置字符
str.charAt(下标);
// 截取子字符串
str.slice(a[, b]); // [a, b)。b 不填则为字符串末尾
str.substring(a[, b]); // [a, b)。b 不填则为字符串末尾
str.substr(a[, len]); // 从 a 开始，len 为截取长度。
// 字符串分割
str.split(分隔符)
// 转大写
str.toUpperCase();
// 转小写
str.toLowerCase();

数学

Math.PI;
Math.ceil(x);
Math.floor(x);
Math.sqrt(x);
Math.round(x); // 四舍五入到整数
Math.abs(x);
Math.pow(x, a);
Math.max(a, b, ..., n);
Math.min(a, b, ..., n);

时间日期

new Date(); // 当前时间
new Date(tt); // 时间戳
new Date(timeString); // 时间字符串
new Date(year, month, day, hour, minute, second, millsecond);

var date = new Date();
date.getFullYear(); // 取年。
date.setFullYear(year[, month[, day]]);
date.getMonth(); // 取月。从 0 开始
date.setMonth(month[, day]);
date.getDate(); // 取天。从 1 开始。
date.getDay(); // 取星期。从 0 开始。

JSON

JSON 语法：

{
	"值1": "属性",
	"值2": "属性类型可以为：字符串、数字、布尔型、null、对象、数组",
	"数组演示": [1, 2.3, "string", true, null],
	"对象演示": {
		"obj1": { "key1": "value1" },
		"obj2": { "key1": "value1" }
	}
}

Javascript 与 JSON：

// JSON 字面量
var json = {
	"key1": "value1",
	"key2": "value2"
	// ...
};
// JSON 对象的遍历、查询、修改、删除与 JavaScript 对象一致

// JSON 与字符串互转
JSON.parse(字符串); // 字符串 -> JSON
JSON.stringify(JSON对象); // JSON -> 字符串

正则

正则语法

表示	含义
[A-Z]	匹配一个从 A-Z 的字符
\w	匹配大小写字符或数字
\W	匹配非字母，非数字
\d	匹配数字
\D	匹配非数字

表示	含义
{x}	前面的字符出现 x 次
{a, }	前面的字符出现 a~∞ 次
{a, b}	前面的字符出现 a~b 次
?	前面的字符出现 0~1 次
*	前面的字符出现 0~∞ 次
+	前面的字符出现 1~∞ 次

表示	含义
^	匹配字符串开头
\b	匹配单词边界
\B	匹配非单词边界

表示	含义	例
(expr)	圆括号用于分组，表示一个子表达式。每个分组都有一个编号，编号从 1 开始，从前往后开始编号。	`(play(ed\|ing))` 其中 `(ed\|ing)` 是第 2 个子表达式
expr1\|expr2	将整个正则表达式一份为二，相当于”expr1 或 expr2“。通常配合圆括号 `()` 使用。	-
\x	表示引用第 x 个子表达式匹配到的内容。	-

Javascript 与正则

// 正则的创建
var regex = new RegExp("表达式");
var regex = /表达式/;

// 修饰符
/expr/i; // i == 忽略大小写
/expr/g; // g == 全局匹配（匹配所有）
/expr/m; // m == 多行模式

regex.test(str); // 测试是否匹配
str.search(regex); // 搜索
str.split(regex); // 分割
str.replace(regex, str); // 替换
str.replace(regex, "$1"); // 替换为第一个子表达式匹配到的值

DOM

document 文档模型

获取 DOM 结点：

document.getElementById("idName");
document.getElementsByTagName("tagName");
document.getElementsByClassName("className");
document.querySelector("cssSelector");
document.querySelectorAll("cssSelector");

DOM 结点操作：

var node;

// 查
node.firstElementChild;
node.lastElementChild;
node.previousElementSibling;
node.children; // 子节点数组

// 增
var node = document.createElement("form");
node.method = "post";
node.id = "myForm";
document.body.appendChild(node); // 在最后追加
document.body.insertBefore(a, b); // 将 a 插入在 b 的前面

// 删
node.removeChild(child);

// 改
node.replaceChild(oldChild, newChild);

DOM 结点属性操作：

node.innerText;
node.innerHTML;

node.getAttribute(属性名称); // 获取指定属性的值
node.getAttribute(属性名称, 值); // 设置指定属性的值
node.className; // class 属性值

window 浏览器模型

定时

var id = window.setTimeout(func, millsecond); // 延迟 millsecond 毫秒后执行 func 函数
window.clearTimeout(id); // 清除定时
var id = window.setInterval(func, millsecond); // 每 millsecond 毫秒执行一次 func 函数
window.clearInterval(id); // 清除定时

location 对象

window.location.href; // 当前窗口所在页面的地址
window.location.host; // 主机名和端口号
window.location.hostname; // 主机名
window.location.pathname; // 路径部分
window.location.port; // 端口号
window.location.protocal; // 协议
window.location.search; // 问号开始的查询部分

window.location.href = "https://www.baidu.com"; // 跳转到百度首页

对话框

window.alert(msg); // 弹出提示框（确认按钮），显示 msg
window.comfirm(msg); // 弹出提示框（确定 + 取消按钮），显示 msg
var text = window.prompt(msg[, default]); // 弹出输入框，提示用户输入

窗口操作

var win = window.open(url, name, specs, replace); // 打开窗口
win.close(); // 关闭窗口

HTML & CSS & Javascript 课程 期末复习总览

HTML

基本标签

表格

基本框架

表格样式

表单

框架

CSS

基础知识

选择器规则

文本样式

背景样式

表格样式

Javascript

引入 Javascript

基础语法

变量

数据类型

运算符

流程控制

数组

函数

对象

异常处理

内置库

字符串

数学

时间日期

JSON

正则

正则语法

Javascript 与 正则

DOM

document 文档模型

window 浏览器模型

HTML & CSS & Javascript 课程期末复习总览

Javascript 与正则