目录
前端示例代码网站推荐：http://codepen.io
一、HTML
什么是HTML？
HTML是一门语言，所有的网页都是用HTML编写的
HTML（HyperText Markup Language）：超文本标记语言
->超文本：超越了文本限制，比普通文本更加强大，除了文字信息，还可以定义图片，音频，视频等内容
->标记语言：由标签构成的语言
HTML运行在浏览器上，HTML标签由浏览器解析
HTML标签都是事先预定义好的。例如<img>展示图片
W3C标准：网页主要由三部分组成
->结构：HTML
->表现：CSS
->行为：JavaScript
w3school官网：https://www.w3school.com.cn/
1.HTML快速入门
基本格式
<html>
<head>
<title>标题</title>
</head>
<body>
<font color = "red">color设置颜色</font>
</body>
</html>2.基础标签
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>3.图片音频视频标签
img：定义图片
->src：规定显示图像的URL（统一资源定位符）
->height：定义图形高度
-> width：定义图像宽度
audio：定义音频。支持MP3，WAV，OGC
->src：规定音频的URL
->controls：显示播放控件
video：定义视频。支持MP4，WebM，OGC
->src：规定视频的URL
->controls：显示播放控件
4.超链接标签
<a>定义超链接，用于链接到另一个资源</a>href：指定访问资源的URL
target：指定打开资源的方式
->_self：默认值，在当前页面打开
->_blank：在空白页面打开
5.列表标签
type:设置项目符号
1.有序列表
<ol type = "A">
<li>1<li>
<li>2<li>
<li>3<li>
</ol>2.无需列表
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
</ul>6.表格标签/布局标签
table：定义表格
->border：规定表格框的宽度
->width：规定表格的宽度
->cellspacing：规定单元格之间的空白
tr：定义行
->align：定义表格行的内容对齐方式
td：定义单元格
->rowspan：规定单元格可横跨行数
->colspan：规定单元格可横跨列数
7.表单标签
表单：在网页中主要负责数据采集功能，使用<from>标签定义表单
表单项(元素)：不同类型的input元素，下拉列表，文本域等
from：定义表单
->action：规定当提交表单时向何处发送表单数据，URL
->method：规定用于发送表单数据的方式
get：浏览器会将数据直接附在表单的action URL之后，大小有限制
post：浏览器会将数据放到http请求消息体中，大小无限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
form：
action:指定表单数据提交的URL
* 表单项数据要想被提交，则必须指定其name属性
method：指定表单提交的方式
1. get：默认值
* 请求参数会拼接在URL后边
* url的长度有限制 4KB
2. post：
* 请求参数会在http请求协议的请求体中
* 请求参数无限制的
-->
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
</form>
</body>
</html>表单项
<input>：表单项，通过type属性控制输入形式
<select>：定义下拉列表，<option>定义列表项
<textarea>：文本域
<!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="123">
<!--提交时提交name=value的键值对-->
<!--label包裹 点击用户名三个字即可选中输入框 for指定对应表单的id-->
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<!--设置value，提交时提交value的值-->
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市:
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
</html>二、CSS
什么是CSS？
CSS是一门语言，用于控制网页的表现
CSS（Cascading Style Sheet）：层叠样式表
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>Hello CSS</div>
</body>
</html>1.CSS导入方式
CSS导入HTML有三种方式
1.内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style = "color:red">Hello CSS</div>2.内部样式：定义<style>标签，在标签内部定义css样式
<style type = "text/css">
div{
color:red;
}
</style>
3.外部样式：定义link标签，引入外部的css文件
<link rel="styleheet" href="demo.css">demo.css
div{
color:red;
}2.CSS选择器
概念：选择器是选取需设置样式的元素（标签）
分类：
1.元素选择器
元素名称{color:red;}
div{color:red;}2.id选择器
#id属性值{color:red;}
#name{color:red;}
<div id="name">hello</div>3.类选择器
.class属性值{color:red;}
.cls{color:red;}
<div class="cls">hello</div>三、JavaScript
JavaScript是一门跨平台，面向对象的脚本语言，来控制网页的行为，它能使网页可交互
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似
JavaScript简称JS，在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
ECMAScript（ES6）是最新的JavaScript版本
1.JavaScript引入方式
内部脚本
将JavaScript代码定义在HTML页面中
在HTML中，JavaScript代码必须位于<script>与</script>标签之间
<script>
alert("hello js");
</script>在HTML文档中可以在任意地方，放置任意数量的<script>
一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
外部脚本
将JS代码定义在外部JS文件中，然后引入HTML页面
外部文件：demo.js：
alert("hello js");引入外部js文件
<script src="../js/demo.js"></script>外部脚本不能包含<script>标签
<script>标签不能自闭合
2.JavaScript基础语法
1.书写语法
区分大小写：与Java一样，变量名函数名以及其他一切都是区分大小写的
每行结尾分号可有可无
注释与Java一样
大括号表示代码块
2.输出语句
window.alert("hello js")//弹出警告框
document.write("hello js")//写入HTML
console.log("hello js")//写入控制台3.变量
JavaScript中用var关键字来声明变量
var:
1. 作用域：全局变量
2. 变量可以重复定义
var test=20;
test="aaa"JavaScript是一门弱类型语言，变量可以存放不同类型的值
ECMAScript6新增了let关键字来定义变量，他的用法类似于var，但是所声明的变量，只在let关键字所在的代码块有效，且不允许重复声明
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变
4.数据类型
JavaScript中分为：原始类型和引用类型
5种原始类型：
number：数字（整数，小数，NaN（Not a Number））
string：字符，字符串，单双引都可
boolean：布尔 true false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可获取数据类型
alert(typeof age);
5.运算符
/*
==:
1.判断类型是否一样，如果不一样，则先进行转换
2.再去比较其值
===：全等于
1.判断类型是否一样，如果不一样，直接返回false
2.一样再去比较其值
*/
var age1 = 20;
var agr2 = "20";
alert(age1==age2);//true
alert(age1===age2);//false类型转换：
* 其他类型转为number：
1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
2. boolean: true 转为1，false转为0
* 其他类型转为boolean：
1. number:0和NaN转为false，其他的数字转为true
2. string:空字符串转为false，其他的字符串转为true
3. null:false
4. undefined:false
6.流程控制语句(与Java同)
<script>
//1. if
var count = 3;
if (count == 3) {
alert(count);
}
//2. switch
var num = 3;
switch (num) {
case 1: {
alert("星期一");
break;
}
case 2: {
alert("星期二");
break;
}
case 3: {
alert("星期三");
break;
}
case 4: {
alert("星期四");
break;
}
case 5: {
alert("星期五");
break;
}
case 6: {
alert("星期六");
break;
}
case 7: {
alert("星期日");
break;
}
default: {
alert("输入的星期有误");
break;
}
}
// 3. for
var sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
alert(sum);
// 4. while
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
alert(sum);
// 5. do...while
var sum = 0;
var i = 1;
do {
sum += i;
i++;
}
while (i <= 100);
alert(sum);
</script>7.函数
函数（方法）是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键字进行定义
function functionName(参数1,参数2...){
执行代码
}注意：
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义，可以在函数内部直接使用return返回即可
function add(a,b){
return a+b;
}调用：函数名称（实际参数列表）
let result = add(1,2);定义方式二：
var functionName = function(参数列表){
执行代码
}
var add = function(a,b){
return a+b;
}
调用：在JS中，函数调用可以传递任意个参数
let result = add(1,2,3);3.JavaScript对象
Array
JavaScript Array对象用于定义数组
var 变量名 = new Array(元素列表);//方式一
var arr = new Array(1,2,3);
var 变量名 = [元素列表];//方式二
var arr = [1,2,3];
//访问
arr[索引] = 值;
arr[0] = 1;JS数组类似于Java集合，长度，类型都可以改变
String
var 变量名 = new String(s);//方式一
var str = new String("hello");
var 变量名 = s;//方式二
var str = "hello";
var str = 'hello';属性:length 字符串的长度
方法：charAt（）返回指定位置的字符 indexOf（）检索字符串
trim（）去除字符串前后两端空白字符
4.BOM
Browser Object Model浏览器对象模型
JavaScript将浏览器的各个组成部分封装成为对象
组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
History
获取：使用window.history获取，其中window.可以省略
window.history.方法();
history.方法();
方法：
back():加载history列表中的前一个URL
forward():加载history列表中的下一个URL
Location
获取：使用window.location获取，其中window.可以省略
window.location.方法();
location.方法();
属性：
href：设置或返回完整的URL
5.DOM
Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
JavaScript 通过 DOM， 就能够对 HTML进行操作了
改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素
DOM相关概念： DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。
该标准被分为 3 个不同的部分：
1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
2. XML DOM： 针对 XML 文档的标准模型
3. HTML DOM： 针对 HTML 文档的标准模型
该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
例如： <img>标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。
获取Element对象
获取：使用Document对象的方法来获取
1.getElementById：更具id属性值获取，返回一个Element对象
2.getElementByTagName：更具标签名称获取，返回一个Element对象数组
3.getElementByName：更具name属性值获取，返回一个Element对象数组
4.getElementByClassName：更具class属性值获取，返回一个Element对象数组
<div class="cls">xxxx</div> <br>
<div class="cls">xxxxx</div> <br>
var divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML：设置元素内容
*/
for (let i = 0; i < divs.length; i++) {
divs[i].style.color = 'red';
divs[i].innerHTML = "呵呵";
}6.事件监听
事件：HTML事件是发生在HTML元素上的“事情”，比如：
按钮被点击
鼠标移动到元素之上
按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定
方式一：通过HTML标签中的事件属性进行绑定
<input type="button" onclick='on()'>
function on(){
alert("xx");
}方式二：通过DOM元素属性绑定
<intput type="button" id="btn">
document.getElementById("btn").onclick=function(){
alert("xx");
}常见事件
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
