0基礎學前端,難不難?

来源:https://www.cnblogs.com/TT485480/archive/2020/04/27/12790093.html
-Advertisement-
Play Games

現在互聯網發展迅速,前端也成了很重要的崗位之一,許多人都往前端靠攏,可又無能為力,不知所措,首先我們說為什麼在編程里,大家都傾向於往前端靠呢?原因很簡單,那就是,在程式員的世界里,前端開發是最最簡單的編程,甚至都不能叫做編程,因為它真的很簡單很簡單,下麵呢,我們就開始一點一點的教大家如何開始前端知識 ...


現在互聯網發展迅速,前端也成了很重要的崗位之一,許多人都往前端靠攏,可又無能為力,不知所措,首先我們說為什麼在編程里,大家都傾向於往前端靠呢?原因很簡單,那就是,在程式員的世界里,前端開發是最最簡單的編程,甚至都不能叫做編程,因為它真的很簡單很簡單,下麵呢,我們就開始一點一點的教大家如何開始前端知識的學習!

前端需要掌握的技術 

首先我們學習前端,要知道前端的三個大內容,HTML、CSS、JS,其中HTML和CSS是相互結合著學習,掌握了這兩個了以後我們就算真正入門了,然後再深入學習JS等等。

 

 

 

HTML,CSS,JS分別是什麼?

HTML就相當於一個人,CSS相當於一個人穿著的衣服,JS相當於讓這個人做什麼動作,這樣一形容呢,我們就很好理解了,這個人就是網站,需要有header頭,body身體,footer腳……而網站所呈現給我們各種各樣的樣子就是我們寫的CSS樣式,網站里的動態效果就都是我們的JS去實現的。

零基礎如何開始學前端?

說到這裡,可能大家看這麼多的文字有點看不下去了,那我們廢話不多說,只要你決定了要學習前端,那就跟我們的課程一點一點學習去設計製作屬於你自己的網頁吧!

我們用到的軟體呢,對於入門級來說我們一般推薦大家用Dreamweaver,簡稱DW,新建一個HTML後,出現的界面是這樣的,

 

 

 看到這麼多代碼不要慌,對我們敲代碼沒啥影響,下麵我們開始敲代碼,我們可以看到這裡有這樣的代碼<body></body>,這個就是我們網頁的身體,我們接下來要敲的內容都是在這中間輸入的,這個括弧表示的標簽,標簽都是一前一後的,成對兒出現的,除了一些特殊的標簽,隨後我們再一一給大家講解。現在我們輸入點內容,看看效果

 

 

 我們輸入一個標簽<div></div>,點擊右上角的地球瀏覽一下,會發現彈出了一個空網頁,什麼也沒有,那是因為我們現在只書寫了HTML,還沒有寫CSS,簡單來說就是,我們創建了一個東西在頁面里,但是還沒有設置這個東西長什麼樣子,現在我們在設置它的樣子,

 

 

1、我們為了給這個div設置樣式,所有先給它起個名字不然,電腦不知道我們要給誰加樣式,class="aaa" 的意思是起名為aaa

2、在<head></head>里寫入這樣一組標簽<style></style>這個style的意思就是CSS,我們整個網站要加的所有樣式都是寫在這個中間的。

3、我們在style里寫樣式,電腦首先要知道我們給誰加樣式,所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式,電腦會自動把.(點)後面的名字,跟下麵body里的名字做一個匹配,這樣電腦就知道,哦~原來你是要給這個div加樣式呀,

4、然後我們把要給這個div加的樣式寫在大括弧里,width:100px; 意思是這個div的寬是100像素,height:100px; 意思是高是100像素, 意思是背景顏色是#FF0000這個顏色,

註意:(1)這裡我要給大家解釋一下,大家別看這麼多代碼,這麼多單詞,其實軟體有提示,像下麵這樣,直接輸入第一個字母後面的單詞就出現了,直接選中就行了,連單詞都不用背,前端真的很簡單,

 

 

 

 

 

 

(2)每一個單詞都有提示,說到這裡,不會英語的同學就不要給自己找藉口說英語不好,學不會編程了,當然,這麼簡單是不是說大家都容易學會,那大家都會了,我們還有什麼優勢呢,其實不然,雖然說很簡單,但是要想真真的把前端學好是需要下功夫的,主要就是要堅持,雖然很簡單,但是能堅持下來的人很少,這也就是為什麼我們給學生一直提倡要堅持,做任何事既然決定了,就要堅持,

