JavaEE 進階第二期：開啟前端入門之旅(二)

專欄：JavaEE 進階躍遷營

個人主頁：手握風云

一、VS Code開發工具的搭建

1.1. 創建.html文件

1.2. 安裝插件

1.3. 快速生成代碼

二、HTML常見標簽

2.1. 換行標簽

2.2. 圖片標簽: img

2.3. 超鏈接

三、表格標簽

四、表單標簽

4.1. input標簽

4.2. form標簽

4.3. select標簽和textarea標簽

五、無語義標簽

一、VS Code開發工具的搭建

1.1. 創建.html文件

? ? ? ? 新建文件之后，輸入"文件名稱 + .html"。

1.2. 安裝插件

? ? ? ? 推薦安裝的插件：

Auto Rename Tag；

? ? ? ? 當我們修改開始標簽或者結束標簽時，對應的標簽也會同時修改。

view-in-browser

? ? ? ? 安裝好之后，在VS Code里面右鍵點擊“View In Brower”，就可以直接在默認的瀏覽器里面打開標簽頁。

Live Server

? ? ? ? 安裝好之后，當我們更改html里面的內容后，右鍵，點擊“Open with Live Server”，看到html文件的路徑變了，這相當于啟動了一個服務器。

1.3. 快速生成代碼

? ? ? ? 上一期我們提到過，! + tab / enter可以快速生成代碼框架：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

????????“<!DOCTYPE html>”是指定當前html版本5；“lang”代表是語言，這里指定當前頁面是英文，告訴瀏覽器我們頁面是英文，可以對當前頁面啟用翻譯功能；“<meta charset="UTF-8">”表示瀏覽器的解碼規則，如果我們更改了VS Code的編碼方式，就會出現亂碼。

二、HTML常見標簽

2.1. 換行標簽

? ? ? ? 想要完成換行，可以通過<br/>標簽實現。br是break的縮寫，表示換行，是一個單標簽，不像<p>帶有一個很大的空隙。<br/>是規范寫法，不建議寫成<br>。

2.2. 圖片標簽: img

? ? ? ? img標簽必須帶有src屬性，表示圖片的路徑。src里面既可以是絕對路徑、相對路徑，也可以是網絡路徑。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖片標簽</title>
</head>
<body><img src="D:\Front-end\HTML\preview.jpg" alt="絕對路徑" title="圖1"><img src="../HTML\creed.jpg" alt="相對路徑" title="圖2"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJMhmBYyKU-6N2tKFTpJmdKE_6T2NQm0_V8A&s" alt="網絡圖片" title="圖3">
</body>
</html>

? ? ? ? 注意獲取圖片的網絡路徑是右鍵單擊圖片，然后復制圖片地址。

? ? ? ? alt屬性是圖片加載失敗時顯示的文本。title屬性是鼠標懸停在圖片上時的提示。此外還有width和height屬性，可以用來設置圖片的長度和寬度。如果兩個屬性全部設置，就會按照設置的大小展示，如果只設置一個，另一個按等比例縮放。不推薦設置兩個屬性，因為可能會使圖片出現變形。

2.3. 超鏈接

? ? ? ? 當我們點擊一些文字時，會跳轉到其他頁面，這個就是超鏈接。超鏈接必須具備href屬性，表示點擊后跳轉到哪個頁面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href = "https://www.baidu.com/">百度</a><br/><a href = "https://www.toutiao.com/">今日頭條</a>
</body>
</html>

? ? ? ? 默認字體是藍色，點擊的一瞬間會變為紅色。當點擊之后就會跳轉到對應的頁面。還有一個target屬性，默認是_self，當修改為_blank后，就會用新的標簽頁打開。

?<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href = "https://www.baidu.com/" target="_blank">百度</a><br/><a href = "https://www.toutiao.com/" target="_blank">今日頭條</a>
</body>
</html>

? ? ? ? 空鏈接：使用#在herf中占位。

<a href="=">空鏈接</a>

三、表格標簽

? ? ? ? 表格標簽都是成對出現的。

table 標簽: 表示整個表格；
tr: 表示表格的一行；
td: 表示一個單元格；
td: 表示一個單元格；
tbody: 表格的主體區域。

????????table 包含 tr , tr 包含 td。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" cellspacing="0px" width="200px" hight="100px"><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>    
</body>
</html>

四、表單標簽

????????前面的這些標簽都是用來展示的，無法進行修改。在B站首頁的搜索框中，我們可以在里面輸入內容進行交互，然后點擊搜索按鈕，并向后端發送請求。

????????表單是讓用戶輸?信息的重要途徑，分成兩個部分：

表單控件：輸?框，提交按鈕等，重點是 input 標簽。
表單域：包含表單元素的區域，重點是 form 標簽。

4.1. input標簽

