當(dāng)前位置：首頁 > news >正文

建個可以注冊會員網(wǎng)站多少錢陽泉seo

news 2025/7/14 2:45:27

建個可以注冊會員網(wǎng)站多少錢,陽泉seo,陜西營銷型手機網(wǎng)站建設(shè),做任務(wù)的正規(guī)網(wǎng)站文章目錄 HTML快速開發(fā)網(wǎng)站Flask頁面結(jié)構(gòu)標簽基礎(chǔ)標簽超鏈接圖片列表下拉框表格input系列多行文本form表單網(wǎng)絡(luò)請求HTML案例 CSSCSS盒模型CSS樣式定義CSS選擇器 CSS樣式使用1. 在標簽上直接寫2. 在head標簽中寫3.寫到css文件中標簽樣式1. 高度和寬度2. 塊級和行內(nèi)標簽3.字體設(shè)…

文章目錄

HTML
- 快速開發(fā)網(wǎng)站Flask
- 頁面結(jié)構(gòu)
- 標簽
- - 基礎(chǔ)標簽
  - 超鏈接
  - 圖片
  - 列表
  - 下拉框
  - 表格
  - input系列
  - 多行文本
  - form表單
- 網(wǎng)絡(luò)請求
- HTML案例
CSS
- CSS盒模型
- CSS樣式定義
- - CSS選擇器
- CSS樣式使用
- - - 1. 在標簽上直接寫
    - 2. 在head標簽中寫
    - 3.寫到css文件中
  - 標簽樣式
  - - 1. 高度和寬度
    - 2. 塊級和行內(nèi)標簽
    - 3.字體設(shè)置
    - 4.文字對齊方式
    - 5.浮動
    - 6.內(nèi)邊距
    - 7.外邊距
- CSS樣式案例
- - 1.頭部導(dǎo)航條
  - 2.二級菜單
  - 3.推薦區(qū)域
- CSS布局
- - hover（偽類）
  - after（偽類）
  - display
  - position
  - - 1. fixed
    - - 案例：返回頂部
      - 案例：對話框
    - 2. relative和absolute
    - - 案例：二級菜單圖片
BootStrap框架
- 初識BootStrap
- 導(dǎo)航條
- 柵格系統(tǒng)
- container
- 面板
- 媒體對象
- 分頁
- BootStrap案例
- - 登錄案例
  - 后臺管理案例1
- 圖標
- BootStrap依賴jQuery
- JavaScript定義
- - JS特點
  - 變量名
  - 代碼位置
  - 注釋
  - typeof操作符
- JavaScript中的幾個重要概念
- - 標識符
  - 關(guān)鍵字
  - 保留字
  - 大小寫
  - 注釋
  - - 單行注釋
    - 多行注釋
  - 定義變量
  - 賦值
  - - var關(guān)鍵字
    - let和const關(guān)鍵字
- 數(shù)據(jù)類型
- - 數(shù)據(jù)類型
  - 字符串類型
  - - 跑馬燈案例
  - 數(shù)組
  - - 案例：動態(tài)數(shù)據(jù)
  - 對象（字典）
  - - 案例：動態(tài)表格
- 類型匯總
- - 基礎(chǔ)類型
  - - String類型
    - Number類型
    - Boolean類型
    - Null類型
    - Undefined類型
    - Symbol類型
  - 引用類型
  - - Object類型
    - Array類型
    - Function類型
- 運算符
- - 算數(shù)運算符
  - 賦值運算符
  - 字符串運算符
  - 自增、自減運算符
  - 比較運算符
  - 邏輯運算符
- 輸出語句
- - alert()函數(shù)
  - confirm()函數(shù)
  - console.log()
  - document.write()
  - innerHTML
- 條件判斷
- - if語句
  - if else語句
  - if else if else語句
  - swith case語句
  - while循環(huán)語句
  - do while循環(huán)語句
  - for循環(huán)語句
  - break和continue
  - - break語句
    - continue語句
- JS函數(shù)
- - 定義函數(shù)
  - 調(diào)用函數(shù)
  - 默認參數(shù)
  - 函數(shù)返回值
- 事件
- - 事件處理
  - DOM
  - 事件綁定
  - 事件示例
- 作用域
- - 全局作用域
  - 局部作用域
- 案例：表單驗證
- - 驗證碼demo
  - 必填字段驗證
  - 數(shù)據(jù)格式驗證
jQuery庫
- 快速上手
- 尋找標簽
- - 直接尋找
  - 間接尋找
  - 案例：菜單切換
- 樣式操作
- - 值操作
  - 案例：動態(tài)創(chuàng)建數(shù)據(jù)
- 事件
- - 案例：表格數(shù)據(jù)刪除
- 綜合案例：數(shù)據(jù)錄入
- 總結(jié)

HTML

快速開發(fā)網(wǎng)站Flask

pip install flask
# 安裝flask框架

from flask import Flask # 導(dǎo)入Flask類app = Flask(__name__)  # 習(xí)慣性書寫# 創(chuàng)建了網(wǎng)址/show/info和函數(shù)的對應(yīng)關(guān)系
# 以后用戶在瀏覽器上訪問/show/info，網(wǎng)址自動執(zhí)行index
@app.route("/show/info")
def index():return "中國<span style='color:red';>你好</span>"if __name__ == '__main__':app.run()

Flask框架支持將標簽寫入文件

from flask import Flask,render_templateapp = Flask(__name__)@app.route("/show/info")
def index():# Flask內(nèi)部會自動打開這個文件，并讀取內(nèi)容，將內(nèi)容給用戶返回。# 默認：去當(dāng)前項目目錄的templates文件夾中找。return render_template("index.html")if __name__ == '__main__':app.run()

創(chuàng)建如圖所示文件夾:templates

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title>
</head>
<body><h1>中國</h1><span>你好</span></body>
</html>

頁面結(jié)構(gòu)

<!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>前端基礎(chǔ)</title>
</head>
<body><span>普通文本，用于分區(qū)</span><strong>這是加粗標簽</strong><input type="text" value="行內(nèi)塊標簽"><p>這是一個段落，會換行</p><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><ul><li>無序列表</li><li>無序列表</li><li>無序列表</li></ul><div>盒標簽，用于分區(qū)<span>hello world</span></div>
</body>
</html>

標簽

基礎(chǔ)標簽

塊級標簽block：div,p,ul,li…獨占一行，可以顯示的寬高
行內(nèi)標簽inline：能和其他元素共享一行，無法顯示的設(shè)置寬高
行內(nèi)塊級標簽inline-block：能和其他元素共享一行，可以顯示的設(shè)置寬高

超鏈接

<!--    跳轉(zhuǎn)別人的網(wǎng)址-->
<a href="https://www.bilibili.com/">點擊跳轉(zhuǎn)</a>
<!--    跳轉(zhuǎn)自己的網(wǎng)址-->
<a href="/get/news">點擊跳轉(zhuǎn)</a>

<a href="https://www.bilibili.com/" target="_blank"></a>

target=“_blank” 在新的頁面打開，而不影響原網(wǎng)頁

圖片

<img> 是一個自閉合標簽，也被稱為空標簽或空元素。自閉合標簽是指在HTML中沒有內(nèi)容的元素，它們在標簽內(nèi)沒有任何文本或其他HTML元素。這些標簽在HTML中只有一個開始標簽，沒有對應(yīng)的結(jié)束標簽。

顯示別人的圖片
<img src="圖片地址" />

顯示自己的圖片
<img src="自己圖片的地址"/>
前提在自己項目中創(chuàng)建:static目錄，圖片要放在static中
在頁面引入圖片時
<img src="/static/pic1.jpg"/>

在HTML5中，使用自閉合標簽時可以省略尾部的斜杠 /

列表

<ul><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li>
</ul>
<ol><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li>
</ol>

下拉框

<h1>下拉框</h1>
<select><option>北京</option><option>上海</option><option>深圳</option>
</select>
<!--    多選-->
<select multiple><option>天津</option><option>南京</option><option>成都</option>
</select>
<select><option
</select>

表格

<h1>數(shù)據(jù)表格</h1>
<table><thead><tr>    <th>id</th> <th>姓名</th> <th>年齡</th></tr></thead><tbody><tr>    <td>001</td> <td>hzh</td> <td>22</td>   </tr><tr>    <td>001</td> <td>hzh</td> <td>22</td>   </tr><tr>    <td>001</td> <td>hzh</td> <td>22</td>   </tr><tr>    <td>001</td> <td>hzh</td> <td>22</td>   </tr><tr>    <td>001</td> <td>hzh</td> <td>22</td>   </tr></tbody>
</table>

demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get_lists</title><style>/*修改a標簽為塊級標簽*/a {display: block}</style>
</head>
<body><h1>用戶列表</h1><table border="1">
<!--        表頭內(nèi)容--><thead><tr><th>id</th><th>姓名</th><th>年齡</th><th>圖片</th><th>更多</th></tr></thead>
<!--        表格內(nèi)容--><tbody><tr><td>001</td><td>hzh</td><td>22</td><td><img src="/static/pic.jpg" alt="此圖片不存在" style="height: 50px;width: 50px"></td><td><a href="https://www.bilibili.com/" target="_blank">點擊跳轉(zhuǎn)</a><a href="/get/news" target="_blank">查看詳情</a></td></tr><tr><td>002</td><td>lainuo</td><td>23</td><td><img src="/static/pic1.jpg" alt="" style="height: 50px;width: 50px"></td><td><a href="https://www.bilibili.com/" target="_blank">點擊跳轉(zhuǎn)</a><a href="/get/news" target="_blank">查看詳情</a></td></tr><tr><td>003</td><td>pabi</td><td>18</td><td><img src="/static/pic1.jpg" alt="" style="height: 50px;width: 50px"></td><td><a href="https://www.bilibili.com/" target="_blank">點擊跳轉(zhuǎn)</a><a href="/get/news" target="_blank">查看詳情</a></td></tr></tbody></table>
</body>
</html>

在HTML中，<img>元素用于插入圖像。alt是<img>元素的一個屬性，它表示圖像的替代文本（alternative text）或者稱為"alt文本"。

alt屬性提供了一個描述圖像的文本，當(dāng)圖像無法加載時或者用戶使用輔助技術(shù)（例如屏幕閱讀器）瀏覽網(wǎng)頁時，這個文本將顯示出來。這樣做的目的是為了讓用戶了解圖像的內(nèi)容，即使圖像無法顯示也能夠傳達相關(guān)信息。此外，alt屬性還可以在圖像加載失敗時顯示錯誤信息，幫助用戶知道該圖像未能正確加載。

input系列

<span>輸入框</span>
<input type="text">
<span>密碼框</span>
<input type="password">
<span>文件上傳</span>
<input type="file">
<span>單選框</span>
<!--    name相同就是互斥的單選框，name不同就可以都選的-->
<input type="radio" name="n1">男
<input type="radio" name="n1">女
<span>復(fù)選框</span>
<input type="checkbox">籃球
<input type="checkbox">網(wǎng)球
<input type="checkbox">足球
<span>按鈕</span>
<input type="button" value="普通按鈕">
<input type="submit" value="提交表單">

多行文本

<h1>多行文本</h1>
<!--    默認高度為3行-->
<textarea rows = "3"></textarea>

form表單

form標簽包裹要提交的數(shù)據(jù)的標簽。
- 提交方式：method="get"
- 提交的地址：action="/xxx/xxx/xx"
- 在form標簽里面必須有一個submit標簽。
在form里面的一些標簽：input/select/textarea
- 一定要寫name屬性 <input type="text" name="uu"/>

網(wǎng)絡(luò)請求

在瀏覽器的URL中寫入地址，點擊回車，訪問。

瀏覽器會發(fā)送數(shù)據(jù)過去，本質(zhì)上發(fā)送的是字符串：
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"瀏覽器會發(fā)送數(shù)據(jù)過去，本質(zhì)上發(fā)送的是字符串：
"POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n數(shù)據(jù)庫"

瀏覽器向后端發(fā)送請求時
- GET請求【URL方法 / 表單提交】
  - 現(xiàn)象：GET請求、跳轉(zhuǎn)、向后臺傳入數(shù)據(jù)數(shù)據(jù)會拼接在URL上。
```
https://www.sogou.com/web?query=安卓&age=19&name=xx
```
    注意：GET請求數(shù)據(jù)會在URL中體現(xiàn)。
- POST請求【表單提交】
  - 現(xiàn)象：提交數(shù)據(jù)不在URL中而是在請求體中。
    - 比如登錄操作from data中（請求體）

GET請求

@app.route("/get/reg", methods=["GET"])
def get_reg():# 1.接收用戶通過get形式發(fā)送過來的數(shù)據(jù)print(request.args)# 2.給用戶返回結(jié)果return "注冊成功!"

會顯示在url上

POST請求

@app.route("/post/reg", methods=["POST"])
def post_reg():# 1.接收用戶通過post形式發(fā)送過來的數(shù)據(jù)print(request.form)# 2.給用戶返回結(jié)果return "注冊成功!"

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yAiuVoSu-1692854467500)(image/image-20230728210308801.png)]

HTML案例

from flask import Flask, render_template, requestapp = Flask(__name__)@app.route("/register", methods=["GET", "POST"])
def register():if request.method == "GET":return render_template("register.html")else:# 1.接收用戶通過post形式發(fā)送過來的數(shù)據(jù)username = request.form.get("username")pwd = request.form.get("pwd")gender = request.form.get("gender")hobby_list = request.form.get("hobby")city = request.form.get("city")remark = request.form.get("remark")print(username, pwd, gender, hobby_list, city, remark)# 2.給用戶返回結(jié)果return "注冊成功!"if __name__ == "__main__":app.run()

