目錄
前言
一.wed
??wed是什么？
?? wed的分類
二.HTML 和 CSS
??HTML的介紹
HTML的標(biāo)簽
??CSS的介紹
常用基本標(biāo)簽
??實(shí)踐
HTML結(jié)構(gòu)標(biāo)簽特點(diǎn)
三.JavaScript
??JavaScript的介紹
??JS的學(xué)習(xí)內(nèi)容
四.Vue
??Vue的介紹
?MVVM(Model-View-ViewModel)思想介紹
??Vue的代碼樣式
安裝Vue.js方法及其使用
?代碼展示
五.VS Code
總結(jié)
??個(gè)人主頁：tq02的博客_CSDN博客-C語言,Java,Java數(shù)據(jù)結(jié)構(gòu)領(lǐng)域博主
?? 本文由 tq02 原創(chuàng)，首發(fā)于 CSDN??
???本章講解內(nèi)容：JavaWed的前端掃盲知識點(diǎn)??歡迎各位→點(diǎn)贊?? +?收藏? +?評論??+關(guān)注?
?編譯器：VS Code
前言
????????JavaWeb，是用Java技術(shù)來解決相關(guān)web互聯(lián)網(wǎng)領(lǐng)域的技術(shù)總和。Java Web應(yīng)用程序通常由動(dòng)態(tài)生成的網(wǎng)頁組成，與靜態(tài)的HTML頁面不同。 JavaWeb應(yīng)用程序可以用于各種類型的應(yīng)用程序，例如：淘寶、博客等。博主準(zhǔn)備先講述概念，之后會從HTML入手開始逐步講解直到掌握J(rèn)avawed。
注：一定要下載VS Code(文章結(jié)尾有教程)
一.wed
??wed是什么？
? ? ? ? wed：全球廣域網(wǎng)，通過瀏覽器訪問的網(wǎng)站。
例如訪問京東網(wǎng)：使用瀏覽器，瀏覽器也是一個(gè)程序，通過瀏覽器可以遠(yuǎn)程訪問京東那邊的程序。
問：網(wǎng)頁包含什么？
答：文字、圖片、音頻、視頻、超鏈接.........
問：那么網(wǎng)頁背后的本質(zhì)是什么呢？
答:? 前端代碼
那么關(guān)鍵就來了，我們是怎么通過瀏覽器來獲取網(wǎng)頁的呢？
文字解析（重點(diǎn)），例如：訪問淘寶的步驟：
- 使用瀏覽器輸入淘寶的鏈接，然后申請訪問淘寶的前端服務(wù)器。?
- 前端服務(wù)器會響應(yīng)，并且返回前端代碼，瀏覽器的解析引擎會自動(dòng)解析前端代碼，從而展示出對應(yīng)的框架樣式，并且在前端代碼中含有 數(shù)據(jù)獲取路徑
- 從數(shù)據(jù)獲取路徑中訪問后端服務(wù)器。
- 后端服務(wù)器會繼續(xù)訪問數(shù)據(jù)庫服務(wù)器。
- 數(shù)據(jù)庫服務(wù)器會將數(shù)據(jù)傳遞給后端服務(wù)器。
- 后端服務(wù)器再將數(shù)據(jù)傳遞給瀏覽器。
結(jié)論：前端相當(dāng)于空白框架，而后端相當(dāng)于往空白框架中輸入數(shù)據(jù)。
?? wed的分類
從開發(fā)網(wǎng)站的方面wed細(xì)分為2種：wed前端? ?與? wed后端
而這兩種所需要掌握的技術(shù)不同
- 前端wed：HTML、Css、JavaScript、Vue 、element 、Niginx
- 后端wed：Maven、springboot wed、MySQL、springboot? mybatis、springboot wed開發(fā)篇 、springboot? wed進(jìn)階篇
而若是學(xué)習(xí)Javawed，重點(diǎn)了解后端wed，但是為了更好的理解，我們依然需要學(xué)習(xí)前端wed知識，但是只需要理解一下
前端wed主要介紹：
HTML：負(fù)責(zé)網(wǎng)頁結(jié)構(gòu)（頁面元素和內(nèi)容）? ?
CSS：負(fù)責(zé)網(wǎng)頁的表現(xiàn)（頁面元素的外觀、位置。如顏色、大小）
JavaScript：負(fù)責(zé)網(wǎng)頁的行為（交互效果）
Vue：一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架
element：基于Vue封裝的桌面端組件庫
而至于后端wed，我們是需要詳細(xì)學(xué)習(xí)的，在之后的學(xué)習(xí)當(dāng)中會逐步了解的。
二.HTML 和 CSS
??HTML的介紹
?HTML:超文本標(biāo)記語言，分為2個(gè)部分組成：超文本和標(biāo)記語言
文本和超文本的主要區(qū)別：除了文字信息，還可定義圖片、音頻、視頻等內(nèi)容
標(biāo)記語言：由標(biāo)簽構(gòu)成的語言
- HTML標(biāo)簽是預(yù)定義好的。使用標(biāo)簽來展示圖片、音頻等
- HTML代碼語言直接在瀏覽器中運(yùn)行，瀏覽器解析。
HTML的標(biāo)簽：
?標(biāo)簽一般分為2種：
- ?帶有標(biāo)簽體的標(biāo)簽< a>標(biāo)簽體< /a >
- 不帶標(biāo)簽體的標(biāo)簽(自結(jié)束標(biāo)簽)< br/>,< hr/>
看不懂沒關(guān)系，先了解到什么是標(biāo)簽就行。例如<html>和</html>是成對出現(xiàn)的，開始標(biāo)簽和結(jié)束標(biāo)簽。?
??CSS的介紹
CSS：層疊樣式表，用于控制頁面的樣式
就是在標(biāo)簽的基礎(chǔ)上，控制內(nèi)容的顏色、大小
?例子：
常用基本標(biāo)簽
1.標(biāo)題標(biāo)簽(h1--h6)
?2.字體標(biāo)簽（font）
設(shè)置字體的大小、顏色與類型
?3.段落標(biāo)簽(p)
?4.換行標(biāo)簽(br)
? ?直接使用<br/>
5.水平線標(biāo)簽
需要設(shè)置水平線的長度、顏色、寬度，以及從哪端開始劃線。
例如：<hr? size="10" color="顏色"? width="50%"? align="left"/>
6.背景音樂(audio)
l例如：< audio src="音樂"? autoplay="autoplay"? ?loop="loop"/ >
下面是更加全面的標(biāo)簽和css，建議收藏哦
標(biāo)簽大全的參考手冊：HTML 標(biāo)簽參考手冊 (w3school.com.cn)
CSS大全參考手冊：CSS 參考手冊 (w3school.com.cn)
??實(shí)踐
? ? ? ? 第一步，建立一個(gè)文本文檔，將后綴改為.html
? ? ? ? 第二步，在文本文檔里輸入語法格式
??????????第三步，點(diǎn)擊文件，形成對應(yīng)的網(wǎng)頁
注：語法格式，瀏覽器要求不嚴(yán)，甚至有時(shí)候缺少一個(gè)>、"都可以顯示成功，因?yàn)闉g覽器的內(nèi)核很厲害，會自動(dòng)補(bǔ)全。
HTML結(jié)構(gòu)標(biāo)簽特點(diǎn)
- 不區(qū)分大小寫
- 單雙引號都可以
- 語法松散
三.JavaScript
??JavaScript的介紹
- JavaScript (簡稱:JS) 是一門跨平臺、面向?qū)ο蟮哪_本語言。是用來控制網(wǎng)頁行為的，它能使網(wǎng)頁可交互
- JavaScript和Java 是完全不同的語言，不論是概念還是設(shè)計(jì)。但是基礎(chǔ)語法類似
- JavaScript在1995年由 Brendan Eich 發(fā)明，并于1997年成為ECMA標(biāo)準(zhǔn)
- ECMAScript 6(ES6)是最新的JavaScript版本(發(fā)布于2015年)。
ECMA:ECMA國際(前身為歐洲計(jì)算機(jī)制造商協(xié)會)，制定了標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言 ECMASript，這種語言得到廣泛應(yīng)用。而Javascript是遵守ECMAScript的標(biāo)準(zhǔn)的。
什么是網(wǎng)頁行為呢？
如上述動(dòng)態(tài)圖，點(diǎn)擊上、下一張照片時(shí)，便是控制網(wǎng)頁行為。??：水印不會去、視頻內(nèi)容來源百度?
??JS的學(xué)習(xí)內(nèi)容
1.JS的引用方式
? ? ? ? 由介紹中，我們可以發(fā)現(xiàn)，JS可以控制網(wǎng)頁行為，也就是說和HTML進(jìn)行結(jié)合使用。
2.JS的基礎(chǔ)語法
? ? ? ?JS是一門編程語言，需要學(xué)習(xí)它的基礎(chǔ)語法，例如變量的控制、運(yùn)算符等等。
3.JS函數(shù)
? ? ? ?例如Java中的方法，我們需要學(xué)會使用函數(shù)、調(diào)用函數(shù)。
4.JS對象
? ? ? ? JS當(dāng)中提高了很多對象，需要學(xué)會如何使用常用的對象。
5.JS監(jiān)聽
? ? ? ?最重要的監(jiān)聽，監(jiān)聽：當(dāng)事件發(fā)生的時(shí)候，會產(chǎn)生對應(yīng)的行為。
四.Vue
??Vue的介紹
- Vue 是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。
- 基于MVVM(Model-View-ViewModel)思想，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，將編程的關(guān)注點(diǎn)放在數(shù)據(jù)上。
注：框架是一個(gè)半成品軟件，是一套可重用的、通用的、軟件基礎(chǔ)代碼模型?；诳蚣苓M(jìn)行開發(fā)，更加快捷、更加高效.
?MVVM(Model-View-ViewModel)思想介紹
?解析：
- Model，數(shù)據(jù)模型，包含了很多業(yè)務(wù)數(shù)據(jù)以及數(shù)據(jù)的處理方法
- View，視圖層，只負(fù)責(zé)數(shù)據(jù)的展示，也就是數(shù)據(jù)展示HTML標(biāo)簽，Dom元素
- ViewModel是view和Model的通信橋梁。通過它可以完成二者之間的數(shù)據(jù)綁定。
重點(diǎn)：綁定之后，如果Model的數(shù)據(jù)發(fā)生了改變，ViewModel會自動(dòng)更新View的展示。而如果view的數(shù)據(jù)發(fā)生改變，ViewModel也會改變Model中的數(shù)據(jù)。
??Vue的代碼樣式
安裝Vue.js方法及其使用
安裝：點(diǎn)擊官網(wǎng)，前往下載：安裝 — Vue.js? ?注:如果鏈接失效了，可以搜索官網(wǎng)，進(jìn)行下載。
使用：當(dāng)創(chuàng)建項(xiàng)目時(shí)，將vue.js文件放在自己創(chuàng)建的文件夾當(dāng)中。博主下載的是vue 2,你可以下載新版本。
?代碼展示
- 先新建一個(gè)HTML頁面，以便引入Vue.js文件
<script src="js/vue.js"></script>
- 在]S代碼區(qū)域，創(chuàng)建Vue核心對象，定義數(shù)據(jù)模型
<script>
new Vue({
el:"#app"
data: {
message:"Hello Vue!"
}
})
</script>- 編寫視圖
<div id="app">
<input type="text" V-model="message">
{{ message }}
</div>注：{{ 表達(dá)式 }} 。表達(dá)式可以是變量、三元運(yùn)算符、函數(shù)調(diào)用以及算術(shù)運(yùn)算
五.VS Code
????????從實(shí)踐當(dāng)中，我們會發(fā)現(xiàn)使用記事本效率極低，并且沒有任何提示，俗話說的好，工欲善其事必先利其器，所以我們需要下載一個(gè)幫助我們更快了解，編程效率高的代碼編輯器---VS Code。
我們這就簡單的介紹一下，什么是VS Code？
Visual Studio Code(簡稱：VS Code)是Microsoft于2015年4月發(fā)布的一款代碼編輯器。
VS Code對前端代碼有非常強(qiáng)大的支持，同時(shí)也可以使用其他編程語言(例如：c++、Java等)
VS Code提供了非常強(qiáng)大的插件庫，提高了開發(fā)效率。
在前端開發(fā)當(dāng)中，HTML、JavaScript等，都可以依賴于VS Code。
VS Code下載指南：http://t.csdn.cn/HM2Oq
總結(jié)
????????想學(xué)好Javawed，我們應(yīng)該先了解wed，了解wed的前后端，有了更好的前端知識，對于后端的部分，就更加容易理解。文章來源：http://www.zghlxwxcb.cn/news/detail-560311.html
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ----------------懶惰的tq02文章來源地址http://www.zghlxwxcb.cn/news/detail-560311.html
到了這里，關(guān)于Javaweb第一章：Web前端的入門理論的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
