一般做外貿(mào)上什么網(wǎng)站熱狗網(wǎng)站排名優(yōu)化外包
HTML&CSS&JavaScript
文章目錄
- HTML&CSS&JavaScript
- 一、開發(fā)工具及在線幫助文檔
- 二、 HTML
- 2.1 HTML&CSS&JavaScript的作用
- 2.2 HTML基礎(chǔ)結(jié)構(gòu)
- 2.3 HTML概念詞匯解釋
- 2.4 HTML的語法規(guī)則
- 2.5 常用標(biāo)簽
- 三、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 注意事項及細(xì)節(jié)
- 五、注冊頁面案例
一、開發(fā)工具及在線幫助文檔
前端工程師比較推崇的一款開發(fā)工具就是visual studio code,下載地址為:https://code.visualstudio.com/
插件：
- Auto Rename Tag 自動修改標(biāo)簽對插件
- Chinese Language Pack 漢化包
- HTML CSS Support HTML CSS 支持
- Intellij IDEA Keybindings IDEA快捷鍵支持
- Live Server 實時加載功能的小型服務(wù)器
- open in browser 通過瀏覽器打開當(dāng)前文件的插件
- Prettier-Code formatter 代碼美化格式化插件
- Vetur VScode中的Vue工具插件
- vscode-icons 文件顯示圖標(biāo)插件
- Vue 3 snipptes 生成VUE模板插件
- Vue language Features Vue3語言特征插件
在線幫助文檔：
http://www.w3school.com.cn
二、 HTML
HTML是Hyper Text Markup Language的縮寫。意思是超文本標(biāo)記語言。它的作用是搭建網(wǎng)頁結(jié)構(gòu)，在網(wǎng)頁上展示內(nèi)容
2.1 HTML&CSS&JavaScript的作用
- HTML 主要用于網(wǎng)頁主體結(jié)構(gòu)的搭建
- CSS 主要用于頁面元素美化
- JavaScript 主要用于頁面元素的動態(tài)處理
2.2 HTML基礎(chǔ)結(jié)構(gòu)
VSCode中創(chuàng)建html文件，輸入 ! ，默認(rèn)補全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概念詞匯解釋
- 標(biāo)簽：代碼中的一個 <> 叫做一個標(biāo)簽,有些標(biāo)簽成對出現(xiàn),稱之為雙標(biāo)簽,有些標(biāo)簽單獨出現(xiàn),稱之為單標(biāo)簽
-
屬性：一般在開始標(biāo)簽中,用于定義標(biāo)簽的一些特征
-
文本：雙標(biāo)簽中間的文字,包含空格換行等結(jié)構(gòu)
-
元素：經(jīng)過瀏覽器解析后,每一個完整的標(biāo)簽(標(biāo)簽+屬性+文本)可以稱之為一個元素
2.4 HTML的語法規(guī)則
- 無論是雙標(biāo)簽還是單標(biāo)簽都需要正確關(guān)閉
- 屬性必須有值，值必須加引號,H5中屬性名和值相同時可以省略屬性值
- HTML中不允許自定義標(biāo)簽名,強行自定義則無效
- HTML標(biāo)簽不嚴(yán)格區(qū)分大小寫,但是不能大小寫混用
2.5 常用標(biāo)簽
如需參考，強烈推薦看在線文檔，參考一些標(biāo)簽中存在的最佳實踐來開發(fā)。
https://www.w3school.com.cn/html/html5_intro.asp
三、CSS
CSS 層疊樣式表(英文全稱：(Cascading Style Sheets) 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，簡單來說，美化頁面
3.1 引入方式
- 行內(nèi)式：通過元素開始標(biāo)簽的style屬性引入, 樣式語法為
樣式名:樣式值; 樣式名:樣式值; - 內(nèi)嵌式：寫在html中，用
style標(biāo)簽包裹 - 連接式/外部樣式表：在項目單獨創(chuàng)建css樣式文件，在head標(biāo)簽中,通過link標(biāo)簽引入外部CSS樣式文件
<link href="css/index.css" rel="stylesheet" type="text/css"/>
3.2 CSS選擇器
- 簡單選擇器（根據(jù)名稱、id、類來選取元素）
- 元素選擇器：
元素名；ID選擇器：#id；類選擇器：.class - 選擇器之間可以組合，如：
p.center表示只有 class=“center” 的 p 元素才會被選中 - 選擇時還可以以
,分隔，表示元素都選取
- 元素選擇器：
- 組合選擇器（根據(jù)它們之間的特定關(guān)系來選取元素）
- 后代選擇器：
空格；子選擇器：>；相鄰兄弟選擇器：+；通用兄弟選擇器：~
- 后代選擇器：
- 偽類選擇器（根據(jù)特定狀態(tài)選取元素）
- 語法：
selector:pseudo-class，偽類有很多，可參考在線文檔看，一般主要用于鼠標(biāo)懸停提示等
- 語法：
- 偽元素選擇器（選取元素的一部分并設(shè)置其樣式）
- 語法：
selector::pseudo-element，具體使用參考在線文檔
- 語法：
- 屬性選擇器（根據(jù)屬性或?qū)傩灾祦磉x取元素）
- 語法：
[attribute="value"]，如a[target="value"]表示選擇帶有target屬性等于value的a標(biāo)簽，還可以將符號換成|=表示value開頭的元素，具體參考在線文檔
- 語法：
3.3 CSS浮動
CSS 的 Float（浮動）使元素脫離文檔流，按照指定的方向（左或右發(fā)生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
- 浮動設(shè)計的初衷為了解決文字環(huán)繞圖片問題，浮動后一定不會將文字擋住，這是設(shè)計初衷；故使用浮動時會把浮動框外的文字?jǐn)D出去
- 文檔流是文檔中可顯示對象在排列時所占用的位置/空間，而脫離文檔流就是在頁面中不占位置了
浮動原理：
- 當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣
- 當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框
- 如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”
3.4 CSS定位
position 屬性規(guī)定應(yīng)用于元素的定位方法的類型（static、relative、fixed、absolute 或 sticky）
- 這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移
- 元素可以使用的
top，bottom，left和right屬性定位。然而，這些屬性無法單獨工作，必須依賴于上面設(shè)置
- static：默認(rèn)值，靜態(tài)定位，即沒有定位，元素出現(xiàn)在該出現(xiàn)的位置，塊級元素垂直排列，行內(nèi)元素水平排列
- absolute：絕對定位，通過方向?qū)傩?/strong>指定元素相對頁面窗口的頁面位置；定位后元素會讓出原來位置
- relative：相對定位，相對原來位置通過方向?qū)傩远ㄎ?#xff1b;定位后保留原來的站位
- fixed：固定定位，在瀏覽器窗口固定位置，且不會隨著頁面的上下移動而移動；元素定位后會讓出原來的位置
- sticky：粘性定位，根據(jù)用戶的滾動位置進(jìn)行定位，可參考在線文檔
z-index 屬性指定元素的堆棧順序（哪個元素應(yīng)放置在其他元素的前面或后面），具有較高堆疊順序的元素始終位于具有較低堆疊順序的元素之前。
注意：如果兩個定位的元素重疊而未指定 z-index，則位于 HTML 代碼中最后的元素將顯示在頂部。
3.5 CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
- CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距（margin），邊框（border），填充（padding），和實際內(nèi)容（content）
- 說明：
- Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
- Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
- Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
四、JavaScript
JS是一種運行于瀏覽器端上的小腳本語句,可以實現(xiàn)網(wǎng)頁如文本內(nèi)容動,數(shù)據(jù)動態(tài)變化和動畫特效等。
4.1 引入方式
- 內(nèi)部腳本：script 標(biāo)簽內(nèi)嵌js代碼
- 外部腳本：
<script src="js/index.js" type="text/javascript"></script>
4.2 JS 組成部分
- BOM編程：BOM是Browser Object Model的簡寫，即瀏覽器對象模型
- DOM編程：DOM編程其實就是用window對象的document屬性的相關(guān)API完成對頁面元素的控制的編程
- ECMAScript：JS 實現(xiàn)了 ES 的語言標(biāo)準(zhǔn)。JS 還在此基礎(chǔ)上新增了一些拓展。ES即ECMAScript語法規(guī)則。
4.3 BOM編程
BOM是Browser Object Model的簡寫，即瀏覽器對象模型
- window 頂級對象,代表整個瀏覽器窗口
- location對象 window對象的屬性之一,代表瀏覽器的地址欄
- history對象 window對象的屬性之一,代表瀏覽器的訪問歷史
- screen對象 window對象的屬性之一,代表屏幕
- navigator對象 window對象的屬性之一,代表瀏覽器軟件本身
- document對象 window對象的屬性之一,代表瀏覽器窗口目前解析的html文檔
- console對象 window對象的屬性之一,代表瀏覽器開發(fā)者工具的控制臺
- localStorage對象 window對象的屬性之一,代表瀏覽器的本地數(shù)據(jù)持久化存儲
- sessionStorage對象 window對象的屬性之一,代表瀏覽器的本地數(shù)據(jù)會話級存儲
通過BOM編程實現(xiàn)會話級和持久級數(shù)據(jù)存儲
- 會話級數(shù)據(jù) : 內(nèi)存型數(shù)據(jù),是瀏覽器在內(nèi)存上臨時存儲的數(shù)據(jù),瀏覽器關(guān)閉后,數(shù)據(jù)失去,通過window的sessionStorge屬性實現(xiàn)
- 持久級數(shù)據(jù) : 磁盤型數(shù)據(jù),是瀏覽器在磁盤上持久存儲的數(shù)據(jù),瀏覽器關(guān)閉后,數(shù)據(jù)仍在,通過window的localStorge實現(xiàn)
- 可以用于存儲一些服務(wù)端響應(yīng)回來的數(shù)據(jù)，比如：token令牌,或者一些其他功能數(shù)據(jù)
// 會話級數(shù)據(jù)
window.sessionStorage.setItem("sessionMsg","sessionValue");
// 持久級數(shù)據(jù)
window.localStorage.setItem("localMsg","localValue");
4.4 DOM編程
DOM(Document Object Model)編程就是使用document對象的API完成對網(wǎng)頁HTML文檔進(jìn)行動態(tài)修改，以實現(xiàn)網(wǎng)頁數(shù)據(jù)和樣式動態(tài)變化效果的編程
dom樹中節(jié)點的類型
- node 節(jié)點,所有結(jié)點的父類型
- element 元素節(jié)點,node的子類型之一,代表一個完整標(biāo)簽
- attribute 屬性節(jié)點,node的子類型之一,代表元素的屬性
- text 文本節(jié)點,node的子類型之一,代表雙標(biāo)簽中間的文本
4.4.1 獲取頁面元素的幾種方式
- 在整個文檔范圍內(nèi)查找元素結(jié)點
| 功能 | API | 返回值 |
|---|---|---|
| 根據(jù)id值查詢 | document.getElementById(“id值”) | 一個具體的元素節(jié) |
| 根據(jù)標(biāo)簽名查詢 | document.getElementsByTagName(“標(biāo)簽名”) | 元素節(jié)點數(shù)組 |
| 根據(jù)name屬性值查詢 | document.getElementsByName(“name值”) | 元素節(jié)點數(shù)組 |
| 根據(jù)類名查詢 | document.getElementsByClassName(“類名”) | 元素節(jié)點數(shù)組 |
- 在具體元素節(jié)點范圍內(nèi)查找子節(jié)點
| 功能 | API | 返回值 |
|---|---|---|
| 查找子標(biāo)簽 | element.children | 返回子標(biāo)簽數(shù)組 |
| 查找第一個子標(biāo)簽 | element.firstElementChild | 標(biāo)簽對象 |
| 查找最后一個子標(biāo)簽 | element.lastElementChild | 節(jié)點對象 |
- 查找指定子元素節(jié)點的父節(jié)點
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素節(jié)點的父標(biāo)簽 | element.parentElement | 標(biāo)簽對象 |
- 查找指定元素節(jié)點的兄弟節(jié)點
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一個兄弟標(biāo)簽 | node.previousElementSibling | 標(biāo)簽對象 |
| 查找后一個兄弟標(biāo)簽 | node.nextElementSibling | 標(biāo)簽對象 |
4.4.2 操作元素屬性值
- 屬性操作
| 需求 | 操作方式 |
|---|---|
| 讀取屬性值 | 元素對象.屬性名 |
| 修改屬性值 | 元素對象.屬性名=新的屬性值 |
- 內(nèi)部文本操作
| 需求 | 操作方式 |
|---|---|
| 獲取或者設(shè)置標(biāo)簽體的文本內(nèi)容 | element.innerText |
| 獲取或者設(shè)置標(biāo)簽體的內(nèi)容 | element.innerHTML |
4.4.3 增刪元素
| API | 功能 |
|---|---|
| document.createElement(“標(biāo)簽名”) | 創(chuàng)建元素節(jié)點并返回，但不會自動添加到文檔中 |
| document.createTextNode(“文本值”) | 創(chuàng)建文本節(jié)點并返回，但不會自動添加到文檔中 |
| element.appendChild(ele) | 將ele添加到element所有子節(jié)點后面 |
| parentEle.insertBefore(newEle,targetEle) | 將newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新節(jié)點替換原有的舊子節(jié)點 |
| element.remove() | 刪除某個標(biāo)簽 |
4.5 注意事項及細(xì)節(jié)
==和===的差別：對于==符號，如果兩端的數(shù)據(jù)類型不一致，會先進(jìn)行類型轉(zhuǎn)換再比較，故最好使用===- 小數(shù)
Number類型會存在精度問題，優(yōu)先考慮使用decimal，高精度要求情況下，前后端數(shù)字類型交互可考慮用字符串
五、注冊頁面案例
<!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管理系統(tǒng)</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>確認(rèn)密碼</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>