HTML————更实用于后端宝宝们学习的前端

最新推荐文章于 2025-04-29 17:57:56 发布

神秘的t

最新推荐文章于 2025-04-29 17:57:56 发布

阅读量1k

点赞数 62

文章标签：学习 html java

本文链接：https://blog.csdn.net/2301_79083481/article/details/147537230

版权

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

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>第二段，巴拉&nbsp;&nbsp;&nbsp;&nbsp;巴拉</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，之后前端就告一段落啦；