一、HTML
HTML是Hyper Text Markup Language（超文本標記語言）的縮寫。
HTML不是一種編程語言，而是標記語言。
HTML的語法
- 雙標簽：
<標簽名></標簽名> - 單標簽：
<標簽名/>
HTML的元素和屬性
- <標簽名 屬性名=屬性值>元素</標簽名>
- <標簽名 屬性名=屬性值/>
HTML的結構
<!DOCTYPE html>————文件為html文件
<html lang="en">————語言類型：英語
<head></head>————頭
<body></body>————主體
</html>
HTML的常用標簽
1.瀏覽器標題
<head>
<title>瀏覽器標題</title>
</head>
2.標題與段落
<head>
<title>標題與段落</title>
</head>
<body>
<h1>一級標題h1</h1>
<h2>二級標題h2</h2>
<h3>三級標題h3</h3>
<h4>四級標題h4</h4>
<h5>五級標題h5</h5>
<h6>六級標題h6</h6>
<p>段落標簽p</p>
</body>
3.水平線與換行符
<hr/>
<br/>
4.常見的轉義符
空格：
大於號：>
小於號:<
5.鏈接
<a href="//www.baidu.com">點擊我，本窗口訪問百度</a>
<a href="//www.baidu.com" target="_blank">點擊我，新窗口訪問百度</a>
6.圖片標簽
<img src="1.png" alt="如果圖片加載失敗，顯示的文字">
7.表格
<!--
table標簽:
border 邊框
width 寬度
tr 行
th 表頭
th 普通列
-->
<table border="1px" width="300px">
<tr>
<th>表頭th</th>
<th>表頭th</th>
</tr>
<tr>
<td>普通列td</td>
<td>普通列td</td>
</tr>
</table>
8.列表
<ul>
<li>無序列表項1</li>
<li>無序列表項2</li>
</ul>
<ol>
<li>有序列表項1</li>
<li>有序列表項2</li>
</ol>
9.常見的無意義標簽
<!--
div 占用整行
span 不占用整行，長度取決於內部元素的長度
-->
<div>div標簽</div>
<span>span標簽</span>
10.表單
表單一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表單1</title>
</head>
<body>
<!--
form標簽
action 提交地址
method 請求方式(get或post,默認get)
get 提交的數據參數在url中，不安全
post 提交的數據被加密，url中無法看到，在action中
enctype="multipart/form-data" 如果提交文件，需要添加這個參數
-->
<form action="#" method="post" enctype="multipart/form-data">
</form>
</body>
</html>
表單二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表單2</title>
</head>
<body>
<!--
input標簽
1.文本框 type="text"
2.密碼框 type="password"
3.單選框 type="radio"
4.復選框 type="checkbox"
5.文件框 type="file"
6.按鈕 type="button"
7.提交 type="submit"
8.重置 type="reset"
-->
<form action="#" method="post" enctype="multipart/form-data">
1.用戶名（文本框text）:
<input type="text" name="username">
<hr/>
2.密碼（密碼框password）：<input type="password" name="password" value="">
<hr/>
3.性別（單選框radio）：
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<hr/>
4.愛好（復選框checkbox）：
學Web<input type="checkbox" name="hobby" value="web">
學爬蟲<input type="checkbox" name="hobby" value="spider">
<hr/>
5.上傳頭像（文件框file）：
<input type="file" name="img">
<hr/>
6.按鈕（button）:
<input type="button" value="空按鈕">
<hr/>
7.提交（submit）:
<input type="submit" value="提交按鈕">
<hr/>
8.重置（reset）:
<input type="reset" value="重置按鈕">
<hr/>
</form>
</body>
</html>
表單三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表單3</title>
</head>
<body>
<!--
下拉框：select和option
大文本：textarea
cols 列數
rows 行數
-->
<form action="#" method="post" enctype="multipart/form-data">
<select name="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
<textarea name="comment" cols="30" rows="10"></textarea>
</form>
</body>
</html>
二、CSS
CSS是Cascading Style Sheets（層疊樣式表）的縮寫。
CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS的語法
格式：
屬性：屬性值；
例如：
設置背景顏色為藍色：
background-color:blue；
CSS的引入方式
- 內嵌式：
<div style="background-color: blue"></div>
- 內部式：
<style type="text/css">
/* css代碼 */
</style>
- 外部式：
<link rel="stylesheet" type="text/css" href="css文件地址">
CSS的選擇器
<style type="text/css">
/*
標簽選擇器：【標簽名】 {};
ID選擇器：#【ID值】{}；
類選擇器：.【類名】{}；
*/
body{
/*background-color: grey;*/
background-image: url("1.png");
background-repeat: no-repeat;
}
#div_id1{
background-color: red;
font-size: 72px;
font-weight: lighter;
}
.div_class1{
background-color: green;
border:solid 1px yellow;
}
</style>
CSS的常用樣式
- 背景顏色：backgroud-color:顏色；
- 背景圖片：background-image:url（圖片地址）；
- 圖片平鋪：background-repeat：
- repeat 水平垂直都平鋪（默認）
- repeat-x 水平平鋪
- repeat-y 垂直平鋪
- no-repeat 不平鋪
- 邊框：border:邊框類型，尺寸，顏色;
三、JavaScript
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。
JavaScript的引入方式
- 內嵌式：
<script type="text/javascript">
/*
js代碼
*/
// alert(【對話框內容】);
alert('你好，JavaScript');
</script>
- 外部式：
<script type="text/javascript" src="myjs.js"></script>
四、JQuery
JQuery的引入
從官方網站下載JQuery，然后引入：
<head>
<script type="text/javascript" src="【本地JQuery地址】"></script>
</head>
JQuery的選擇器
JQuery的對象
- JQuery對象習慣性采用$開口，例如：
$div = $("div");
- JQuery對象的格式是[Object]
jsObject = $jqueryObject[0];
jsObject = $jqueryObject.get(0);
- JQuery對象轉JS對象
$jqueryObject = $(jsObject);
JQuery事件
<body>
<input type="button" value="按鈕" id="button_id">
<script type="text/javascript">
//1.得到按鈕對象
$buttonElement = $('#button_id');
//2.綁定點擊事件
// $buttonElement.click(function(){
// alert('按鈕被點擊了')
// });
$buttonElement.click(function(){
alert('按鈕被點擊了');
});
</script>
</body>
JQuery動畫
<body>
<input type="button" value="隱藏" id="button_hide">
<input type="button" value="顯示" id="button_show">
<ul id="ul_id">
<li>Python</li>
<li>Java</li>
</ul>
<script type="text/javascript">
// 1.得到兩個按鈕對象
$button_hide = $('#button_hide');
$button_show = $('#button_show');
// 2.得到ul對象
$ul = $('#ul_id');
// 隱藏
$button_hide.click(function(){
$ul.hide("slow");
});
// 顯示
$button_show.click(function(){
$ul.show("slow");
});
</script>
</body>
注意：speed:slow、normal、fast
為我心愛的女孩~~