register.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用戶注冊</title>
</head>
<body><h1>用戶注冊</h1><form method="post" action="/register"><div>用戶名:<input type="text" name="username"></div><div>密碼:<input type="password" name="pwd"></div><div>性別:<input type="radio" name="gender" value="1"> 男<input type="radio" name="gender" value="2"> 女</div><div>愛好:<input type="checkbox" name="hobby" value="1"> 籃球<input type="checkbox" name="hobby" value="2"> 網(wǎng)球<input type="checkbox" name="hobby" value="3"> 足球</div><div>城市:<select name="city"><option value="c1">北京</option><option value="c2">上海</option></select></div><div>備注:<textarea name="remark"></textarea></div><div><input type="submit" value="submit提交"></div></form>
</body>
</html>

CSS

CSS盒模型

瀏覽器的渲染引擎會根據(jù)標準之一的 CSS 基礎(chǔ)框盒模型 (CSS basic box model)，將所有元素表示為一個個矩形的盒子(box)

Width：主體寬度
Height：主體高度
Border：邊框
Padding：內(nèi)邊距
Margin：外邊距，針對盒子四周的邊距，跟其他盒子的隔離，不影響本身元素的寬高

只有padding width height border會影響實際的大小

<!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>css盒模型</title><style>.box {width: 300px;height: 300px;background: red;padding: 30px;border: 20px solid black;margin: 50px auto;}.box_content {width: 100%;height: 100%;background: blue;font-size: 24px;color: white;text-align: center;}</style>
</head>
<body><div class = "box"><div class = "box_content">主體</div></div>    
</body>
</html>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-unUpLTHx-1692854467500)(image/image-20230726160144092.png)]

盒子實際大小：(300+30+20+30+20) *(300+30+20+30+20) = 400 * 400

CSS樣式定義

CSS 層疊樣式表(Cascading Style Sheets)
樣式定義如何顯示HTML元素
CSS規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明
權(quán)重（優(yōu)先級）
- !important>行內(nèi)樣式>ID選擇器>類選擇器|屬性選擇器1偽類選擇器>元素選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=cas, initial-scale=1.0"><title>css基礎(chǔ)</title><style>div {width: 100px;height: 100px;background: yellow;margin-bottom: 20px;}/* class選擇器.類名 *//* 在語句后添加!important關(guān)鍵字，這個語句變成權(quán)重最高 */.bd {background: green !important;}/* id選擇器.id名 */#bd_pink {background: pink;}</style></head>
<body><div style="width: 100px;height: 100px;background: red;">這是行內(nèi)樣式</div><div>這是內(nèi)部樣式</div><div class = "bd">class選擇器</div><div class = "bd">class選擇器</div><div class = "bd" id = "bd_pink">id選擇器</div></body>
</html>

/* 在語句后添加!important關(guān)鍵字，這個語句變成權(quán)重最高 */.bd {background: green !important;}

CSS選擇器

ID選擇器
```
#c1{}<div id='c1'></div>
```
類選擇器（最多）
```
.c1{}<div clss='c1'></div>
```
標簽選擇器
```
div{}<div>xxx</div>
```

屬性選擇器

input[type='text']{border: 1px solid red;
}
.v1[xx="456"]{color: gold;
}

<input type="text">
<input type="password"><div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>

后代選擇器

.yy li{color: pink;
}
.yy > a{color: dodgerblue;
}

<div class="yy"><a>百度</a><div><a>谷歌</a></div><ul><li>美國</li><li>日本</li><li>韓國</li></ul>
</div>

關(guān)于選擇器：

多：類選擇器、標簽選擇器、后代選擇器
少：屬性選擇器、ID選擇器

樣式覆蓋：

Title

中國聯(lián)通

CSS樣式使用

1. 在標簽上直接寫

<img src="..." style="height:100px" /><div style="color:red;">中國聯(lián)通</div>

2. 在head標簽中寫

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color:red;}</style>
</head>
<body><h1 class='c1'>用戶登錄</h1>
<h1 class='c1'>用戶登錄</h1>
<h1 class='c1'>用戶登錄</h1>
<h1 class='c1'>用戶登錄</h1></body>
</html>

3.寫到css文件中

.c1{height:100px;
}.c2{color:red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="common.css" />
</head>
<body><h1 class='c1'>用戶登錄</h1>
<h1 class='c2'>用戶登錄</h1>
<h1 class='c2'>用戶登錄</h1>
<h1 class='c1'>用戶登錄</h1></body>
</html>

外部引用樣式

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=cas, initial-scale=1.0"><title>css基礎(chǔ)</title><!-- 引用的是一個樣式表，推薦方式--><link rel="stylesheet" href="./style.css"></head>

/* style.css */
/* 不需要style標簽聲明 */
div {width: 100px;height: 100px;background: yellow;margin-bottom: 20px;
}
/* class選擇器.類名 */
.bd {background: green;
}
/* id選擇器.id名 */
#bd_pink {background: pink;
}

在flask框架下，css文件必須放在static目錄下

三種使用方式：

屬性名: 值

行內(nèi)樣式
內(nèi)部樣式

通過選擇器來選擇對于的元素進行樣式的設(shè)置
- 元素選擇器
- 類名選擇器 class 一對多
- id 選擇器唯一性
引用方式

標簽樣式

1. 高度和寬度

.c1{height: 300px;width: 500px;
}

注意事項：

寬度，支持百分比。
行內(nèi)標簽：默認無效
塊級標簽：默認有效（霸道，右側(cè)區(qū)域空白，也不給你占用）

2. 塊級和行內(nèi)標簽

塊級
行內(nèi)
css樣式：標簽 ->
```
display:inline-block
```

示例：行內(nèi)&塊級特性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;}</style>
</head>
<body><span class="c1">中國</span><span class="c1">聯(lián)通</span><span class="c1">聯(lián)通</span><span class="c1">聯(lián)通</span>
</body>
</html>

示例：塊級和行內(nèi)標簽的設(shè)置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body><div style="display: inline;">中國</div><span style="display: block;">聯(lián)通</span>
</body>
</html>

注意：塊級 + 塊級&行內(nèi)。

3.字體設(shè)置

顏色
大小
加粗
字體格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: #00FF7F;font-size: 58px;font-weight: 600;font-family: Microsoft Yahei;}</style>
</head>
<body><div class="c1">中國聯(lián)通</div><div>中國移動</div>
</body>
</html>

4.文字對齊方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 59px;width: 300px;border: 1px solid red;text-align: center; /* 水平方向居中 */line-height: 59px; /* 垂直方向居中 */}</style>
</head>
<body><div class="c1">郭智</div>
</body>
</html>

5.浮動

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div><span>左邊</span><span style="float: right">右邊</span></div>
</body>
</html>

div默認塊級標簽（霸道），如果浮動起來，就不一樣了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.item{float: left;width: 280px;height: 170px;border: 1px solid red;}</style>
</head>
<body><div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>

如果你讓標簽浮動起來之后，就會脫離文檔流。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.item {float: left;width: 280px;height: 170px;border: 1px solid red;}</style>
</head>
<body><div style="background-color: dodgerblue"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div style="clear: both;"></div></div><div>你哦啊呀</div>
</body>
</html>

6.內(nèi)邊距

內(nèi)邊距，我自己的內(nèi)部設(shè)置一點距離。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{border: 1px solid red;height: 200px;width: 200px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}</style>
</head>
<body><div class="outer"><div style="background-color: gold;">聽媽媽的話</div><div>小朋友你是否下水道發(fā)</div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{border: 1px solid red;height: 200px;width: 200px;padding: 20px;}</style>
</head>
<body><div class="outer"><div style="background-color: gold;">聽媽媽的話</div><div>小朋友你是否下水道發(fā)</div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{border: 1px solid red;height: 200px;width: 200px;padding: 20px 10px 5px 20px;}</style>
</head>
<body><div class="outer"><div style="background-color: gold;">聽媽媽的話</div><div>小朋友你是否下水道發(fā)</div></div>
</body>
</html>

7.外邊距

外邊距，我與別人加點距離。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>

CSS樣式案例

