無(wú)論您是尋找餐飲推薦、訂購(gòu)雜貨、閱讀您最喜愛(ài)的博客，還是購(gòu)買節(jié)日禮物，互聯(lián)網(wǎng)都是我們獲取信息和便利的首選。自然地，最好的公司能夠在潛在客戶走進(jìn)大門之前通過(guò)專業(yè)和無(wú)縫的網(wǎng)站吸引他們的注意力。談?wù)?a href="http://www.ahtc711.com/" target="_blank">成都小程序開(kāi)發(fā)很容易，但如果您是小企業(yè)主或初出茅廬的企業(yè)家，則很難知道從哪里開(kāi)始。幸運(yùn)的是，我們已經(jīng)將如何編寫網(wǎng)站代碼的過(guò)程分解為幾個(gè)簡(jiǎn)單的步驟。在我們深入探討之前，我想花點(diǎn)時(shí)間回答許多初次建站者遇到的兩個(gè)常見(jiàn)問(wèn)題。
答：這取決于您網(wǎng)站的復(fù)雜程度。例如，與構(gòu)建一個(gè)收集用戶送貨信息和處理付款的在線訂購(gòu)門戶相比，啟動(dòng)包含您公司地址、聯(lián)系信息和社交媒體帳戶鏈接的基本主頁(yè)所花費(fèi)的時(shí)間要少得多。
但是，僅僅因?yàn)槟陂_(kāi)始時(shí)節(jié)省了時(shí)間并不意味著不值得使用更高級(jí)的功能。這取決于您的業(yè)務(wù)。如果您只是想吸引客流量到您的商店，那么在線訂購(gòu)就沒(méi)有意義。
也就是說(shuō)，您可能會(huì)錯(cuò)過(guò)那些不想開(kāi)車去實(shí)體店但會(huì)通過(guò)您的網(wǎng)站購(gòu)買的客戶。如果您沒(méi)有足夠的帶寬將商品運(yùn)送給您的客戶，那么這是繼續(xù)創(chuàng)建電子商務(wù)網(wǎng)站的另一個(gè)很好的理由。
簡(jiǎn)單的回答：沒(méi)有。雖然在Internet的早期每個(gè)人都在手動(dòng)編碼他們的網(wǎng)站，但現(xiàn)在許多網(wǎng)站都是使用內(nèi)容管理系統(tǒng) (CMS)構(gòu)建的。CMS通過(guò)提供可視化界面來(lái)構(gòu)建網(wǎng)頁(yè)和構(gòu)建您的網(wǎng)站，從而消除了編碼的需要。許多CMS提供拖放功能，以便您可以輕松地將元素（例如按鈕）放置在頁(yè)面上您想要的位置。CMS模板庫(kù)甚至可以幫助創(chuàng)建無(wú)需編碼即可兼容所有設(shè)備類型的響應(yīng)式網(wǎng)站。
我們的團(tuán)隊(duì)編制了一份最佳CMS列表，如果您不想使用自定義編碼路線，我建議您閱讀這些內(nèi)容。如果您準(zhǔn)備好學(xué)習(xí)一些代碼，讓我們一起完成這個(gè)過(guò)程。
代碼編輯器是新開(kāi)發(fā)人員的絕佳工具，因?yàn)樗鼈兲峁┝嗽S多使我們的生活更輕松的功能。例如，Visual Studio Code（我的選擇）將提供語(yǔ)法建議，這樣您就可以避免簡(jiǎn)單的拼寫錯(cuò)誤導(dǎo)致代碼出現(xiàn)問(wèn)題。最重要的是，它會(huì)自動(dòng)完成HTML的結(jié)束標(biāo)記，并為您的文件添加視覺(jué)標(biāo)記，以便您可以輕松區(qū)分不同的代碼片段。
您可以在下面看到常規(guī)文本編輯器和代碼編輯器之間的區(qū)別。代碼在兩個(gè)文檔中的工作原理相同，但是一個(gè)比另一個(gè)更容易一目了然。
正如我之前所說(shuō)，Visual Studio Code是我的首選工具，但也有許多免費(fèi)的代碼編輯器可供您選擇。Visual Studio Code具有向編輯器添加額外功能的擴(kuò)展（例如從深色模式切換到淺色模式）和不斷創(chuàng)建更多功能的專用用戶群，但最重要的是您擁有用于這些后續(xù)步驟的代碼編輯器。品牌并不重要。
注意：我將分享來(lái)自Visual Studio Code的屏幕截圖，因此當(dāng)我們?cè)谙乱徊缴钊刖幋a時(shí)，可以很容易地使用這個(gè)工具。
HTML代表超文本標(biāo)記語(yǔ)言。如果這現(xiàn)在沒(méi)有意義，請(qǐng)不要擔(dān)心。少關(guān)注定義，多關(guān)注這張圖片：我們正在蓋房子。最自然的起點(diǎn)是地基、墻壁和屋頂，因?yàn)樵谀鷵?dān)心室內(nèi)裝飾或油漆之前，每個(gè)房子都需要這些。
使用HTML，我們能夠?yàn)槲覀兊木W(wǎng)站構(gòu)建這種結(jié)構(gòu)。這是我在領(lǐng)導(dǎo)HTML和CSS培訓(xùn)時(shí)使用的一個(gè)比喻，因此我們也將在本教程中重新使用它。
既然我們擁有適合這項(xiàng)工作的正確工具并了解我們的目標(biāo)，那么是時(shí)候深入探討您來(lái)這里的原因了：編碼。
創(chuàng)建HTML文檔。
我們所有的編碼都將發(fā)生在我們保存到本地機(jī)器的不同文件中。我們將創(chuàng)建的第一個(gè)文件是我們的HTML文檔。首先，為您的網(wǎng)站文件創(chuàng)建一個(gè)新文件夾。由于我正在演示，我創(chuàng)造性地將我的命名為“演示”。
現(xiàn)在在代碼編輯器中打開(kāi)該文件夾。接下來(lái)，創(chuàng)建一個(gè)名為“index.html”的文件，我們現(xiàn)在已經(jīng)準(zhǔn)備好了第一個(gè)HTML文件。請(qǐng)注意，您不需要將文件命名為“index”，但需要匹配“.HTML”文件擴(kuò)展名。這會(huì)告訴我們的計(jì)算機(jī)（以及后來(lái)的網(wǎng)絡(luò)瀏覽器）這是一個(gè)HTML文檔，而不是JPG、PDF等。
我們的文件目前是空白的，所以讓我們添加HTML文檔結(jié)構(gòu)。我已經(jīng)在下面的代碼片段中列出了所有內(nèi)容，因此您可以復(fù)制并粘貼到您的文件中（或?qū)懗鰜?lái)）。
讓我們回到上一節(jié)的比喻。我們現(xiàn)在有了房子的結(jié)構(gòu)。但是您可能已經(jīng)注意到——就像剪貼畫中的房子圖形一樣——我們的HTML是統(tǒng)一的并且沒(méi)有顏色。我們可以看到所有這些，但很明顯，與默認(rèn)顯示相比，HTML可以完成更多的工作。我們將求助于CSS來(lái)為我們的“房子”增光添彩。
CSS代表層疊樣式表。如果您不熟悉CSS，我建議您從我們的CSS指南開(kāi)始，復(fù)習(xí)屬性、語(yǔ)法、選擇器和特異性的細(xì)節(jié)。我們將在下面介紹如何實(shí)現(xiàn) CSS。
創(chuàng)建CSS文檔。
正如我們創(chuàng)建“index.html”文件一樣，我們現(xiàn)在將創(chuàng)建“style.css”文件來(lái)存儲(chǔ)我們的CSS規(guī)則。同樣，文件的名稱無(wú)關(guān)緊要，但您必須包含“ .CSS”擴(kuò)展名。
添加CSS規(guī)則。
現(xiàn)在，我們將專注于向我們的CSS文件添加一條規(guī)則。在這種情況下，我希望所有段落都顯示為紅色文本。
選擇器“p”告訴CSS我們要定位HTML中的所有段落并應(yīng)用方括號(hào) ({}) 中列出的屬性。在這種情況下，我們有一個(gè)屬性“顏色”，我們已將其設(shè)置為值“紅色”，但我們可以根據(jù)需要在規(guī)則下添加任意數(shù)量的屬性。
在將此CSS規(guī)則添加到文件后，您可能會(huì)注意到頁(yè)面上沒(méi)有任何反應(yīng)。那是因?yàn)槲覀冃枰獙⑽覀兊腍TML和CSS鏈接在一起，我們將在下一節(jié)中展示。
為了讓我們的CSS影響我們的HTML，我們需要告訴瀏覽器應(yīng)用 CSS。執(zhí)行此操作的過(guò)程很簡(jiǎn)單。我們只需要添加一個(gè)元素到我們的。
我們又一次看到了HTML屬性的作用。添加沒(méi)有“rel”和“href”屬性的 標(biāo)簽不會(huì)產(chǎn)生任何結(jié)果，因?yàn)闉g覽器不知道鏈接類型（樣式表）和鏈接到的位置（style.css）。請(qǐng)注意，如果您以不同方式命名CSS文件，則應(yīng)更新引號(hào) (" ") 內(nèi)的 href 屬性值以匹配您的文件名。否則，瀏覽器將無(wú)法找到您的樣式表。
更多CSS規(guī)則
現(xiàn)在我們的HTML和CSS已鏈接，我將添加更多規(guī)則以使我們的頁(yè)面看起來(lái)不那么普通。
為了理解網(wǎng)絡(luò)響應(yīng)，我們將再次使用比喻。一方面，我們有一個(gè)池塘。池塘里的水總是一樣的形狀，因?yàn)槌靥恋倪吘売肋h(yuǎn)不會(huì)改變。另一方面，我們有一個(gè)流。溪流的邊緣在流動(dòng)時(shí)總是在變化，水總是在膨脹和縮小以適應(yīng)這種形狀。
我們可以用同樣的方式來(lái)思考靜態(tài)網(wǎng)站和響應(yīng)式網(wǎng)站。靜態(tài)網(wǎng)站不會(huì)對(duì)瀏覽器大小的變化做出反應(yīng)。它的內(nèi)容將始終是相同的形狀。同時(shí)，響應(yīng)式網(wǎng)站不斷適應(yīng)不同的瀏覽器和屏幕尺寸。
為什么響應(yīng)很重要？根據(jù)StatCounter的數(shù)據(jù)，到2023年，移動(dòng)流量現(xiàn)在占互聯(lián)網(wǎng)所有流量的85%以上。如果您的網(wǎng)站無(wú)法容納從小屏幕到智能電視的流量，那么您就會(huì)失去潛在客戶。此外，谷歌將移動(dòng)友好性列為其在搜索結(jié)果中顯示頁(yè)面的決定的一部分，因此您也可能會(huì)失去有機(jī)流量。
到現(xiàn)在為止，我們已經(jīng)創(chuàng)建了一個(gè)靜態(tài)網(wǎng)站。默認(rèn)情況下，文本元素將調(diào)整大小，但其他元素將保持其原始形狀和大小，無(wú)論顯示如何變化。在下方，我們可以看到笑臉的右側(cè)被截?cái)嗔?，因?yàn)橐暱诂F(xiàn)在比其 300 像素的固定寬度窄（請(qǐng)注意，我們的段落已將其文本換行以適合）。
我們將（你猜對(duì)了）帶回我們的朋友這個(gè)部分的比喻。想象一下，您正站在街上閱讀磚墻上的吉他課程傳單。你感興趣，傳單上說(shuō)要撥打一個(gè)號(hào)碼進(jìn)行注冊(cè)。
這就是我們認(rèn)為的簡(jiǎn)單網(wǎng)站。它顯示有關(guān)某事的信息，甚至可能要求您采取行動(dòng)，但閱讀是您（用戶）在網(wǎng)站上可以做的事情的范圍。請(qǐng)記住，您需要撥打它在您手機(jī)上提供給您的號(hào)碼。
我們回到了磚墻。現(xiàn)在，有一個(gè)關(guān)于吉他課程的標(biāo)志和一扇門，如果您有興趣，可以進(jìn)入錄音室進(jìn)行注冊(cè)。墻上仍在顯示信息，但現(xiàn)在您可以與其互動(dòng)以采取下一步行動(dòng)。這就是我們認(rèn)為的交互式網(wǎng)站?？纯催@個(gè)名字是從哪里來(lái)的？
JavaScript簡(jiǎn)史課
到目前為止，我們一直在構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站。我們正在向我們的用戶顯示信息，但這就是網(wǎng)站所做的范圍。有一次，早期的互聯(lián)網(wǎng)也是如此。您可以從各種網(wǎng)站訪問(wèn)信息，但網(wǎng)站無(wú)能為力。
JavaScript于1995 年發(fā)明，旨在為網(wǎng)頁(yè)添加交互性。JavaScript是與HTML和CSS相結(jié)合的第三種Web開(kāi)發(fā)基礎(chǔ)語(yǔ)言。到目前為止，我們學(xué)習(xí)的這兩種語(yǔ)言都是標(biāo)記語(yǔ)言，但JavaScript是一種編程語(yǔ)言。編程是計(jì)算機(jī)根據(jù)預(yù)定義的邏輯執(zhí)行操作的過(guò)程。
例如，假設(shè)用戶點(diǎn)擊了我們的笑臉。網(wǎng)頁(yè)隨后會(huì)在注冊(cè)該面孔已被單擊時(shí)打印問(wèn)候語(yǔ)。該頁(yè)面知道這樣做是因?yàn)槲覀円呀?jīng)告訴它要注意這種交互并以特定方式做出反應(yīng)。
你的第一個(gè)JavaScript程序
不幸的是，深入研究JavaScript的語(yǔ)法和機(jī)制超出了本課的范圍。相反，我將提供一個(gè)預(yù)先編寫的程序，以便我們可以專注于在我們的網(wǎng)站上實(shí)施它。
如果您已經(jīng)做到了這一點(diǎn)，那么請(qǐng)花點(diǎn)時(shí)間祝賀自己。您已經(jīng)從以前可能從未編寫過(guò)代碼到擁有響應(yīng)式和交互式網(wǎng)站的基礎(chǔ)。我們已經(jīng)涵蓋了HTML和CSS中不同概念之間的許多基礎(chǔ)知識(shí)，甚至還涉及了編程。這是您Web開(kāi)發(fā)之旅中重要的第一步。
當(dāng)然還有很多東西要學(xué)。當(dāng)您繼續(xù)構(gòu)建您的Web開(kāi)發(fā)工具箱時(shí)，我已經(jīng)概述了幾個(gè)需要關(guān)注的領(lǐng)域。
HTML和CSS比我們今天介紹的要復(fù)雜得多。這些語(yǔ)言構(gòu)成了您網(wǎng)站的可見(jiàn)面孔，對(duì)您的用戶體驗(yàn)至關(guān)重要。成都小程序開(kāi)發(fā)已經(jīng)將基礎(chǔ)指南重新鏈接到下面的HTML和CSS，并添加了一些指向更高級(jí)CSS主題的鏈接。
