建設(shè)微信商城網(wǎng)站寧波seo搜索引擎優(yōu)化公司
（一）前端概述
1、定義
- 前端是Web應(yīng)用程序的前臺(tái)部分，運(yùn)行在PC端、移動(dòng)端等瀏覽器上，展現(xiàn)給用戶瀏覽的網(wǎng)頁。
- 通過HTML、CSS、JavaScript等技術(shù)實(shí)現(xiàn)，是用戶能夠直接看到和操作的界面部分。
- 上網(wǎng)就是下載html文檔，瀏覽器是一個(gè)解釋器，運(yùn)行從服務(wù)器下載的html文件，解析html、css和js代碼，呈現(xiàn)網(wǎng)頁效果。
2、功能
前端負(fù)責(zé)將后端提供的數(shù)據(jù)和邏輯以可視化的形式展現(xiàn)給用戶，實(shí)現(xiàn)用戶與網(wǎng)站或應(yīng)用的交互。前端開發(fā)涉及到多種技術(shù)和工具，如框架、庫、編輯器等，旨在提升用戶體驗(yàn)和交互效果。
3、核心技術(shù)
- ?HTML?：超文本標(biāo)記語言（typer text markup language），用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，由各種標(biāo)簽組成，包括標(biāo)題、段落、圖像、鏈接，甚至音樂、程序等非文字元素等。
- ?CSS?：層疊樣式表，用于定義網(wǎng)頁的外觀和布局，控制網(wǎng)頁元素的樣式和布局。
- ?JavaScript?：一種腳本語言，用于實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果和交互功能，如表單驗(yàn)證、動(dòng)畫效果、異步數(shù)據(jù)請求等。
4、發(fā)展歷程與趨勢
- ?早期發(fā)展?：在互聯(lián)網(wǎng)發(fā)展的早期，前端開發(fā)主要是使用HTML和CSS來制作靜態(tài)網(wǎng)頁。隨著JavaScript的誕生和瀏覽器技術(shù)的發(fā)展，前端開發(fā)逐漸從靜態(tài)向動(dòng)態(tài)轉(zhuǎn)變。
- ?現(xiàn)代前端?：現(xiàn)代前端開發(fā)已經(jīng)發(fā)展成為一門涉及多種技術(shù)、框架和工具的復(fù)雜領(lǐng)域。隨著響應(yīng)式設(shè)計(jì)、單頁面應(yīng)用（SPA）、前端框架（如React、Vue、Angular）等的出現(xiàn)，前端開發(fā)變得更加高效和靈活。
- ?未來趨勢?：前端技術(shù)的未來發(fā)展將更加注重性能優(yōu)化、跨平臺(tái)兼容性、用戶體驗(yàn)和交互設(shè)計(jì)等方面。同時(shí)，隨著WebAssembly、PWA（漸進(jìn)式Web應(yīng)用）等新技術(shù)的興起，前端開發(fā)的邊界也在不斷擴(kuò)展。
5、前端開發(fā)流程
- ?需求分析?：理解用戶需求，確定前端界面的功能和設(shè)計(jì)要求。
- ?UI設(shè)計(jì)?：根據(jù)需求分析結(jié)果，設(shè)計(jì)網(wǎng)頁的布局、樣式和交互效果。
- ?編碼實(shí)現(xiàn)?：使用HTML、CSS、JavaScript等技術(shù)實(shí)現(xiàn)UI設(shè)計(jì)，并進(jìn)行功能開發(fā)。
- ?測試與優(yōu)化?：對(duì)前端界面進(jìn)行功能測試、性能測試和兼容性測試，并根據(jù)測試結(jié)果進(jìn)行優(yōu)化。
- ?部署與維護(hù)?：將前端代碼部署到服務(wù)器上，并進(jìn)行后續(xù)的維護(hù)和更新工作。
6、 BS模式
cs模式需要自己寫客戶端，bs模式直接用瀏覽器作為客戶端，不用自己寫了
# 最簡單的web開發(fā)例子：import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)while True:connection, address = sock.accept()buf = connection.recv(1024)connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))connection.close()if __name__ == '__main__':main()（二）HTML介紹
1、HTML概念
- HTML全稱是：htyper text markup language 即超文本標(biāo)記語言
- 超文本：就是指頁面內(nèi)可以包含文字、圖片、鏈接，甚至音樂、程序等非文字元素。
- 標(biāo)記語言：標(biāo)記（標(biāo)簽）<>構(gòu)成的語言.
- 網(wǎng)頁==HTML文檔，由瀏覽器解析，用來展示的
- 靜態(tài)網(wǎng)頁：靜態(tài)的資源，如xxx.html，只能看，不能點(diǎn)擊等操作與后臺(tái)交互
- 動(dòng)態(tài)網(wǎng)頁：html代碼是由某種開發(fā)語言根據(jù)用戶請求動(dòng)態(tài)生成的
- html文檔樹形結(jié)構(gòu)圖：
<!--注釋：html文檔結(jié)構(gòu)--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--這里用style標(biāo)簽遍寫CSS代碼，或引入CSS文檔（推薦）--> </head> <body><!--這里寫網(wǎng)頁正文html代碼--> </body><!--這里用script標(biāo)簽遍寫js/jQuery代碼，或引入js/jQuery文檔（推薦）--> </html>
2、標(biāo)簽概念
- 由一對(duì)尖括號(hào)包裹的單詞構(gòu)成，例如：<html>
- 所有標(biāo)簽中的單詞不能以數(shù)字開頭
- 標(biāo)簽不區(qū)分大小寫.<html> 和 <HTML>.，推薦使用小寫.
- 標(biāo)簽分為兩部分：開始標(biāo)簽<a> 和 結(jié)束標(biāo)簽</a>.，兩個(gè)標(biāo)簽之間的部分，我們叫做標(biāo)簽體
- 有些標(biāo)簽功能比較簡單，使用一個(gè)標(biāo)簽即可，這種標(biāo)簽叫做自閉合標(biāo)簽，例如: <br/> <hr/> <input /> <img />
- 標(biāo)簽可以嵌套，但是不能交叉嵌套. <a><b></a></b>
- 標(biāo)簽分為三種：
- 塊級(jí)標(biāo)簽block：一個(gè)標(biāo)簽獨(dú)占一行，寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度，可以嵌套內(nèi)聯(lián)標(biāo)簽和塊級(jí)標(biāo)簽，如：<p><h1><table><ol><ul><form><div>
- 內(nèi)聯(lián)標(biāo)簽inline：只占自己的內(nèi)容（文字或圖片）長度，不能設(shè)置寬width和高h(yuǎn)eight，只能嵌套文本或內(nèi)聯(lián)標(biāo)簽，如：<a><input><img><sub><sup><textarea><span>。
- 行內(nèi)塊標(biāo)簽inline-block：既具有行內(nèi)標(biāo)簽特性又具有塊級(jí)標(biāo)簽特性的標(biāo)簽，它們可以與其他元素位于同一行，同時(shí)可以設(shè)置寬度和高度?，如：<img><input><textarea><select><label><td><option>。
- 通過display屬性可以將這三種標(biāo)簽互相轉(zhuǎn)換。
inline-block元素之間會(huì)產(chǎn)生間隙，由于HTML中的空白字符（如空格、換行、制表符等）被當(dāng)作渲染內(nèi)容的一部分。當(dāng)瀏覽器解析HTML代碼時(shí)，這些空白字符會(huì)被渲染為文本節(jié)點(diǎn)，并在兩個(gè)inline-block元素之間生成間隔。這個(gè)間隔的大小取決于父元素的字體大小，通常會(huì)等于當(dāng)前字體的字符寬度。
<div style="display:inline-block; background-color:red; width:100px; height:100px;"></div> <div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div><!-- 由于兩個(gè)inline-block元素之間存在一個(gè)空格字符，最終的渲染效果是兩個(gè)塊元素之間會(huì)有間隙。 為了解決這個(gè)問題，可以采用以下幾種方法： --> <!--?1.刪除空白字符?：直接刪除HTML代碼中的空格或換行符，即同行緊挨著寫。例如：--> <div style="display:inline-block; background-color:red; width:100px; height:100px;"></div><div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div> <!--2.設(shè)置父元素的font-size為0?：將父元素的字體大小設(shè)置為0，可以消除間隙。然后在子元素上單獨(dú)設(shè)置合適的字體大小。例如：--> <div style="font-size:0;"><div style="display:inline-block; background-color:red; width:100px; height:100px; font-size:16px;"></div><div style="display:inline-block; background-color:blue; width:100px; height:100px; font-size:16px;"></div> </div> <!--3.使用負(fù)margin?：為inline-block元素添加負(fù)的margin來去除間隙。例如：--> <div style="display:inline-block; background-color:red; width:100px; height:100px; margin-right:-4px;"></div> <div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div> <!--4.使用CSS注釋?：在inline-block元素之間使用CSS注釋來去除空白字符。例如：--> <div style="display:inline-block; background-color:red; width:100px; height:100px;"></div><!-- --><div style="display:inline-block; background-color:blue; width:100px; height:100px;"></div> <!--5.使用flexbox或grid布局?(詳見第二章css的display屬性)：現(xiàn)代布局方式（如flexbox和grid）天然避免了inline-block的間隙問題: 使用現(xiàn)代布局方式如Flexbox（彈性盒布局）和Grid（網(wǎng)格布局）可以有效地避免inline-block元素之間的間隙問題。這兩種布局方式提供了更為強(qiáng)大和靈活的布局能力，使得元素之間的排列和對(duì)齊變得更加簡單和直觀。?Flexbox?：Flexbox主要用于一維布局，即沿著一個(gè)主軸（水平或垂直）對(duì)元素進(jìn)行排列。通過設(shè)置父元素的display: flex;，你可以很容易地控制子元素的對(duì)齊方式、分布方式、順序以及它們之間的間距。Flexbox中的間隙（gap）屬性可以直接控制元素之間的間距，而不會(huì)像inline-block那樣受到空白字符的影響。?Grid?：Grid則用于二維布局，它允許你同時(shí)控制行和列的布局。通過設(shè)置父元素的display: grid;，你可以定義一個(gè)網(wǎng)格模板，指定行和列的大小、數(shù)量以及它們之間的間距（通過grid-gap或row-gap和column-gap屬性）。Grid布局提供了極高的靈活性和控制能力，使得創(chuàng)建復(fù)雜的頁面布局變得輕而易舉。使用Flexbox或Grid布局時(shí)，你不再需要擔(dān)心inline-block元素之間的間隙問題，因?yàn)檫@些布局方式通過明確的屬性和規(guī)則來控制元素之間的間距和對(duì)齊。此外，它們還提供了許多其他有用的特性，如響應(yīng)式設(shè)計(jì)、自動(dòng)調(diào)整大小、對(duì)齊方式的選擇等，使得頁面布局更加靈活和強(qiáng)大。因此，在現(xiàn)代Web開發(fā)中，F(xiàn)lexbox和Grid布局已經(jīng)成為首選的布局方式，逐漸取代了傳統(tǒng)的布局方法（如浮動(dòng)布局和inline-block布局）。如果你正在開發(fā)一個(gè)新的Web項(xiàng)目或重構(gòu)一個(gè)現(xiàn)有的項(xiàng)目，考慮使用這些現(xiàn)代布局方式可能會(huì)帶來更好的效果和更高的效率。 -->- 注意嵌套規(guī)則：
- 塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素，但內(nèi)聯(lián)元素不能包含塊級(jí)元素，它只能包含其它內(nèi)聯(lián)元素。
- 有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)聯(lián)元素，不能包含塊級(jí)元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內(nèi)可以包含div
- 習(xí)慣上把內(nèi)聯(lián)標(biāo)簽與內(nèi)聯(lián)標(biāo)簽并列，塊級(jí)標(biāo)簽與塊級(jí)標(biāo)簽并列，塊級(jí)與內(nèi)聯(lián)并列可以通過div標(biāo)簽把內(nèi)聯(lián)標(biāo)簽放在里面。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>[suoning]{color: blueviolet;}.he>div{color: bisque;}</style> </head> <body><div class="he">111<p class="fr">222<div>333</div></p><div>444</div></div> ***************************<div suoning="sb">ddd<p>pppp</p></div><p suoning="sb2">ddd2<p>pppp2</p></p> </body> </html>
3、標(biāo)簽的屬性
- 通常是以鍵值對(duì)形式出現(xiàn)的. 例如 name="alex"
- 屬性只能出現(xiàn)在開始標(biāo)簽 或 自閉合標(biāo)簽中.
- 屬性名字全部小寫
- 屬性值必須使用雙引號(hào)或單引號(hào)包裹 例如 name="alex"
- 如果屬性值和屬性名完全一樣，直接寫屬性名即可，例如 readonly
- 在HTML中，標(biāo)簽屬性按功能可以分為兩種：
- 全局屬性可以應(yīng)用于多種不同的HTML元素，為網(wǎng)頁開發(fā)提供了豐富的功能和靈活性；
- 特定屬性僅適用于特定的HTML元素。
- 事件屬性是一種特殊的屬性
3.1 全局屬性
可以應(yīng)用于幾乎所有HTML元素的屬性。它們不特定于某個(gè)元素，而是為所有元素提供通用的功能。以下是一些常見的全局屬性：
?class?：用于為元素指定一個(gè)或多個(gè)類名（classname），多個(gè)類名用空格分隔，這些類名可以與CSS和JavaScript一起使用，以實(shí)現(xiàn)樣式和行為的定制。
?id?：為元素指定一個(gè)唯一的標(biāo)識(shí)符。在文檔中，id的值可以是任何字符串，但應(yīng)該是唯一的，常用于通過JavaScript或CSS選擇特定的元素。
?style?：直接在元素上定義內(nèi)聯(lián)樣式，值是合法的CSS樣式聲明，用于控制元素的外觀和布局。
?title?：值為任何文本字符串，為元素提供額外的說明或標(biāo)題，當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)，這些說明通常會(huì)顯示為工具提示。
?data-*（自定義數(shù)據(jù)屬性）?：允許開發(fā)者為元素添加自定義的數(shù)據(jù)屬性，值可以是任意字符串，這些屬性可以通過JavaScript訪問和操作。
?hidden?：值為
hidden或''（空字符串），如果設(shè)置了這個(gè)屬性，元素將不會(huì)被呈現(xiàn)，也不會(huì)占據(jù)頁面上的任何空間。?tabindex?：一個(gè)數(shù)字（例如
1表示第一個(gè)）或0（表示可訪問性焦點(diǎn)），指定元素在鍵盤導(dǎo)航中的順序（通過Tab鍵），以及元素是否可以通過鍵盤獲得焦點(diǎn)。
accesskey?：為元素設(shè)置一個(gè)快捷鍵，用戶可以通過按下該鍵快速訪問元素，值為一個(gè)鍵盤字符，例如“O”。
contenteditable?：指定元素的內(nèi)容是否可編輯，值為true或false。
contextmenu?：自定義鼠標(biāo)右鍵點(diǎn)擊時(shí)彈出的上下文菜單內(nèi)容。但請注意，這個(gè)屬性目前只有Firefox瀏覽器支持，值為一個(gè)<menu>元素的唯一ID
dir?：設(shè)置元素內(nèi)文本的書寫方向，值為ltr（從左到右）、rtl（從右到左）或auto。
draggable?：指定元素是否可以被拖拽，值為true、false或auto。
dropzone?：設(shè)置元素拖放類型，值可以是copy（拷貝）、move（移動(dòng)）或link（指向原始數(shù)據(jù)鏈接）。但目前主流瀏覽器還不支持這個(gè)屬性。
lang?：設(shè)置元素內(nèi)容的語言，值為有效的ISO語言代碼，例如en（英文）、zh-CN（簡體中文）等。
spellcheck?：指定是否對(duì)元素進(jìn)行拼寫和語法檢查，值為true或false。
translate?：指定元素及其子孫節(jié)點(diǎn)的內(nèi)容是否需要本地化，但目前主流瀏覽器還不支持這個(gè)屬性，值為yes或no。
3.2 事件屬性
在HTML中，事件屬性用于定義元素上可觸發(fā)的事件的行為。以下是一些常見的事件屬性：
?（1）全局事件屬性?：
onload：當(dāng)頁面或某個(gè)資源加載完成后觸發(fā)?。onunload：當(dāng)用戶離開頁面時(shí)觸發(fā)，如關(guān)閉頁面或跳轉(zhuǎn)到其他頁面?。onchange：當(dāng)元素的值發(fā)生變化時(shí)觸發(fā)，常用于表單元素?。onclick：當(dāng)鼠標(biāo)點(diǎn)擊元素時(shí)觸發(fā)?。ondblclick：當(dāng)鼠標(biāo)雙擊元素時(shí)觸發(fā)?。onfocus：當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)，如文本框?。onblur：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)?。onmousedown：當(dāng)鼠標(biāo)按下時(shí)觸發(fā)?。onmouseup：當(dāng)鼠標(biāo)釋放時(shí)觸發(fā)?。onmousemove：當(dāng)鼠標(biāo)在元素上移動(dòng)時(shí)觸發(fā)?。onmouseover：當(dāng)鼠標(biāo)移到元素上時(shí)觸發(fā)?。onmouseout：當(dāng)鼠標(biāo)移出元素時(shí)觸發(fā)?。onkeydown：當(dāng)用戶按下鍵盤上的某個(gè)鍵時(shí)觸發(fā)?。onkeypress：當(dāng)用戶按住并釋放鍵盤上的某個(gè)鍵時(shí)觸發(fā)（不包括功能鍵），但在某些瀏覽器中可能不支持所有按鍵?3。onkeyup：當(dāng)用戶釋放鍵盤上的某個(gè)鍵時(shí)觸發(fā)?。onselect：當(dāng)元素中的文本被選中時(shí)觸發(fā)?。onsubmit：當(dāng)表單提交時(shí)觸發(fā)?。onreset：當(dāng)表單重置時(shí)觸發(fā)?。（2）特定元素的事件屬性?（如媒介元素、表單元素等）：
- 媒介事件（如
onabort,onwaiting等）適用于視頻、音頻等媒介元素?。- 表單事件（如上面提到的
onchange,onsubmit,onreset等）專門用于表單元素?。這些事件屬性可以通過JavaScript來監(jiān)聽和處理，從而實(shí)現(xiàn)豐富的交互效果。
4、常用標(biāo)簽
4.1 <!DOCTYPE html>標(biāo)簽
- 由于歷史的原因，各個(gè)瀏覽器在對(duì)頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對(duì)頁面的渲染也不同(Quirks mode或者稱為CompatibilityMode)
- 由于W3C標(biāo)準(zhǔn)的推出，瀏覽器渲染頁面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱為Strict mode也有叫做Standarsmode)
- 為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產(chǎn)生了Quircks mode和Standars mode，兩種渲染方法共存在一個(gè)瀏覽器上。
window.top.document.compatMode： //BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 //CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面。 /* 這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用，但是如果你的頁面沒有DOCTYPE的聲明， 那么compatMode默認(rèn)就是BackCompat，瀏覽器按照自己的方式解析渲染頁面， 也就是說，同一個(gè)html文檔在不同的瀏覽器會(huì)顯示不同的樣式。 */在html文檔開頭添加<!DOCTYPE html>標(biāo)簽，就等同于開啟了標(biāo)準(zhǔn)模式，瀏覽器只能按照W3C的標(biāo)準(zhǔn)解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個(gè)樣子了。
4.2 head標(biāo)簽
- html文檔頭，<head></head>之間包含了關(guān)于該文檔的元數(shù)據(jù)（metadata）和引入外部資源，，即提供關(guān)于文檔內(nèi)容、結(jié)構(gòu)、樣式以及與其他文檔關(guān)系的信息，從而確保網(wǎng)頁能夠正確地顯示和運(yùn)行。
- 這些信息通常不會(huì)直接展示在網(wǎng)頁上，但對(duì)于機(jī)器（例如搜索引擎爬蟲和瀏覽器）來說卻是至關(guān)重要的。
- <head>標(biāo)簽中常見的一些子元素及其用途如下：
（1）<title>title_text</title>
無特定屬性，定義網(wǎng)頁的標(biāo)題，這個(gè)標(biāo)題會(huì)顯示在瀏覽器的標(biāo)簽頁上，同時(shí)也是搜索引擎在搜索結(jié)果中展示的重要信息。
<title>我的網(wǎng)頁標(biāo)題</title>
（2）<meta>
- 提供關(guān)于文檔的元數(shù)據(jù)，如字符編碼、作者、描述、關(guān)鍵詞等
- meta標(biāo)簽的組成：meta標(biāo)簽共有4個(gè)常用屬性，它們分別是charset屬性、http-equiv屬性、name 屬性和content屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁功能。