1.頭部導(dǎo)航條

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style><!--body標簽，默認有一個邊距，造成頁面四邊都有白色間隙-->body{margin: 0;}.header{background: #333;}.container{width: 1000px;margin: 0 auto;}.container .menu{float: left;}.container .account{float: right;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin: 0 10px;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a>小米官網(wǎng)</a><a>小米商城</a><a>MIUI</a><a>LoT</a><a>云服務(wù)</a><a>天星科技</a></div><div class="account"><a>登錄</a><a>注冊</a></div><!--存在浮動需要添加此代碼，用于稱其父類容器--><div style="clear: both"></div></div></div></body>
</html>

body標簽，默認有一個邊距，造成頁面四邊都有白色間隙，如何去除呢？
```
body{margin: 0;
}
```

內(nèi)容居中

文本居中，文本會在這個區(qū)域中居中。

<div style="width: 200px; text-align: center;">武沛齊</div>

區(qū)域居中，自己要有寬度 + margin-left:auto;margin-right:auto

.container{width: 980px;margin: 0 auto;
}<div class="container">adfasdf
</div>

父親沒有高度或沒有寬度，被孩子支撐起來。
如果存在浮動，一定記得加入。

2.二級菜單

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>site_header</title><style>body{margin: 0;}.site_header .container{width: 1226px;margin: 0 auto;}.site_header .ht{height: 100px;}.site_header .container .logo{float: left;width: 234px;}.site_header .container .logo a{display: inline-block;margin-top: 22px;}.site_header .container .menu_list{float: left;/*縱向高度100px居中，*/line-height: 100px;}.site_header .container a{display: inline-block;/*上下內(nèi)邊距0左右內(nèi)邊距10px*/padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.site_header .container a:hover{color: #ff6700;}.site_header .container .search{float: right;}</style>
</head>
<body><div class="site_header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/"><img src="/static/logo_m2.png" alt="" style="width: 56px;height: 56px"></a></div><div class="ht menu_list"><a href="https://www.mi.com/">Xiaomi手機</a><a href="https://www.mi.com/">Redmi手機</a><a href="https://www.mi.com/">電視</a><a href="https://www.mi.com/">筆記本</a><a href="https://www.mi.com/">平板</a><a href="https://www.mi.com/">家電</a><a href="https://www.mi.com/">路由器</a><a href="https://www.mi.com/">服務(wù)中心</a><a href="https://www.mi.com/">社區(qū)</a></div><div class="ht search"></div><div style="clear:both"></div></div></div></body>
</html>

一二級菜單整合：

xiaomi_index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一級二級菜單</title><link rel="stylesheet" href="/static/xiaomi_index.css">
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米官網(wǎng)</a><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">LoT</a><a href="https://www.mi.com/">云服務(wù)</a><a href="https://www.mi.com/">天星數(shù)技</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">小愛開放平臺</a><a href="https://www.mi.com/">企業(yè)團購</a><a href="https://www.mi.com/">資質(zhì)證照</a><a href="https://www.mi.com/">協(xié)議規(guī)則</a><a href="https://www.mi.com/">下載app</a><a href="https://www.mi.com/">Select Location</a></div><div class="account"><a href="https://www.mi.com/">登錄</a><a href="https://www.mi.com/">注冊</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div></div><div class="site_header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/"><img src="/static/logo_m2.png" alt="" style="width: 56px;height: 56px"></a></div><div class="ht menu_list"><a href="https://www.mi.com/">Xiaomi手機</a><a href="https://www.mi.com/">Redmi手機</a><a href="https://www.mi.com/">電視</a><a href="https://www.mi.com/">筆記本</a><a href="https://www.mi.com/">平板</a><a href="https://www.mi.com/">家電</a><a href="https://www.mi.com/">路由器</a><a href="https://www.mi.com/">服務(wù)中心</a><a href="https://www.mi.com/">社區(qū)</a></div><div class="ht search"></div><div style="clear:both"></div></div></div>
</body>
</html>

xiaomi_index.css

body{margin: 0;
}
.header{background: #333;
}
.header .container{width: 1000px;margin: 0 auto;
}.header .menu{float: left;
}
.header .account{float: right;
}
.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin: 0 5px;text-decoration: none;
}
.header a:hover{color: white ;
}.site_header .container{width: 1226px;margin: 0 auto;}.site_header .ht{height: 100px;}.site_header .container .logo{float: left;width: 234px;}.site_header .container .logo a{display: inline-block;margin-top: 22px;}.site_header .container .menu_list{float: left;/*縱向高度100px居中，*/line-height: 100px;}.site_header .container a{display: inline-block;/*上下內(nèi)邊距0左右內(nèi)邊距10px*/padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.site_header .container a:hover{color: #ff6700;}.site_header .container .search{float: right;}

a標簽是行內(nèi)標簽，行內(nèi)標簽的高度、內(nèi)外邊距，默認無效。
垂直方向居中
- 本文 + line-height
- 圖片 + 邊距
a標簽?zāi)J有下劃線。
鼠標放上去之后hover
```
.c1:hover{...
}
a:hover{}
```

3.推薦區(qū)域

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一級二級菜單</title><link rel="stylesheet" href="/static/xiaomi_index.css">
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/">小米官網(wǎng)</a><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">LoT</a><a href="https://www.mi.com/">云服務(wù)</a><a href="https://www.mi.com/">天星數(shù)技</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">小愛開放平臺</a><a href="https://www.mi.com/">企業(yè)團購</a><a href="https://www.mi.com/">資質(zhì)證照</a><a href="https://www.mi.com/">協(xié)議規(guī)則</a><a href="https://www.mi.com/">下載app</a><a href="https://www.mi.com/">Select Location</a></div><div class="account"><a href="https://www.mi.com/">登錄</a><a href="https://www.mi.com/">注冊</a><a href="https://www.mi.com/">消息通知</a></div><div style="clear: both"></div></div></div><div class="site_header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/"><img src="/static/logo_m2.png" alt="" style="width: 56px;height: 56px"></a></div><div class="ht menu_list"><a href="https://www.mi.com/">Xiaomi手機</a><a href="https://www.mi.com/">Redmi手機</a><a href="https://www.mi.com/">電視</a><a href="https://www.mi.com/">筆記本</a><a href="https://www.mi.com/">平板</a><a href="https://www.mi.com/">家電</a><a href="https://www.mi.com/">路由器</a><a href="https://www.mi.com/">服務(wù)中心</a><a href="https://www.mi.com/">社區(qū)</a></div><div class="ht search"></div><div style="clear:both"></div></div></div><div class="slider"><div class="container"><div class="item"><img src="/static/big_banner.png" alt="圖片不存在"></div></div></div><div class="news"><div class="container"><div class="channel left"><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div class="item"><a href="#"><img src="/static/button4.png" alt=""><span>保障服務(wù)</span></a></div><div style="clear: both"></div></div><div class="list-item left"><a href="#"><img src="/static/button1.jpg" alt=""></a></div><div class="list-item left"><a href="#"><img src="/static/button2.jpg" alt=""></a></div><div class="list-item left"><a href="#"><img src="/static/button3.jpg" alt=""></a></div><div style="clear: both"></div></div></div></body>
</html>

css

body{margin: 0;
}
img{width: 100%;height: 100%;
}
.left{float: left;
}
.container{width: 1226px;margin: 0 auto;
}.header{background: #333;
}
.header .container{width: 1000px;margin: 0 auto;
}.header .menu{float: left;
}
.header .account{float: right;
}
.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin: 0 5px;text-decoration: none;
}
.header a:hover{color: white ;
}.site_header .container{width: 1226px;margin: 0 auto;}.site_header .ht{height: 100px;}.site_header .container .logo{float: left;width: 234px;}.site_header .container .logo a{display: inline-block;margin-top: 22px;}.site_header .container .menu_list{float: left;/*縱向高度100px居中，*/line-height: 100px;}.site_header .container a{display: inline-block;/*上下內(nèi)邊距0左右內(nèi)邊距10px*/padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.site_header .container a:hover{color: #ff6700;}.site_header .container .search{float: right;}.slider .item{width: 1226px;height: 460px;margin: 0 auto;}.news{margin-top: 14px;}.news .channel{width: 228px;height: 164px;background-color: #5f5750;padding: 3px;}.news .channel .item{height: 82px;width: 76px;float: left;text-align: center;}.news .channel a{display: inline-block;font-size: 12px;padding-top: 10px;color: #fff;text-decoration: none;opacity: 0.7;}.news .channel a:hover{opacity: 1;}.news span{display: block;}。news .channel .item img{height: 24px;width: 24px;display: block;margin: 0 auto 4px;}.news .list-item{width: 316px;height: 170px;margin-left: 14px}.news .list-item a:hover{opacity: 0.6;}

設(shè)置透明度
```
opacity:0.5;    /* 0 ~ 1 */
```

CSS布局

hover（偽類）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1 {color: red;font-size: 18px;}.c1:hover {color: green;font-size: 50px;}.c2 {height: 300px;width: 500px;border: 3px solid red;}.c2:hover {border: 3px solid green;}.download {display: none;}.app:hover .download {display: block;}.app:hover .title{color: red;}</style>
</head>
<body>
<div class="c1">聯(lián)通</div>
<div class="c2">廣西</div><div class="app"><div class="title">下載APP</div><div class="download"><img src="images/qcode.png" alt=""></div>
</div></body>
</html>

after（偽類）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1:after{content: "大帥哥";}</style>
</head>
<body><div class="c1">吳陽軍</div><div class="c1">梁吉寧</div>
</body>
</html>

很重要的應(yīng)用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content: "";display: block;clear: both;}.item{float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

display
position
width/height/padding/box-sizing
Flex布局
Grid布局
響應(yīng)式布局

display

"display"是CSS中的一個屬性，用于定義HTML元素的顯示類型（display type）。通過"display"屬性，你可以控制元素如何顯示在頁面上。
常用的"display"屬性取值有以下幾種：

block: 元素將以塊級元素的形式顯示。這意味著元素會獨占一行，并且寬度會默認填滿父容器的寬度。常見的塊級元素有<div>, <p>, <h1>等。
inline: 元素將以內(nèi)聯(lián)元素的形式顯示。這意味著元素不會獨占一行，它只會使用它需要的寬度，并允許其他元素與其在同一行上。常見的內(nèi)聯(lián)元素有<span>, <a>, <strong>等。
inline-block: 元素將以內(nèi)聯(lián)塊級元素的形式顯示。這個值結(jié)合了inline和block的特性，元素會在同一行顯示，但可以設(shè)置寬高等塊級元素的屬性。常見的內(nèi)聯(lián)塊級元素有<input>, <button>等。
none: 元素將不會被顯示，即在頁面中不占用空間，并且不可見。
flex: 元素將以彈性盒模型的形式顯示。這是CSS3中引入的布局模型，允許更靈活的布局方式。
grid: 元素將以網(wǎng)格布局的形式顯示。這也是CSS3中引入的布局模型，允許使用網(wǎng)格來進行布局。
table: 元素將以表格的形式顯示，即類似于<table>元素。

等等…通過設(shè)置"display"屬性，你可以調(diào)整元素在頁面中的布局和呈現(xiàn)方式，使其適應(yīng)不同的設(shè)計需求。

<!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>css布局</title><style>/* 修改span為塊級標簽 */span { display: block;}/* 修改div為行內(nèi)標簽 */div {display: inline;}/* 修改p為行內(nèi)塊級標簽 */p {display: inline-block;width: 50px;height: 100px;background: yellow;}</style>
</head>
<body><span>塊級標簽</span><div>行內(nèi)標簽</div><p>行內(nèi)塊標簽</p>  
</body>
</html>

flex彈性盒布局

<!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>css布局</title><style>.box {height: 300px;border: 10px solid black;/* 設(shè)置整體為彈性布局，使三個盒子自動并排排列，而不是豎向排列*/display: flex;/* justify-content: center; 水平居中 *//* align-items: center; 中心居中 *//* flex-direction: column; 豎向布局 */}.box-item {height: 70px;width: 100px;margin-top: 10px;margin-left: 10px;background: red}.box-flex {flex: 1}</style>
</head>
<body><div class="box"><div class="box-item">盒子1</div><div class="box-item">盒子2</div><!-- 讓第三個盒子充滿剩下區(qū)域，跟隨父級的寬度變化 --><div class="box-item box-flex">盒子3</div></div>
</body>
</html>

position

在CSS中，position屬性用于定義元素的定位方式，即指定元素在文檔流中的位置。position屬性有四個主要的取值：

static: 默認值，元素按照正常的文檔流進行排列。top, right, bottom, left, z-index屬性對static定位的元素?zé)o效。
relative: 元素相對于其正常位置進行偏移，但仍在文檔流中占據(jù)原有空間。通過top, right, bottom, left屬性可以控制元素的偏移位置。
absolute: 元素脫離正常的文檔流，相對于其最近的已定位（非static）的父元素進行定位。如果沒有已定位的父元素，則相對于文檔的可視區(qū)域進行定位。通過top, right, bottom, left屬性可以控制元素相對于其定位父元素的偏移位置。
fixed: 元素脫離正常的文檔流，相對于瀏覽器窗口進行定位。無論頁面滾動與否，元素都會固定在相對于瀏覽器窗口的位置。通過top, right, bottom, left屬性可以控制元素在窗口中的固定位置。

除了這些主要的取值，還有一種特殊的sticky定位方式，它結(jié)合了relative和fixed的特性。元素在滾動到特定閾值位置時，會變?yōu)楣潭ǘㄎ?#xff0c;超過閾值則變?yōu)橄鄬Χㄎ弧?/li>

例如，以下是一個使用position屬性的示例：

.container {position: relative;
}.box {position: absolute;top: 50px;left: 20px;
}.fixed-box {position: fixed;top: 20px;right: 20px;
}

在上述示例中，.container元素使用position: relative來創(chuàng)建一個相對定位的容器。.box元素使用position: absolute相對于.container進行定位，并設(shè)置top和left屬性來控制其位置。.fixed-box元素使用position: fixed進行固定定位，它會相對于瀏覽器窗口定位，并設(shè)置top和right屬性來控制其位置。

position定位 top/left/right/bottom

relative 相對定位
absolute 絕對定位
fixed 固定定位

<!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>css position</title><style>body {height: 3000px;}div {width: 100px;height: 70px;}.box {border: 10px solid black;height: 300px;width: 90%;}.green {background: green;/* 基于其正常位置的相對定位不影響其他元素，并且不會影響父級的大小 */position: relative;top: 10px;left: 10px;}.red {background: red;/* 基于父級的絕對定位, 脫離文檔流相當(dāng)于重啟一個新圖層，基于最近的父級定位 */position: absolute;left: 100px;}.yellow {background: yellow;/* 固定定位，脫離文檔流，基于瀏覽器窗口定位 */position: fixed;}</style>
</head>
<body><div class="box"><div class="green">相對定位</div><div class="red">絕對定位</div><div class="yellow">固定定位</div></div>
</body>
</html>

1. fixed

固定在窗口的某個位置。

案例：返回頂部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 10px;bottom: 50px;}</style>
</head>
<body><div style="height: 1000px;background-color: #5f5750"></div><div class="back"></div></body>
</html>

案例：對話框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.dialog {position: fixed;height: 300px;width: 500px;background-color: white;left: 0;right: 0;margin: 0 auto;top: 200px;z-index: 1000;}.mask {background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;z-index: 999;}</style>
</head>
<body><div style="height: 1000px">asdfasdfasd</div><div class="mask"></div>
<div class="dialog"></div></body>
</html>

2. relative和absolute

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 1px solid red;margin: 100px;position: relative;}.c1 .c2{height: 59px;width: 59px;background-color: #00FF7F;position: absolute;right: 20px;bottom: 10px;}</style>
</head>
<body><div class="c1"><div class="c2"></div></div>
</body>
</html>

案例：二級菜單圖片

.app {position: relative}
.app .show {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); /* 設(shè)置透明度為0.5的黑色陰影 */position: absolute;top: 70px;height: 100px;width: 100px;display: none;border-radius: 10px;
}
.app:hover .show{display: block;
}

<a href="https://www.mi.com/" class="app">Xiaomi手機<div class="show"><img src="/static/good1.png" alt=""></div>
</a>

BootStrap框架

是別人幫我們已寫好的CSS樣式，我們?nèi)绻胍褂眠@個BootStrap：

下載BootStrap
使用
- 在頁面上引入BootStrap
- 編寫HTML時，按照BootStrap的規(guī)定來編寫 + 自定制。

初識BootStrap

V3版本

下載如下：https://v3.bootcss.com/

創(chuàng)建目錄：靜態(tài)文件存放

plugins存放插件，把bootstrap放入plugins

引用bootstrap模板，使用已經(jīng)編寫好的css樣式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初識bootstrap</title>
<!--    開發(fā)版本--><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<!--    生產(chǎn)版本--><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
<input type="button" value="提交" class="btn btn-primary">
<input type="button" value="提交" class="btn btn-success">
<input type="button" value="提交" class="btn btn-danger">
<input type="button" value="提交" class="btn btn-danger btn-xs">
</body>
</html>

導(dǎo)航條

官方文檔：組件 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

小組件是直接復(fù)制代碼可用
格式化代碼（自動縮進）
- 從官方文檔復(fù)制導(dǎo)航條區(qū)域，粘貼到pycharm,格式化代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>導(dǎo)航條</title><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</div>
</body>
</html>

對于不符合自己要求的部分可以在style里重寫樣式

<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>/*重寫樣式*/.btn-default {background: red;}
</style>

柵格系統(tǒng)

官方文檔：全局 CSS 樣式 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

全局樣式是自己創(chuàng)建框架使用模板樣式

把整體劃分為了12格

分類（根據(jù)顯示設(shè)備選擇）

響應(yīng)式，根據(jù)屏幕寬度不同，如果寬度低于支持寬度就不分格
```

.col-lg-   1170px  
.col-md-   970px
.col-sm-   750px
```

非響應(yīng)式，無論屏幕寬度，都支持分格

<div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>

列偏移

<div><div class="col-sm-offset-2 col-xs-6" style="background: red">1</div><div class="col-xs-4" style="background: green">2</div>
</div>

container

<!--平鋪，流式布局-->
<div class="container-fluid"><div class="col-sm-9">左邊</div><div class="col-sm-3">右邊</div>
</div>
<!--居中對齊-->
<div class="container"><div class="col-sm-9">左邊</div><div class="col-sm-3">右邊</div>
</div>

面板

官方文檔：組件 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

<div><div class="col-sm-9">1</div><div class="col-sm-3"><div class="panel panel-default"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div></div>
</div>

媒體對象

官方文檔：組件 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

可以自行修改媒體和文字內(nèi)容

<div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="#"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Top aligned media</h4><p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p><p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
</div>
<div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="#"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Top aligned media</h4><p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p><p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
</div>

分頁

官方文檔：組件 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

拷貝HTML代碼

<div class="media"...><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">?</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">?</span></a></li>
</ul>

BootStrap案例

登錄案例

