HTML————更实用于后端宝宝们学习的前端
博主主攻后端，但是毕竟要做网站，我们来学习一点前端的知识，一共有三节，学完就能做一点小小的页面啦；
1.1 HTML基础
什么是HTML呢，他是超文本标记语言，还记得HTTP是啥不，HTTP是超文本传输协议，别忘了哈，超文本就是字面意思，它的能力完全超过了文本，图片，链接，音频都可以放上去，标记语言，就是由标签构成的语言；
HTML的所有代码基本都是标签
<h1>我是一级标题</h1>这个括号<h1> 就是标签，我们学习HTML大部分就是要学习这些标签，注意我们一般用两个标签来表示开始和结束，结束的标签要加上/，开始和结束标签之间就是标签内容，开始标签中可能会带有属性，比如
<h1>我是一级标题</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>我是一级标题</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">
这样就变小了；
5）超链接
这个就是一个链接，我们可以跳转到我们设置的链接
<a href="C:\cctalk\java代码容易犯错的知识点\QQ截图20240915161600.png">龙图</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> <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" value="1"><label for="sex1">男</label> <input type="radio" name="sex" value="2"><label for="sex2">女</label> <input type="radio" name="sex" value="3"><label for="sex3">武装直升机</label> <input type="radio" name="sex" value="4"><label for="sex4">沃尔玛购物袋</label><br> 兴趣： <input type="checkbox" name="hobby" value="1"><label for="hobby1">睡觉</label> <input type="checkbox" name="hobby" value="2"><label for="hobby2">吃饭</label> <input type="checkbox" name="hobby" 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，之后前端就告一段落啦；
