前言
本文是学习html+css+js的笔记，目标是快速了解前端语言，并不是成为前端高手
教程推荐
菜鸟教程+视频配套
html
基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
head标签内的内容不会被浏览器渲染，body标签为可见内容
HTML可以做什么？
• 可以设置文本的格式，比如标题、字号、文本颜色、段落等
• 可以创建列表
• 可以插入图像和媒体
• 可以创建表格
• 可以创建超链接
标签
通过不同的tab标签显示不同的文本形式
<title>HTML IS GOOD!</title>
<h1>标题1</h1>
<h2>标题2</h2>
<!-- 注释 -->
<p>段落 文本</p>
在HTML中的标签大小写都可以，在xhtml中则必须小写
列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
表格
<table>//定义表格
<thead>//定义表格页眉
<tr>//定义行
<th>姓名</th>//定义表头
<th>年龄</th>
<th>地址</th>
<th>职业</th>
</tr>
</thead>
<tbody>//定义表格主体
<tr>
<th>小明</th>
<th>18</th>
<th>赣水路</th>
<th>三和大神</th>
</tr>
<tr>
<th>小红</th>
<th>22</th>
<th>学府路</th>
<th>家里蹲</th>
</tr>
</tbody>
</table>
属性
通过属性实现更多设置
<a href="http://www.baidu.com" target="_blank">百度跳转新标签页打开</a>
<!-- 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容跳转到新的文档或者当前文档中的某个部分 -->
<img src="fz.jpg" width="258" height="390">
适用于大多数HTML元素的属性
| 属性 | 作用 |
|---|---|
| class | 为html元素定义一个或多个类名 |
| id | 定义元素唯一id |
| style | 规定元素的行内样式 |
| title | 描述了元素的额外信息 |
常用标签
link
定义了文档与外部资源之间的关系，通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
style
定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染HTML文档
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
meta
描述了一些元数据，不显示在页面上，会被浏览器解析
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
div&span
区块元素，便于设置
表单
<form>
<div>
<lable>手机号/邮箱</lable>
<input type="text" name="phone&email" placeholder="请输入手机号或邮箱">
</div>
<div>
<label>密码</label>
<input type="password" name="password" placeholder="请输入密码">、
</div>
<input type="submit" name="submit" value="submit">
</form>
提交表单的几种方式
<form action="form.js" method="POST">
<form name="input" action="html_form_action.php" method="GET">
<form action="http://localhost:3308/user" method="POST" name="post">
form默认method属性为GET，提交后会跳转刷新到action页面，其默认的请求头的content-type为x-www-form-urlencoded==，当一个form表单内部，所有的input中只有一个type="text"时，enter键会有默认的提交行为（没有试验过）
无刷新页面提交，设置隐藏的iframe页面，将target指向它，则不会跳转
<form action="http://localhost:3308/user" method="POST" name="post" target="targetIfr">
<p>name:<input type="text" name="username"></p>
<p>password:<input type="password" name="password"></p>
<input type="submit" value="提交">
</form>
<iframe name="targetIfr" style="display: none"></iframe>
其他提交暂不说明
举例
一个百度搜索框（传递参数是通过name定位符，并不是通过url）
<form action="https://www.baidu.com/s" method="GET">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度Logo" />
<input type="text" name="wd">
<input type="submit">
</form>
上传文件
<form name="form名称" action="请求地址" method="请求类型" enctype ="multipart/form-data">
<input type="file" name="">
<input type="text" name="">
<input type="submit" value="提交">
</form>
iframe
<iframe src="http://www.runoob.com" name="iframe_a"></iframe>
HTML实体
区分保留字符和文本，常用实体编码，对大小写敏感
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| ＜ | 小于号 | < | < |
| ＞ | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 单引号 | '(IE不支持) | ' |
url编码
url传输只支持ascii字符集，在传输其他字符比如汉字是需要进行编码转换的
eg:百度搜索"测试"，会自动进行url编码，是utf8的编码加上%，测->E6B58B，试->E8AF95
常见状态码
| 状态码 | 说明 |
|---|---|
| 200 | 请求成功 |
| 301 | 页面已经转移至新的url |
| 302 | 页面临时转移至新的url |
| 304 | 未按预期修改文档。客户端有缓冲的文档并发出一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用 |
| 400 | 因为语法错误，服务器未能理解请求 |
| 401 | 合法请求，但对被请求页面的访问被禁止。因为需要身份验证，客户端没有提供或身份验证失败 |
| 403 | 合法请求，但访问被禁止 |
| 404 | 服务器无法找到被请求的页面 |
| 405 | 请求中的方法不被允许 |
| 500 | 请求未完成，服务器遇到不可预知的情况 |
| 501 | 请求未完成，服务器不支持所请求的功能，或服务器无法完成请求 |
| 502 | 请求未完成，服务器充当网关或代理的角色时，从上游服务器收到一个无效的响应 |
| 503 | 服务器当前不可用（过载或宕机） |
| 504 | 网关超时，服务器充当网关或代理时，未能从上游服务器收到一个及时的响应 |
css
层叠样式表，定义如何显示HTML元素，样式，布局，不是一种编程语言
三种添加方式
外部样式表：保存在 .css 文件中，在HTML里使用<link>引用
css/style.css
p{
color:brown;
}
a.html
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<p>HELLO WORLD!</p>
内部样式表：不是用外部css文件，放在HTML的<style>标签里
<style>
p{
color: chartreuse;
}
</style>
<p> HELLO WORLD! </p>
内联样式：仅影响一个元素，在HTML元素的style属性中添加
<p style="color: cornflowerblue;">HELLO WORLD!</p>
选择器
id一般是唯一的，class和tag没有要求
js
HTML定义了网页的内容，css描述了网页的布局，JavaScript控制了网页的行为
它是一种真正的编程语言
三种添加JavaScript的方式
内部的JavaScript
<script>
//your script
</script>
外部的JavaScript
<script src="js/script.js"></script>
内联的JavaScript
<button onclick="creatParagraph()">
Click me
</button>
0.1+0.2为什么不等于0.3？
js遵循 IEEE 754 尾数位限制，转换为二进制为无限小数，会将后面多余的位截掉，产生误差
常量&变量
const A = 'aa'; //定义常量
var b = 'bb'; //定义变量
console.log(A,b); //打印到控制台
关于作用域
var定义的变量可以在任何地方访问到
const和let（定义变量的另一种）有作用域，即只能在当前的代码块访问到
改变html内容
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
类型相关
x = "3" + 4 + 5; // 345
y = 3 + 4 + "5"; // 75
console.log(x,y)
console.log(123=="123"); //true 会进行强制类型转换
console.log(123==="123"); //false
do while循环
先执行do语句，再进行while判断，条件为真再执行do语句，直到不满足while语句，跳出循环
var age = 20;
var a = 19;
do {
a++;
console.log(a);
}while (age==a);
for循环
var age = 20;
for (let i=0;i<5;i++){
age++;
console.log(age);
}
switch循环
没有break跳出循环会继续执行下一个case
names = "小明";
switch(names){
case "小明":
console.log("你好，小明");
break;
case "小红":
console.log("你好，小红");
break;
default:
console.log("你好，新朋友")
}
三元运算符
var age = 20;
var allowed = age >= 18 ? "yes" : "no";
console.log(allowed);
对象
是一些数据（属性）和函数（方法）的集合体
var obj = new Object();
var obj2 = {};
obj = {
names:"xixi",
age:"20",
email:"xixi@haha.com",
contact:{
phone:"1235855",
Telegram:"@xixi"
}
}
console.log(obj)
console.log(obj.names)
console.log(obj.contact.phone)
console.log(obj['contact']['phone'])
数组
空值会显示
var a = new Array();
a[0] = "dog";
a[1] = "cat";
a[5] = "tiger";
console.log(a)
遍历数组
b = ["dog","cat","tiger"];
for (let i = 0; i < b.length; i++){
console.log(b[i],a[i]);
}
遍历数组for in 会跳过空值
for (let i in a){
console.log(a[i]);
}
其他一些
b = ["dog","cat","tiger"];
b.push("sheep"); //从最后添加一个值
b.pop(); //从最后删除一个值
b.reverse(); //倒序输出
console.log(b)
b.shift(); //删除第一个值
b.unshift("elephant"); //从第一位增加值
函数
直接调用，不传参，它调用同名变量
let a =1;
function add(){
a++;
}
add();
console.log(a);
不要直接传入变量名，直接传具体值
let a = 1;
function add(x=6){
a+=x;
}
add(4); //定义变量x传入x不能执行
console.log(a); //结果为5，x=6为函数没传参的默认值
函数举例
function add(){
let sum = 0;
for (let i=0, j=arguments.length; i<j; i++ ){
sum += arguments[i];
}
return sum;
}
let sum = add(1,2,3,4,5,6,7,8,9,10);
console.log(sum) //结果为55
函数闭包
function makeAdder(a){
return function(b){
return a+b;
};
}
var x = makeAdder(5);
var sum = x(6);
console.log(sum);
回调函数
function func1(callback){
callback(1,2);
}
function add(a,b){
document.write(a+b);
}
func1(add);
闭包函数是函数套函数，里面的函数能访问外层函数的值，回调函数是可以将函数作为参数传递并执行的
回调函数是异步调用，加快效率
表单
HTML教程提到过的
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
调用
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script src="js/script.js"></script>