表單官方文檔：全局 CSS 樣式 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登錄</title><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.container {width: 400px;height: 400px;margin-top: 100px;padding: 20px 40px;border: 1px solid #dddddd;/*圓角*/border-radius: 5px;/*陰影  左右，上下，模糊距離，陰影顏色*/box-shadow: 5px 5px 20px #aaa;}img {width: 100%;height: 100%;}.item-img {width: 180px;display: inline-block;float: right;border: 1px solid lightgrey;}h1 {margin-top: 10px;text-align: center;}</style>
</head>
<body>
<div class="container"><h1>用戶登錄</h1><form><div class="form-group"><label for="exampleInputName2">用戶名或手機號</label><input type="text" class="form-control" id="exampleInputName2" placeholder="yourname"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group" style="width: 150px;display: inline-block;"><label for="exampleInputPassword1">圖片驗證碼</label><input type="text" class="form-control" placeholder="Text input"></div><div class="item-img"><img src="static/img/verification_code.png"></div><div class="clear:both"></div><button type="submit" class="btn btn-primary">登錄</button></form>
</div></body>
</html>

后臺管理案例1

表格：官方文檔全局 CSS 樣式 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后臺管理1</title><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="container"><div class="navbar navbar-default"><!--        響應(yīng)式頁面--><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">中國聯(lián)通xxx系統(tǒng)</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#">上海</a></li><li><a href="#">廣西</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登錄</a></li><li><a href="#">注冊</a></li></ul></div></div><button type="button" class="btn btn-primary">新建</button><div class="panel panel-default" style="margin-top: 20px"><div class="panel-heading">表單區(qū)域</div><div class="panel-body"><form class="form-inline"><div class="form-group"><label class="sr-only" for="exampleInputEmail3">Email address</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"></div><div class="form-group"><label class="sr-only" for="exampleInputPassword3">Password</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"></div><button type="submit" class="btn btn-success">保存</button></form></div></div><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">數(shù)據(jù)區(qū)域</h3></div><div class="panel-body"><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td><a><button type="button" class="btn btn-primary btn-xs">編輯</button><button type="button" class="btn btn-danger btn-xs">刪除</button></a></td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td><a><button type="button" class="btn btn-primary btn-xs">編輯</button><button type="button" class="btn btn-danger btn-xs">刪除</button></a></td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td><a><button type="button" class="btn btn-primary btn-xs">編輯</button><button type="button" class="btn btn-danger btn-xs">刪除</button></a></td></tr></tbody></table></div></div><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">?</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">?</span></a></li></ul>
</div>
</div>
</body>
</html>

圖標

bootstrap提供，不多。
fontawesome組件
- 官方網(wǎng)址：https://fontawesome.dashgame.com/
- 下載
- 引入
- 注意：引入的css的文件地址是相對地址，否則無法識別到文件
```
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
```

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識bootstrap</title>
<!--    包含大量圖標-->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><!--    包含大量圖標-->
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<span class="glyphicon glyphicon-search" aria-hidden="true">1111</span>
<i class="fa fa-address-book" aria-hidden="true">你好</i>
<i class="fa fa-bandcamp" aria-hidden="true">世界</i>
</body>
</html>

BootStrap依賴jQuery

jQuery 是一種主流的 JavaScript 庫，被廣泛用于簡化網(wǎng)頁開發(fā)中的客戶端腳本編寫。

BootStrap依賴JavaScript的類庫，jQuery。

下載 jQuery，在頁面上應(yīng)用上jQuery。
在頁面上應(yīng)用BootStrap的JavaScript類庫。
即使用bootstrap里的動態(tài)樣式

引入jquery，bootstrap的動態(tài)樣式才能生效

BootStrap的JavaScript插件

官方文檔：JavaScript 插件 · Bootstrap v3 中文文檔 | Bootstrap 中文網(wǎng) (bootcss.com)

<!--先引入jquery,因為bootstrap.js需要依賴jquery-->
<script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script>
<!--再引入bootstrap.js,是動態(tài)效果需要的js代碼-->
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<!--script放在bodymo'wei-->
</body>
</html>

舉例：模態(tài)框 (動態(tài)實例)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">動態(tài)實例運行
</button><!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">標題</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button><button type="button" class="btn btn-primary">保存</button></div></div></div>
</div>

點擊按鈕出彈窗

# JavaScript

JavaScript，是一門編程語言。瀏覽器就是JavaScript語言的解釋器。

DOM和BOM

相當(dāng)于編程語言內(nèi)置的模塊。
例如：Python中的re、random、time、json模塊等。

jQuery

相當(dāng)于是編程語言的第三方模塊。
例如：requests、openpyxl

JavaScript定義

JavaScript是一門編程語言。

JavaScript的意義是什么？

讓程序?qū)崿F(xiàn)一些動態(tài)的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menu {width: 300px;height: 200px;border: 2px solid red;}.header {height: 70%;background: yellow;}</style>
</head>
<body>
<div class="menu">
<!--    onclick,js代碼觸發(fā)條件--><div class="header" onclick="myfunc()">標題</div><div class="content">內(nèi)容</div>
</div>
<!--js是綁定html使用的-->
<script type="text/javascript">function myfunc() {//alert("你好！")confirm("是否要繼續(xù)")}
</script></body>
</html>

前端三大組件：

HTML，裸體。
CSS，好看的衣服。
JavaScript，動態(tài)。

JS特點

變量名

在 JavaScript 中我們以分號結(jié)束語句。變量名稱可以由數(shù)字、字母、美元符號 $ 或者下劃線 _ 組成，但是不能包含空格或者以數(shù)字為開頭。

通過在變量前面使用關(guān)鍵字 var，聲明一個變量
```
var ourName;
```

JavaScript 提供八種不同的數(shù)據(jù)類型，它們是 undefined（未定義）、null（空）、boolean（布爾型）、string（字符串）、symbol、number（數(shù)字）、bigint（可以表示任意大的整數(shù)）和 object（對象）。

解釋型語言

與C語言等編譯型語言不同，無需編譯，跨平臺
C = >obj JAVA =>.class

單線程

JS引擎單線程
異步機制

ECMA標準

ECMAScript(ES),前端常說的ES6即ECMAScript 6.0
JavaScript是ECMA標準的實現(xiàn)

代碼位置

寫在</head>前，</style>之后
寫在</body>前,整個body的末尾處（推薦）

因為html從上到下執(zhí)行，如果js很多，放在head里會再加載網(wǎng)頁前浪費很多時間

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style><!--   css樣式--></style><!--位置1--><script type="text/javascript">//編寫js代碼    </script>
</head>
<body><div class="container"><div class="header"></div><div class="content">     </div></div><!--位置2   推薦--><script type="text/javascript">//編寫js代碼  </script>
</body>
</html>

JS代碼的存在形式：

當(dāng)前HTML中。

<script type="text/javascript">// 編寫JavaScript代碼
</script>

在其他js文件中，導(dǎo)入使用。

my.js

function f1(){alert(123);
}

導(dǎo)入js

<!--位置   推薦-->
<script src="static/js/my.js"></script>

注釋

HTML的注釋
```

```
CSS的注釋，style代碼塊內(nèi)
```
/* 注釋內(nèi)容 */
```

JavaScript的注釋，script代碼塊內(nèi)

// 注釋內(nèi)容/* 注釋內(nèi)容 */

typeof操作符

使用 typeof 操作符可以返回變量的數(shù)據(jù)類型。

typeof 操作符有帶括號和不帶括號兩種用法，如下例所示：

typeof x;       // 獲取變量 x 的數(shù)據(jù)類型
typeof(x);      // 獲取變量 x 的數(shù)據(jù)類型

JavaScript中的幾個重要概念

標識符

所謂標識符，就是名字。JavaScript 中的標識符包括變量名、函數(shù)名、參數(shù)名、屬性名、類名等。

合法的標識符應(yīng)該注意以下強制規(guī)則：

第一個字符必須是字母、下劃線(_)或美元符號（$）。
除了第一個字符外，其他位置可以使用 Unicode 字符。一般建議僅使用 ASCII 編碼的字母，不建議使用雙字節(jié)的字符。
不能與 JavaScript 關(guān)鍵字、保留字重名。

示例：

var str = "歡迎來到我的世界"
document.write(str)

關(guān)鍵字

關(guān)鍵字（Keyword）就是 JavaScript 語言內(nèi)部使用的一組名字（或稱為命令）。

這些名字具有特定的用途，用戶不能自定義同名的標識符。

具體說明如表所示。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZV3uIJLV-1692854497553)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E5%85%B3%E9%94%AE%E5%AD%97.png)]

保留字

保留字就是 JavaScript 語言內(nèi)部預(yù)備使用的一組名字（或稱為命令）。

這些名字目前還沒有具體的用途，是為 JavaScript 升級版本預(yù)留備用的，建議用戶不要使用。

具體說明如表所示。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lRk4RBEj-1692854497553)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E4%BF%9D%E7%95%99%E5%AD%97.png)]

大小寫

JavaScript 嚴格區(qū)分大小寫，所以 Hello 和 hello 是兩個不同的標識符。

注釋

注釋是給開發(fā)人員看的，程序在執(zhí)行時會自動忽略注釋的內(nèi)容

所以我們通常使用注釋來為代碼添加一些解釋說明或描述，以提高代碼的可讀性。

單行注釋

單行注釋以雙斜杠//開頭，//之后的所有內(nèi)容都會看作是注釋的內(nèi)容，對//之前的內(nèi)容則不會產(chǎn)生影響。

<html>
<head><title>JavaScript</title>
</head>
<body><div id="demo"></div><script>// 在 id 屬性為 demo 的標簽中添加指定內(nèi)容document.getElementById("demo").innerHTML = '<h2 id="h2_id" class="h2_class">我是二級標題</h2>';</script>
</body>
</html>

innerHTML屬性允許更改html元素的內(nèi)容

多行注釋

多行注釋以/*開頭，并以*/結(jié)尾，出現(xiàn)在/*和*/之間的所有內(nèi)容都會看作是注釋的內(nèi)容。

<html>
<head><title>JavaScript</title>
</head>
<body><div id="demo"></div><script>/*在 id 屬性為 demo 的標簽中添加指定內(nèi)容*/document.getElementById("demo").innerHTML = "http://c.xxx.net/js/";</script>
</body>
</html>

定義變量

在 JavaScript 中，定義變量需要使用var關(guān)鍵字，語法格式如下：

var 變量名;

定義變量時，可以一次定義一個或多個變量，若定義多個變量，則需要在變量名之間使用逗號,分隔開。

var a,b,c;

變量定義后，如果沒有為變量賦值，那么這些變量會被賦予一個初始值——undefined（未定義）。

賦值

var關(guān)鍵字

變量定義后，可以使用等于號=來為變量賦值，等號左邊的為變量的名稱，等號右邊為要賦予變量的值。

var num;    // 定義一個變量 num
num = 1;    // 將變量 num 賦值為 1

此外，也可以在定義變量的同時為變量賦值，如下例所示：

var num = 1;                // 定義一個變量 num 并將其賦值為 1
var a = 2, b = 3, c = 4;    // 同時定義 a、b、c 三個變量并分別賦值為 2、3、4

let和const關(guān)鍵字

2015 年以前，JavaScript 只能通過 var 關(guān)鍵字來聲明變量。

在 ECMAScript6（ES6）發(fā)布之后，新增了 let 和 const 兩個關(guān)鍵字來聲明變量，其中：

使用 let 關(guān)鍵字聲明的變量只在其所在的代碼塊中有效（類似于局部變量），并且在這個代碼塊中，同名的變量不能重復(fù)聲明；
const 關(guān)鍵字的功能和 let 相同，但使用 const 關(guān)鍵字聲明的變量還具備另外一個特點，那就是 const 關(guān)鍵字定義的變量，一旦定義，就不能修改（即使用 const 關(guān)鍵字定義的為常量）。

let name = "小明";      // 聲明一個變量 name 并賦值為“小明”
let age  = 11;          // 聲明一個變量 age
let age  = 13;          // 報錯：變量 age 不能重復(fù)定義
const PI = 3.1415       // 聲明一個常量 PI，并賦值為 3.1415
console.log(PI)         // 在控制臺打印 PI

var與let區(qū)別

for (var i = 0; i < 10; i++) {(function (i) {setTimeout(function () {console.log(i);}, 100);})(i);
}
// 輸出10個10

for (let i = 0; i < 10; i++) {setTimeout(function () {console.log(i);}, 100);
}
// 輸出0-9

var:

1. 通過 `for` 循環(huán)，我們在每次迭代中都會調(diào)用 `setTimeout` 函數(shù)，將一個函數(shù)放入事件隊列，并設(shè)置在 100 毫秒后執(zhí)行。這意味著在每次迭代中，都會創(chuàng)建一個要執(zhí)行的函數(shù)，但這些函數(shù)在 100 毫秒后才會執(zhí)行。2. `for` 循環(huán)迭代的過程非常快，而且在 JavaScript 中，事件隊列中的函數(shù)在當(dāng)前執(zhí)行堆棧完成后才會執(zhí)行。因此，在 `for` 循環(huán)結(jié)束后，事件隊列中會有 10 個函數(shù)等待執(zhí)行。3. 由于事件隊列中的函數(shù)在 100 毫秒后才會執(zhí)行，當(dāng)它們執(zhí)行時，循環(huán)已經(jīng)結(jié)束，變量 `i` 的值將變?yōu)?10。因此，無論何時這些函數(shù)執(zhí)行，它們都會輸出變量 `i` 的最終值 10。

let:

因為 `let` 具有塊級作用域，每次循環(huán)迭代都會創(chuàng)建一個新的變量 `i`。這將導(dǎo)致每個函數(shù)閉包捕獲的是不同的變量 `i` 值，從而得到0-9的遞增序列

數(shù)據(jù)類型

JavaScript 中的數(shù)據(jù)類型可以分為兩種類型：

