1.web概念概述
1.1JavaWeb
使用Java語言開發基于互聯網的專案，
1.2 軟體架構
1.2.1 C/S: Client/Server 客戶端/服務器端
在用戶本地有一個客戶端程式，在遠程有一個服務器端程式，如：QQ，迅雷...
優點：
1. 用戶體驗好，
缺點：
1. 開發、安裝，部署，維護較后者麻煩，
1.2.2 B/S: Browser/Server 瀏覽器/服務器端
只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的服務器端程式，
優點：
1. 開發、安裝，部署，維護較前者簡單，
缺點：
1. 如果應用過大，用戶的體驗可能會受到影響，
2. 對硬體要求過高，
1.2.3 B/S架構詳解
資源分類：
1. 靜態資源：
使用靜態網頁開發技術發布的資源，
特點：
所有用戶訪問，得到的結果是一樣的，
如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript，
如果用戶請求的是靜態資源，那么服務器會直接將靜態資源發送給瀏覽器，瀏覽器中內置了靜態資源的決議引擎，可以展示靜態資源，
2. 動態資源：
使用動態網頁及時發布的資源，
特點：
所有用戶訪問，得到的結果可能不一樣，
如：jsp/servlet,php,asp...
如果用戶請求的是動態資源，那么服務器會執行動態資源，轉換為靜態資源，再發送給瀏覽器，
3. 我們要學習動態資源，必須先學習靜態資源！
靜態資源：
HTML：用于搭建基礎網頁，展示頁面的內容，
CSS：用于美化頁面，布局頁面，
JavaScript：控制頁面的元素，讓頁面有一些動態的效果，
2.HTML
2.1 概念
是最基礎的網頁開發語言Hyper Text Markup Language 超文本標記語言，
超文本:
超文本是用超鏈接的方法，將各種不同空間的文字資訊組織在一起的網狀文本，
標記語言:
由標簽構成的語言，<標簽名稱> 如 html，xml.
標記語言不是編程語言，
2.2 快速入門
語法：
1. html檔案后綴名 .html 或者 .htm
2. 標簽分為:
1. 圍堵標簽：有開始標簽和結束標簽，如 <html> </html>
3. 標簽可以嵌套：
需要正確嵌套，不能你中有我，我中有你
錯誤：<a><b></a></b>
正確：<a><b></b></a>
4. 在開始標簽中可以定義屬性，屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
5. html的標簽不區分大小寫，但是建議使用小寫，
2.2.1 hello world案例代碼實作
<html>
<head>
<title>title</title>
</head>
<body>
<font color='green'>Hello World</font>
</body>
</html>
2.3 常用標簽學習
2.3.1 檔案標簽：構成html最基本的標簽
html:html檔案的根標簽，
head：頭標簽，用于指定html檔案的一些屬性，引入外部的資源，
title：標題標簽，
body：體標簽，
<!DOCTYPE html>：html5中定義該檔案是html檔案，
2.3.2 文本標簽：和文本有關的標簽
注釋：<!-- 注釋內容 -->
<h1> to <h6>：標題標簽、h1~h6:字體大小逐漸遞減、<p>：段落標簽、<br>：換行標簽、<hr>：展示一條水平線...
屬性： color：顏色、width：寬度、size：高度、align：對其方式(center：居中，left：左對齊， right：右對齊)
<b>：字體加粗、<i>：字體斜體、<font>:字體標簽、 <center>:文本居中
屬性：color：顏色、size：大小、 face：字體...
屬性定義
color：
1. 英文單詞：red,green,blue，
2. rgb(值1，值2，值3)：值的范圍：0~255 如 rgb(0,0,255)，
3. #值1值2值3：值的范圍：00~FF之間，如： #FF00FF，
width：
1. 數值：width='20' ,數值的單位，默認是 px(像素)，
2. 數值%：占比相對于父元素的比例，
2.3.3 表單標簽：和表單有關的標簽
表單概念：用于采集用戶輸入的資料的，用于和服務器進行互動，
form標簽：用于定義表單的，可以定義一個范圍，范圍代表采集用戶資料的范圍，
form標簽的重要屬性：
action：指定提交資料的URL
method:指定提交方式
method值 分類：一共7種，2種比較常用
get：
1. 請求引數會在地址欄中顯示，會封裝到請求行中(HTTP協議后講解)，
2. 請求引數大小是有限制的，
3. 不太安全，
post：
2. 請求引數不會再地址欄中顯示，會封裝在請求體中(HTTP協議后講解)，
2. 請求引數的大小沒有限制，
3. 較為安全，
注意：表單項中的資料要想被提交：必須指定其name屬性！
2.3.4 表單項標簽
input：可以通過type屬性值，改變元素展示的樣式 type屬性： text：文本輸入框，默認值placeholder：指定輸入框的提示資訊，當輸入框的內容發生變化，會自動清空提示資訊，
password：密碼輸入框 radio:單選框 1. 要想讓多個單選框實作單選的效果，則多個單選框的name屬性值必須一樣， 2. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值 3. checked屬性，可以指定默認值 checkbox：復選框，
注意： 1. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值 2. checked屬性，可以指定默認值，
file：檔案選擇框
hidden：隱藏域，用于提交一些資訊，
按鈕：
submit：提交按鈕，可以提交表單，
button：普通按鈕，
image：圖片提交按鈕，
src屬性指定圖片的路徑，
abel：指定輸入項的文字描述資訊
注意：label的for屬性一般會和 input 的 id屬性值 對應，如果對應了，則點擊label區域，會讓input輸入框獲取焦點，
select: 下拉串列
子元素：option，指定串列項，
textarea：文本域
cols：指定列數，每一行有多少個字符，
rows：默認多少行，
3.CSS：頁面美化和布局設定
3.1 概念
Cascading Style Sheets 層疊樣式表，層疊：多個樣式可以作用在同一個html的元素上，同時生效
3.2 CSS的使用：CSS與html結合方式
1. 行內樣式：在標簽內使用style屬性指定css代碼，
如：<div style="color:red;">hello css</div>
2. 內部樣式：在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
</html>
3. 外部樣式
1). 定義css資源檔案，
2). 在head標簽內，定義link標簽，引入外部的資源檔案
引入hello.css檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/hello.css">
div{
color:green;
}
</head>
<body>
<div>hello css</div>
<div>hello css</div>
</body>
</html>
4. css語法：
格式：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
選擇器:篩選具有相似特征的元素
注意： 每一對屬性需要使用";"隔開，最后一對屬性可以不加";"，
5. 選擇器：篩選具有相似特征的元素
分類：
1). id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一，語法：#id屬性值{}，
2). 元素選擇器：選擇具有相同標簽名稱的元素，語法： 標簽名稱{}，3. 類選擇器：選擇具有相同的class屬性值的元素，語法：.class屬性值{}，4.選擇所有元素：語法： *{}，
4.Javascript
4.1 概念與功能
概念：一門客戶端腳本語言，運行在客戶端瀏覽器中的，每一個瀏覽器都有JavaScript的決議引擎，腳本語言：不需要編譯，直接就可以被瀏覽器決議執行了
功能：可以來增強用戶和html頁面的互動程序，可以來控制html元素，讓頁面有一些動態的效果，增強用戶的體驗，
4.2 基本語法
基本語法與Java類似，
資料型別：
1. 原始資料型別(基本資料型別)：
1. number：數字， 整數/小數/NaN(not a number 一個不是數字的數字型別)
2. string：字串， 字串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一個物件為空的占位符
5. undefined：未定義，如果一個變數沒有給初始化值，則會被默認賦值為undefined
2.參考資料型別：物件(常用物件)
//Function：函式(方法)物件
//創建
var a=3;
var b=4;
function fun(a) {
alert(a);
}
fun=function (b) {
document.write(b);
}
//Array:陣列物件
//1. 創建：
var arr = new Array(1,'a','abc');
var arr = new Array(5);
var arr = [1,'a','abc'];
//2. 方法
//join(引數):將陣列中的元素按照指定的分隔符拼接為字串
//push() 向陣列的末尾添加一個或更多元素，并回傳新的長度
//length:陣列的長度,JS中，陣列元素的型別可變的，JS中，陣列長度可變的
//Date：日期物件
//1. 創建：
var date = new Date();
//2. 方法：
//toLocaleString()：回傳當前date物件對應的時間本地字串格式
//getTime():獲取毫秒值，回傳當前如期物件描述的時間到1970年1月1日零點的毫秒值差
5.BootStrap
5.1 概念
1. 概念： 一個前端開發的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架，Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷，
框架:一個半成品軟體，開發人員可以在框架基礎上，在進行開發，簡化編碼，
好處：
1. 定義了很多的css樣式和js插件，我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果，
2. 回應式布局，
同一套頁面可以兼容不同解析度的設備，
5.2 快速入門
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件，你也可以根據需要只加載單個插件， -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>5.3 回應式布局
同一套頁面可以兼容不同解析度的設備，
實作：依賴于柵格系統：將一行平均分成12個格子，可以指定元素占幾個格子，
步驟：
1. 定義容器，相當于之前的table，
容器分類：
1. container：兩邊留白，
2. container-fluid：每一種設備都是100%寬度，
2. 定義行，相當于之前的tr 樣式：row，
3. 定義元素，指定該元素在不同的設備上，所占的格子數目，樣式：col-設備代號-格子數目
設備代號：
1. xs：超小螢屏 手機 (<768px)：col-xs-12
2. sm：小螢屏 平板 (≥768px)
3. md：中等螢屏 桌面顯示幕 (≥992px)
4. lg：大螢屏 大桌面顯示幕 (≥1200px)
注意：
1. 一行中如果格子數目超過12，則超出部分自動換行，
2. 柵格類屬性可以向上兼容，柵格類適用于與螢屏寬度大于或等于分界點大小的設備，
3. 如果真實設備寬度小于了設定柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行，
6.XML
6.1 概念
1. 概念：Extensible Markup Language 可擴展標記語言，可擴展：標簽都是自定義的， <user> <student>
功能： 存盤資料
1. 組態檔
2. 在網路中傳輸
xml與html的區別
1. xml標簽都是自定義的，html標簽是預定義，
2. xml的語法嚴格，html語法松散
3. xml是存盤資料的，html是展示資料
2. 語法：
基本語法：
1. xml檔案的后綴名 .xml
2. xml第一行必須定義為檔案宣告
3. xml檔案中有且僅有一個根標簽
4. 屬性值必須使用引號(單雙都可)引起來
5. 標簽必須正確關閉
6. xml標簽名稱區分大小寫
6.2 快速入門
<?xml version='1.0' ?>
<users>
<user id='1'>
<name>zhangsan</name>
<age>23</age>
<gender>male</gender>
<br/>
</user>
<user id='2'>
<name>lisi</name>
<age>24</age>
<gender>female</gender>
</user>
</users>6.3 xml常見的決議器
1. JAXP：sun公司提供的決議器，支持dom和sax兩種思想，
2. DOM4J：一款非常優秀的決議器，
3. Jsoup：jsoup 是一款Java 的HTML決議器，可直接決議某個URL地址、HTML文本內容，它提供了一套非常省力的API，可通過DOM，CSS以及類似于jQuery的操作方法來取出和操作資料，
4. PULL：Android作業系統內置的決議器，sax方式的，
6.3.1 示例代碼
package xml;
import cn.wanghaomiao.xpath.model.JXDocument;
import cn.wanghaomiao.xpath.model.JXNode;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;
import java.io.File;
import java.util.List;
public class JsoupDemo {
public static void main(String[] args) throws Exception {
//以下是Xpath語法查詢
//1.獲取students.xml檔案的path
String path = ClassLoader.getSystemClassLoader().getResource("students.xml").getPath();
//2.獲取Document 檔案物件
Document document = Jsoup.parse(new File(path), "utf-8");
//3.根據 Document物件船艦JXDocument物件
JXDocument jxDocument=new JXDocument(document);
//4.結合Xpath語法查詢
//4.1查詢根結點student下的所有子結點
List<JXNode> jxNodes = jxDocument.selN("//student");
//遍歷查詢結果
jxNodes.forEach(System.out::println);
System.out.println("------------------");
//4.2查詢根結點student下的name結點內容
List<JXNode> jxNodes1 = jxDocument.selN("//student/name");
jxNodes1.forEach(System.out::println);
System.out.println("------------------");
//4.3獲取student下number id屬性=itcast的name值
List<JXNode> jxNodes2 = jxDocument.selN("//student[@id='itcast']/name");
jxNodes2.forEach(System.out::println);
System.out.println("------------------");
//以下是selector選擇器查詢(不用匯入第三方API)
Elements age = document.select("age");
age.forEach(System.out::println);
System.out.println("------------------");
Elements elements = document.select("student[number='heima_0002'] >age");
elements.forEach(System.out::println);
}
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290900.html
標籤：其他
上一篇：java版Spring Cloud+Spring Boot+mybatis+uniapp b2b2c 多商戶入駐商城 直播商城 直播帶貨商城之市場推店收益