關於前端的一些知識
阿新 • • 發佈：2021-12-02
關於前端
總綱: HTML相當於人的骨骼, CSS相當於給人化妝, JS相當於讓人的區域性動起來.
01.HTML 入門
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML入門</title> <!-- 總綱: HTML相當於人的骨骼, CSS相當於給人化妝, JS相當於讓人的區域性動起來. 重點：CSS裡面有個選擇器、JS裡面有個DOM物件 HTML簡介: 概述: 全稱叫Hyper Text Markup Language(超文字標記語言). 超文字: 比普通文字更強大, 裡邊可以放音訊, 視訊, 圖片等. 標記語言:由標籤組成的語言. 特點: 1. HTML語言是不區分大小寫的, 為了閱讀方便, 建議全部小寫. 2. HTML檔案的字尾名是.html 和 .htm, 前者是新的命名, 後者是舊的命名. 3. HTML語言是由標籤組成的, 標籤又分為: 閉合標籤 和 自閉合標籤. <font size="7">我是字型標籤</font> 閉合標籤. <br /> 自閉合標籤. 4. 閉合標籤由: 開始(開放)標籤 和 結束(閉合)標籤組成. 5. 標籤可以有屬性, 屬性值要用引號括起來, 單雙引號均可. 6. HTML的註釋寫法為: 7. HTMl的標準格式為: <html> <head> <title></title> <meta /> </head> <body> </body> </html> 8. 如果涉及到標籤嵌套了, 建議: 包裹巢狀, 不建議: 交叉巢狀. 常用標籤: 基本標籤: <ul> 無序列表, 裡邊的每一項叫列表項, 用<li>表示. <ol> 有序列表, 裡邊的每一項叫列表項, 用<li>表示. <img> 圖片標籤, 常用屬性: border, width, height, align, alt <a> 超連結, 常用屬性: href, target <div> 塊標籤, 一般要結合CSS程式碼一起使用. <h數字> <br /> <hr /> <font> <b> 加粗 <i> 斜體 <u> 下劃線 <strong> <table> 表單標籤: 概述: 表單標籤叫<form>, 寫在裡邊的每一項叫: 表單項. 表單項分類: 1. 輸入項. 格式: <input type="輸入項的型別" /> 型別劃分: text password radio checkbox file submit reset image button hidden 2. 文字輸入域. <textarea> 3. 下拉列表. <select> 表單標籤<form>的屬性: action: 表示頁面資料提交到哪裡(預設是當前頁面) method: 表示頁面資料的提交方式. get(預設): 提交的資料在URL位址列中明文顯示, 相對不安全, 效率稍微高一點, 提交資料有大小限制. post: 提交的資料不會在URL位址列中明文顯示, 而是藏在請求體中, 相對安全, 效率稍微低一點, 提交資料理論上無大小限制. 使用表單標籤時的細節: 1. 表單項標籤必須寫到表單標籤中, 才可以被提交. 2. 表單項標籤必須有name屬性, 後臺才可以接收. --> </head> <body> </body> </html>
02.HTML的常用標籤演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02.HTML的常用標籤演示</title> </head> <body> <!--這裡寫的是頁面的"大白"部分, 即: 我們學的所有的標籤都是寫到這裡的--> <!--演示無序列表 type屬性: circle(空心圓點), square(實心正方形), desc(實心圓點, 預設) <hr /> : 分割線 --> <ul type="desc"> <li>飛機</li> <li>高鐵</li> <li>輪船</li> </ul> <hr /> <!--演示有序列表 type屬性: 數字(預設), 大小寫字母, 大小寫羅馬數字--> <ol type="I"> <li>鯡魚罐頭</li> <li>臭鱖魚</li> <li>螺螄粉</li> <li>臭豆腐</li> <li>臭豆腐</li> </ol> <hr /> <!--演示圖片路徑--> <center> <!-- <img src="../image/01.jpg" width="200px" height="300px" border="1px" alt="圖片正在拼命載入中..."/> --> <img src="../image/01.jpg" border="1px" alt="圖片正在拼命載入中..."/> </center> <hr /> <!--超連結標籤--> <a href="http://www.baidu.com" target="_blank">我用雙手, 成就你一生的夢想!</a> <hr /> <div>我是塊標籤, 我獨佔一行, 我一般要結合CSS一起使用</div> <div>我是塊標籤, 我獨佔一行, 我一般要結合CSS一起使用</div> <div>我是塊標籤, 我獨佔一行, 我一般要結合CSS一起使用</div> <hr /> <font>我是字型</font> <font>我是字型</font> <font>我是字型</font> </body> </html>
03.HTML的表單標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03.HTML的表單標籤</title> </head> <!--<body background="../image/01.jpg">--> <body> <!--表單標籤小案例: 模擬註冊頁面--> <!--提交資料到內部頁面--> <form action="02.HTML的常用標籤演示.html" method="get"> <!--提交資料到外部頁面, 記得要寫 http://--> <!-- <form action="http://www.baidu.com">--> 賬號: <input type="text" name="username" placeholder="請錄入您的賬號"/> <br /> 密碼: <input type="password" name="password" placeholder="請錄入您的密碼"/> <br /> 性別: <input type="radio"name="gender" value="male" checked>男 <input type="radio"name="gender" value="male">女 <br /> 愛好: <input type="checkbox"name="hobby" value="basketball" checked>籃球 <input type="checkbox"name="hobby" value="football" >足球 <input type="checkbox"name="hobby" value="deskball" checked>桌球 <input type="checkbox"name="hobby" value="pingpangball" >乒乓球 <br/> 上傳頭像: <input type="file" name="myPicture" /> <br /> 個人說明: <textarea rows="5" cols="50"> </textarea> <br /> 籍貫: <select> <option>--請選擇--</option> <option>廣東省</option> <option>廣西省</option> <option>河南省</option> <option>河北省</option> </select> <br/> <!--提交頁面資料--> <input type="submit" value="點我提交"> <input type="image" src="../image/02.jpg" width="100px" height="50px"> <input type="reset" value="點我重置"> <input type="button" value="我是普通按鈕, 沒有任何自帶功能, 需要結合JS程式碼一起使用"> <input type="hidden" value="我是隱藏域, 裡邊的資料一般是給後臺開發人員用的"> </form> </body> </html>
04.CSS入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS入門</title>
<!--
CSS簡介:
概述:
全稱叫Cascading Style Sheets(層疊樣式表), 就是用來美化頁面的.
分類:
行內樣式:
格式:
style="屬性名: 屬性值; 屬性名: 屬性值;"
特點:
只針對於當前元素有效.
內部樣式:
格式: 需要結合選擇器使用
選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
特點:
只針對於當前頁面內的元素有效.
外部樣式:
格式: 需要結合選擇器使用
選擇器名{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
針對於當前專案內的所有的頁面有效, 一般可以用來統一網站的風格.
CSS的選擇器: 掌握
目的:
根據不同的條件, 選擇不同的元素, 只有找到元素(就是HTML標籤), 才能美化它.
常用選擇器如下:
元素選擇器:
格式:
元素名{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
根據元素名匹配元素.
id選擇器:
格式:
#選擇器名{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
根據元素的id屬性匹配元素, 建議 id具有唯一性.
類選擇器:
格式:
.選擇器名{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
根據元素的class屬性匹配元素.
後代選擇器:
格式:
選擇器1 選擇器2{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
先匹配選擇器1, 匹配上之後, 從中選擇符合選擇器2的元素.
不管是否是直接子級都要(兒子, 孫子, 重孫子都要)
子元素選擇器:
格式:
選擇器1>選擇器2{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
先匹配選擇器1, 匹配上之後, 從中選擇符合選擇器2的元素.
只要直接的子級元素.
屬性選擇器:
格式:
選擇器[屬性1][屬性2='屬性值']{
屬性名=屬性值;
屬性名=屬性值;
}
特點:
根據元素的屬性匹配的.
CSS的常用樣式:
border: 表示邊框, 格式如下:
border: 1px solid red; 1畫素 單實線 紅色
solid:單實線 double:雙實線, dotted(虛線 .), dashed(虛線 -)
width: 寬度
height: 高度
font-size: 字型大小
text-decoration: none 取消超連結的下劃線
-->
</head>
<body>
<div style="border: 1px dotted red; ">div111</div>
<div>div222</div>
<div style="border: 1px dashed red; ">div333</div>
</body>
</html>
05.css樣式之內部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<!--CSS樣式-->
<style>
/*元素選擇器, 即: 根據元素的名字(標籤名)獲取元素的*/
/*div{
border: 1px solid red;
}*/
/*id選擇器, 即: 根據元素的id屬性匹配元素, 建議 id具有唯一性.*/
/*#d1{
border: 1px solid red;
width: 200px;
height: 100px;
}*/
/*類選擇器, 即: 根據元素的class屬性匹配元素*/
/* .divClass{
border: 1px solid red;
width: 200px;
height: 100px;
}*/
/*後代選擇器: 先匹配選擇器1, 匹配上之後, 從中選擇符合選擇器2的元素. 不管是否是直接子級都要 */
div a{
font-size: 50px;
text-decoration: none;
}
/*子元素選擇器: 先匹配選擇器1, 匹配上之後, 從中選擇符合選擇器2的元素. 只要直接子級 */
/*div>a{
font-size: 50px;
}*/
/*屬性選擇器: 根據元素的屬性匹配的*/
div[id="d2"][class]{
border: 1px solid red;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">div111</div>
<div id="d2" class="divClass">div222</div>
<div id="d3" class="divClass">div333</div>
<hr/>
<div>
<a href="http://www.baidu.com">百度</a>
<font>
<a href="http://www.jd.com">京東</a>
</font>
</div>
</body>
</html>
06.css樣式之外部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<!--引入外部CSS樣式 relation: 關聯 -->
<link rel="stylesheet" href="../css/my.css" />
</head>
<body>
<div>div111</div>
<div>div222</div>
<div>div333</div>
</body>
</html>
07.JS入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS入門</title>
<!--
JS簡介:
概述:
全稱叫JavaScript, 它是一門指令碼語言, 也是一門弱型別語言, 主要是用來給頁面增加動態功能的.
組成:
ECMAScript核心基礎:
定義了整個JS的核心語法和基本物件.
BOM物件:
Browser Object Model, 瀏覽器物件模型, 即: 一個瀏覽器 = 一個BOM物件.
常用物件用: location, history
DOM物件: //必須掌握.
Document Object Model, 文件物件模型, 即: 一個HTML頁面 = 一個DOM(樹)物件
Js是把整個頁面轉成對應的一個DOM樹結構, 然後通過管理該DOM樹, 實現管理頁面的目的.
JS的寫法:
內部指令碼:
直接寫到頁面的<script>標籤中即可.
外部指令碼:
寫到模組下的js資料夾中, 新建js檔案, 然後在裡邊編寫, 最後在專案中引入該檔案即可.
-->
<!--這裡寫的是JS的指令碼檔案: 內部指令碼檔案.-->
<!-- <script>
//JS中的函式
function tan() {
alert("小孩子家家的不要亂點, 好好學習, 將來更好的為人民服務!")
}
</script>-->
<!--引入外部js指令碼檔案-->
<script src="../js/my.js"></script>
</head>
<body>
<input type="button" value="點我有驚喜" onclick="tan()"/>
</body>
</html>
08.DOM樹結構
09.提交資料方式
傳送請求，獲取資料。（String形式的html頁面）：
原生態的JDK方式 get post
HttpClient方式 get post
Get方式：
提交資料到URL位址列，相對不安全，效率高，提交資料有大小限制。
Post方式：
提交資料在請求體中，相對安全，效率低，提交資料大小理論上無限制。
問：什麼是請求體呢？
答：它是Http協議的組成部分，Http協議是由 請求 和 響應 兩部分組成。
請求：請求行、請求頭、請求體（Get方式沒有請求體）
響應：響應行、響應頭、響應體
10.傳送請求獲取資料之 HttpClient物件的get方式
package com.itheima.demo02_httpclient;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
/*
案例: 演示 傳送請求獲取資料之 HttpClient物件的get方式 (掌握)
爬蟲的步驟:
1. 明確首頁URL.
2. 傳送請求, 獲取資料.
3. 解析資料.
4. 儲存資料.
爬蟲簡介:
就是模擬瀏覽器向伺服器傳送請求, 並獲取資料.
細節:
1. 使用HttpClient之前, 需要先導包.
2. 一個HttpClient物件 = 一個瀏覽器物件.
*/
public class Demo01 {
public static void main(String[] args) throws Exception {
//1. 明確首頁URL.
String indexUrl = "http://www.itcast.cn";
//2. 傳送請求, 獲取資料.
//2.1 獲取HttpClient物件, 即: 獲取一個瀏覽器物件.
CloseableHttpClient httpClient = HttpClients.createDefault();
//2.2 建立HttpGet物件, 關聯URL, 模擬: get請求.
HttpGet httpGet = new HttpGet(indexUrl);
//2.3 設定請求頭, 即: 模擬何種瀏覽器.
//谷歌瀏覽器
httpGet.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36");
//2.4 通過HttpClient物件傳送HttpGet物件, 獲取 響應物件(包含: 響應行, 響應頭, 響應體)
CloseableHttpResponse httpResponse = httpClient.execute(httpGet);
//2.5 從響應行中提出去響應狀態碼, 看其是否是200, 如果是表示響應成功, 我們在獲取響應資料.
if (httpResponse.getStatusLine().getStatusCode() == 200) {
//2.6 獲取響應頭資訊, 並列印. 這一步操作沒有啥用, 就是給你看看, 我們能獲取響應頭資訊.
/*Header[] headers = httpResponse.getAllHeaders();
for (Header header : headers) {
System.out.println(header);
}*/
//2.7 獲取響應體資料, 並列印.
HttpEntity entity = httpResponse.getEntity();
//2.7.1 如果是圖片, 音訊等資料, 要通過IO流的方式獲取.
//InputStream is = entity.getContent();
//2.7.2 如果是純文字呢, 可以通過 EntityUtils#toString()方法快速獲取.
String html = EntityUtils.toString(entity,"UTF-8"); //獲取的就是字串形式的html
System.out.println(html);
System.out.println("---------------------------");
//3. 解析資料.
Document dom = Jsoup.parse(html);
Elements liEles = dom.select(".ulon>li"); //所有的<li>標籤
for (Element liEle : liEles) {
//liEle就是每一個標籤
System.out.println(liEle.text());
}
}
//2.8 釋放資源.
httpClient.close(); //關閉瀏覽器.
//4. 儲存資料.
}
}
11.HttpClient方式傳送請求, 獲取資料之 post方式.
package com.itheima.demo01_httpclient;
import org.apache.http.HttpEntity;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;
import java.util.ArrayList;
/*
案例: HttpClient方式傳送請求, 獲取資料之 post方式.
爬蟲的基本步驟:
1. 明確首頁URL.
2. 傳送請求, 獲取資料.
方式1: 原生態JDK方式, get, post
方式2: HttpClient(瀏覽器物件)方式, get, post 掌握
3. 解析資料.
4. 釋放資源.
HttpClient簡介:
概述:
它是專門用來處理Http請求的物件, 可以把它當做一個 瀏覽器物件.
用之前需要先導包.
*/
public class Demo02 {
public static void main(String[] args) throws Exception {
//1. 明確首頁URL.
String indexUrl = "http://www.itcast.cn";
//2. 傳送請求, 獲取資料.
//2.1 建立HttpClient物件, 模擬瀏覽器.
CloseableHttpClient httpClient = HttpClients.createDefault();
//2.2 建立HttpPost物件, 即: 請求物件, 封裝所有的請求引數.
HttpPost httpPost = new HttpPost(indexUrl);
//2.3 設定請求頭, 即: 模擬何種瀏覽器.
httpPost.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36");
//2.4. 設定請求體.
//2.4.1 建立集合物件, 用來記錄: 請求體中的請求引數.
ArrayList<BasicNameValuePair> list = new ArrayList<>();
//2.4.2 新增請求引數物件到集合中.
list.add(new BasicNameValuePair("username", "admin01"));
list.add(new BasicNameValuePair("password", "pw111"));
//2.4.3 將封裝有請求引數的集合 作為構造方法的引數, 獲取: 具體的請求體物件.
UrlEncodedFormEntity requestEntity = new UrlEncodedFormEntity(list);
//2.4.4 設定請求體物件到 請求物件中.
httpPost.setEntity(requestEntity);
//2.5 傳送請求, 獲取資料, 獲取的是響應物件(即: 包含所有的響應資訊, 例如: 響應行, 響應頭, 響應體
CloseableHttpResponse response = httpClient.execute(httpPost);
//2.6 從響應行中獲取響應狀態碼, 並判斷是否是200(表示響應成功)
if (response.getStatusLine().getStatusCode() == 200) {
//2.7 如果響應成功, 則從響應物件中獲取 具體的響應體物件.
HttpEntity entity = response.getEntity();
//2.8 從響應體物件中獲取具體的響應資訊, 並操作.
String html = EntityUtils.toString(entity, "utf-8");
System.out.println(html);
}
//2.9 釋放資源.
httpClient.close();
//3. 解析資料.
//4. 釋放資源.
}
}