博主主攻后端，但是毕竟要做网站，我们来学习一点前端的知识，一共有三节，学完就能做一点小小的页面啦；

1.1 HTML基础

什么是HTML呢，他是超文本标记语言，还记得HTTP是啥不，HTTP是超文本传输协议，别忘了哈，超文本就是字面意思，它的能力完全超过了文本，图片，链接，音频都可以放上去，标记语言，就是由标签构成的语言；

HTML的所有代码基本都是标签

我是一级标题

这个括号

 就是标签，我们学习HTML大部分就是要学习这些标签，注意我们一般用两个标签来表示开始和结束，结束的标签要加上/，开始和结束标签之间就是标签内容，开始标签中可能会带有属性，比如

我是一级标题

这就是相当于给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，序号越大标题越小，直接上代码

 
我是一级标题
 
我是二级标题
 
我是三级标题
 
我是四级标题
 
我是五级标题
 
我是六级标题

具体效果就是这样式的了，

2）段落标签 p

在HTML中换行符和空格都会失效，如果想另起一个段落，就要使用p标签，可以表示一个段落
 

 
第一段，巴拉巴拉~ 巴拉巴拉
 
第二段，巴拉巴拉

有很多空格和换行看下结果，

是以段落的形式，那么我们想要在第一段换行而不是另起一段呢，我们就需要使用下面的标签了；

3）换行标签 br

这个就是换行了，我们试试

 
第一段，巴拉巴拉~
巴拉巴拉
 
第二段，巴拉巴拉

看看结果，

换行ok了；

有换行了，那空格呢，我们要用 来代替空格，看看代码

 
第一段，巴拉巴拉~
巴拉巴拉
 
第二段，巴拉    巴拉

看结果：

 换行和空格都有了；

4）图片标签 img

我们还可以放上图片，使用img标签：

我们现在拿到一个图片的路径\"C:\\cctalk\\java代码容易犯错的知识点\\QQ截图20240915161600.png\"

如果放的不是绝对路径而是相对路径，那么图片就要放到HTML的同级路径中，

看看效果 好大的龙图，我们还可以把它缩小一点，给他设置属性

这样就变小了；

5）超链接

这个就是一个链接，我们可以跳转到我们设置的链接

龙图

看看效果

 点击之后

同时，我们还有吧网站，空链接或者是下载rar包放上去，会进行对应的操作； 

6）表格标签

>table 标签：表示整个表格

>tr 标签：表示表格的一行

>td 标签：表示单元格

我们先来随便写，后面我们使用css的时候再考虑属性那些；

 
 
 
第一行 第一格
 
第一行 第二格
 
 
 
第二行 第一格
 
第二行 第二格
 
 

框框和线线啥的都没有，还是嗷，等css；

7）form标签

表单标签分成两个部分

1，表单域 包含表单元素的区域，可是form头标签和尾标签中间的部分；

2，表单控件输入框提交按钮等，重点是input；

这中间就是表单域，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，文本框

可以输入文本。

2，密码框

这样式的，还能点击右边那个小眼睛看自己输入的密码。

3，单选框

 男
 nv

看效果 

这里的按钮只能点击一个，点不了两个，可以自己试试，并且要注意，使用单选框的时候要让单选框具有相同的name属性，

4，复选框

 爱好： 吃饭 睡觉

看效果：
 

都能勾选上

5，普通按钮

 我们现在点击没有反应，等下两期我们学js，我们就能有效果了；

6，提交按钮

就是刚才讲的，于把表单域中的所有元素提交到后端； 

9）表单 select标签

下拉菜单，

  计算机网络 网络工程 人工智能 

selected意思是默认选中， 

10）表单 textarea标签

文本域内容，可以描述些东西

可以写点东西；

表单练习

我们来做一个小练习：

把刚才所有学的都用上，

来实现一个这样的界面，姚宇是我盆友哈，不用介意，

注意这个查询字符串，我们来看代码；

     用户名：
 密码：
 性别： 男 女 武装直升机 沃尔玛购物袋
 兴趣： 睡觉 吃饭 导管
 专业：  人工智能 计算机网络 计算机科学与技术 网络工程 
 简介： 
  

这里多了个label，这个是啥意思呢，就是我们之前点击单选框，点击的是哪个学校圆圈，加上label之后，就直接点击那个汉字就能选中了，都加value是为了提交给后端时有对应的选项，比如选性别男，就是value=1； 

11）无语义 div  span

我们就把它当做盒子，div是大盒子，span是小盒子，

我们之前学的那些代码其实都挺乱的，我们把代码都放到盒子里，这样改变排版布局呀啥的都很方便

 小盒子1 小盒子2 
 
 小盒子3 小盒子4 

有点像表格，好啦，我们掌握这些html足够了，下期我们学一下css，在下期我们学JavaScript，之后前端就告一段落啦；