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(); // 关闭窗口