当前位置：首页 > news >正文

JavaEE 进阶第二期：开启前端入门之旅(二)

news 2025/9/5 10:12:57

专栏：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>