一、前端程序員必會三大編程語言
（一）HTML（.html/.htm）
? ? ? ? 超文本標(biāo)記語言（HyperText Markup Language，簡稱:HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁，HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義，其是一種標(biāo)記語言而非編程語言[1]。
? ? ? ? HTML元素是構(gòu)建網(wǎng)站的基石。HTML允許嵌入圖像與對象，并且可以用于創(chuàng)建交互式表單，它被用來結(jié)構(gòu)化信息——例如標(biāo)題、段落和列表等，也可用來在一定程度上描述文檔的外觀和語義。HTML可以嵌入如JavaScript的腳本語言，它們會影響HTML網(wǎng)頁的行為。網(wǎng)頁瀏覽器也可以引用層疊樣式表（CSS）來定義文本和其它元素的外觀與布局。維護HTML和CSS標(biāo)準(zhǔn)的組織萬維網(wǎng)（W3C）鼓勵人們使用CSS替代一些用于表現(xiàn)的HTML元素[1]。
? ? ? ? HTML學(xué)習(xí)資源詳見參考資料[2][3][11]。
（二）CSS（.css）
? ? ? ? 層疊樣式表（Cascading Style Sheets，簡稱：CSS）是一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機語言，由W3C定義和維護[4]。
? ? ? ? CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力[4]。
? ? ? ? CSS學(xué)習(xí)資源詳見參考資料[5][6][12]。
（三）JavaScript
? ? ? ? JavaScript（縮寫：JS）是一門基于原型和頭等函數(shù)的多范式高級解釋型編程語言，它支持面向?qū)ο蟪绦蛟O(shè)計、指令式編程和函數(shù)式編程。它提供方法來操控文本、數(shù)組、日期以及正則表達式等。不支持I/O，比如網(wǎng)絡(luò)、存儲和圖形等，但這些都可以由它的宿主環(huán)境提供支持。它由Ecma通過ECMAScript實現(xiàn)語言的標(biāo)準(zhǔn)化。目前，它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器（Chrome、IE、Firefox、Safari和Opera）所支持[3]。
? ? ? ? JavaScript在語法結(jié)構(gòu)上和C語言很相似。對于客戶端來說，JavaScript通常被實現(xiàn)為一門解釋型語言，但如今它已經(jīng)可以被即時編譯（JIT）。隨著HTML5和CSS3語言標(biāo)準(zhǔn)的推行，它還可以用于游戲、桌面和移動應(yīng)用程序的開發(fā)，以及在服務(wù)器端網(wǎng)絡(luò)環(huán)境運行（如Node.js）[7]。
? ? ? ? JavaScript學(xué)習(xí)資源詳見參考資料[8][9]。
二、HTML引入CSS樣式的三種方法[12][17]
（一）內(nèi)聯(lián)式
? ? ? ? CSS樣式直接放在代碼行內(nèi)的標(biāo)簽中，一般都是放入標(biāo)簽的style屬性中。該方式直接內(nèi)嵌入具體標(biāo)簽中，大范圍修改較為不便。具體例程可見參考資料[17]。
（二）內(nèi)嵌式
? ? ? ? CSS樣式放置于網(wǎng)頁源文件（HTML文件）的頭部，即在<head>和</head>之間，通過使用HTML標(biāo)簽中的<style></style>標(biāo)簽將其包圍。該方法解決了內(nèi)聯(lián)式多次編寫的弊端，但該樣式只能在此網(wǎng)頁使用。具體例程可見參考資料[17]。
（三）鏈接式
? ? ? ?鏈接式通過 HTML 的 <link> 標(biāo)簽，將外部樣式表文件鏈接到 HTML 文檔中，這也是網(wǎng)絡(luò)上網(wǎng)站應(yīng)用最多的方式，同時也是最實用的方式。這種方法將 HTML 文檔和 CSS 文件完全分離，實現(xiàn)結(jié)構(gòu)層和表示層的徹底分離，增強網(wǎng)頁結(jié)構(gòu)的擴展性和 CSS 樣式的可維護性?。具體例程可見參考資料[17]。
<link rel="stylesheet" href="CSS文件位置">
三、編碼實踐
前端標(biāo)記語言：HTML
前端樣式表：CSS
編程平臺（IDE）：Visual Studio Code
文本內(nèi)容輔助工具：ChatGPT、有道翻譯、360文庫
圖片修飾輔助工具：PS（Adobe Photoshop）
圖片搜集檢索平臺：360圖庫、Google Images
（一）完整源程序文件：
????????https://download.csdn.net/download/Jcb1906824038/88724122
（二）靜態(tài)網(wǎng)頁設(shè)計最終效果：
????????本靜態(tài)網(wǎng)頁設(shè)計以葫蘆娃動畫片為主題，基于HTML和CSS前端語言設(shè)計編碼。靜態(tài)網(wǎng)頁設(shè)計中包含背景音樂播放（葫蘆娃動畫片主題曲）、葫蘆娃動畫片全集B站跳轉(zhuǎn)、葫蘆娃動畫片內(nèi)容概要及其蘊含的啟發(fā)意義以及爺爺和七個葫蘆娃兄弟的簡概，網(wǎng)頁全文英文。
（三）實踐總結(jié)
Ⅰ 在網(wǎng)頁設(shè)計中，應(yīng)培養(yǎng)一定的藝術(shù)美感，使得網(wǎng)頁內(nèi)容排布美觀大方；
Ⅱ 網(wǎng)頁設(shè)計多以“盒子模型”的“盒子包盒子”的指導(dǎo)思想進行編碼；
Ⅲ 進入網(wǎng)頁開發(fā)者模式，多借鑒、查看優(yōu)秀網(wǎng)頁的排版設(shè)計與編碼，具體方法見下圖。
參考資料：
[1]?https://en.wikipedia.org/wiki/HTML
[2]?HTML5 教程 | 菜鳥教程
[3]?HTML（超文本標(biāo)記語言） | MDN
[4]?https://en.wikipedia.org/wiki/CSS
[5]?CSS3 教程 | 菜鳥教程
[6]?CSS：層疊樣式表 | MDN
[7]?https://en.wikipedia.org/wiki/JavaScript
[8]?JavaScript 教程 | 菜鳥教程
[9]?JavaScript | MDN
[10]?PS2023教程從入門到精通（從安裝到卸載）全套_嗶哩嗶哩_bilibili
[11]?012-老杜-HTML-背景色和背景圖片_嗶哩嗶哩_bilibili
[12]?CSS全套基礎(chǔ)教程-CSS實戰(zhàn)開發(fā)-深入淺出CSS_嗶哩嗶哩_bilibili
[13]?84-header區(qū)域-整體布局_嗶哩嗶哩_bilibili
[14]?CSS盒子模型、圓角邊框、盒子陰影_css圓形陰影-CSDN博客
[15]?HTML 學(xué)習(xí)筆記——插入音頻、視頻標(biāo)簽_html音頻文件放在哪兒-CSDN博客
[16]?HTML——圖像的超鏈接_圖像超鏈接-CSDN博客文章來源：http://www.zghlxwxcb.cn/news/detail-781188.html
[17]?HTML嵌入CSS樣式（四種方法）_html引入css-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-781188.html
到了這里，關(guān)于靜態(tài)網(wǎng)頁設(shè)計實踐（HTML+CSS）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
