版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
HTML5
html5的基本元素
<!-- -->：注释
<html>：根标签，html5可以省略
<head>：头标签，html5可以省略
<title>：定义页面标题
<body>：定义页面主体
<h1>到<h6>：文章标题，字体大小递减
<p>：定义段落
<br>：换行
<hr>：显示一条水平线
<div>：定义文档的节
<span>：同上，区别：文本内容默认不换行
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本元素</title>
</head>
<body>
<!-- 基本元素用法示例 -->
<h1>你好</h1>
<h3>你好</h3>
<h6>你好</h6>
<hr/>
<!-- span示例 -->
<span>Tomcat</span><span>Java</span><span>Servlet</span>
<br>
<!-- div示例 -->
<div>Tomcat</div><div>Java</div><div>Servlet</div>
<!-- 段落 -->
<p>你好</p>
<p>你好</p>
</body>
</html>
注意：<div>可以包含<p>，<p>可以包含<span>
文本格式相关元素
<b>：定义粗体文本
<i>：定义斜体文本
<em>：定义强调文本，实际效果与<i>差不多
<strong>：定义重要文本，效果与<b>一样
<small>：定义小号字体的文本
<sup>：定义上标
<sub>：定义下标
<bdo>：定义文本的显示方向，要指定dir属性
注意：<span>可以和以上元素相互包含。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式相关元素</title>
</head>
<body>
<span><b>加粗文本</b></span><br>
<span><i>斜体文本</i></span><br>
<span><b><i>加粗斜体文本</i></b></span><br>
<small><span>小号文本</span></small><br>
<span>普通文本1<sub>下标文本</sub></span><br>
<div>普通文本2<sup>上标文本</sup></div><br>
<!-- 文本从左向排（默认情况） -->
<bdo dir="ltr">从左向右排</bdo>
</body>
</html>
语义相关元素
<abbr>：表示一个缩写
<address>：表示一个地址
<blockquote>：定义长引用文本，可以指定cite属性，说明文本的url
<q>：定义短引用，浏览器一般为对应文本内容加引号
等等...
超链接
<a>：除了通用属性，还有以下几个重要属性
href：指定超链接所连接的另一个资源hreflang：指定超链接所连接的文档的语言target：指定用哪一个框架来装载资源，属性值取"_blank"时，会在新窗口打开资源download：用于让用户下载的属性，属性值指定下载保存的默认文件名type：指定被连接文档的MIME类型
img元素添加图片
<img>可以用于指定一个图片，常用属性：
src：图片的url
alt：图片的提示文本
height：图片的高度，可以是百分数或像素值
width：图片的宽度，可以是百分数或像素值
表格相关元素
<table>：定义表格，常见属性见示例
<tr>：定义行
<td>：定义单元格
<th>：定义表头单元格
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
cellpadding：定义内容与单元格之间的距离
cellspacing：定义单元格之间的距离
-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="aqua" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>89</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>99</td>
</tr>
</table>
</body>
</html>
效果：
<caption>：定义表格标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="aqua" align="center">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>89</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>99</td>
</tr>
</table>
</body>
</html>
相关的语义化标签：
<thead>
<tbody>
<tfoot>
合并单元格示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并单元格</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="aqua" align="center">
<caption>学生信息表</caption>
<tr>
<!-- 表示此单元格占两行 -->
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>89</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>99</td>
</tr>
<tr>
<td>003</td>
<!-- 表示此单元格占两列 -->
<td colspan="2">王五</td>
<td>98</td>
</tr>
</table>
</body>
</html>
列表标签
有序列表
<ol>：有序列表<li>：列表项
无序列表
<ul>：无序列表<li>
表单标签
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
form：用于定义表单，实际上是一个代表采集用户数据的范围
常用属性：
action：指定提交数据的去向url
method: 指定提交方式，如get或post
-->
<form aaction="#" method="get">
<!-- 要想让表单中的数据被成功提交，必须指定name属性 -->
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<!--
<input>：用于定义表单项
属性：
type：定义元素展示的样式
text: 文本输入框，默认值
password：密码输入框
radio：单选框，记得加value属性来指定某选项提交的值
checkbox：多选框
单选框和多选框有一个共同属性checked，代表默认选中项
placeholder：指定输入框的提示信息
label：指定输入项的描述信息
file：文件选择框
hidden：隐藏域
submit：登录按钮
button：普通按钮
image：图片提交按钮，可以通过src属性来指定使用的图片
color：取色器
date：日期
datetime-local：日期，精确到时分
email：邮箱，会作基本格式校验
number：数字输入框
<select>：定义下拉列表
<option>：定义选项，selected表示默认选中
<textarea>：文本域
-->
<form action="#" method="get">
<!-- 点击 用户名 ，输入框会获取焦点 -->
<label for="user-name">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="user-name"><br>
密码：<input type="password" name="password" placeholder="请输入密码"><br>
<hr>
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<hr>
爱好：
<input type="checkbox" name="hobby" value="code" checked>代码
<input type="checkbox" name="hobby"value="game">王者
<hr>
文件：<input type="file" name="file"><br>
<hr>
省份：<select name="province">
<option>-- 请选择省份 --</option>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
</select>
<hr>
<input type="submit" value="登录">
</form>
</body>
</html>
注册页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form>
<table border="1" align="center" width="500">
<tr>
<td><label for="user-name-label">用户名</label></td>
<td><input type="text" name="username" id="user-name-label"></td>
</tr>
<tr>
<td><label for="password-label">密码</label></td>
<td><input type="password" name="password" id="password-label"></td>
</tr>
<tr>
<td><label for="email-label">Email</label></td>
<td><input type="email" name="email" id="email-label"></td>
</tr>
<tr>
<td><label for="name-label">姓名</label></td>
<td><input type="text" name="name" id="name-label"></td>
</tr>
<tr>
<td><label for="tel-label">手机号码</label></td>
<td><input type="text" name="tel" id="tel-label"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td><label for="code">验证码</label></td>
<td>
<input type="text" name="code" id="code">
<img src="images/code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>
CSS
CSS即层叠样式表，用于页面美化和控制。
CSS与HTML的结合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结合方式</title>
<!-- 内部样式 -->
<style>
div{
color: red;
}
</style>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<!--
内联样式：在标签内使用style属性指定代码
内部样式：在head标签内定义style标签
外部样式：1.定义css资源 2.在head标签内定义link标签
-->
<!-- 内联样式 -->
<div style="color: red;">hello css</div>
<div>hello css</div>
</body>
</html>
a.css文件：
div{
color: red;
}
css语法
格式：
选择器{
属性1 ：值1;
属性2 ：值2;
......
}
css选择器
作用：筛选具有相似特征的元素。
基础选择器
- id选择器
#id值{...}
- 元素选择器
标签名称{...}
- 类选择器
.class属性值{...}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{
color: red;
}
div{
color: aquamarine;
}
.cl{
color: blue;
}
</style>
</head>
<body>
<!-- 建议id值唯一 -->
<div id="div1">你好</div>
<div>你好好</div>
<p class="cl">你好你好</p>
</body>
</html>
注意：当选择器控制的内容冲突时，优先级如下：id>类>元素。
扩展选择器
- *{…} ：选择所有元素
- 选择器1,选择器2{…} ：选择并集
- 选择器1 选择器2{…} ：选择1中的2
- 选择器1 > 选择器2{…} ：选择2的父元素1
- 元素名[属性=“属性值”]{…} ：属性选择器
css属性
字体，文本
font-size：字体大小
color：文本颜色
text-align：对齐方式
line-height：行高
背景
background：背景
边框
border：边框
尺寸
width：宽度
height：高度
盒子模型
主要用于页面布局的控制
margin：外边距
padding：内边距
注意：默认情况下，设置内边距可能会影响盒子的大小。
设置属性 box-sizing : border-box，可以让width和height作为盒子最终大小。
float：浮动
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
margin: 50px;
}
.div2{
width: 200px;
height: 200px;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: left;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
<!-- 期望以下3个盒子在一行展示 -->
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>
css美化注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("images/beijing.jpg");
}
.rg_layout{
width: 900px;
height: 600px;
border: 8px solid #4d4d4d;
background: #3385ff;
/* 让div水平居中 */
margin: auto;
margin-top: 20px;
}
.rg_left{
/* border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color: yellow;
font-size: 20px;
}
.rg_left > p:last-child{
color: gainsboro;
font-size: 20px;
}
.rg_center{
/*border: 1px solid red;*/
float: left;
width: 450px;
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p{
font-size: 15px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding: 50px;
}
#username,#password,#email,#tel{
width: 250px;
height: 32px;
border: 1px solid gainsboro;
/*圆角*/
border-radius: 5px;
}
#btn_sub{
width: 150px;
height: 40px;
background: yellow;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="re_form">
<!-- 定义注册表单 -->
<form action="#" method="get">
<table>
<tr>
<td class="td_left"> <label for="username">用户名：</label> </td>
<td class="td_right"> <input type="text" name="username" id="username"> </td>
</tr>
<tr>
<td class="td_left"> <label for="password">密码：</label> </td>
<td class="td_right"> <input type="password" name="password" id="password"> </td>
</tr>
<tr>
<td class="td_left"> <label for="tel">手机号码：</label> </td>
<td class="td_right"> <input type="text" name="tel" id="tel"> </td>
</tr>
<tr>
<td class="td_left"> <label for="email">邮箱：</label> </td>
<td class="td_right"> <input type="email" name="email" id="email"> </td>
</tr>
<tr>
<td align="center" colspan="2"> <input type="submit" id="btn_sub" value="注册"> </td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
JavaScript
一门客户端脚本语言，不需要编译，直接被浏览器解析，可以用来增强用户与页面的交互。
JavaScript=ECMAScript+BOM+DOM
ECMAScript
与html的结合方式
- 内部方式
- 外部方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS与html的结合方式</title>
<!--
内部js
外部js
-->
<!-- script标签中的代码可以放在任意位置 -->
<!-- 内部js -->
<script>
alert("hello world");
</script>
<!-- 外部js-->
<script src="js/a.js"></script>
</head>
<body>
<input type="text">
</body>
</html>
a.js：
alert("我是外部的js文件");
注释
- 单行注释：
//注释内容 - 多行注释：
/*注释内容*/
数据类型
- 原始数据类型
number：数字（包括整数，小数，NaN）
string：字符串
boolean：布尔类型
null：一个对象为空的占位符
undefined：未定义
- 引用数据类型
变量
JavaScript是一门弱类型语言，在向内存申请空间时不需要定义存储数据的类型。
语法：var 变量名 = 变量值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
<script>
var a = 10;
document.write(a+"----"+typeof (a))
</script>
</head>
<body>
</body>
</html>
运算符
- 一元运算符
++ , --
- 算术运算符
+ ，- ，* ，/ ，%
- 赋值运算符
= ，+=， - =
- 比较运算符
> < >= <= == ===(全等于)
- 逻辑运算符
&&，|| ，！
- 三元运算符
? :
基本对象
- Function对象
创建：
function 方法名称(形参列表){
//方法体...
}
或：
var 方法名 = function(形参列表){
//方法体...
}
注意：
1.方法定义时，形参的类型不写，返回值类型也不写
2.Function是一个对象，可以被重复赋值
3.在js中，方法的调用只与方法的名称有关
4.在方法中有一个内置对象arguments,用于封装所有的实际参数
- Array对象
创建：
1. var 数组名 = new Array(元素列表);
2. var 数组名 = new Array(默认长度);
3. var 数组名 = [元素列表];
常用方法：
join(参数)：将数组的元素以指定的分隔符拼接为字符串
push(参数)：在数组末尾追加一个元素
注意：
1.数组长度可变
2.数组中的数据类型可变
- Date对象
创建：
var 对象名 = new Date();
常用方法：
toLocaleString()：返回当前date对象对应的本地时间格式的字符串
getTime()：获取当前时间对应的毫秒值
- Math对象
创建：
不用创建直接使用
常用方法：
random()：返回0到1之间的随机数(含0不含1)
ceil(参数)：向上取整
floor(参数)：向下取整
round(参数)：四舍五入
- Number
- String
原始数据类型对应的包装类
- RegExp对象：正则表达式对象，用于指定用户输入的规则
正则表达式：
1.单个字符：[]
如：[a]，[ab]，[a-zA-Z0-9]
注意：
\d：单个数字字符
\w：单个字母字符
2.量词符号
？：表示出现0次或1次
* ：表示出现0次或多次
+ : 表示出现1次或多次
{m,n}：表示出现至少m次，至多n次，m和n都可以缺省
如：\w*表示该字符串由0个或多个字母组成
3.开始符号：^
4.结束符号：$
创建：
var 对象名 = new RegExp("正则表达式");
var 对象名 = /正则表达式/;
常用方法：
test(参数)：验证指定的字符串是否符合正则表达式定义的规则
实例：
var reg = new RegExp("^\\w{6,12}$");
注意：
引号中的 \ 意为转义，故要使用两个 \
- Global
全局对象，所有方法不需要对象可以直接调用。
常用方法：
encodeURI()：url编码
decodeURI()：url解码
decodeURIComponent()：同上，但可编码字符更多
encodeURIComponent()：
parseInt()：将字符串转为数字，逐一判断每个字符是否为数字，转换直到不是数字为止
isNaN()：判断一个值是否为NaN
eval()：将指定的字符串转化成js代码并执行
DOM
功能：控制html文档的内容
document.getElementById(“id值”)：通过元素id值来获取元素对象
对象.innerHTML：标签体内容
事件简单学习
功能：某些组件被执行了某些操作，触发某些代码的执行
绑定事件
onclick：单击事件
第一种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js事件</title>
<script>
function fun() {
alert("我被点击了");
}
</script>
</head>
<body>
<img src="images/off.gif" onclick="fun();">
</body>
</html>
第二种方式：通过js获取元素对象，指定事件属性，设置对应是方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<img id="light" src="images/off.gif">
<script>
function f() {
alert("我被点击了");
}
//获取对象
var element = document.getElementById("light");
//绑定事件
element.onclick = f();
</script>
</body>
</html>
电灯实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯</title>
</head>
<body>
<img id="light" src="images/off.gif">
<script>
//获取图片对象
var light = document.getElementById("light");
var flag = false;
//绑定单击事件
light.onclick = function () {
if(flag){
//如果灯开着
light.src = "images/off.gif";
flag = false;
}else {
//如果灯关者
light.src = "images/on.gif";
flag = true;
}
}
</script>
</body>
</html>
BOM
浏览器对象模型。
组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器对象
- History：历史记录对象
- Location：地址栏对象
Window：窗口对象
创建：
不需要创建，直接使用即可，window.方法() 或者 方法名()
常用方法：
alert()：弹出警告框
confirm()：确定框，用户点击确定，返回true，否则返回false
prompt()：用户输入框，少用
open()：打开一个新的浏览器窗口，参数为打开的url，返回新窗口的window对象
close()：关闭一个窗口，谁调用就关闭谁
setTimeout()：设置一个一次性定时器,参数1为时间到执行的代码,参数2为毫秒值
返回定时器id
clearTimeout()：取消一次性定时器
setInterval()：设置循环定时器，参数同上
clearInterval()：取消循环定时器
轮播图实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="images/banner_1.jpg" width="100%">
<script>
var number = 1;
function f() {
number++;
if( number>3 ){
number = 1;
}
//获取图片对象
var img = document.getElementById("img");
img.src = "images/banner_"+number+".jpg";
}
//定时器
setInterval(f,3000);
</script>
</body>
</html>
常用属性：
用于获取其他BOM对象：
history
location
Navigator
Screen
获取DOM对象：
document
Location：地址栏对象
常用方法：
reload()：重新加载
常用属性：
href：设置或返回完整的url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面自动跳转</title>
<style>
span{
color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
var second = 5;
var time = document.getElementById("time");
function f() {
second--;
if( second <= 1 ){
location.href = "https://www.baidu.com";
}
time.innerHTML = second+"";
}
//定时器
setInterval(f,1000);
</script>
</body>
</html>
History：历史记录对象
常用方法：
back()：跳转到History对象中记录的上一个url
forword()：跳转到History对象中记录的下一个url
go(int n)：前进或后退n个历史记录
属性：
length：返回当前窗口历史记录列表中的url数量
DOM
文档对象模型。
W3C DOM标准被分为3个不同的部分。
- 核心 DOM
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个对象的父对象
- XML DOM
- HTML DOM
核心DOM
Document：文档对象
常用方法：
用于获取Element对象：
getElementById()
getElementsByTagName()：根据元素名称获取元素对象数组
getElementsByClassName()：根据class属性值获取元素对象数组
getElementsByName()：根据呢ame属性获取元素对象数组
用于获取DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
Element：元素对象
常用方法：
removeAttribute()：删除属性
setAttribute()：设置属性
Node：节点对象
常用方法：
CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点
removeChild()：删除（并返回）当前节点的指定子节点
replaceChild()：用新节点替换一个子节点
属性：
parentNode ：获取父节点
事件补充
常见的事件：
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。