前言
-
前端網頁開發流程
編寫代碼 -> 運行測試 -> 交付（部署）【網站】
1) 部署在tomcat中( 動態服務器- 慢)
tomcat/webapps/
2) 部署在靜態服務器（apache/nginx）
apache
默認在/var/www/html目錄下資源訪問 -
java編寫web項目流程
編寫代碼 -> 編譯代碼 ->測試 -> 打包 （jar/war）
springboot寫完代碼之後如何部署
1) 打包成爲war,直接拋在tomcat/webapps，war就會自動解壓
2) 打包成爲jar,直接運行jar(內置了tomcat) -
當前較爲流行的前後臺分離開發架構
1) 服務器端渲染技術
jsp
jsp -> servlet -> class -> 執行 -> 輸出html
asp
asp -> … -> 輸出html
頁面和服務接口都由後端程序員完成！！！
2) 客戶端渲染技術
html -> 腳本（js） -> 動態輸出html後端程序員只提供數據接口（springboot + spring + springmvc + mybatis +…）
前端程序員完成頁面的編寫 (html + css + javascript + vue)全棧工程師
（前端 + nodejs服務器端）
（前端 + JavaEE服務器端）
注意：編寫時爲了方便自己，建立適合自己的目錄結構
環境搭建
1) 編輯器環境
輕量級的編輯
sublime(emmet插件)
vscode(需要安裝open in browser插件方便調試)
2) 瀏覽器環境（測試）
firefox
google chrome
opera
safari
ie8+ 兼容性(對於低版本ie基本可以不用了)
HTML結構
-
超文本標記語言
超級文本（文本,超級鏈接,圖片，視頻，音頻...） -
doctype聲明
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
所有的標籤都是內置的 -
語法
html由各種元素組成，一個元素通常包含開始標籤，結束標籤，內容 在開始標籤中可以添加屬性 <div class="content" id="one"> <span>hello world</span> </div> -
屬性
- 核心屬性：id、title、style、class
絕大多數元素都具備的屬性 - 特有屬性
某些元素中特有的屬性
- 核心屬性：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"）
錨 URL - 指向頁面中的錨（href="#top"）
target:規定在何處打開鏈接文檔。
_blank 在新窗口中打開被鏈接文檔。
_self 默認。在相同的框架中打開被鏈接文檔。
_parent 在父框架集中打開被鏈接文檔。
_top 在整個窗口中打開被鏈接文檔。
framename 在指定的框架中打開被鏈接文檔。
注:1.如果不使用 href 屬性，則不可以使用如下屬性：download, hreflang, media, rel, target 以及 type 屬性。
2.被鏈接頁面通常顯示在當前瀏覽器窗口中，除非您規定了另一個目標（target 屬性）。
3.<a> 標籤中必須提供 href 屬性或 name 屬性。
img 標籤-----向網頁中以鏈接的形式嵌入一幅圖像,沒有結束標籤.
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" />
src="該圖像的文件的的絕對路徑或相對路徑"
width:寬 可用 px %
height:高
注：屬性是聲明在開始標籤的內部，一個屬性由屬性名和屬性值組成，通過=進行分割，屬性與屬性之間通過空格來分割，屬性名不區分大小寫，屬性值區分大小寫，屬性值可以使用單引號，雙引號或者是不用引號
Java與html本質的區別
1.Java
編譯型語言
.java -> .class -> jvm
隸屬於sun/oracle公司的，有具體的公司及團隊維護，所有的標準oracle說了算，jvm也是oracle開發的
語法升級 拉姆達
jvm升級（解釋java代碼）
效果升級
2.html
解釋型語言
.html -> 瀏覽器
網頁編程標準，w3c
h4 -> h5
語法升級
廢棄掉 strong frameset ...
新增 header article section...
解釋器
火狐，谷歌，歐朋...
容錯性非常棒
效果升級
標籤
塊級別標籤（從上往下，由外而內）
作用：搭建網頁的結構
特點：獨佔一行空間；寬度默認佔滿父元素；高度默認由內容決定(一般不給父元素指定高度，給子元素指定高度，子元素會撐起父元素)；寬高可以自定義
- div 【容器】無意義的塊元素（無招勝有招）
- h1~h6 標題
- p 段落
- ul>li 【容器】列表
- ol>li 【容器】列表
- dl>dd,dt 【容器】列表
補充：
H5中新增的塊元素(語義標籤)
顯示效果上與div完全相同，沒有任何額外的樣式。但是比div多的是它具有一定的語義
header
nav
article
section
aside
footer
address
行級別標籤
作用：填充網頁
特點：默認寬高由內容決定；寬高無法指定；所有的行內元素可以共享一行空間;行內元素內部一般不允許嵌套子元素，只允許放文本
- span 無意義的行內元素
- a 超鏈接
href
target - img 圖片
src
width
height
alt 當圖片找不到的時候的文本替代 - strong b em i sub sup d …
補充：
H5新增了行內元素
video 鏈接視頻
audio 鏈接音頻
重構
1.爲什麼要重構html標籤
html標籤自帶的某些樣式不符合我們開發項目的需求時，可以通過修改其css樣式，使其同div顯示效果相同，進而進行進一步的美化，來符合我們業務需求。
彩蛋
-
在html中聲明的charset表示什麼意思？
告訴瀏覽器你應該使用charset指定的字符編碼進行解碼 -
在html中聲明的viewport表示什麼意思？
<meta name="viewport" content="width=device-width, initial-scale=1.0">在移動設備中調整字體顯示,相對單位
電腦 1400 * 1240 14寸
手機 1400 * 1240 6寸
dpi
![項目架構]()