基本數(shù)據(jù)類型（值類型）：字符串（String）、數(shù)字（Number）、布爾（Boolean）、空（Null）、未定義（Undefined）、Symbol；
引用數(shù)據(jù)類型：對象（Object）、數(shù)組（Array）、函數(shù)（Function）。

基礎(chǔ)類型

基礎(chǔ)的類型的值不可改變，按值訪問
存在內(nèi)存棧中
== 會隱式轉(zhuǎn)換類型再去進行值對比，=== 全等會既對比值也對比類型
!==與全等運算符是相反的。這意味著嚴格不相等并返回 false 的地方，用嚴格相等運算符會返回 true，反之亦然。嚴格不相等運算符不會轉(zhuǎn)換值的數(shù)據(jù)類型。

引用類型

值可以被改變，按地址訪問
屬性名存在棧中并且生成一個指針，指針指向內(nèi)存堆中真實數(shù)據(jù)
對比的是指針對象

var a = "abc"
a = 123 //重新創(chuàng)建了一個123對象，a指向，"abc"長時間不被引用會被js垃圾回收
a.toUpperCase()
var obj = {name: "張三"
}
obj.name = "李四"
console.log(obj) // 值被改變了
// {name: '李四'}
var a = 1
a == True  //True   轉(zhuǎn)換為布爾值了
a === True  //False

JavaScript，編程語言。

<script>// 定義變量var name = "hzh";// 輸出console.log(name);
</script>

查看輸出結(jié)果：

字符串類型

// 聲明
// 定義字符串
console.log(name1) // 懷志華1
console.log(name2) // 懷志華2

// 常見功能
var name = "js 你好 ";
// 獲取字符串長度
var v1 = name.length;
// 字符串索引
var v2 = name[0];  // 等效于name.charAt(0)
// 去除兩邊空格
var v3 = name.trim();
// 切片，左閉右開
var v4 = name.substring(0, 2);
console.log(v1) // 6
console.log(v2)  // j
console.log(v3)  // js 你好
console.log(v4)  // js

跑馬燈案例

實現(xiàn)單個字符串流轉(zhuǎn)的功能

<script>// 1.去html中找到某個標簽并獲取他的內(nèi)容(DOM)var tag = document.getElementById("txt");var data_string = tag.innerText;// 2.跑馬燈動態(tài)效果，獲取文本第一個字符放在字符串最后var first_char = data_string[0];var other_string = data_string.substring(1, data_string.length);var new_text = other_string + first_char// 3.在html中更新內(nèi)容tag.innerText = new_text;
</script>

函數(shù)封裝功能

<script>function show() {// 1.去html中找到某個標簽并獲取他的內(nèi)容(DOM)var tag = document.getElementById("txt");var data_string = tag.innerText;// 2.跑馬燈動態(tài)效果，獲取文本第一個字符放在字符串最后var first_char = data_string[0];var other_string = data_string.substring(1, data_string.length);var new_text = other_string + first_char// 3.在html中更新內(nèi)容tag.innerText = new_text;}// js中的定時器，每1000ms即一秒執(zhí)行一次show函數(shù)setInterval(show, 1000);</script>

數(shù)組

類似py列表

// 定義
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

typeof(v1)/typeof(v2) -> object
數(shù)組也是特殊的對象

// 操作
var v1 = [11,22,33,44];v1[1]
v1[0] = "hzh";
// 添加
v1.push("聯(lián)通");        // 尾部追加 [11,22,33,44,"聯(lián)通"]
v1.unshift("聯(lián)通");     // 頭部添加 ["聯(lián)通", 11,22,33,44]
v1.splice(索引位置,0,元素);
v1.splice(1,0,"中國");  // 索引為1處添加 [11,"中國",22,33,44]
// 刪除
v1.pop()     //尾部刪除
v1.shift()   //頭部刪除
v1.splice(索引位置,1)
v1.splice(2,1);  // 索引為2的元素刪除 [11,22,44];
// splice 0：添加  1：刪除

// 循環(huán)
var v1 = [11,22,33,44];
// 注意循環(huán)的是**索引**而不是元素
// 注意循環(huán)里的idx是字符串類型的索引。
for(var idx in v1){// idx=0/1/2/3/    data=v1[idx]
}
for(let idx in v1){v1[idx] = parseInt(idx)+1;
}
var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){// i=0/1/2/3   data=v1[idx]
}
// 每次循環(huán)結(jié)束執(zhí)行i++

注意：break和continue 和py中除代碼書寫結(jié)構(gòu)外，用法一致

案例：動態(tài)數(shù)據(jù)

<body>
<ul id="city"></ul>
<script>// 動態(tài)獲取數(shù)據(jù)var city_list = ["北京", "上海", "深圳"]for (var idx in city_list) {var text = city_list[idx];// 創(chuàng)建<li></li>標簽var tag = document.createElement("li");// 在li標簽中寫入內(nèi)容tag.innerText = text;// 添加到id=city那個標簽里面 DOMvar parent_tag = document.getElementById("city");parent_tag.appendChild(tag);}
</script></body>

對象（字典）

類似py的字典

// 創(chuàng)建對象
info = {"name":"hzh","age":18
}
// 推薦js冒號左邊不加引號
info = {name:"hzh",age:18
}
// 獲取對象值
info.age
info.name = "hzh"info["age"]
info["name"] = "hzh"//刪除鍵
delete info["age"]
info = {name:"hzh",age:18
}
//循環(huán)
for(var key in info){// key=name/age      data=info[key]
}

注意:JavaScript 中，當(dāng)你想要使用一個變量的值作為屬性名來訪問對象的屬性時，你需要使用方括號 [] 來包裹屬性名，而不是使用點 . 運算符。

測試對象屬性

要檢查某個對象是否具有一個屬性，你可以使用 `.hasOwnProperty()` 方法。 根據(jù)對象是否具有該屬性，`someObject.hasOwnProperty(someProperty)` 返回 `true` 或 `false`。

案例：動態(tài)表格

<body>
<table border="1"><thead><tr><th>id</th><th>姓名</th><th>年齡</th></tr><tbody id="body"></tbody></thead>
</table>
<script>// 數(shù)據(jù)列表var data_list = [{id: 1, name: "hzh", age: 18},{id: 2, name: "hzh", age: 18},{id: 3, name: "hzh", age: 18},{id: 4, name: "hzh", age: 18},];for (var idx in data_list) {// 獲取一行數(shù)據(jù)var info = data_list[idx];// 創(chuàng)建一個tr標簽var tr = document.createElement("tr");for (var key in info) {// 獲取鍵對應(yīng)的值var text = info[key];// 創(chuàng)建一個td標簽var td = document.createElement("td");// 將值放入td中td.innerText = text;// 將td放入tr中tr.appendChild(td);// 根據(jù)id獲取id標簽var body_tag = document.getElementById("body")// 將tr添加到tbody里body_tag.appendChild(tr)}}</script>
</body>

類型匯總

基礎(chǔ)類型

String類型

字符串（String）類型是一段以單引號''或雙引號""包裹起來的文本，例如 ‘123’、“abc”。

Number類型

數(shù)值（Number）類型用來定義數(shù)值，JavaScript 中不區(qū)分整數(shù)和小數(shù)（浮點數(shù)）。

統(tǒng)一使用 Number 類型表示，如下例所示：

var num1 = 123;     // 整數(shù)
var num2 = 3.14;    // 浮點數(shù)

Boolean類型

布爾（Boolean）類型只有兩個值，true（真）或者 false（假），在做條件判斷時使用的比較多。

var a = true;   // 定義一個布爾值 true
var b = false;  // 定義一個布爾值 false
var c = 2 > 1;  // 表達式 2 > 1 成立，其結(jié)果為“真（true）”，所以 c 的值為布爾類型的 true
var d = 2 < 1;  // 表達式 2 < 1 不成立，其結(jié)果為“假（false）”，所以 c 的值為布爾類型的 false

Null類型

Null 是一個只有一個值的特殊數(shù)據(jù)類型，表示一個“空”值，即不存在任何值，什么都沒有，用來定義空對象指針。

Undefined類型

Undefined 也是一個只有一個值的特殊數(shù)據(jù)類型，表示未定義。當(dāng)我們聲明一個變量但未給變量賦值時，這個變量的默認值就是 Undefined。例如：

var num;
console.log(num);  // 輸出 undefined

null undefined

"zhangsan".match(/abc/g)//null
var c  //未賦值
console.log(c)  //undefined

Symbol類型

Symbol 是 ECMAScript6 中引入的一種新的數(shù)據(jù)類型，表示獨一無二的值，Symbol 類型的值需要使用 Symbol() 函數(shù)來生成，如下例所示：

var str = "123";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1);          // 輸出 Symbol(123)
console.log(sym2);          // 輸出 Symbol(123)

const info = {name: "張三",[Symbol("job")]: "盜賊"
}
const info1 = {[Symbol("job")]: "囚徒"
}// 就不會覆蓋而是覆蓋

引用類型

Object類型

javaScript 中的對象（Object）類型是一組由鍵、值組成的無序集合，定義對象類型需要使用花括號{ }，語法格式如下：

{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}

其中 name1、name2、…、nameN 為對象中的鍵，value1、value2、…、valueN 為對應(yīng)的值。

在 JavaScript 中，對象類型的鍵都是字符串類型的，值則可以是任意數(shù)據(jù)類型。要獲取對象中的某個值，可以使用對象名.鍵的形式，如下例所示：

var person = {name: 'Bob',age: 20,tags: ['js', 'web', 'mobile'],city: 'Beijing',hasCar: true,zipcode: null
};
console.log(person.name);       // 輸出 Bob
console.log(person.age);        // 輸出 20

new 關(guān)鍵字

// new String(abc)，所以可以調(diào)用String的方法，創(chuàng)建的是一個臨時的對象
var str = "abc"
str.length//3  //str是基礎(chǔ)類型
var str1 = new String("abc")//創(chuàng)建了一個對象
str1
//String {'abc'}  //str1是字符串類型
String(123)//直接使用String時就是類型轉(zhuǎn)換,而new是創(chuàng)建了一個對象
//包裝對象
new String();
new Number();
new Boolean();

Array類型

數(shù)組（Array）是一組按順序排列的數(shù)據(jù)組合。

數(shù)組中的每個值都稱為元素，而且數(shù)組中可以包含任意類型的數(shù)據(jù)。

在 JavaScript 中定義數(shù)組需要使用方括號[ ]，數(shù)組中的每個元素使用逗號進行分隔，例如：

[1, 2, 3, 'hello', true, null]

另外，也可以使用 Array() 函數(shù)來創(chuàng)建數(shù)組，如下例所示：

var arr = new Array(1, 2, 3, 4);
console.log(arr);       // 輸出 [1, 2, 3, 4]

Function類型

函數(shù)（Function）是一段具有特定功能的代碼塊。

函數(shù)并不會自動運行，需要通過函數(shù)名調(diào)用才能運行，如下例所示：

function sayHello(name){return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res);  // 輸出 Hello, Peter

運算符

運算符是用來告訴 JavaScript 引擎執(zhí)行某種操作的符號。

例如加號（+）表示執(zhí)行加法運算，減號（-）表示執(zhí)行減法運算等。

算數(shù)運算符

算數(shù)運算符用來執(zhí)行常見的數(shù)學(xué)運算，例如加法、減法、乘法、除法等。

下表中列舉了 JavaScript 中支持的算術(shù)運算符：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VAqAcSCw-1692854497554)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

var x = 10,y = 4;
console.log("x + y =", x + y);  // 輸出：x + y = 14
console.log("x - y =", x - y);  // 輸出：x - y = 6
console.log("x * y =", x * y);  // 輸出：x * y = 40
console.log("x / y =", x / y);  // 輸出：x / y = 2.5
console.log("x % y =", x % y);  // 輸出：x % y = 2

賦值運算符

賦值運算符用來為變量賦值，下表中列舉了 JavaScript 中支持的賦值運算符：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DZ7VacLS-1692854497554)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

var x = 10;
x += 20;
console.log(x);  // 輸出：30
var x = 12,y = 7;
x -= y;
console.log(x);  // 輸出：5
x = 5;
x *= 25;
console.log(x);  // 輸出：125
x = 50;
x /= 10;
console.log(x);  // 輸出：5
x = 100;
x %= 15;
console.log(x);  // 輸出：10

字符串運算符

JavaScript 中的+和+=運算符除了可以進行數(shù)學(xué)運算外，還可以用來拼接字符串，其中：

+運算符表示將運算符左右兩側(cè)的字符串拼接到一起；
+=運算符表示先將字符串進行拼接，然后再將結(jié)果賦值給運算符左側(cè)的變量。

var x = "Hello ";
var y = "World!";
var z = x + y;
console.log(z);  // 輸出：Hello World!
x += y;
console.log(x);  // 輸出：Hello World!

自增、自減運算符

自增、自減運算符用來對變量的值進行自增（+1）、自減（-1）操作。

下表中列舉了 JavaScript 中支持的自增、自減運算符：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-foauhopX-1692854497555)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E8%87%AA%E5%A2%9E%EF%BC%8C%E8%87%AA%E5%87%8F%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

var x;
x = 10;
console.log(++x);  // 輸出：11
console.log(x);    // 輸出：11
x = 10;
console.log(x++);  // 輸出：10
console.log(x);    // 輸出：11
x = 10;
console.log(--x);  // 輸出：9
console.log(x);    // 輸出：9
x = 10;
console.log(x--);  // 輸出：10
console.log(x);    // 輸出：9

比較運算符

比較運算符用來比較運算符左右兩側(cè)的表達式，比較運算符的運算結(jié)果是一個布爾值。

結(jié)果只有兩種，不是 true 就是 false。