????????各種輸?控件，單行文本框，按鈕，單選框，復選框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單控件</title>
</head>
<body>文本框：<input text="text" name="" id=""><br/>密碼框：<input type="password" name="" id=""><br/>性別：<input type="radio" name="" id=""> 男<input type="radio" name="" id=""> 女<br/>學歷：<input type="radio" name="" id=""> 本科及以上<input type="radio" name="" id=""> 本科以下<br/>
</body>
</html>

? ? ? ? 但這些按鈕不能進行單選，我們必須要告訴程序，可以把name綁定到同一個對象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單控件</title>
</head>
<body>文本框：<input text="text" name="" id=""><br/>密碼框：<input type="password" name="" id=""><br/>性別：<input type="radio" name="gender" id=""> 男<input type="radio" name="gender" id=""> 女<br/>學歷：<input type="radio" name="edu" id=""> 本科及以上<input type="radio" name="edu" id=""> 本科以下<br/>
</body>
</html>

? ? ? ? 有的軟件上，只需點擊對應的文本就可以默認選擇上按鈕，我們就可以使用label標簽來把文本和按鈕進行綁定。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單控件</title>
</head>
<body>文本框：<input text="text" name="" id=""><br/>密碼框：<input type="password" name="" id=""><br/>性別：<input type="radio" name="gender" id=""> 男<input type="radio" name="gender" id=""> 女<br/>學歷：<input type="radio" name="edu" id="edu1"> <label for="edu1"> 本科及以上<input type="radio" name="edu" id="edu2"> <label for="edu2"> 本科以下<br/>
</body>
</html>

? ? ? ? 對于一個人的興趣愛好可以有很多個，這里就可以使用復選框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單控件</title>
</head>
<body>文本框：<input text="text" name="" id=""><br/>密碼框：<input type="password" name="" id=""><br/>性別：<input type="radio" name="gender" id=""> 男<input type="radio" name="gender" id=""> 女<br/>學歷：<input type="radio" name="edu" id="edu1"> <label for="edu1"> 本科及以上<input type="radio" name="edu" id="edu2"> <label for="edu2"> 本科以下<br/>興趣愛好：<input type="checkbox" name="n1"> 吉他 <input type="checkbox" name="n1"> 素描<input type="checkbox" name="n1"> 籃球 <input type="checkbox" name="n1"> 乒乓球<br/>
</body>
</html>

? ? ? ? 我們還可以加上提交按鈕，但是點了之后沒有反應。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單控件</title>
</head>
<body>文本框：<input text="text" name="" id=""><br/>密碼框：<input type="password" name="" id=""><br/>性別：<input type="radio" name="gender" id=""> 男<input type="radio" name="gender" id=""> 女<br/>學歷：<input type="radio" name="edu" id="edu1"> <label for="edu1"> 本科及以上<input type="radio" name="edu" id="edu2"> <label for="edu2"> 本科以下<br/>興趣愛好：<input type="checkbox" name="n1"> 吉他 <input type="checkbox" name="n1"> 素描<input type="checkbox" name="n1"> 籃球 <input type="checkbox" name="n1"> 乒乓球<br/><input type="button" value="提交" onclick="alert('hello')"><button>button標簽</button>
</body>
</html>

4.2. form標簽

? ? ? ? form標簽描述了要把數據按照什么方式，提交到哪個頁面中，我們可以使用form標簽把想要提交的內容括起來。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單控件</title>
</head>
<body><form action="Demo1.html" method="post">文本框：<input text="text" name="" id=""><br/>密碼框：<input type="password" name="" id=""><br/>性別：<input type="radio" name="gender" id=""> 男<input type="radio" name="gender" id=""> 女<br/>學歷：<input type="radio" name="edu" id="edu1"> <label for="edu1"> 本科及以上<input type="radio" name="edu" id="edu2"> <f for="edu2"> 本科以下<br/>興趣愛好：<input type="checkbox" name="n1"> 吉他 <input type="checkbox" name="n1"> 素描<input type="checkbox" name="n1"> 籃球 <input type="checkbox" name="n1"> 乒乓球<br/><input type="button" value="提交" onclick="alert('hello')"><button>button標簽</button></form>
</body>
</html>

4.3. select標簽和textarea標簽

下拉菜單

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉菜單</title>
</head>
<body><select name="city" id="" cols="30" rows="10"><option value="1">北京</option><option value="2">上海</option><option value="3">廣州</option><option value="4">深圳</option></select><textarea name="" id="">你好</textarea>
</body>
</html>

? ? ? ? 這里的value都用數字對應，是因為在后端開發中對于字符串的解碼方式不同造成的麻煩，對于這些可以枚舉的列表性信息，一般都用相應的代碼，就如同高考報志愿，所填的都是學校代碼。通過調整rows和cols可以影響文本域的內容。

五、無語義標簽

????????div 標簽，division 的縮寫，含義是分割；span 標簽，含義是跨度。前面的標簽都是有樣式的，這兩個是沒有樣式的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>123</div><div>456</div><div>789</div>789<span>123</span><span>456</span><span>789</span>
</body>
</html>