面向JAVA全栈的HTML入门
|
340
|
前端
|

2046 字
|
10 分钟

面向JAVA全栈的HTMl入门

一. HTML元素

HTML是由一系列元素组成例如

 <p>Hello,world</p>

整体称之为元素

<p>和</p>分别被称为起始和结束标签

标签包围起来的Hello，world称为内容

元素还可以有属性，such as

 <p id="p1" title="标题1">Hello world!1</p>
 <p id="p2" >Hello world!2</p>
  • 属性一般是定义好的，这里id属性是给元素一个唯一的标识，id属性对显示并没有任何影响
  • 一个元素上可以加多个属性属性由空格分隔开，例如你可以同时增加id和title两个属性，其中title属性是对网页显示由影响的
image-20250121172623993

元素之间可以嵌套

 <p>HTML是一门非常<b>强大</b>的语言</p>
  • 嵌套但是标签不能交叉
 <p>HTML是一门非常<b>强大的语言</p></b>

标签起始和结束的边界不能交叉，这里<b>和<p>交叉了不建议这么写哦

ps：插一句<b>是加粗强调的标签，虽然不常用。

不包含内容的元素称为空元素

 <img src="1.png">
 <img src="1.png"/>
  • img作用是用来展示图片
  • src属性用来指明图片的名称
  • 空元素没有内容只有起始标签，同时由于没有内容，结束标签也可以不写，当然如果觉得结束标签省略了不太好可以在最后加上/，两种写法都可以。

二. HTML页面

