前言
本文是學習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>
