html ： 1、相當於沒有穿衣服的人，一套瀏覽器認識的規則， 2、開發者： 學習html規則 開發後臺程式： -寫html文件(充當模板) -資料庫獲取數據，然後替換到html文件的指定位置（web框架） 3、本地測試 -找到文件路徑，直接用瀏覽器打開 -用pycharm打開測試 4、編寫html ...
html ：
1、相當於沒有穿衣服的人，一套瀏覽器認識的規則，
2、開發者：
學習html規則
開發後臺程式：
-寫html文件(充當模板)
-資料庫獲取數據，然後替換到html文件的指定位置（web框架）
3、本地測試
-找到文件路徑，直接用瀏覽器打開
-用pycharm打開測試
4、編寫html文件
一對尖括弧就是一對標簽，標簽內部就是屬性<html lang=“html屬性”>html標簽</html>
5、標簽
-自閉合標簽
<meta charset="UTF-8">
-主動閉合標簽<a>鏈接跳轉</a>
註釋<!-- -->
6、head標簽中
<meta ->編碼，跳轉，刷新，關鍵字，描述，IE相容
<link/>插入圖標
<style/>
<scrip/>
7、input系列 + form
<form action="http://sougou.com" method="GET" enctype="multipart/form-data">
action:提交表單
只有<input>中的內容才能提交到伺服器
method:
GET：提交時拼接到url中提交給伺服器 可在網站網址url框看到內容
POST: 提交時放到HTTP包內發給伺服器，請求頭，請求內容
<input type="text"/> name設置文本框屬性
<input type="password"/> name設置文本框屬性
<input type="button" value="登陸3"/> 按鈕
<input type="submit" value="登陸4"/>提交表單
<input type="radio" /> 單選框value，name屬性 checked=checked預設值（neme相同互斥）
<input type="checkbox"/> 覆選框value，name屬性（批量獲取數據）
<input type="file"/> 上傳文件依賴from表單的一個屬性<form enctype="multipart/form-data">
<input type="rest"/> 重置
<textarea name="meno">多行文本</textarea>
<select name="city" multiple="multiple">name，內部option（下拉框內容）
<option value="1">北京</option> value提交到後臺 multiple多選
<a><a/>標簽
做鏈接
做錨
<img>插入圖片
列表
<ul><li>
<ol><li>
<dl><dt><dd>
表
<table border="1">
<thead>
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
<th>表頭四</th>
</tr>
</thead>
lable用於點擊文件，使得關聯的標簽獲取游標
<label for="username">用戶名：</label>
<input id="username" type="text" name="user"/>
<fieldset>
<legend>登陸</legend>
css ：穿上衣服的人但不能動的人
顏色
位置
在標簽上設置style屬性
id選擇器
標簽選擇器
class選擇器
.c選擇器
/* 註釋*/
優先順序就近原則
height 高度
width 寬度
text-align:ceter,水平居中
line-height, 垂直方向根據標簽例如div的高度
color 字體顏色
font-size 字體大小
font-weight 字體加粗
塊標簽可以修改height, weight
行內標簽不能修改 height, weight
display:none;讓標簽消失
display: inline;行屬性
display: black;塊屬性
display: inline-block;既有inline的屬性，又有block的屬性
padding 內邊距
margin 外邊距
position:
fixed用於固定在某個位置
top,bottom,left,right
relative+absolute 依賴父標簽相對定位
opacity: style里的opacity可添加透明
z-index:層級順序誰的值大誰就在前面
overflow:hidden,隱藏多餘部分，auto為多餘部分添加滾動條
hover 滑鼠移動到標簽上時他的css樣式才會被使用
background-image: 添加背景圖片
background-repeat: 使圖片y軸平鋪repeat-y
background-position-x: 背景位置
background-position-y:
background-position:
js ： 穿上衣服還可以動的人
瀏覽器相當於客戶端，瀏覽器如果恰好可以解析服務端返回的字元串就可以顯示特殊的效果
網站相當於伺服器，服務端返回的就是一個字元串
JavaScript
獨立的語言，瀏覽器具有js解釋器
JavaScript代碼存在形式：
- Head中
<script>
//javascript代碼
alert(123);
</script>
<script type="text/javascript">
//javascript代碼
alert(123);
</script>
- 文件
<script src='js文件路徑'> </script>
PS: JS代碼需要放置在 <body>標簽內部的最下方
var neme = 'a' 局部變數
name = 'w'全局變數
基本數據類型
數字
a = 18;
字元串
a = "alex"
a.chartAt(索引位置)
a.substring(起始位置，結束位置)
a.lenght 獲取當前字元串長度
...
列表(數組)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布爾類型
小寫
列表(數組)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布爾類型
小寫
for迴圈
1. 迴圈時，迴圈的元素是索引，支持字元串和字典類型
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
2. 不支持字典的迴圈
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
條件語句
if(條件){
}else if(條件){
}else if(條件){
}else{
}
== 值相等
=== 值和類型都相等
&& and
|| or
函數：
function 函數名(a,b,c){
}
函數名(1,2,3)
Dom
1、找到標簽
獲取單個元素 document.getElementById('i1')
獲取多個元素（列表）document.getElementsByTagName('div')
獲取多個元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根據ID獲取一個標簽
document.getElementsByName 根據name屬性獲取標簽集合
document.getElementsByClassName 根據class屬性獲取標簽集合
document.getElementsByTagName 根據標簽名獲取標簽集合
b. 間接
tag = document.getElementById('i1')
parentElement // 父節點標簽元素
children // 所有子標簽
firstElementChild // 第一個子標簽元素
lastElementChild // 最後一個子標簽元素
nextElementtSibling // 下一個兄弟標簽元素
previousElementSibling // 上一個兄弟標簽元素
2、操作標簽
a. innerText
獲取標簽中的文本內容
標簽.innerText
對標簽內部文本進行重新複製
標簽.innerText = ""
b. className
tag.className =》 直接整體做操作
tag.classList.add('樣式名') 添加指定樣式
tag.classList.remove('樣式名') 刪除指定樣式
PS：
<div onclick='func();'>點我</div>
<script>
function func(){
}
</script>
c. checkbox
獲取值
checkbox對象.checked
設置值
checkbox對象.checked = true
