大前端開發
一.引入
項目研發
例: estore (電子商城)
1.
-
背景管理子子產品
1.1. 資料來源 （資料庫）
1.2. 背景管理系統
1.2.1. 功能劃分:
分類管理
商品管理
品牌管理
訂單管理
2. 購物子子產品
2.1. 功能劃分:
浏覽首頁
資訊篩選
清單頁面
檢視商品詳情
添加購物車
送出訂單
3.estore的 - 企業級要求
3.1. 架構
springboot
spring
springmvc
mybatis
mybatis-generator
mysql
poi （excel）
fastdfs (分布式附件伺服器)
spring security(自己封裝 jwt)
git版本控制（svn）
github 代碼中央倉庫（團隊協作）
大前端（web + 移動互聯 + 小程式公衆号）
html/css/js
android
jquery h5api
vue vuex vuerouter
cordova
weex
前端入門筆記 二. 思考
1. 什麼是前背景分離開發?
https://www.jianshu.com/p/bf3fa3ba2a8f
簡單來說就是根據對資料的不同操作來進行職責的劃分
2.什麼是大前端開發，大前端開發中包含了哪些東西?
簡單來說就是前端技術的一個統一,大前端最大的特點在于一次開發，同時适用于所有平台.
注:具體的精确且詳細的了解請關注一個月後的博文.
三. 課程安排（大前端基礎）
html5
css3
android基礎（cordova,weex）
js基礎
1.Html基礎
1.1. 環境搭建
1) 編輯器環境 輕量級的編輯
sublime(emmet插件)
vscode *
2) 浏覽器環境（測試）
firefox
google chrome
opera
safari
ie8+ 相容性
1.2. 編寫hello world網頁
編寫代碼 -> 運作測試 -> 傳遞（部署）【網站】
1） 部署在tomcat中( 動态伺服器- 慢)
tomcat/webapps/hello.html
2) 部署在靜态伺服器（apache/nginx）
阿裡雲（ubuntu16.04）47.112.126.92
jdk
mysql
apache /var/www/html
tomcat
編寫代碼 -> 編譯代碼 ->測試 -> 打包 （jar/war）
3. html結構
html是一種超文本标記語言
什麼是超級文本?（文本,超級連結,圖檔，視訊，音頻…特點:自帶樣式,自帶效果） doctype聲明 :
```yaml
HTML5:
<!DOCTYPE html>
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html主體結構 <html>
<head>
<!--源資訊 -->
<meta charset="UTF-8">
</head>
<body>
<!--可以顯示在網頁中的内容-->
</body>
</html>
注:
xml 标簽是可以自定義的
html 所有的标簽都是内置的
4.html 文法
html由各種元素組成，一個元素通常包含開始标簽，結束标簽，内容 ;在開始标簽中可以添加屬性
<div class="content" id="one">
<span>hello world</span> </div>
5.html屬性
- 核心屬性：id、title、style、class等絕大多數元素都具備的屬性
- 特有屬性:某些元素中特有的屬性
a 标簽:
<a href="http://www.w3school.com.cn">W3School</a>
href :用于指定超連結目标的 URL。
絕對 URL - 指向另一個站點（比如 href="http://www.example.com/index.htm"）
相對 URL - 指向站點内的某個檔案（href="index.htm" target="_blank" rel="external nofollow" ）
錨 URL - 指向頁面中的錨（href="#top"）
注:1.如果不使用 href 屬性，則不可以使用如下屬性：download, hreflang, media, rel, target 以及 type 屬性。
2.被連結頁面通常顯示在目前浏覽器視窗中，除非您規定了另一個目标（target 屬性）。
3.<a> 标簽中必須提供 href 屬性或 name 屬性。
target:規定在何處打開連結文檔。
_blank 在新視窗中打開被連結文檔。
_self 預設。在相同的架構中打開被連結文檔。
_parent 在父架構集中打開被連結文檔。
_top 在整個視窗中打開被連結文檔。
framename 在指定的架構中打開被連結文檔。
img 标簽-----向網頁中以連結的形式嵌入一幅圖像,沒有結束标簽.
例:<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />
src="該圖像的檔案的的絕對路徑或相對路徑"
width:寬 可用 px %
height:高
-
html那些事
Java 編譯型語言 : .java --編譯----> .class —運作----> jvm
隸屬于sun/oracle公司的，有具體的公司及團隊維護，所有的标準oracle說了算，jvm也是oracle開發的,是以,當Java需要進行文法更新的時候 ,jvm也會随之更新（解釋java代碼)進而達到一個良好的效果更新.
springboot寫完代碼之後如何部署
1) 打包成為war,直接抛在tomcat/webapps，war就會自動解壓
2) 打包成為jar,直接運作jar(内置了tomcat)
html 解釋型語言 : .html —運作—> 浏覽器
當 網頁程式設計标準，w3c 要将h4标準 更新到h5時,隻是文法标準的更新,浏覽器對于新标準的解析可能遲遲達不到要求,進而導緻更新标準的複雜性.
-
html标簽
學什麼？
标簽含義?
如何使用标簽(語義)?
-
塊級别标簽
作用：搭建網頁的結構
特點：寬度預設占滿父元素,高度預設由内容決定,寬高可以自定義
-
-
<div class="nav">
<ul>
<li></li>
</ul>
</div>
div 【容器】無意義的塊元素（無招勝有招）
h1~h6 标題
p 段落
ul>li 【容器】清單
ol>li 【容器】清單
dl>dd,dt 【容器】列
-
行級别标簽
作用：填充網頁
特點：預設寬高由内容決定；寬高無法指定；所有的行内元素可以共享一行空間;行内元素内部一般不允許嵌套子元素，隻允許放文本
span 無意義的行内元素
a 超連結 href target
img 圖檔 src alt 當圖檔找不到的時候的文本替代
strong b em i sub sup d ...
<span>hello</span>
<a href="">百度一下</a>
-
css入門
6.1.三要素：
1) html (網頁骨架) 塊 ，行 （table/form）
2) css（頁面裝飾，布局，動畫過渡效果）
原則：對于動畫效果能用css實作的絕對不用js
3) Javascript（樹莓派）
動态DOM, 類似于jstl
資料互動
6.2.如何在html中使用css(3種方式)
1) 嵌入在标簽内部
缺點:将css代碼寫在了html中，較為混亂,複用性較低.
優點：優先級高，簡單直接（修改别人代碼的時候，weex rn）
2) 集中嵌入在style标簽中
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
/*字型圖示庫*/
ul>li::before{
content:"*";
}
</style>
3).将css獨立寫在外部的css檔案中，并且通過link導入進來,适用于企業級開發
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cssy引入</title>
<link type="text/css" rel="styleSheet" href="../css/style.css" target="_blank" rel="external nofollow"
</head>
<body>
<div>
hello world!
</div>
<div>
hello css!
</div>
</body>
</html>
6.4.css文法
selector {
/*規則*/
color:#ffffff;
background-color:pink;
}
6.5. css選擇器 (jQuery選擇器)
1) 核心選擇器
用法：選擇較大範圍
1. 标簽（元素）選擇器
div {}
h1 {}
2. id選擇器
#one {}
<div id="one">one</div>
<div id="two">two</div>
3. class選擇器
.first {}
<div id="one" class="first">one</div>
<div id="two" class="first">two</div>
<div id="three" class="first">one</div>
<div id="four" class="second">two</div>
<p id="five" class="first">p</div>
容易造成詞窮！！！
4. 并且選擇器
div.first {}
p#five {}
5. 或者選擇器
div,.first {}
6. 普遍選擇器
*
2) 層次選擇器【一般不超過5層】
1. 子代選擇器
.top_nav > ul > li
選中class為top_nav的元素的直接後代ul元素的直接後代li元素
2. 後代選擇器
.top_nav li
3. 下一個兄弟選擇器
.top_nav li + *
4. 之後所有兄弟選擇器
.top_nav li ~ *
3) 過濾器
用法:對已經選擇到的元素進行過濾
1. 屬性過濾器
selector[name] 已選擇到的元素具有name屬性
selector[name=v] 已選擇到的元素具有name屬性，并且name屬性的值為v
selector[name^=v] 已選擇到的元素具有name屬性，并且name屬性的值以'v'開頭
selector[name$=v] 已選擇到的元素具有name屬性，并且name屬性的值以'v'結尾
selector[name*=v] 已選擇到的元素具有name屬性，并且name屬性的值中包含了'v'
2. 僞類過濾器
以:開頭的
selector:first-child 過濾出已選擇元素中的是第一個孩子的元素
selector:last-child
selector:nth-child(2)
selector:nth-child(even)
selector:nth-child(odd)
selector:nth-child(3n+1)
selector:only-child
selector:not(selector)
...
selector:hover
selector:active
selector:visited
selector:focus
3. 僞元素過濾器
可以産生出來一個虛拟元素（行内元素）
以::開頭的
div::before {
}
div::after {
}
<div>
::before
<p>one</p>
<p>two</p>
::after
</div>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)