<!-- html5标识-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--页面的字符集-->
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
<hr>
<font size="5" color="#b22222">Hello!</font> <!--font标签不建议使用，其功能可以用CSS完成-->
<hr>
<center><b>赤壁赋</b><br><i>唐 苏轼</i></center> <!--center标签不建议使用，其功能可以用CSS完成-->
<p>壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。<u>浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。</u></p>
<p>于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉；余音袅袅，不绝如缕。<u>舞幽壑之潜蛟，泣孤舟之嫠妇。</u></p>
</body>
</html>
转义字符
| HTML原代码 | 显示结果 | 描述 |
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | | 不断行的空白 |
图片、音频、视频标签
| 标签 | 描述 |
| 定义图片 | |
| 定义音频 | |
| 定义视频 |
img：定义图片
➢src：规定显示图像的URL (统一资源定位符)
➢height：定义图像的高度
➢width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、 OGG
➢src：规定音频的URL
➢controls：显示播放控件
video：定义视频。支持的音频格式：MP4、 WebM、OGG
➢src：规定视频的URL
➢controls：显示播放控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
资源路径:
1.绝对路径：完整路径
2.相对路径：相对位置关系
./ 表示当前目录,可忽略不写
../表示上一级目录
尺寸单位:
1. px:像素
2.百分比:
-->
<img src="a.jpg" width="400" height="400" alt="">
<audio src="b.mp3" controls></audio>
<video src="./c.mp4" controls width="400" height="400"></video>
</body>
</html>
超链接、列表标签
超链接标签
| 标签 | 描述 |
| 定义超链接，用于链接到另一个资源 |
href：指定访问资源的URL
target：指定打开资源的方式
➢_self：默认值，在当前页面打开
➢_ blank：在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://blog.csdn.net/GLATY?spm=1011.2415.3001.5343" target="_blank">超链接</a>
</body>
</html>
列表标签
列表有两种：序列表(order list)、无序列表(unorder list)
| 标签 | 描述 |
|
| 定义有序列表 |
|
| 定义无序列表 |
| 定义列表项 |
type：设置项目符号（不建议使用，其功能可以用CSS完成）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="A">
<li>Java</li>
<li>MySQL</li>
<li>JavaWeb</li>
</ul>
<ol>
<li>Java</li>
<li>MySQL</li>
<li>JavaWeb</li>
</ol>
</body>
</html>
表格、布局标签
表格标签
| 标签 | 描述 | |
|
| 定义表格 | |
| 定义行 | ||
| 定义单元格 | ||
| 定义表头单元格 |
table：定义表格
➢border：规定表格边框的宽度
➢width：规定表格的宽度
➢cellspacing：规定单元格之间的空白
tr：定义行
➢align：定义表格行的内容对齐方式
td：定义单元格
➢rowspan：规定单元格可横跨的行数
➢colspan：规定单元格可横跨的列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="400" align="center"> <!--border、cellspacing、width、align不建议使用，其功能可以用CSS完成-->
<tr align="center">
<th rowspan="2" colspan="2">说明</th>
<th>^_^</th>
</tr>
<tr>
<th>^_^</th>
</tr>
<tr align="center">
<th>标签</th>
<th>描述</th>
<th>说明</th>
</tr>
<tr align="center">
<td>table</td>
<td>定义表格</td>
<th>***</th>
</tr>
<tr align="center">
<td>tr</td>
<td>定义行</td>
<th>***</th>
</tr>
<tr align="center">
<td>td</td>
<td>定义单元格</td>
<th>***</th>
</tr>
</table>
</body>
</html>
布局标签
| 标签 | 描述 |
| 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页 | |
| 用于组合行内元素。 |
表单标签
表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的input元素、下拉列表、 文本域等
| 标签 | 描述 |
| 定义表单 | |
| 定义表单项，通过type属性控制输入形式 | |
| 为表单项定义标注 | |
| 定义下拉列表 | |
| 定义下拉列表的列表项 | |
| 定义文本域 |
form：定义表单
➢action：规定当提交表单的URL。(表单项数据要想被提交，则必须指定其name属性)
➢method：规定用于发送表单数据的方式
get：浏览器会将数据直接附在表单的action URL之后。URL大小有限制4kb左右
post：浏览器会将数据放到http请求消息体中。大小无限制
input： 定义表单项
通过type属性控制输入形式
| type取值 | 描述 |
| text | 默认值。定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件.上传按钮 |
| hidden | 定义隐藏的输入字段 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| button | 定义可点击按钮 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post"> <!--#为本页-->
<input type="hidden" name="id" value="1">
<label>用户名字：<input type="text" name="username"><br> </label>
<label>代号：<input type="text" name="code"><br> </label>
<label>密文：<input type="password" name="password"></label><br>
<label><input type="radio" name="gen" value="1">男</label><label> <input type="radio" name="gen" value="2">女 <br></label>
<label>用户类型：
<select name="kind">
<option>A</option>
<option>B</option>
</select><br>
</label>
<label><input type="checkbox" name="other" value="1">备份</label><label><input type="checkbox" name="other" value="2">下载</label><br>
<label>说明：<textarea cols="20" rows="1">xxx</textarea><br> </label>
资料<input type="file"><br>
<br>
<input type="reset"> <input type="button" value="..."><br>
<input type="submit" value="提交信息">
</form>
</body>
</html>
CSS
CSS是一门语言，用于控制网页表现
CSS(Cascading Style Sheet)：层叠样式表
CSS导入方式
CSS导入HTML有三种方式:
内联样式
在标签内部使用style属性，属性值是CSS属性键值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="color: red">hello</div>
</body>
</html>
内部样式
定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<span>hello</span>
</body>
</html>
外部样式
定义link标签，引入外部的CSS文件
1.创建一个文件，写CSS代码
p{
color: red;
}
2.导入到HTML中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./css.css" rel="stylesheet"><!--href是引入的路径，rel是文件的类型，stylesheet表示是css类型-->
</head>
<body>
<p>hello</p>
</body>
</html>
CSS选择方式
选择器是选取需设置样式的元素(标签)
分类：元素选择器、id选择器、类选择器
元素选择器
元素名称{color: red;}
id选择器(唯一)
#id属性值{color: red;}
类选择器
.class属性值{color: red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: red;
}
#name {
color: blue;
}
.cls{
color: green;
}
</style>
</head>
<body>
<div>hello</div>
<div id="name">hello</div>
<div class="cls">hello</div>
</body>
</html>
JavaScript
JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互（JavaScript能够改变HTML内容、JavaScript能改变图像的src属性值JavaScript能够进行表单验证）
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。
ECMAScript 6 (ES6)是最新的JavaScript版本(发布于2015年)。
引入方式
有内部脚本、外部脚本两种
内部脚本
将JS代码定义在HTML页面中
在HTML中，JavaScript 代码必须位于标签之间
<script>
alert("hello~~");
</script>
在HTML文档中可以在任意地方，放置任意数量的
一般把脚本置于 元素的底部，可改善显示速度，因为脚本执行会拖慢显示
外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
1.创建外部文件，在文件中写JS代码（name.js）
alert("hello~~");
2.将JS文件导入到HXML中
<script src=./name.js"> </script> <!--src为路径-->
外部脚本不能包含
基础语法
书写语法
区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释:
➢单行注释：//注释内容
➢多行注释：/* 注释内容*/
大括号表示代码块
输出语句
使用window.alert()写入警告框（window. 可以省略）
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
window.alert("hello1") //弹出警告框
alert("hello2") //与上列代码功能一样
document.write("hello") //写入HTML
console.log("hello") // 写入浏览器的控制台
变量
JavaScript中用var关键字(variable 的缩写)来声明变量，而且是全局变量还可以重复定义
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
➢组成字符可以是任何字母、数字、下划线 (_)或美元符号($)
➢数字不能开头
➢建议使用驼峰命名
ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ECMAScript 6新增了const关键字，用来声明一个常量(值不可更改)。一旦声明，常量的值就不能改变。
数据类型
JavaScript中分为：原始类型和引用类型
5种原始类型:
number：数字(整数、小数、NaN(Not a Number))
string：字符、字符串，单双引皆可
boolean：布尔。true, false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
var num = 1
typrof num
数据不赋值默认为undefined类型
运算符
一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，，=…
逻辑运算符：&&，||，！
三元运算符：条件表达式 ? truevalue : false_value
运算符与Java中的基本一样
* 使用==时，会先判断类型是否一样，如果不一样，则进行类型转换再比较值
*使用===时，会判断类型是否一样，如果不一样会直接返回false
类型转换
1.其它类型转换为number
string会按字符串的字面值转为数字，如果字面值不是数字则转换NaN，一般使用paresInt函数
boolean：true转换为1，false转换为0
2.其它类型转换为Boolean
number：0和NaN转换为false，其它转为0
string：空字符串转为0，其它转为true
null：转为false
undefind：转为false
流程控制语句
有if、switch、for、while、do.while，与Java的用法一摸一样
函数
函数是被设计为执行特定任务的代码块
定义函数通过function关键词进行定义
function name(参数1，参数2…){
要执行的代码
}
f
var return = name(参数, …)
*形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return即可
调用时与Java中的方法类似
result = name();
js函数调用可以传递任意个数参数
常用对象
Array对象
Array原来定义数组
定义
var 变量名 = new Arrsy(素列表);
var 变量名 = [元素列表];
访问
arr [索引] = 值
索引从0开始
JS数组类似于Java集合，长度、类型都可变。
Array对象属性
| 属性 | 概述 |
| constructor | 返回对创建此对象的数组函数的引用 |
| length | 设置或返回数组中元素的数目 |
| prototype | 使您有能力向对象添加属性和方法 |
对象方法
| 方法 | 概述 |
| concat() | 连接两个或更的数组,并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。 元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shif() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
String
定义
var 变量名 = new String(a); //方法一
var 变量名 = s; //方法二
属性
| 属性 | 概述 |
| length | 字符串的长度 |
方法
| 方法 | 概述 |
| charAt() | 返回在指定位置的字符 |
| IndexOf() | 检索字符串 |
Java里有的方法JS里差不多也都有
*trinm()：该方法可以去除字符串两端的空白字符
自定义对象
格式
var 对象名称 = {
属性名称1：属性值1,
属性名称2：属性值2,
…
函数名称：function(形参列表){
}
…
};
BOM&DOM&事件监听
BOM对象
简介
Browser Object Model 浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