下麵我們繼續,設置好了以後,我們就可以點右上角的“小地球”來瀏覽了,

 

 

如果你做出來了,跟我的效果一樣,那麼你就成功了,那我就可以恭喜你,你已經入門了,真的很簡單!

前端學習中的疑惑

1、可能會有同學覺的,前端好難,寫了那麼一大堆,才出了個這個。

2、另外就是覺的這一下子蹦出來了這麼多代碼,這麼多單詞,記不住。

3、對未來恐懼,感覺還不知道要有多少單詞,多少代碼要涉及。

在這裡呢,我要給大家解釋一下,前端呢,其實我們真正常用的單詞也就20個左右,今天我們就已經用3個了,width、height、background,當然這3個也是最最常用的,是每次都要書寫的。

另外就是像格式之類的,同學可能也會有疑問,這次的是div要起名字,style寫在head里,div寫在body,那還會有多少這樣的寫法,

這一點呢,我可以告訴大家,大家不用擔心,因為這是每次我們寫前端都要首先寫的東西,可以說是固定格式,就類似於做數學應用題,我們首先要寫個“解”字,一個道理。

最後呢,我想跟同學們說,不管我們以後選擇做什麼,一定都要堅持去做,世上沒有難的事,只有放棄的事。

小編也在前端混了有幾年,整理了一些學習資料,對web開發技術感興趣的同學
歡迎加入新建的Q群:603985993,不管你是小白還是大牛我都歡迎,希望大家誠心交流!
還有大牛整理的一套高效率學習路線和教程與您免費分享,與企業需求同步。
好友都在裡面學習交流,每天都會有大牛定時講解前端技術!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天比較開心,只想哈哈~哈哈哈~ 啥也不多說了,直接看示例吧!絕對比我口才好~ 哈哈!Get到了嗎?好意思不幫我分享嘛~哈哈~ 轉載請註明出處!歡迎關註本人微信公眾號【HBase工作筆記】 ...
  • C:\Program Files\mysql-5.7.10-winx64\bin># 啟動mysql服務net start mysql# 停止mysql服務net stop mysql 提示信息:'net’ 不是內部命令或外部命令,也不是可運行的程式或批處理文件 解決辦法: 我的電腦-->屬性--> ...
  • T-SQL(Transact-SQL)是一種 SQL 擴展語言,由微軟實現,運行在 Ms SQL Server 平臺上。T-SQL 主要用來和SQL Server 交流,而查詢語句則主要用來告訴伺服器該做什麼。T-SQL 是標準 SQL 語言的擴展,自然也繼承了其基本功能:DDL、DML,DCL,D... ...
  • 很多人一開始創建了資料庫,到後來在使用的時候就忘記了密碼。 一開始我用的資料庫是MF,設置密碼,再後來使用navicat時,就需要用到自己原來設置的資料庫密碼,後來,終於在MF中找到 如下: (1)打開,MF,這樣一個界面 (2)點擊【屬性】,裡面就可以找到關於自己的資料庫的信息,包括埠,用戶和密 ...
  • 視圖 使用環境: 將多表聯查的結果放到一張虛擬表中,實際上只會生成一個表結構的frm文件,不會生成數據文件,他的數據完全來源於後面多表的內容.他會方便你查詢數據(優化sql)而不是增刪改數據. 註意: ①實際工作中儘量少用,因為到了後期資料庫要擴展功能時你需要一個一個去看虛擬表都是怎麼連起來的,非常 ...
  • 前言 昨天有讀者朋友留言,想要陳某寫一篇防止緩存穿透的文章,今天特意寫了一篇。 文章目錄如下: 什麼是緩存穿透? 緩存穿透其實是指從緩存中沒有查到數據,而不得不從後端系統(比如資料庫)中查詢的情況。 緩存畢竟是在記憶體中,不可能所有的數據都存儲在 Redis 中,因此少量的緩存穿透是不可避免的,也是系 ...
  • vue+webpack項目工程配置 1、npm init 生成package.json(選項一路預設) 2、npm i webpack vue vue-loader 提示需要安裝css-loader和vue-template-compiler依賴 3、安裝依賴 cnpm i css-loader v ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...