前言
-
前端網頁開發流程
編寫代碼 -> 運行測試 -> 交付(部署)【網站】
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