HTML&CSS&JavaScript
文章目錄
- HTML&CSS&JavaScript
- 一、開發工具及在線幫助文檔
- 二、 HTML
- 2.1 HTML&CSS&JavaScript的作用
- 2.2 HTML基礎結構
- 2.3 HTML概念詞匯解釋
- 2.4 HTML的語法規則
- 2.5 常用標簽
- 三、CSS
- 3.1 引入方式
- 3.2 CSS選擇器
- 3.3 CSS浮動
- 3.4 CSS定位
- 3.5 CSS盒子模型
- 四、JavaScript
- 4.1 引入方式
- 4.2 JS 組成部分
- 4.3 BOM編程
- 4.4 DOM編程
- 4.4.1 獲取頁面元素的幾種方式
- 4.4.2 操作元素屬性值
- 4.4.3 增刪元素
- 4.5 注意事項及細節
- 五、注冊頁面案例
一、開發工具及在線幫助文檔
前端工程師比較推崇的一款開發工具就是visual studio code,下載地址為:https://code.visualstudio.com/
插件：
- Auto Rename Tag 自動修改標簽對插件
- Chinese Language Pack 漢化包
- HTML CSS Support HTML CSS 支持
- Intellij IDEA Keybindings IDEA快捷鍵支持
- Live Server 實時加載功能的小型服務器
- open in browser 通過瀏覽器打開當前文件的插件
- Prettier-Code formatter 代碼美化格式化插件
- Vetur VScode中的Vue工具插件
- vscode-icons 文件顯示圖標插件
- Vue 3 snipptes 生成VUE模板插件
- Vue language Features Vue3語言特征插件
在線幫助文檔：
http://www.w3school.com.cn
二、 HTML
HTML是Hyper Text Markup Language的縮寫。意思是超文本標記語言。它的作用是搭建網頁結構，在網頁上展示內容
2.1 HTML&CSS&JavaScript的作用
- HTML 主要用于網頁主體結構的搭建
- CSS 主要用于頁面元素美化
- JavaScript 主要用于頁面元素的動態處理
2.2 HTML基礎結構
VSCode中創建html文件，輸入 ! ，默認補全h5代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
2.3 HTML概念詞匯解釋
- 標簽：代碼中的一個 <> 叫做一個標簽,有些標簽成對出現,稱之為雙標簽,有些標簽單獨出現,稱之為單標簽
-
屬性：一般在開始標簽中,用于定義標簽的一些特征
-
文本：雙標簽中間的文字,包含空格換行等結構
-
元素：經過瀏覽器解析后,每一個完整的標簽(標簽+屬性+文本)可以稱之為一個元素
2.4 HTML的語法規則
- 無論是雙標簽還是單標簽都需要正確關閉
- 屬性必須有值，值必須加引號,H5中屬性名和值相同時可以省略屬性值
- HTML中不允許自定義標簽名,強行自定義則無效
- HTML標簽不嚴格區分大小寫,但是不能大小寫混用
2.5 常用標簽
如需參考，強烈推薦看在線文檔，參考一些標簽中存在的最佳實踐來開發。
https://www.w3school.com.cn/html/html5_intro.asp
三、CSS
CSS 層疊樣式表(英文全稱：(Cascading Style Sheets) 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，簡單來說，美化頁面
3.1 引入方式
- 行內式：通過元素開始標簽的style屬性引入, 樣式語法為
樣式名:樣式值; 樣式名:樣式值; - 內嵌式：寫在html中，用
style標簽包裹 - 連接式/外部樣式表：在項目單獨創建css樣式文件，在head標簽中,通過link標簽引入外部CSS樣式文件
<link href="css/index.css" rel="stylesheet" type="text/css"/>
3.2 CSS選擇器
- 簡單選擇器（根據名稱、id、類來選取元素）
- 元素選擇器：
元素名；ID選擇器：#id；類選擇器：.class - 選擇器之間可以組合，如：
p.center表示只有 class=“center” 的 p 元素才會被選中 - 選擇時還可以以
,分隔，表示元素都選取
- 元素選擇器：
- 組合選擇器（根據它們之間的特定關系來選取元素）
- 后代選擇器：
空格；子選擇器：>；相鄰兄弟選擇器：+；通用兄弟選擇器：~
- 后代選擇器：
- 偽類選擇器（根據特定狀態選取元素）
- 語法：
selector:pseudo-class，偽類有很多，可參考在線文檔看，一般主要用于鼠標懸停提示等
- 語法：
- 偽元素選擇器（選取元素的一部分并設置其樣式）
- 語法：
selector::pseudo-element，具體使用參考在線文檔
- 語法：
- 屬性選擇器（根據屬性或屬性值來選取元素）
- 語法：
[attribute="value"]，如a[target="value"]表示選擇帶有target屬性等于value的a標簽，還可以將符號換成|=表示value開頭的元素，具體參考在線文檔
- 語法：
3.3 CSS浮動
CSS 的 Float（浮動）使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
- 浮動設計的初衷為了解決文字環繞圖片問題，浮動后一定不會將文字擋住，這是設計初衷；故使用浮動時會把浮動框外的文字擠出去
- 文檔流是文檔中可顯示對象在排列時所占用的位置/空間，而脫離文檔流就是在頁面中不占位置了
浮動原理：
- 當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣
- 當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框
- 如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”
3.4 CSS定位
position 屬性規定應用于元素的定位方法的類型（static、relative、fixed、absolute 或 sticky）
- 這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移
- 元素可以使用的
top，bottom，left和right屬性定位。然而，這些屬性無法單獨工作，必須依賴于上面設置
- static：默認值，靜態定位，即沒有定位，元素出現在該出現的位置，塊級元素垂直排列，行內元素水平排列
- absolute：絕對定位，通過方向屬性指定元素相對頁面窗口的頁面位置；定位后元素會讓出原來位置
- relative：相對定位，相對原來位置通過方向屬性定位；定位后保留原來的站位
- fixed：固定定位，在瀏覽器窗口固定位置，且不會隨著頁面的上下移動而移動；元素定位后會讓出原來的位置
- sticky：粘性定位，根據用戶的滾動位置進行定位，可參考在線文檔
z-index 屬性指定元素的堆棧順序（哪個元素應放置在其他元素的前面或后面），具有較高堆疊順序的元素始終位于具有較低堆疊順序的元素之前。
注意：如果兩個定位的元素重疊而未指定 z-index，則位于 HTML 代碼中最后的元素將顯示在頂部。
3.5 CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
- CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距（margin），邊框（border），填充（padding），和實際內容（content）
- 說明：
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文本和圖像。
四、JavaScript
JS是一種運行于瀏覽器端上的小腳本語句,可以實現網頁如文本內容動,數據動態變化和動畫特效等。
4.1 引入方式
- 內部腳本：script 標簽內嵌js代碼
- 外部腳本：
<script src="js/index.js" type="text/javascript"></script>
4.2 JS 組成部分
- BOM編程：BOM是Browser Object Model的簡寫，即瀏覽器對象模型
- DOM編程：DOM編程其實就是用window對象的document屬性的相關API完成對頁面元素的控制的編程
- ECMAScript：JS 實現了 ES 的語言標準。JS 還在此基礎上新增了一些拓展。ES即ECMAScript語法規則。
4.3 BOM編程
BOM是Browser Object Model的簡寫，即瀏覽器對象模型
- window 頂級對象,代表整個瀏覽器窗口
- location對象 window對象的屬性之一,代表瀏覽器的地址欄
- history對象 window對象的屬性之一,代表瀏覽器的訪問歷史
- screen對象 window對象的屬性之一,代表屏幕
- navigator對象 window對象的屬性之一,代表瀏覽器軟件本身
- document對象 window對象的屬性之一,代表瀏覽器窗口目前解析的html文檔
- console對象 window對象的屬性之一,代表瀏覽器開發者工具的控制臺
- localStorage對象 window對象的屬性之一,代表瀏覽器的本地數據持久化存儲
- sessionStorage對象 window對象的屬性之一,代表瀏覽器的本地數據會話級存儲
通過BOM編程實現會話級和持久級數據存儲
- 會話級數據 : 內存型數據,是瀏覽器在內存上臨時存儲的數據,瀏覽器關閉后,數據失去,通過window的sessionStorge屬性實現
- 持久級數據 : 磁盤型數據,是瀏覽器在磁盤上持久存儲的數據,瀏覽器關閉后,數據仍在,通過window的localStorge實現
- 可以用于存儲一些服務端響應回來的數據，比如：token令牌,或者一些其他功能數據
// 會話級數據
window.sessionStorage.setItem("sessionMsg","sessionValue");
// 持久級數據
window.localStorage.setItem("localMsg","localValue");
4.4 DOM編程
DOM(Document Object Model)編程就是使用document對象的API完成對網頁HTML文檔進行動態修改，以實現網頁數據和樣式動態變化效果的編程
dom樹中節點的類型
- node 節點,所有結點的父類型
- element 元素節點,node的子類型之一,代表一個完整標簽
- attribute 屬性節點,node的子類型之一,代表元素的屬性
- text 文本節點,node的子類型之一,代表雙標簽中間的文本
4.4.1 獲取頁面元素的幾種方式
- 在整個文檔范圍內查找元素結點
| 功能 | API | 返回值 |
|---|---|---|
| 根據id值查詢 | document.getElementById(“id值”) | 一個具體的元素節 |
| 根據標簽名查詢 | document.getElementsByTagName(“標簽名”) | 元素節點數組 |
| 根據name屬性值查詢 | document.getElementsByName(“name值”) | 元素節點數組 |
| 根據類名查詢 | document.getElementsByClassName(“類名”) | 元素節點數組 |
- 在具體元素節點范圍內查找子節點
| 功能 | API | 返回值 |
|---|---|---|
| 查找子標簽 | element.children | 返回子標簽數組 |
| 查找第一個子標簽 | element.firstElementChild | 標簽對象 |
| 查找最后一個子標簽 | element.lastElementChild | 節點對象 |
- 查找指定子元素節點的父節點
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素節點的父標簽 | element.parentElement | 標簽對象 |
- 查找指定元素節點的兄弟節點
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一個兄弟標簽 | node.previousElementSibling | 標簽對象 |
| 查找后一個兄弟標簽 | node.nextElementSibling | 標簽對象 |
4.4.2 操作元素屬性值
- 屬性操作
| 需求 | 操作方式 |
|---|---|
| 讀取屬性值 | 元素對象.屬性名 |
| 修改屬性值 | 元素對象.屬性名=新的屬性值 |
- 內部文本操作
| 需求 | 操作方式 |
|---|---|
| 獲取或者設置標簽體的文本內容 | element.innerText |
| 獲取或者設置標簽體的內容 | element.innerHTML |
4.4.3 增刪元素
| API | 功能 |
|---|---|
| document.createElement(“標簽名”) | 創建元素節點并返回，但不會自動添加到文檔中 |
| document.createTextNode(“文本值”) | 創建文本節點并返回，但不會自動添加到文檔中 |
| element.appendChild(ele) | 將ele添加到element所有子節點后面 |
| parentEle.insertBefore(newEle,targetEle) | 將newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新節點替換原有的舊子節點 |
| element.remove() | 刪除某個標簽 |
4.5 注意事項及細節
==和===的差別：對于==符號，如果兩端的數據類型不一致，會先進行類型轉換再比較，故最好使用===- 小數
Number類型會存在精度問題，優先考慮使用decimal，高精度要求情況下，前后端數字類型交互可考慮用字符串
五、注冊頁面案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登陸頁面</title><style>html {margin-top: 15%;}.ht{text-align: center;color: cadetblue;font-family: 幼圓;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圓;}.ltr td{border: 1px solid powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}.msg {color: gold;}.buttonContainer{text-align: center;}</style><script>function checkUsername(){var usernameReg = /^[a-zA-Z0-9]{5,10}$/var usernameInput = document.getElementById("usernameInput") var username = usernameInput.value var usernameMsg = document.getElementById("usernameMsg")if(!usernameReg.test(username)){usernameMsg.innerText="格式有誤"return false} usernameMsg.innerText="OK"return true }function checkUserPwd(){var userPwdReg = /^\d{6}$/var userPwdInput = document.getElementById("userPwdInput") var userPwd = userPwdInput.value var userPwdMsg = document.getElementById("userPwdMsg")if(!userPwdReg.test(userPwd)){userPwdMsg.innerText="格式有誤"return false} userPwdMsg.innerText="OK"return true }function checkReUserPwd(){var userPwdReg = /^\d{6}$/// 再次輸入的密碼的格式var reUserPwdInput = document.getElementById("reUserPwdInput") var reUserPwd = reUserPwdInput.value var reUserPwdMsg = document.getElementById("reUserPwdMsg")if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText="格式有誤"return false} // 獲得上次密碼,對比兩次密碼是否一致var userPwdInput = document.getElementById("userPwdInput") var userPwd = userPwdInput.value if(reUserPwd != userPwd){reUserPwdMsg.innerText="兩次密碼不一致"return false} reUserPwdMsg.innerText="OK"return true }function checkForm(){var flag1 = checkUsername()var flag2 = checkUserPwd()var flag3 = checkReUserPwd()return flag1 && flag2 && flag3}</script></head><body><h1 class="ht">歡迎使用XX管理系統</h1><form method="post" action="/user/regist" onsubmit="return checkForm()"><table class="tab" cellspacing="0px"><tr class="ltr"><td>請輸入賬號</td><td><input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()"><span id="usernameMsg" class="msg"></span></td></tr><tr class="ltr"><td>請輸入密碼</td><td><input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()"><span id="userPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td>確認密碼</td><td><input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()"><span id="reUserPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td colspan="2" class="buttonContainer"><input class="btn1" type="submit" value="注冊"><input class="btn1" type="reset" value="重置"><button class="btn1"><a href="login.html">去登錄</a></button></td></tr></table></form></body>
</html>
)