上面介绍的只是一个个单独的的HTML元素，他们是整个网页的一个个小的组成部分，下面让我们来看一个简单网页完整的HTML代码吧

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>测试页面</title>
     </head>
     <body>
         <p id="p1">
             hello,world!
         </p>
         <img src="1.png">
     </body>
 </html>
  • <!DOCTYPE html>是文档的类型声明，了解即可，作用是告诉浏览器以什么模式去展示下面的html文档在VScode中定义好文件类型后，在编辑栏输入!!!然后按回车键即可生成。
  • html元素包括的是页面中所有的其他元素，整个页面只有一个`html元素，他是唯一的,也被称为根元素
  • head为头元素，包含的是不用于展示内容的元素，如title,link,meta等等ps： title的作用是设置整个页面总的标题 meta元素作用有很多，此处的作用是指定页面的字符编码为utf-8
  • body包含了对用户展示内容的元素，例如后面会用到展示文本，图片，视频，音频，各种元素

在VScode中定义好文件类型后输入一个!即可生成整个HTML的框架

image-20250122193822150

欸，怎么好像比上面的多了个lang属性，lang表示的是网页使用的语言，此处lang='en'表示网页使用的是英文。这里建议改为en改为zh（中文），当然此处也可以把lang属性去掉，因为咱们的浏览器默认是中文捏。

三. 常见元素

了解完了HTML的大概框架，让我们来看看我们平时要用到的小部件——元素吧。

1.文本元素

  • heading
<h1>一号标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

image-20250122200246087

  • paragraph
 <p>段落</p>
  • list

无序列表-unordered list

 <ul>
      <li>列表项1</li>
      <li>列表项1</li>
      <li>列表项1</li>
 </ul>

有序列表-ordered list

 <ol>
      <li>列表项1</li>
      <li>列表项1</li>
      <li>列表项1</li>
 </ol>
image-20250122203544658

多级列表

 <ul>
     <li>
         北京市
         <ul>
             <li>海淀区</li>
             <li>朝阳区</li>
             <li>昌平区</li>
         </ul>
     </li>
     <li>
         河北省
         <ul>
             <li>石家庄</li>
             <li>保定</li>
         </ul>
     </li>
 </u1>
  • Anchor

本意是锚的意思，当然它也有一个耳熟能详的名字叫超链接

 <a href="网页地址">超链接文本</a>

a表示就是anchor，点击超链接文本会跳转到网页地址

当然，anchor不仅可以实现跨页面的跳转也可以实现页面内的跳转，such as

 <a href="#p1">到达文章底部</a>
 <p id="p1">文章底部</p>

带有#就表示在页面内跳转哦

2. 多媒体

  • image（图片）
 <img src="文件路径">

src的格式有三种

1.文件地址

2.data URL

把图片二进制的数据直接嵌入到网页当中

 data：媒体类型；base64，数据

这里来体会一下整个过程

首先我们用java代码读取1.png图片（假设存在吧）的二进制数据

 Files.readAllBytes(Path.of("1.png"))

这时我们会获得一个byte数组$1 ==> byte[8056]{······}，然后我们调用base64的工具类中的getEncoder这个方法

 System.out.println(Base64.getEncoder().encodeToString($1))

然后我们会获得一个字符串，我们把字符串内容写入src

 <img src="data:image/png;base64,字符串">

3.object URL

  • video(视频)
 <video src="文件路径"></video>

但是捏如果我们用上面这行代码去插入视频的时候，我们发现，视频不能播放，停留在了第一帧，这里捏我们需要给标签增加一个controls属性了,给视频增加一个播放的工具条,就可以点击播放了，当然我们可以通过调节width元素来调节视频的大小,要注意不同元素用空格分开哦

 <video src="text.mp4" width="300" controls></video>
  • audio（音频）
 <audio src="文件路径"></audio>

要注意想要有播放键也需要增加controls的属性哦

有的小白看到这里可能要问了，我怎么知道有什么属性捏，小编这里推荐一个网站MDN

3.表单

作用：收集数据并提交给服务器

格式：

 <form action="服务器地址" method="请求方式" enctype="数据格式">
     <!--表单项-->
     
     <input type="submit" value="提交按钮">
 </form>

咱们来举个栗子，我要提交数据给百度搜索

 <form action="http://www.baidu.com/s">
     <!--这里method和enctype不填为默认值-->
     <!--这里以某个关键词去搜索，这里填入一个文本框的表单项-->
     <input type="text" name="wd">
     <!--name是固定的这个是百度搜索规定死的，名称必须是wd-->
     <!--这个就只是个输入框还需要一个提交按钮-->
     <input type="submit" value="搜索">
 </form>

从这个栗子来看我们没办法看到服务器端是什么样子的捏，那么我们吧本机作为服务器来看看服务器端是什么样子的捏

 <form action="http://localhost:8000/test" >
     <input type="text" name="username">
     <!--name是必须有的，如果没有是不会发给服务器的捏-->
     <input type="submit" value="提交">
 </form>

这里小编假设大家有一点Java基础，我们用springboot程序来观察服务器端

 package HTML;
 ​
 import org.springframework.stereotype.Controller;
 @Controller
 public class MyController{
     //添加一个方法用来处理请求数据，这里要做一个路径映射，也就是告诉服务器我这个方法对应的URL地址是什么，客户端的地址是test，那么我们服务器端也设置为test，同时对相应做出处理
     @RequestMapping("/test")
     @ResponseBody
     public String test(String username){
         System.out,println("username:"+ username);
         //这里就最简单的打印出数据
         return "收到数据";
         //添加一个相应
     }
 }

下面我们来看看常见的表单项

  • 文本框
<input type="text" name="username">
  • 密码框
 <input type="password" name="password">

和文本框输入的东西差不多，但是实际的显示会是小黑点

image-20250122221744958
  • 隐藏框
 <input type="hidden" name="id" value="1">

虽然隐藏框用户无法输入数据但是我们可以通过代码给他填写数据，虽然再前端不会显示，但是在表单提交的时候会把隐藏框的数据传给服务器，我们可以用上面的springboot程序来验证，最后综合起来的一个代码放在后面啦

  • 日期框
 <input type="data" name="birthday">

image-20250122222525622
就是增加了一个选择日期的小框图

学到这里我们来小小的综合一下，从服务器端看一下上传的数据捏

 package HTML;
 ​
 import org.springframework.stereotype.Controller;
 ​
 import java.time.LocalDate;
 ​
 @Controller
 public class MyController{
     @RequestMapping("/test")
     @ResponseBody
     public String test(User user){
         System.out,println("user:"+ user);
         return "收到数据";
     }
     static class User{
         private String username;
         private String password;
         private int id;
         private LocalDate birthday;
        
         public String getUsername() {
             return username;
         }
         public void setUsername(String username) {
             this.username = username;
         }
         public String getPassword() {
             return password;
         }
         public void setPassword(String password) {
             this.password = password;
         }
         public int getId() {
             return id;
         }
         public void setId(int id) {
             this.id = id;
         }
         public LocalDate getBirthday() {
             return birthday;
         }
         public void setBirthday(LocalDate birthday) {
             this.birthday = birthday;
         }
         @Override
         public String toString() {
             return "User{" +
                     "username='" + username + '\'' +
                     ", password='" + password + '\'' +
                     ", id=" + id +
                     ", birthday=" + birthday +
                     '}';
         }
     }
 ​
 }

这时候我们发现好像出现了一点点小问题

image-20250122225149056

出现了报错捏，报错码是400，这个问题出在Java这边，因为表单提交的日期格式和Java的日期格式不一样，这里我们需要在Java这边规定一下，在第二十行增加下面代码即可

 @DataTimeFormat(pattern = "yyyy-MM-dd")
  • 单选
 <input type="hidden" name="id">

直接上栗子了

 <input type="radio" name="sex" value="男" checked>
 <input type="radio" name="sex" value="女">

这里的checked属性表示的是默认选中

注意哦！在网页是不会显示value的值的，这里我们需要添加一点提示性的文字。

 男<input type="radio" name="sex" value="男" checked>
 女<input type="radio" name="sex" value="女">

提交表单给服务器的时候提交的是value的值哦，标签前面的汉字就只是提示作用哦。

  • 多选
 <input type="checkbox" name="love" value="唱" >
 <input type="checkbox" name="love" value="跳">
 <input type="checkbox" name="love" value="rap">
 <input type="checkbox" name="love" value="篮球">

在网页是同样不会显示value的值的，这里需要我们添加一点提示性的文字。

注意单选按钮和多选按钮作为一组的时候要注意name一定要一样哦

  • 文件上传
 <input type="file" name="avatar">
image-20250122230636168

这个样式真是简单朴素而眼熟啊

注意：这里对于文件选择框来讲，我们的表单需要用特殊的属性，也就是method和enctype需要给特殊值了

 <form action="http://www.baidu.com/s" methon="post" enctype="multipart/form-data">

这样我们服务器端才能拿到正确的上传文件，如果是默认值只会把文件的名字上传上去

这里Java服务器端接受图片数据需要用特殊类型

  public String test(User user，Multipartfile avatar){
         System.out,println("user:"+ user);
         System.out,println("avatar:"+ avatar.getSize());
         //这里可以获取文件的各种信息，这里获取文件的大小
         return "收到数据";
     }

结语

到这里HTML的前端入门就结束了，作为小编的第一篇博客，可能会有些许不足和错误，欢迎朋友们前来指正

前端

评论

  1. ttdr的小迷妹
    Windows Edge
    3 月前
    2025-1-23 0:39:13

    tql

  4. ttdr的小迷妹
    Windows Edge
    3 月前
    2025-1-23 0:40:24

    xm JAVA大佬

  7. 龟
    Windows Chrome
    3 月前
    2025-1-23 6:57:29

    这么好网站，记得去bing，google，baide添加索引哦

  10. lll
    Android Chrome
    3 月前
    2025-1-24 9:54:44

    牛

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






下一篇 

                    

                    
			        推荐文章
		            

		            

							
API之事件入门

							
							

							
API之入门第一课

							
							

							
JS之对象

							
							

							
JS之浅谈函数

							
							

							
JS基础之数组

							
							

							
JS基础——基础语法（1）

							
							

							
CSS之盒子模型（1）

							
							

							
CSS之其他常见元素

							
							

							
CSS常见属性之字体属性和文本属性

							
							

							
css的三大特性以及像素和颜色