下表中列舉了 JavaScript 中支持的比較運算符：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-s0XMLDJ5-1692854497555)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

var x = 25;
var y = 35;
var z = "25";
console.log(x == z);  // 輸出： true
console.log(x === z); // 輸出： false
console.log(x != y);  // 輸出： true
console.log(x !== z); // 輸出： true
console.log(x < y);   // 輸出： true
console.log(x > y);   // 輸出： false
console.log(x <= y);  // 輸出： true
console.log(x >= y);  // 輸出： false

邏輯運算符

邏輯運算符通常用來組合多個表達式，邏輯運算符的運算結(jié)果是一個布爾值。

只能有兩種結(jié)果，不是 true 就是 false。

下表中列舉了 JavaScript 中支持的邏輯運算符：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1UMeuq5e-1692854497555)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

var year = 2021;
// 閏年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){console.log(year + " 年是閏年。");
} else{console.log(year + " 年是平年。");
}

輸出語句

某些情況下，我們可能需要將程序的運行結(jié)果輸出到瀏覽器中。

JavaScript 中為我們提供了多種不同的輸出語句來向瀏覽器中輸出內(nèi)容：

使用 alert() 函數(shù)來彈出提示框；
使用 confirm() 函數(shù)來彈出一個對話框；
使用 document.write() 方法將內(nèi)容寫入到 HTML 文檔中；
使用 innerHTML 將內(nèi)容寫入到 HTML 標簽中；
使用 console.log() 在瀏覽器的控制臺輸出內(nèi)容。

alert()函數(shù)

使用 JS alert() 函數(shù)可以在瀏覽器中彈出一個提示框。

在提示框中我們可以定義要輸出的內(nèi)容：

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">var a = 11,b = 5;window.alert("a * b = " + a * b);</script>
</body>
</html>

confirm()函數(shù)

JS confirm() 函數(shù)與 alert() 函數(shù)相似，它們都是 window 對象下的函數(shù)，同樣可以在瀏覽器窗口彈出一個提示框，不同的是，使用 confirm() 函數(shù)創(chuàng)建的提示框中，除了包含一個“確定”按鈕外，還有一個“取消”按鈕。如果點擊“確定”按鈕，那么 confirm() 函數(shù)會返回一個布爾值 true，如果點擊“取消”按鈕，那么 confirm() 函數(shù)會返回一個布爾值 false。

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">var res = window.confirm("這里是要顯示的內(nèi)容");if(res == true){alert("你點擊了“確定”按鈕");}else{alert("你點擊了“取消”按鈕");}</script>
</body>
</html>

console.log()

使用 JS console.log() 可以在瀏覽器的控制臺輸出信息，我們通常使用 console.log() 來調(diào)試程序。

要看到 console.log() 的輸出內(nèi)容需要先打開瀏覽器的控制臺。以 Chrome 瀏覽器為例，要打開控制臺您只需要在瀏覽器窗口按 F12 快捷鍵，或者點擊鼠標右鍵，并在彈出的菜單中選擇“檢查”選項即可。最后，在打開的控制臺中選擇“Console”選項

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">var myArr = ["Chrome","Firefox","Edge","Safari","Opera"];console.log(myArr);</script>
</body>
</html>

document.write()

使用 JS document.write() 可以向 HTML 文檔中寫入 HTML 或者 JavaScript 代碼。

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">document.write("<p>現(xiàn)在的時間是：</p>");document.write(Date());</script>
</body>
</html>

innerHTML

與前面介紹的幾個函數(shù)不同，innerHTML 是一個屬性而不是一個函數(shù)。

通過它可以設(shè)置或者獲取指定 HTML 標簽中的內(nèi)容。

示例代碼如下：

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><div id="demo">JavaScript 輸出</div><script type="text/javascript">var demo = document.getElementById("demo");demo.innerHTML = "<h2>innerHTML</h2>"</script>
</body>
</html>

條件判斷

條件判斷語句是程序開發(fā)過程中一種經(jīng)常使用的語句形式。

和大部分編程語言相同，JavaScript中也有條件判斷語句。

if語句

if 語句是 JavaScript 中最簡單的條件判斷語句。

語法格式如下：

if(條件表達式){// 要執(zhí)行的代碼;
}

當(dāng)條件表達式成立，即結(jié)果為布爾值 true 時，就會執(zhí)行{ }中的代碼。

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">var age = 20;if(age >= 18){      // 如果 age >= 18 的結(jié)果為 true，則執(zhí)行下面 { } 中的代碼alert("adult");}</script>
</body>
</html>

if else語句

if else 語句是 if 語句的升級版，它不僅可以指定當(dāng)表達式成立時要執(zhí)行的代碼，還可以指定當(dāng)表達式不成立時要執(zhí)行的代碼，語法格式如下：

if(條件表達式){// 當(dāng)表達式成立時要執(zhí)行的代碼
}else{// 當(dāng)表達式不成立時要執(zhí)行的代碼
}

示例代碼如下：

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">var now = new Date();           // 獲取當(dāng)前的完整日期var dayOfWeek = now.getDay();   // 獲取一個 0-6 之間的數(shù)字，用來表示當(dāng)前是星期幾，0 表示星期日、1 表示星期一、以此類推if (dayOfWeek > 0 && dayOfWeek < 6) {       // 判斷：如果當(dāng)前是星期一到星期五中的一天，則輸出“Have a nice day!”，若不是則輸出“Have a nice weekend!”alert("Have a nice day!");} else {alert("Have a nice weekend!");}</script>
</body>
</html>

if else if else語句

類似py elif語句

if 和 if else 語句都只有一個條件表達式，而 if else if else 語句是它們更高級的形式。

在 if else if else 語句中允許您定義多個條件表達式，并根據(jù)表達式的結(jié)果執(zhí)行相應(yīng)的代碼。

語法格式如下：

if (條件表達式 1) {// 條件表達式 1 為真時執(zhí)行的代碼
} else if (條件表達式 2) {// 條件表達式 2 為真時執(zhí)行的代碼
}
...else if (條件表達式N) {// 條件表達式 N 為真時執(zhí)行的代碼
} else {// 所有條件表達式都為假時要執(zhí)行的代碼
}

示例代碼如下

<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/javascript">var now = new Date();           // 獲取當(dāng)前的完整日期var dayOfWeek = now.getDay();   // 獲取一個 0-6 之間的數(shù)字，用來表示當(dāng)前是星期幾，0 表示星期日、1 表示星期一、以此類推if(dayOfWeek == 0) {            // 判斷當(dāng)前是星期幾alert("星期日")} else if(dayOfWeek == 1) {alert("星期一")} else if(dayOfWeek == 2) {alert("星期二")} else if(dayOfWeek == 3) {alert("星期三")} else if(dayOfWeek == 4) {alert("星期四")} else if(dayOfWeek == 5) {alert("星期五")} else {alert("星期六")}</script>
</body>
</html>

swith case語句

JS switch case 語句與語句的多分支結(jié)構(gòu)類似，都可以根據(jù)不同的條件來執(zhí)行不同的代碼。

但是與 if else 多分支結(jié)構(gòu)相比，switch case 語句更加簡潔和緊湊，執(zhí)行效率更高。

switch case 語句的語法格式如下：

switch (表達式){case value1:statements1  // 當(dāng)表達式的結(jié)果等于 value1 時，則執(zhí)行該代碼break;case value2:statements2  // 當(dāng)表達式的結(jié)果等于 value2 時，則執(zhí)行該代碼break;......case valueN:statementsN  // 當(dāng)表達式的結(jié)果等于 valueN 時，則執(zhí)行該代碼break;default :statements  // 如果沒有與表達式相同的值，則執(zhí)行該代碼
}

switch 語句根據(jù)表達式的值，依次與 case 子句中的值進行比較：

如果兩者相等，則執(zhí)行其后的語句段，當(dāng)遇到break關(guān)鍵字時則跳出整個switch語句。
如果不相等，則繼續(xù)匹配下一個case。
switch 語句包含一個可選的 default 關(guān)鍵字，如果在前面的 case 中沒有找到相等的條件，則執(zhí)行 default 后面的語句段。

示例代碼如下：

var id = 3;
switch (id) {case 1 :console.log("普通會員");break;  //停止執(zhí)行，跳出switchcase 2 :console.log("VIP會員");break;  //停止執(zhí)行，跳出switchcase 3 :console.log("管理員");break;  //停止執(zhí)行，跳出switchdefault :  //上述條件都不滿足時，默認執(zhí)行的代碼console.log("游客");
}

while循環(huán)語句

循環(huán)就是重復(fù)做一件事，在編寫代碼的過程中，我們經(jīng)常會遇到一些需要反復(fù)執(zhí)行的操作。

循環(huán)可以減輕編程壓力，避免代碼冗余，提高開發(fā)效率，方便后期維護。

while 循環(huán)的語法格式如下：

while (條件表達式) {// 要執(zhí)行的代碼
}

示例代碼

var i = 1;
while( i <= 5) {document.write(i+", ");i++;
}

do while循環(huán)語句

do while 循環(huán)與while 循環(huán)非常相似，不同之處在于，do while 循環(huán)會先執(zhí)行循環(huán)中的代碼，然后再對條件表達式進行判斷。因此，無論條件表達式是真還是假，do while 循環(huán)都能至少執(zhí)行一次，而 while 循環(huán)就不行了，如果條件表達式為假會直接退出 while 循環(huán)。

do {// 需要執(zhí)行的代碼
} while (條件表達式);

示例代碼

var i = 1;
do{document.write(i + " ");i++;
}while (i > 5);

for循環(huán)語句

for 循環(huán)中包含三個可選的表達式 initialization、condition 和 increment，其中：

initialization：為一個表達式或者變量聲明，該步驟稱為“初始化計數(shù)器變量”，在循環(huán)過程中只會執(zhí)行一次；
condition：為一個條件表達式，與 while 循環(huán)中的條件表達式功能相同，通常用來與計數(shù)器的值進行比較，以確定是否進行循環(huán)，通過該表達式可以設(shè)置循環(huán)的次數(shù)；
increment：為一個表達式，用來在每次循環(huán)結(jié)束后更新（遞增或遞減）計數(shù)器的值。

示例代碼：

for (var i = 1; i <= 10; i++) {document.write(i + " ");
}

運行結(jié)果：

1 2 3 4 5 6 7 8 9 10

示例：使用for循環(huán)遍歷數(shù)組中的內(nèi)容

var fruits = ["python", "java", "php", "mysql", "redis"];
for(var i = 0; i < fruits.length; i++) {document.write(fruits[i] + "&emsp;");
}

break和continue

默認情況下循環(huán)會在表達式結(jié)果為假時自動退出循環(huán)，否則循環(huán)會一直持續(xù)下去。某些情況下，我們不用等待循環(huán)自動退出，可以主動退出循環(huán)，JavaScript 中提供了 break 和 continue 兩個語句來實現(xiàn)退出循環(huán)和退出（跳過）當(dāng)前循環(huán)，下面我們就來詳細介紹一下。

break語句

使用 break 語句還可以用來跳出循環(huán)，讓程序繼續(xù)執(zhí)行循環(huán)之后的代碼。

示例：

for (var i = 0; i < 10; i++) {if(i == 5) {break;}document.write("i = " + i + "<br>");
}
document.write("循環(huán)之外的代碼");

continue語句

continue 語句用來跳過本次循環(huán)，執(zhí)行下次循環(huán)。

示例：

for (var i = 0; i < 10; i++) {if(i % 2 == 0) {continue;}document.write(i + "&nbsp;");
}

JS函數(shù)

定義函數(shù)

JS 函數(shù)聲明需要以 function 關(guān)鍵字開頭，之后為要創(chuàng)建的函數(shù)名稱，function 關(guān)鍵字與函數(shù)名稱之間使用空格分開，函數(shù)名之后為一個括號( )，括號中用來定義函數(shù)中要使用的參數(shù)（多個參數(shù)之間使用逗號,分隔開），一個函數(shù)最多可以有 255 個參數(shù)，最后為一個花括號{ }，花括號中用來定義函數(shù)的函數(shù)體（即實現(xiàn)函數(shù)的代碼），如下所示：

function functionName(parameter_list) {// 函數(shù)中的代碼
}

代碼示例如下：

function sayHello(name){document.write("Hello " + name);
}

調(diào)用函數(shù)

一旦定義好了一個函數(shù)，我們就可以在當(dāng)前文檔的任意位置來調(diào)用它。調(diào)用函數(shù)非常簡單，只需要函數(shù)名后面加上一個括號即可，例如 alert()、write()。注意，如果在定義函數(shù)時函數(shù)名后面的括號中指定了參數(shù)，那么在調(diào)用函數(shù)時也需要在括號中提供對應(yīng)的參數(shù)。

示例如下：

function sayHello(name){document.write("Hello " + name);
}
// 調(diào)用 sayHello() 函數(shù)
sayHello('python');

默認參數(shù)

在定義函數(shù)時，可以為函數(shù)的參數(shù)設(shè)置一個默認值，這樣當(dāng)我們在調(diào)用這個函數(shù)時，如果沒有提供參數(shù)，就會使用這個默認值作為參數(shù)值，如下例所示：

function sayHello(name = "World"){document.write("Hello " + name);
}
sayHello();
sayHello('python');

函數(shù)返回值

在函數(shù)中可以使用 return 語句將一個值（函數(shù)的運行結(jié)果）返回給調(diào)用函數(shù)的程序，這個值可以是任何類型，例如數(shù)組、對象、字符串等。對于有返回值的函數(shù)，可以會使用一個變量來接收這個函數(shù)的返回值，示例代碼如下：

