博主主攻后端，但是畢竟要做網站，我們來學習一點前端的知識，一共有三節，學完就能做一點小小的頁面啦；
1.1 HTML基礎
什么是HTML呢，他是超文本標記語言，還記得HTTP是啥不，HTTP是超文本傳輸協議，別忘了哈，超文本就是字面意思，它的能力完全超過了文本，圖片，鏈接，音頻都可以放上去，標記語言，就是由標簽構成的語言；
HTML的所有代碼基本都是標簽
<h1>我是一級標題</h1>這個括號<h1>?就是標簽，我們學習HTML大部分就是要學習這些標簽，注意我們一般用兩個標簽來表示開始和結束，結束的標簽要加上/，開始和結束標簽之間就是標簽內容，開始標簽中可能會帶有屬性，比如
<h1 id="h1id">我是一級標題</h1>這就是相當于給h1標簽設置了一個唯一標識符，
下面來看看HTML個基本結構，
?第一行不用管，第二行HTML是整個html文件的跟標簽，之后是Head和body，Head和body是兄弟關系，HTML對于Head和body是父親關系，head中的title是標題，body中寫內容，我們來看看我們寫的這些前端代碼是啥樣的，
title在這呢；
我們要編寫代碼，可以使用vs code，也可以自己找別的軟件，博主用的就是vs code哈，
只要有這樣的html文件就行，雙擊就能運行，
我們可以點擊瀏覽器的開發者工具，就能看到當前界面的代碼了，我們現在開始使用vs code，進入頁面，輸入問號就可以快速打出這些代碼；
好了現在我們正式開始標簽的學習；
1.2 HTML標簽
1）標題標簽h1-h6
就是標題從1-6，序號越大標題越小，直接上代碼
<body><h1 id="h11">我是一級標題</h1><h2>我是二級標題</h2><h3>我是三級標題</h3><h4>我是四級標題</h4><h5>我是五級標題</h5><h6>我是六級標題</h6>
</body>
具體效果就是這樣式的了，
2）段落標簽 p
在HTML中換行符和空格都會失效，如果想另起一個段落，就要使用p標簽，可以表示一個段落
<p>第一段，巴拉巴拉~ 巴拉巴拉</p><p>第二段，巴拉巴拉</p>有很多空格和換行看下結果，
是以段落的形式，那么我們想要在第一段換行而不是另起一段呢，我們就需要使用下面的標簽了；
3）換行標簽 br
這個就是換行了，我們試試
<p>第一段，巴拉巴拉~<br/>巴拉巴拉</p><p>第二段，巴拉巴拉</p>看看結果，
換行ok了；
有換行了，那空格呢，我們要用 來代替空格，看看代碼
<p>第一段，巴拉巴拉~<br/>巴拉巴拉</p><p>第二段，巴拉 巴拉</p>看結果：
?換行和空格都有了；
4）圖片標簽 img
我們還可以放上圖片，使用img標簽：
我們現在拿到一個圖片的路徑"C:\cctalk\java代碼容易犯錯的知識點\QQ截圖20240915161600.png"
如果放的不是絕對路徑而是相對路徑，那么圖片就要放到HTML的同級路徑中，
<img src="C:\cctalk\java代碼容易犯錯的知識點\QQ截圖20240915161600.png">
</body>看看效果
?好大的龍圖，我們還可以把它縮小一點，給他設置屬性
<img src="C:\cctalk\java代碼容易犯錯的知識點\QQ截圖20240915161600.png" width="200px" height="200px">
這樣就變小了；
5）超鏈接
這個就是一個鏈接，我們可以跳轉到我們設置的鏈接
<a href="C:\cctalk\java代碼容易犯錯的知識點\QQ截圖20240915161600.png" width="200px" height="200px">龍圖</a>看看效果
?點擊之后
同時，我們還有吧網站，空鏈接或者是下載rar包放上去，會進行對應的操作；?
6）表格標簽
>table 標簽：表示整個表格
>tr 標簽：表示表格的一行
>td 標簽：表示單元格
我們先來隨便寫，后面我們使用css的時候再考慮屬性那些；
<Table><tr><td>第一行 第一格</td><td>第一行 第二格</td></tr><tr><td>第二行 第一格</td><td>第二行 第二格</td></tr></Table>
框框和線線啥的都沒有，還是嗷，等css；
7）form標簽
表單標簽分成兩個部分
1，表單域 包含表單元素的區域，可是form頭標簽和尾標簽中間的部分；
2，表單控件輸入框提交按鈕等，重點是input；
<form action="URL" method="get"></form>這中間就是表單域，action是我們要訪問的URL，這里寫了個Method，之前咱們不是學過HTTP報文協議嗎，這就是那4個方法,get,post,put,delete，應該是這4個嗷；?
8）表單input標簽
包括各種輸入控件，單行文本框，按鈕，單選框，復選框，
標簽中有Type（必須有），取值有：text，password，button，file，image等等。
標簽中還有name，name給input起了個名字，并且表單提交的時候，查詢字符串的鍵值對中的可以就是這個name，我們從后端傳來的值就是value。
標簽中還有value，就是input的默認值。、
下面介紹常用的input
1，文本框
<input type="text"></br>
?
可以輸入文本。
2，密碼框
<input type="password"></br>
?
這樣式的，還能點擊右邊那個小眼睛看自己輸入的密碼。
3，單選框
<input type="radio" name="sex">男</br><input type="radio" name="sex">nv</br>看效果
?
這里的按鈕只能點擊一個，點不了兩個，可以自己試試，并且要注意，使用單選框的時候要讓單選框具有相同的name屬性，
4，復選框
愛好：<input type="checkbox">吃飯<input type="checkbox">睡覺看效果：
?
都能勾選上
5，普通按鈕
<input type="button" value="點我">
?我們現在點擊沒有反應，等下兩期我們學js，我們就能有效果了；
6，提交按鈕
<form action=""><input type="submit" value="提交"></form>就是剛才講的，于把表單域中的所有元素提交到后端；?
9）表單 select標簽
下拉菜單，
<select><option value="1">計算機網絡</option><option value="2">網絡工程</option><option value="3" selected>人工智能</option></select>selected意思是默認選中，?
10）表單 textarea標簽
文本域內容，可以描述些東西
可以寫點東西；
表單練習
我們來做一個小練習：
把剛才所有學的都用上，
來實現一個這樣的界面，姚宇是我盆友哈，不用介意，
注意這個查詢字符串，我們來看代碼；
<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="C:\前端代碼\html\Demo7.html">用戶名：<input type="text" name="username"><br>密碼：<input type="password" name="password"><br>性別：<input type="radio" name="sex" id="sex1" value="1"><label for="sex1">男</label><input type="radio" name="sex" id="sex2" value="2"><label for="sex2">女</label><input type="radio" name="sex" id="sex3" value="3"><label for="sex3">武裝直升機</label><input type="radio" name="sex" id="sex4" value="4"><label for="sex4">沃爾瑪購物袋</label><br>興趣：<input type="checkbox" name="hobby" id="hobby1" value="1"><label for="hobby1">睡覺</label><input type="checkbox" name="hobby" id="hobby2" value="2"><label for="hobby2">吃飯</label><input type="checkbox" name="hobby" id="hobby3" value="3"><label for="hobby3">導管</label><br>專業：<select name="chose"><option value="1">人工智能</option><option value="2">計算機網絡</option><option value="3">計算機科學與技術</option><option value="4" selected>網絡工程</option></select><br>簡介：<textarea></textarea><br><input type="submit" value="提交"></form>
</body>
</html>這里多了個label，這個是啥意思呢，就是我們之前點擊單選框，點擊的是哪個學校圓圈，加上label之后，就直接點擊那個漢字就能選中了，都加value是為了提交給后端時有對應的選項，比如選性別男，就是value=1；?
11）無語義 div? span
我們就把它當做盒子，div是大盒子，span是小盒子，
我們之前學的那些代碼其實都挺亂的，我們把代碼都放到盒子里，這樣改變排版布局呀啥的都很方便
<div><span>小盒子1</span><span>小盒子2</span></div><div><span>小盒子3</span><span>小盒子4</span></div>
?
有點像表格，好啦，我們掌握這些html足夠了，下期我們學一下css，在下期我們學JavaScript，之后前端就告一段落啦；
RTC時間獲取)
