前端基礎(chǔ)必知必會

前言

W3C規(guī)定網(wǎng)頁由三部分組成：結(jié)構(gòu)，表現(xiàn)，行為。

結(jié)構(gòu)指的就是HTML

表現(xiàn)指的是CSS

行為指的是JavaScript

這是網(wǎng)頁的三部分，是由萬維網(wǎng)聯(lián)盟W3C規(guī)范的。

一、網(wǎng)頁、網(wǎng)站

網(wǎng)頁是用HTML編寫的一種文件，將這種文件放在Web服務(wù)器上可以讓在互聯(lián)網(wǎng)上的其他用戶瀏覽。網(wǎng)站是網(wǎng)頁的集合，多個網(wǎng)頁可以共同組成一個網(wǎng)站。網(wǎng)站顯示的第一個網(wǎng)頁稱為首頁。

1. 網(wǎng)頁的構(gòu)成元素

一個網(wǎng)頁都是由哪些元素組成的呢？

文本，超鏈接，圖片，表格，表單，動畫，音頻，視頻…

一個網(wǎng)頁的構(gòu)成元素很豐富，可以是文字，也可以是圖片，甚至可以將一些多媒體文件（如音頻、視頻等）插入網(wǎng)頁里。

1.1 文本

文本是為了展示給用戶信息，如個人信息，自我介紹等

網(wǎng)頁信息主要以文本為主，這里指的文本是文本字，而非圖片中的文字。在網(wǎng)頁中可以通過字體、大小、顏色、底紋、邊框等選項(xiàng)來設(shè)置文本的屬性。中文文字顏色不要太雜亂。

1.2 圖片

圖片一般是為了美化頁面，放置Logo，當(dāng)然也有用戶自己由于某種需求上傳的圖片，也有某些網(wǎng)站用來專門放置各種圖片，如攝影愛好者網(wǎng)站等

Logo標(biāo)志，是代表網(wǎng)站形象或欄目內(nèi)容的標(biāo)志性圖片，一般在網(wǎng)頁左上角。

Banner廣告，用于宣傳站內(nèi)某個欄目或者活動的廣告，一般以GIF動畫形式為主。

圖標(biāo)，主要用于導(dǎo)航，在網(wǎng)頁中具有重要的作用，相當(dāng)于路標(biāo)。

背景圖，用來裝飾和美化網(wǎng)頁。

1.3 超鏈接

超鏈接是可以點(diǎn)擊的，點(diǎn)擊會跳轉(zhuǎn)到相應(yīng)的地址。

可以說超鏈接是網(wǎng)站的“靈魂”，它是從一個網(wǎng)頁指向另一個目的端的鏈接

如指向另一個網(wǎng)頁或者相同網(wǎng)頁上的不同位置。

超鏈接可以指向一幅圖片、一個電子郵件地址、一個文件、一個程序或者本頁中的其他位置。

超鏈接的載體可以是文本、圖片或者Flash動畫等。

超鏈接廣泛存在于網(wǎng)頁的圖片和文字中，提供與圖片和文字相關(guān)內(nèi)容的鏈接，在超鏈接上單擊，即可鏈接到相應(yīng)地址（URL）的網(wǎng)頁。

鼠標(biāo)指針指向有鏈接的地方，默認(rèn)會變成小手形狀。

可以說，超鏈接是網(wǎng)頁的最大特色。

1.4 表格

此表格非彼表格，不是Excel里的表格。當(dāng)然作用是想通的，都是可以用來記錄數(shù)據(jù)的。

當(dāng)然網(wǎng)頁里的表格還有更多的功能，如設(shè)置布局，美化界面等

1.5 表單

表單是用來收集用戶數(shù)據(jù)的，表單其實(shí)也都見過，就是調(diào)差問卷，填寫姓名，地址等，然后提交的。

二、如何開發(fā)網(wǎng)頁

1. HTML

網(wǎng)頁是使用HTML語言進(jìn)行開發(fā)的。

那么什么是HTML呢？

HTML（Hypertext Markup Language）是超文本標(biāo)記語言。

嚴(yán)格來說，HTML不屬于編程語言，他是用標(biāo)簽的形式標(biāo)示出網(wǎng)頁不同的組成部分。

2. 第一個HTML

在桌面新建一個文本文檔，命名為hello（其實(shí)什么都行），雙擊打開，將下面的代碼貼進(jìn)去

hello world!

保存，退出

將文件格式從txt轉(zhuǎn)為html格式，雙擊使用瀏覽器打開

然后就沒有然后了

3. 編輯器

當(dāng)然，可以直接使用記事本編寫，不過非常不推薦。

這邊推薦使用vs code（Visual Studio Code），它是一款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴(kuò)展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持 Win、Mac 以及 Linux。

他的好處是，輕量級，界面炫酷，功能強(qiáng)大，插件眾多，你完全可以只是用vs code來開發(fā)Python，Java，C/C++項(xiàng)目

vs code -：

1.官網(wǎng)下載

2.百度云盤下載 碼：aode

三、小練習(xí)

鞏固自己所學(xué)知識，在腦海里過一遍，什么是網(wǎng)頁，網(wǎng)頁含有什么元素。

找到幾個網(wǎng)頁，敘述網(wǎng)頁中都適用了哪些標(biāo)簽。

HTML web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。