首頁(yè)技術(shù)文章正文

HTML/CSS/Javascript分別是什么?【卡其漫畫(huà)1】

更新時(shí)間:2020-07-03 來(lái)源:黑馬程序員 瀏覽量:

很高興你能來(lái)到這里和大家一起學(xué)習(xí)前端技術(shù)。有過(guò)了解的同學(xué)可能知道前端的技術(shù)點(diǎn)非常的多。所以很多的同學(xué)在自學(xué)的時(shí)候往往不知道從何入手。其實(shí)在我看來(lái),前端的技術(shù)點(diǎn)多。但是總結(jié)起來(lái)重點(diǎn)就是三大重點(diǎn),HTML、CSS、JavaScript。

HTML

HTML(Hyper Text Mark-up Language)即超文本標(biāo)記語(yǔ)言,是用于描述網(wǎng)頁(yè)的一種標(biāo)記語(yǔ)言。簡(jiǎn)單來(lái)說(shuō),我們可以將HTML比作是一只沒(méi)有毛的小鳥(niǎo),但是這只小鳥(niǎo)的基本骨架結(jié)構(gòu)是完整的。如:

1593767269725_html01.png


CSS

CSS:層疊樣式表,簡(jiǎn)單說(shuō)css就是相當(dāng)于給這只小鳥(niǎo)裝上漂亮的羽毛,讓它的外觀非常的漂亮。如:

1593767281938_html02.png


JavaScript

JavaScript這是我們前端中非常重要的存在。簡(jiǎn)單說(shuō)JavaScript就是可以讓我們做的網(wǎng)頁(yè)可以動(dòng)起來(lái)。能給使用者提供更好的體驗(yàn)。就是這只小鳥(niǎo)一樣,如果它有一些行為動(dòng)作之后是不是就更加完美了呢。如:

1593767308716_html03.png


正所謂萬(wàn)丈高樓平地起,我們要學(xué)習(xí)前端的技術(shù),我們都應(yīng)該從最基礎(chǔ)的部分開(kāi)始入門,而HTML和CSS是作為我們?nèi)腴T前端的最基礎(chǔ),也是我們需要掌握的基本的技能點(diǎn)。接下來(lái)的系列文章中我會(huì)以項(xiàng)目的形式向大家講述HTML和CSS中的基本的一些技能點(diǎn)。

那我們先從HTML開(kāi)始吧!大家加油哦!!!在接下來(lái)的這套系列課程中我們會(huì)從HTML、CSS、JavaScript這個(gè)三大件去整體講解前端相關(guān)的知識(shí)。對(duì)于沒(méi)有基礎(chǔ)的你們來(lái)說(shuō),如果只是單純的理論會(huì)讓大家覺(jué)得很枯燥,所有我們對(duì)整體的知識(shí)的講解是以一個(gè)《卡其漫畫(huà)》項(xiàng)目為主導(dǎo)來(lái)給大家講解。

在第一和第二章這兩章我們主要是學(xué)習(xí)HTML和CSS的基本使用。

首先我們要學(xué)習(xí)的是網(wǎng)頁(yè)的結(jié)構(gòu)的搭建,這個(gè)就如同我們蓋房子一樣。在HTML中我們要學(xué)習(xí)大量的標(biāo)簽,使用這些標(biāo)簽?zāi)芎芎玫娜ゴ罱ňW(wǎng)頁(yè)的結(jié)構(gòu)。

如:

1593767345381_html04.png


1593767381983_html05.png


1593767395118_html06.png


1593767410017_html07.jpg


像這樣的結(jié)構(gòu)我們只是使用HTML中的標(biāo)簽搭建,所有我們熟悉HTML標(biāo)簽中的使用,就可以搭建出這樣的頁(yè)面結(jié)構(gòu)了。結(jié)構(gòu)是有,但是效果很丑吧。我們需要美化。那么接下來(lái)就是CSS登場(chǎng)了。

CSS簡(jiǎn)單說(shuō)就是頁(yè)面的美容師,能讓一個(gè)很丑的頁(yè)面變的非常的漂亮。而在網(wǎng)頁(yè)的美化過(guò)程中CSS是必不可少的。在我們第一很第二章節(jié)中我們就會(huì)學(xué)習(xí)大量的CSS的使用。當(dāng)一個(gè)網(wǎng)站有了CSS之后是完全不一樣的。像上面這個(gè)網(wǎng)站如果有了CSS只會(huì)效果完全不同了。如:

1593767430279_html08.jpg

1593767440555_html09.jpg


是不是加了CSS之后整個(gè)頁(yè)面更加漂亮了啊。更是符合我們正常的審美了。大家加油,相信你們也是能做成這樣漂亮的頁(yè)面的。

當(dāng)學(xué)習(xí)第一和第二章之后,我們就能夠去搭建靜態(tài)的頁(yè)面了。但是只有靜態(tài)頁(yè)面不是不夠的。我們需要讓網(wǎng)友有動(dòng)態(tài)的效果。那么JavaScript就閃亮登場(chǎng)了。

在第三和第四兩個(gè)章節(jié)中我們主要是給大家講解JavaScript,通過(guò)JavaScript的學(xué)習(xí),大家能夠完成動(dòng)態(tài)頁(yè)面的編寫(xiě)了。

如:

1593767451063_html10.gif

像頁(yè)面中很多類似的效果我們都能通過(guò)JavaScript很好實(shí)現(xiàn)。在前端的學(xué)習(xí)中JavaScript是非常有意思,能做非常多的工作。更多精彩內(nèi)容敬請(qǐng)關(guān)注我們后續(xù)的課程更新。推薦了解黑馬程序員web前端培訓(xùn)課程。

猜你喜歡:

HTML5增加了哪些功能?有什么優(yōu)勢(shì)? 

什么是流式布局?什么情況下用?

JavaScript為什么叫JavaScript?


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!