function getSum(num1, num2){return num1 + num2;
}
var sum1 = getSum(7, 12);      // 函數(shù)返回值為：19
var sum2 = getSum(-5, 33);     // 函數(shù)返回值為：28

另外，一個函數(shù)只能有一個返回值，若要返回多個值則，則可以將值放入一個數(shù)組中，然后返回這個數(shù)組即可。

事件

事件處理

DOM

DOM是Document Object Model（文檔對象模型）的縮寫。它是一種編程接口（API），用于在HTML和XML文檔中以對象的方式表示和操作文檔。

DOM，就是一個模塊，模塊可以對HTML頁面中的標簽進行操作。

<!--    根據(jù)ID獲取標簽-->
var tag = document.getElementById("xx");<!--獲取標簽中的文本-->
tag.innerText<!--修改標簽中的文本-->
tag.innerText = "哈哈哈哈哈";<!--創(chuàng)建標簽 <div>哈哈哈哈哈</div>-->
var tag = document.createElement("div");<!--標簽寫內(nèi)容-->
tag.innerText = "哈哈哈哈哈";

<ul id="city"></ul><script type="text/javascript">var tag = document.getElementById("city");var newTag = document.createElement("li");newTag.innerText = "北京";// 把newTag標簽添加到頁面里tag.appendChild(newTag);
</script>

事件綁定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" placeholder="請輸入內(nèi)容" id="txtUser"/>
<input type="button" value="點擊添加" onclick="addCityInfo()">
<ul id="city"></ul><script type="text/javascript">function addCityInfo() {// 1.找到輸入標簽var txtTag = document.getElementById("txtUser");// 2.獲取input框中用戶輸入的內(nèi)容var newString = txtTag.value;// 判斷用戶輸入是否為空，只有不為空才能繼續(xù)。if (newString.length > 0) {// 3.創(chuàng)建標簽 <li></li> 中間的文本信息就是用戶輸入的內(nèi)容var newTag = document.createElement("li");newTag.innerText = newString;// 4.標簽添加到ul中var parentTag = document.getElementById("city");parentTag.appendChild(newTag);// 3.將input框內(nèi)容清空txtTag.value = "";}else{alert("輸入不能為空");}}</script>
</body>
</html>

注意：DOM中還有很多操作。

DOM可以實現(xiàn)很多功能，但是比較繁瑣。
頁面上的效果：jQuery來實現(xiàn) / vue.js / react.js

JS 事件（event）是當(dāng)用戶與網(wǎng)頁進行交互時發(fā)生的事情，例如單機某個鏈接或按鈕、在文本框中輸入文本、按下鍵盤上的某個按鍵、移動鼠標等等。當(dāng)事件發(fā)生時，您可以使用 JavaScript 中的事件處理程序（也可稱為事件監(jiān)聽器）來檢測并執(zhí)行某些特定的程序。

一般情況下事件的名稱都是以單詞on開頭的，例如點擊事件 onclick、頁面加載事件 onload 等。下表中列舉了一些 JavaScript 中常用的事件。

事件只有與 HTML 元素綁定之后才能被觸發(fā)，為 HTML 元素綁定事件處理程序的方法由很多，最簡單的就是通過 HTML事件屬性來直接綁定事件處理程序，例如 onclick、onmouseover、onmouseout 等屬性。

以 onclick 屬性為例，通過該屬性我們可以為指定的 HTML 元素定義鼠標點擊事件（即在該元素上單擊鼠標左鍵時觸發(fā)的事件），示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><button type="button" onclick="myBtn()">按鈕</button><script type="text/javascript">function myBtn(){alert("Hello World!");}</script>
</body>
</html>

我們也可以直接使用 JavaScript 中提供的內(nèi)置函數(shù)來為指定元素綁定事件處理程序，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><button type="button" id="myBtn">按鈕</button><script>function sayHello() {alert('Hello World!');}document.getElementById("myBtn").onclick = sayHello;</script>
</body>
</html>

事件示例

一般情況下，事件可以分為四大類——鼠標事件、鍵盤事件、表單事件和窗口事件，另外還有一些其它事件。下面通過幾個示例來簡單介紹一些比較常用的事件。

onmouseover事件

onmouseover 事件就是指當(dāng)用戶鼠標指針移動到元素上時觸發(fā)的事件，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><button type="button" onmouseover="alert('鼠標已經(jīng)移動到了該按鈕上');">請將鼠標移動至此處</button><br><a href="#" onmouseover="myEvent()">請將鼠標移動至此處</a><script>function myEvent() {alert('鼠標已經(jīng)移動到了該鏈接上');}</script>
</body>
</html>

onmouseout事件

onmouseout 事件會在鼠標從元素上離開時觸發(fā)，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div><script>function myEvent() {alert('您的鼠標已經(jīng)離開指定元素');}document.getElementById("myBox").onmouseout = myEvent;</script>
</body>
</html>

onkeydown事件

onkeydown 事件是指當(dāng)用戶按下鍵盤上的某個按鍵時觸發(fā)的事件，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><input type="text" onkeydown="myEvent()"><script>function myEvent() {alert("您按下了鍵盤上的某個按鈕");}</script>
</body>
</html>

onkeyup事件

onkeyup 事件是指當(dāng)用戶按下鍵盤上的某個按鍵并將其釋放（即按下并松開某個按鍵）時觸發(fā)的事件，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><input type="text" onkeyup="myEvent()"><script>function myEvent() {alert("您按下了鍵盤上的某個按鈕，并將其釋放了");}</script>
</body>
</html>

作用域

在 JavaScript 中，您可以在任意位置聲明變量，但不同的位置會影響變量的可用范圍，這個范圍稱為作用域。作用域可以大致分為兩種類型，分別是全局作用域和局部作用域。下面就來分別介紹一下。

全局作用域

全局作用域是指變量可以在當(dāng)前腳本的任意位置訪問，擁有全局作用域的變量也被稱為“全局變量”，一般情況下?lián)碛幸韵绿卣鞯淖兞烤哂腥肿饔糜?#xff1a;

最外層的函數(shù)和在最外層函數(shù)外面定義的變量擁有全局作用域；
所有未定義直接賦值的變量擁有全局作用域；
所有 window 對象的屬性擁有全局作用域，例如 window.name、window.location、window.top 等。

示例代碼如下：

var str = "Hello World!";
function myFun(){document.write(str);    // 輸出：Hello World!
}
myFun();
document.write(str);        // 輸出：Hello World!

局部作用域

在函數(shù)內(nèi)部聲明的變量具有局部作用域，擁有局部作用域的變量也被稱為“局部變量”，局部變量只能在其作用域中（函數(shù)內(nèi)部）使用。示例代碼如下：

function myFun(){var str = "Hello World!";document.write(str);    // 輸出：Hello World!
}
document.write(str);        // 報錯：str is not defined

在函數(shù)內(nèi)定義的局部變量只有在函數(shù)被調(diào)用時才會生成，當(dāng)函數(shù)執(zhí)行完畢后會被立即銷毀。

案例：表單驗證

表單是 Web 應(yīng)用（網(wǎng)站）的重要組成部分，通過表單可以收集用戶提交的信息，例如姓名、郵箱、電話等。由于用戶在填寫這些信息時，有可能出現(xiàn)一些錯誤，例如輸入手機號時漏掉了一位、在輸入的內(nèi)容前后輸入空格、郵箱的格式不正確等。為了節(jié)省帶寬同時避免這些問題對服務(wù)器造成不必要的壓力，我們可以使用 JavaScript 在提交數(shù)據(jù)之前對數(shù)據(jù)進行檢查，確認無誤后再發(fā)送到服務(wù)器。

使用 JavaScript 來驗證提交數(shù)據(jù)（客戶端驗證）比將數(shù)據(jù)提交到服務(wù)器再進行驗證（服務(wù)器端驗證）用戶體驗要更好，因為客戶端驗證發(fā)生在用戶瀏覽器中，無需向服務(wù)器發(fā)送請求，所以速度更快，而服務(wù)器端驗證，需要先將數(shù)據(jù)提交到服務(wù)器，然后服務(wù)器再將結(jié)果返回給瀏覽器，用戶需要等待服務(wù)器響應(yīng)結(jié)果才能知道哪里出了問題。

表單驗證通常由兩個部分組成：

必填字段驗證：確保必填的字段都被填寫；
數(shù)據(jù)格式驗證：確保所填內(nèi)容的類型和格式是正確的、有效的。

驗證碼demo

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Title</title>  
<style>  
.container {  
width: 300px;  
height: 50px;  
margin: 200px auto;  
padding: 100px;  
border: red solid 1px;  
text-align: center;  
font-size: 24px;  
}  
</style>  
</head>  
<body>  
<div class="container">  
<!-- onsubmit return true則提交表單，false則阻住提交-->  
<form action="" method="post" onsubmit="return validateForm();">  
<label>驗證碼：</label>  
<input type="text" id="vailcode" name="captcha" placeholder="驗證碼">  
<span id="captcha" onclick="getCaptcha()"></span><br>  
<input type="submit" id="newVailcode" value="提交">  
</form>  
</div>  
<script>  
var capCode = getCaptcha();  function getCaptcha() {  
var cap = Math.floor(Math.random() * 10000).toString();  
if (cap.length != 4) {  cap += "0";  
}  
document.getElementById("captcha").innerHTML = cap;  
return capCode = cap;  
}  function validateForm() {  
var captchaInput = document.querySelector("input[name='captcha']").value;  if (captchaInput == "") {  
alert("請輸入驗證碼");  
return false; // 阻止表單提交  
} else if (capCode != captchaInput) {  
alert("驗證碼不正確");  
return false; // 阻止表單提交  
}  
alert("驗證碼正確")  
return true; // 允許表單提交  
}  
</script>  
</body>  
</html>

必填字段驗證

必填字段驗證在用戶注冊時比較常見，通過必填字段驗證，能夠確保表單中的必填字段都被填寫，例如用戶名、密碼、郵箱等。

示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>必填字段驗證</title><style>.error{color: red;}</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post"><fieldset style="text-align: center;width: 300px;position: relative"><legend>注冊:</legend><div class="row"><label>賬&emsp;號：</label><input type="text" name="name"><span class="error" id="nameErr"></span></div><div class="row"><label>密&emsp;碼：</label><input type="password" name="pwd"><span class="error" id="pwdErr"></span></div><div class="row"><label>郵&emsp;箱：</label><input type="text" name="email"><span class="error" id="emailErr"></span></div><div class="row"><label>電&emsp;話：</label><input type="text" name="mobile" maxlength="11"><span class="error" id="mobileErr"></span></div><div class="row"><label>驗證碼：</label><input type="text" name="captcha" maxlength="4" style="width: 120px;"><span id="captcha" onclick="getCaptcha()"></span><span class="error" id="captchaErr"></span></div><div class="row"><input type="submit" value="注冊"></div></fieldset></form>
<script>// 生成驗證碼var captcha = getCaptcha();// 獲取驗證碼function getCaptcha(){var cap = Math.floor(Math.random()*10000).toString();if(cap.length != 4) cap += "0";captcha = cap;document.getElementById("captcha").innerHTML = cap;}// 顯示錯誤消息function printError(elemId, hintMsg) {document.getElementById(elemId).innerHTML = hintMsg;}// 驗證表單數(shù)據(jù)function validateForm() {// 獲取表單元素的值var name = document.querySelector("input[name='name']").value;var pwd = document.querySelector("input[name='pwd']").value;var email = document.querySelector("input[name='email']").value;var mobile = document.querySelector("input[name='mobile']").value;var captcha = document.querySelector("input[name='captcha']").value;if(name == "" || name == null){printError("nameErr", "用戶名不能為空");return false;}if(pwd == "" || pwd == null){printError("pwdErr", "密碼不能為空");return false;}if(email == "" || email == null){printError("emailErr", "郵箱不能為空");return false;}if(mobile == "" || mobile == null){printError("mobileErr", "手機號不能為空");return false;}if(captcha == "" || captcha == null){printError("captchaErr", "驗證碼不能為空");return false;}}// 清空 input 標簽后的提示信息var tags = document.getElementsByTagName('input');for (var i = 0; i < tags.length; i++) {//元素內(nèi)容發(fā)生改變觸發(fā)onchange事件tags[i].onchange = function(){//this.name 獲取標簽的name屬性var idname = this.name + "Err";document.getElementById(idname).innerHTML = '';}}</script>
</body>
</html>

數(shù)據(jù)格式驗證

數(shù)據(jù)格式驗證就是通過正則表達式來驗證用戶所填的數(shù)據(jù)，是否符合要求，以郵箱地址為例，正確的郵箱地址中要包含一個@和一個.，而且@不能是郵箱地址的第一個字符，.要出現(xiàn)在@之后。

