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