示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)據(jù)格式驗證</title><style>.error{color: red;font-size: 10px;}</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post"><fieldset style="text-align: center;width: 350px;position: relative"><legend>注冊:</legend><div class="row"><label>賬&emsp;號：</label><input type="text" name="name"><br><span class="error" id="nameErr"></span></div><div class="row"><label>密&emsp;碼：</label><input type="password" name="pwd"><br><span class="error" id="pwdErr"></span></div><div class="row"><label>郵&emsp;箱：</label><input type="text" name="email"><br><span class="error" id="emailErr"></span></div><div class="row"><label>電&emsp;話：</label><input type="text" name="mobile" maxlength="11"><br><span class="error" id="mobileErr"></span></div><div class="row"><label>驗證碼：</label><input type="text" name="captcha" maxlength="4" style="width: 120px;"><span id="captcha" onclick="getCaptcha()"></span><br><span class="error" id="captchaErr"></span></div><div class="row"><input type="submit" value="注冊"></div></fieldset></form>
<script>// 生成驗證碼var capCode = getCaptcha();// 獲取驗證碼function getCaptcha(){var cap = Math.floor(Math.random()*10000).toString();if(cap.length != 4) cap += "0";document.getElementById("captcha").innerHTML = cap;return capCode = cap;}// 清空 input 標簽后的提示信息var tags = document.getElementsByTagName('input');for (var i = 0; i < tags.length; i++) {tags[i].onchange = function(){var idname = this.name + "Err";document.getElementById(idname).innerHTML = '';}}// 顯示錯誤消息function printError(elemId, hintMsg) {document.getElementById(elemId).innerHTML = hintMsg;}// 驗證表單數(shù)據(jù)function validateForm() {// 獲取表單元素的值var name = document.querySelector("input[name='name']").value;var pwd = document.querySelector("input[name='pwd']").value;var email = document.querySelector("input[name='email']").value;var mobile = document.querySelector("input[name='mobile']").value;var captcha = document.querySelector("input[name='captcha']").value;if(name == "" || name == null){printError("nameErr", "用戶名不能為空");return false;}if(pwd == "" || pwd == null){printError("pwdErr", "密碼不能為空");return false;}if(email == "" || email == null){printError("emailErr", "郵箱不能為空");return false;} else {var regex = /^\S+@\S+\.\S+$/;if(regex.test(email) === false) {printError("emailErr", "請輸入正確的郵箱地址");return false;}}if(mobile == "" || mobile == null){printError("mobileErr", "手機號不能為空");return false;}if(captcha == "" || captcha == null){printError("captchaErr", "驗證碼不能為空");return false;} else {console.log(capCode);console.log(captcha);if(capCode != captcha){printError("captchaErr", "驗證碼有誤");return false;}}}</script>
</body>
</html>

jQuery庫

jQuery是一個JavaScript第三方模塊（第三方類庫）。

基于jQuery，自己開發(fā)一個功能。
現(xiàn)成的工具依賴jQuery，例如：BootStrap動態(tài)效果。

快速上手

下載jQuery
```
https://jquery.com/
```
應(yīng)用jQuery

簡單案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="txt">中國你好</h1><!--導(dǎo)入jquery-->
<script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script>
<script>// 利用jquery中功能實現(xiàn)修改頁面內(nèi)容// 找到id=txt的標簽，進行內(nèi)容修改// jquery的方法，比dom方法簡單$("#txt").text("美國你好");// dom的方法document.getElementById("txt").innerText = "英國你好";</script></body>
</html>

尋找標簽

直接尋找

ID選擇器

<h1 id="txt">中國聯(lián)通</h1>
<h1>中國聯(lián)通</h1>
<h1>中國聯(lián)通</h1>

$("#txt")

樣式選擇器

<h1 class="c1">中國聯(lián)通1</h1>
<h1 class="c1">中國聯(lián)通2</h1>
<h1 class="c2">中國聯(lián)通3</h1>

$(".c1")

標簽選擇器

<h1 class="c1">中國聯(lián)通1</h1>
<div class="c1">中國聯(lián)通2</h1>
<h1 class="c2">中國聯(lián)通3</h1>

$("h1")

層級選擇器

<h1 class="c1">中國聯(lián)通1</h1>
<h1 class="c1"><div class="c2"><span></span><a></a></div>
</h1>
<h1 class="c2">中國聯(lián)通3</h1>

$(".c1 .c2 a")

多選擇器

<h1 class="c1">中國聯(lián)通1</h1>
<h1 class="c1"><div class="c3"><span></span><a></a></div>
</h1>
<h1 class="c2">中國聯(lián)通3</h1>
<ul><li>xx</li><li>xx</li>
</ul>

$("#c3,#c2,li")

屬性選擇器

<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />

$("input[name='n1']")

間接尋找

找同級兄弟標簽

<div><div>北京</div><div id='c1'>上海</div><div>深圳</div><div>廣州</div>
</div>

$("#c1").prev()        // 上一個
$("#c1")
$("#c1").next()        // 下一個
$("#c1").next().next() // 下一個、下一個$("#c1").siblings()    // 所有的同級兄弟

找父子

<div><div><div>北京</div><div id='c1'><div>青浦區(qū)</div><div class="p10">寶山區(qū)</div><div>浦東新區(qū)</div></div><div>深圳</div><div>廣州</div></div><div><div>陜西</div><div>山西</div><div>河北</div><div>河南</div></div>
</div>

$("#c1").parent()            // 父親
$("#c1").parent().parent()   // 父親、父親$("#c1").children()                // 所有的兒子
$("#c1").children(".p10")          // 所有的兒子中尋找class=p10$("#c1").find(".p10")              // 去所有子孫中尋找class=p10
$("#c1").find("div")              // 去所有子孫中尋找div

案例：菜單切換

默認內(nèi)容隱藏，點擊標題顯示內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menu {width: 200px;height: 800px;border: 1px solid red;}.menu .header {background: yellow;/*內(nèi)邊距 上下10px,左右5px*/padding: 10px 5px;border-bottom: 1px red solid;/*鼠標樣式修改為小手*/cursor: pointer;}.menu .content a {display: block;padding: 5px 5px;/*虛線*/border-bottom: 1px dotted brown;}/*隱藏顯示*/.hide {display: none;}</style>
</head>
<body>
<div class="menu"><div class="item">
<!--        這里的 this 是一個特殊的關(guān)鍵字，在這個上下文中，它指向觸發(fā)了事件的元素--><div class="header" onclick="click_me(this)">上海</div><div class="content hide"><a href="#">寶山</a><a href="#">寶山</a><a href="#">寶山</a></div></div><div class="item"><div class="header" onclick="click_me(this)">北京</div><div class="content hide"><a href="#">海淀</a><a href="#">海淀</a><a href="#">海淀</a><a href="#">海淀</a></div></div></div><script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script>
<script>function click_me(self){// $(self)  -> 表示當(dāng)前點擊的那個標簽。// $(self).next() 下一個標簽// $(self).next().removeClass("hide");   刪除樣式$(self).next().removeClass("hide");}
</script></body>
</html>

點擊標簽顯示內(nèi)容，再點擊則隱藏內(nèi)容

<script>function click_me(self){var is_hide = $(self).next().hasClass("hide")if (is_hide){// 如果有hide標簽則去除hide$(self).next().removeClass("hide")}else{// 沒有hide 標簽則添加$(self).next().addClass("hide")}}
</script>

點擊標題顯示內(nèi)容時，隱藏其他標標題內(nèi)容

<script>function click_me(self){// 將點擊的標簽下的content標簽去除hide標簽，以顯示自己標題下面的內(nèi)容$(self).next().removeClass("hide");// 找到父級item的其他所有同級item里的content標簽然后再添加hide標簽，隱藏內(nèi)容$(self).parent().siblings().find(".content").addClass("hide")}
</script>

樣式操作

addClass
removeClass
hasClass

值操作

<div id='c1'>內(nèi)容</div>
$("#c1").text()        // 獲取文本內(nèi)容
$("#c1").text("休息")   // 設(shè)置文本內(nèi)容
<input type='text' id='c2' />
$("#c2").val()            // 獲取用戶輸入的值
$("#c2").val("哈哈哈")     // 設(shè)置值

案例：動態(tài)創(chuàng)建數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="txt_user" placeholder="用戶名">
<input type="text" id="txt_email" placeholder="郵箱">
<input type="button" value="提交" onclick="get_info()"><ul id="view"></ul>
<script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script>
<script>function get_info() {// 獲取用戶輸入的用戶名和密碼var user_name = $("#txt_user").val();var user_email = $("#txt_email").val();var data = user_name + "和" + user_email;// 創(chuàng)建li標簽，在li內(nèi)容寫入內(nèi)容var new_li = $("<li>").text(data);// 把新創(chuàng)建li標簽添加到ul里面$("#view").append(new_li)}
</script>
</body>
</html>

事件

比dom的代碼量減少

<input type="button" value="提交" onclick="getInfo()"/><script>function getInfo() {}
</script>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul><script>$("li").click(function(){// 點擊li標簽時，自動執(zhí)行這個函數(shù)；// $(this)  當(dāng)前你點擊的是那個標簽。});
</script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul><script src="static/jquery-3.6.0.min.js"></script>
<script>$("li").click(function () {var text = $(this).text();console.log(text);});</script>
</body>
</html>

在jQuery中可以刪除某個標簽。

<div id='c1'>內(nèi)容</div>$("#c1").remove();

案例：刪除元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul><script src="static/jquery-3.6.0.min.js"></script>
<script>$("li").click(function () {$(this).remove();});</script>
</body>
</html>

當(dāng)頁面框架加載完成之后執(zhí)行代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul><script src="static/jquery-3.6.0.min.js"></script>
<script>$(function () {// 當(dāng)頁面的框架加載完成之后，自動就執(zhí)行。$("li").click(function () {$(this).remove();});});
</script>
</body>
</html>

案例：表格數(shù)據(jù)刪除

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>id</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td>001</td><td>懷志華1</td><td><input type="button" value="刪除" class="delete"></td></tr><tr><td>002</td><td>懷志華2</td><td><input type="button" value="刪除" class="delete"></td></tr><tr><td>001</td><td>懷志華3</td><td><input type="button" value="刪除" class="delete"></td></tr></tbody>
</table><script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script>
<script>$(function () {// 找到所有class=delete的標簽,綁定事件$(".delete").click(function () {// 找到tr,刪除當(dāng)前行數(shù)據(jù)$(this).parent().parent().remove()})})
</script>
</body>
</html>

綜合案例：數(shù)據(jù)錄入

HTML
CSS
JavaScript、jQuery
BootStrap（動態(tài)效果依賴jQuery）。

前提準備

導(dǎo)入標準流程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    1.引入bootstrap css--><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!--    2.引入font-awesome css--><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body><!--3.引入bootstrap的依賴jquery--><script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script><!--4.引入bootstrap,js--><script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

可以使用所有bootstrap的樣式了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>數(shù)據(jù)錄入</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!--引入時間選擇插件css--><link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css"></head>
<body>
<div class="container"><form class="form-horizontal" style="margin-top: 50px;border: 2px solid black;padding: 10px"><div class="row clearfix"><div class="col-xs-6"><!--                姓名--><div class="form-group"><label class="col-sm-2 control-label">姓名</label><div class="col-sm-10"><input type="text" placeholder="姓名"></div></div></div><div class="col-xs-6"><!--                年齡--><div class="form-group"><label class="col-sm-2 control-label">年齡</label><div class="col-sm-10"><input type="text" placeholder="年齡"></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><!--                薪資--><div class="form-group"><label class="col-sm-2 control-label">薪資</label><div class="col-sm-10"><input type="text" placeholder="薪資"></div></div></div><div class="col-xs-6"><!--                部門--><div class="form-group"><label class="col-sm-2 control-label">部門</label><div class="col-sm-10"><select class="form-control"><option>IT部門</option><option>銷售部門</option><option>運營部門</option><option>售后部門</option></select></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><!--                入職日期--><div class="form-group"><label class="col-sm-2 control-label">入職日期</label><div class="col-sm-10"><input type="text" id="dt" placeholder="入職日期"></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><!--                提交--><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提交</button></div></div></div></div></form>
</div><script src="static/js/code.jquery.com_jquery-3.7.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<!--引入時間選擇插件js-->
<script src="static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<!--引入中文包-->
<script src="static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>// 日期選擇，相當(dāng)于內(nèi)部綁定了一個事件$(function () {$('#dt').datepicker({format: 'yyyy-mm-dd',startDate: '0',language: "zh-CN",autoclose: true});})
</script></body>
</html>

總結(jié)

了解HTML標簽、標簽結(jié)構(gòu)，基于他可以實現(xiàn)簡單的頁面。
CSS，了解基本樣式；在別人模板的基礎(chǔ)改就可以。
JavaScript、jQuery，了解基本使用
- 事件綁定/尋找標簽/操作標簽。
- 導(dǎo)入現(xiàn)成插件。

后續(xù)開發(fā)過程中，對于前端就是在BootStrap的基礎(chǔ)整改。

查看全文

http://m.risenshineclean.com/news/62753.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

文章目錄

HTML

快速開發(fā)網(wǎng)站Flask

頁面結(jié)構(gòu)

標簽

基礎(chǔ)標簽

超鏈接

圖片

列表

下拉框

表格

input系列

多行文本

form表單

網(wǎng)絡(luò)請求

HTML案例

CSS

CSS盒模型

CSS樣式定義

CSS選擇器

CSS樣式使用

1. 在標簽上直接寫

2. 在head標簽中寫

3.寫到css文件中

標簽樣式

1. 高度和寬度

2. 塊級和行內(nèi)標簽

3.字體設(shè)置

4.文字對齊方式

5.浮動

6.內(nèi)邊距

7.外邊距

CSS樣式案例

1.頭部導(dǎo)航條

2.二級菜單

3.推薦區(qū)域

CSS布局

hover（偽類）

after（偽類）

display

position

1. fixed

案例：返回頂部

案例：對話框

2. relative和absolute

案例：二級菜單圖片

BootStrap框架

初識BootStrap

導(dǎo)航條

柵格系統(tǒng)

container

面板

媒體對象

分頁

BootStrap案例

登錄案例

后臺管理案例1

圖標

BootStrap依賴jQuery

JavaScript定義

JS特點

變量名

代碼位置

注釋

typeof操作符

JavaScript中的幾個重要概念

標識符

關(guān)鍵字

保留字

大小寫

注釋

單行注釋

多行注釋

定義變量

賦值

var關(guān)鍵字

let和const關(guān)鍵字

數(shù)據(jù)類型

數(shù)據(jù)類型

自增、自減運算符