【Java Web学习 | 第1篇】前端 - HTML
文章目录
Java Web概览
HTML核心知识点总结
一、HTML基础概念🥝
1.1 HTML文档基本结构
一个标准的HTML文档结构如下：
<!DOCTYPEhtml><!--文档类型声明标签 --><htmllang="zh-CN"><!-- 定义语言的种类 en为English zh-CN为中文 --><head><metacharset="UTF-8"><!-- 用于保存文字，不写会乱码--><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>HTML基础标签</title></head><body><!-- 页面内容 --></body></html><!DOCTYPE html>：声明文档类型为HTML5<html>：根元素，包含整个HTML文档<head>：包含文档的元数据（如字符集、标题等）<body>：包含网页的可见内容
1.2 HTML标签特点
- 大多数标签成对出现，如
<p></p> - 部分标签是自闭合的，如
<img>、<input>、<br> - 标签可以嵌套，但不能交叉嵌套
- 标签名不区分大小写，但推荐使用小写
二、常用HTML标签🧾
2.1 文本标签
<h1>-<h6>：标题标签，h1级别最高，h6级别最低<p>：段落标签<strong>/<b>：加粗文本，strong有语义强调<em>/<i>：斜体文本，em有语义强调<br>：换行标签<hr>：水平线标签<span>：行内元素，用于包裹部分文本，一行可以放多个 span<del>/<s>：删除线标签，推荐用 del<ins>/<u>：下划线标签，推荐用 ins ：空格符号
示例：
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><p>这是一个段落,这里强制换行<br>包含<strong>加粗文本</strong>和<em>斜体文本</em></p><hr> 试验空 格 <hr><!--<del>和<s>都为删除标签 推荐用<del>--> 我是<del>删除线</del> 我是<s>删除线</s><!--<ins>和<u>都为下划线标签 推荐用<ins> --> 我是<ins>下划线</ins> 我是<u>下划线</u></body>显示效果：
2.2 链接与图像
<a>：链接标签，herf="跳转目标的地址target=“目标窗口的弹出方式”(默认为_self 当前窗口打开页面 _blank 新窗口打开页面)<img>：图像标签，src属性指定图像路径，alt属性提供替代文本(图片无法正常显示时会使用文本)，title属性为设置提示文本：鼠标放到图标上的文字，width属性为图像设定宽度，height属性为图像设定高度，border属性为图像设定边框
示例：
<ahref="https://www.ZEEKLOG.net"target="_blank">访问ZEEKLOG</a><imgsrc="../picture/背景2.jpg"alt="这是图片无法正常显示的替换文字"title="这是好看的风景"width="600"border="0"/>显示效果：
综合示例
<!DOCTYPEhtml><!--文档类型声明标签 --><htmllang="zh-CN"><!-- 定义语言的种类 en为English zh-CN为中文 --><head><metacharset="UTF-8"><!-- 用于保存文字，不写会乱码--><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>HTML基础标签</title></head><body><!--标题标签 一共有六级 h1到h6--><h1id="top">标题标签</h1><h2>二级标题</h2>1234 <!--锚点链接(href属性设置为 #名字 的形式)(#对应空链接)，点击后快速跳转到对应的id标记位置 我写在了最后面--><ahref="#life">生活介绍</a><!-- <br/>为强制换行标签（break）只会简单另起一行，不会有间隙--><!--段落标签存在间隙（段落与段落）--><p>大家好我是<br/> 林晓然</p><!--<strong>或<b>标签为加粗 更推荐用<strong>标签--><p>这是一个<strong>段落</strong>标签,加粗的<b>文字</b></p><!-- <em>与<i>都为倾斜标签 推荐用<em>--> 我是<em>倾斜</em>的文字 我是倾斜的文字 我是<i>倾斜</i>的文字 <!--<del>和<s>都为删除标签 推荐用<del>--> 我是<del>删除线</del> 我是<s>删除线</s><!--<ins>和<u>都为下划线标签 推荐用<ins> --> 我是<ins>下划线</ins> 我是<u>下划线</u><!--<div>标签来布局，就是一个大盒子，独占一行，每行只能放一个<div>--><div>我是一个div标签，我一个人单独占一行</div>123 <div>我是一个div标签，我一个人单独占一行</div><!--<span>标签用来布局(division)，一行可以放多个<span>,小盒字(span--》跨度)--><span>我是一个span标签</span><span>百度</span><span>新浪</span><span>微博</span><h2>图像标签的使用</h2><!--<img>标签(单标签)用于定义HTML页面中的图像 src是<img>标签的必须属性，用于指定图像文件的路径和文件名 alt图片不能正常显示时的替换文本(alternative) title为提示文本，鼠标放到图标上的文字 width为图像设定宽度 height为图像设定高度 border为图像设定边框--><imgsrc="img1.jpg"alt="这是图片无法正常显示的替换文字"title="这是好看的风景"width="350"border="100"/><br/><imgsrc="img2.jpg"alt="这是图片无法正常显示的替换文字"title="你好"/><!--图片在相对html文件所在位置的下一级目录 若为上一级目录则用../ --><imgsrc="picture/img1.jpg"height="100"/><!--绝对路径（不推荐）--><imgsrc="E:\WebTest\img1.jpg"height="100"/><!--网络上图片的绝对路径--><imgsrc="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line/glitch.png"/><!--超链接标签<a herf="跳转目标的地址 target="目标窗口的弹出方式"(默认为_self 当前窗口打开页面 _blank 新窗口打开页面)>(双标签)--><h4>外部超链接</h4><ahref="http://www.qq.com"target="_blank">腾讯</a><!--内部超链接--><h4>内部超链接(网站内部之间的相互连接)</h4><ahref="web2/web2.html"target="_blank"> 内部跳转</a><!--空链接 用#代替地址(用于开发时先搭建好框架，先不考虑具体地址)--><ahref="#"target="_blank">公司地址</a><!--下载连接 如果href里面的地址是一个文件或者压缩包，会下载这个文件--><ahref="img1.zip">下载链接</a><!--其他网页元素也可以进行超链接--><ahref="http://baidu.com"target="_blank"><imgsrc="img1.jpg"width="100"/></a><br/><!--空格符号 小于号< 大于号 >--> 试验空 格和<大于小于>符号 <!--锚点连接 使用id进行标记--><h3id="life">这是林晓然的生活简介，噼里啪啦一大堆省略。。。</h3><ahref="#top">返回顶部</a></body></html>显示效果：
2.3 列表标签
<ul>：无序列表<ol>：有序列表<li>：列表项
示例：
<!-- 无序列表 --><ul><li>项目1</li><li>项目2</li></ul><!-- 有序列表 --><ol><li>第一步</li><li>第二步</li></ol>显示效果：
2.4 表格标签
<table>：表格容器<tr>：表格行 (table row)<td>：表格单元格 (行中的每个单元格(数据)table data)<th>：表头单元格 (table head)<thead>、<tbody>、<tfoot>：表格结构分区cellpadding属性规定单元边沿与其内容之间的空白，默认1像素cellspacing属性规定单元格之间的空白，默认2像素border属性表示表格边框的厚度align表示整个表格的排放位置：left靠左，center居中,right靠右
示例：
<tablealign="left"border="10"cellpadding="20"cellspacing="0"width="300"height="50"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>立夏</td><td>女</td><td>18</td></tr><tr><td>肖奈</td><td>男</td><td>18</td></tr></tbody></table>显示效果：
2.5 表单标签
<form>：表单容器，会把它范围内的表单元素提交给服务器
其核心属性说明：
action：指定表单数据提交的 URL 地址method：提交方式，主要有get和post两种：get：数据会显示在 URL 中，会暴露信息，适合简单查询（有长度限制）；post：数据在请求体中传输，适合提交敏感信息或大量数据
type的常用属性值：
| type属性值 | 说明/功能 | 典型应用场景 | 关键属性示例 |
|---|---|---|---|
| text | 单行文本输入（默认类型） | 用户名、姓名等普通文本输入 | placeholder=“请输入用户名” |
| password | 密码输入（内容加密显示） | 密码、验证码输入 | minlength=“6” |
| number | 仅允许输入数字 | 年龄、数量、身高体重等数值输入 | min=“0” max=“120” step=“1” |
| radio | 单选按钮（同组name值需相同）属性checked(属性值只能为checked)，作用为一打开界面就默认选中某个表单元素 | 性别、单选题等互斥选项选择 | name=“gender” checked |
| checkbox | 复选框（可多选）属性checked(属性值只能为checked)，作用为一打开界面就默认选中某个表单元素 | 爱好、兴趣等多选项选择 | name=“hobby” value=“reading” |
| date | 日期选择器（年/月/日） | 生日、预约日期等日期输入 | —— |
| file | 文件上传控件 | 头像、文档等文件上传 | accept=“image/*” multiple |
| 邮箱格式输入（自带格式验证） | 邮箱地址输入 | placeholder=“[email protected]” | |
| submit | 表单提交按钮 | 提交表单数据 | value=“提交” |
| reset | 表单重置按钮 | 清空表单内容 | value=“重置” |
| select | 下拉选择框（需配合option使用） | 城市、学历等固定选项选择 | size=“1” multiple |
| textarea | 多行文本输入（当输入内容可能过多时，就改text为textarea） | 个人简介、备注等长文本输入 | rows=“5” cols=“30” maxlength=“500” 解释： rows=“初始显示的行数” cols=“每行中的字符数” |
| button | 普通按钮 | 一般是结合JavaScript启动脚本 | value=“获取验证码” |
注意：
- 选择类控件（radio/checkbox）需设置value值，提交时会将选中项的value发送到后端
- 同一组单选按钮name值必须相同，才能实现互斥效果；复选框要设置相同name，提交时会以数组形式传递勾选的数据。
示例：
<formaction="/submit"method="get"name="name1"><!-- text 文本框，可以输入任何文字 此处的value值为input元素的初始默认值，会出现在文本框中 maxlength为文本框可输入的最大长度--> 用户名：<inputtype="text"name="username"value="请输入用户名"maxlength="7"/><br/><!-- label标签用于绑定一个表单元素，当点击<label>标签绑定的文本时，浏览器会自动将光标转到或者选择到对应的表单元素上，来增加用户体验 --><!-- label 里用for="..."来指向对应的标签 ， 而标签的创建则用id="。。。" --> label标签测试--》 <labelfor="aaa">用户名2</label><inputtype="text"id="aaa"/><labelfor="man">男士</label><inputtype="radio"id="man"/><br/><!-- password 密码框，用户看不见输入的密码 --> 密码：<inputtype="password"/><br/><!-- radio 单选框（圆形）， 注意name(表单元素的名字)的值要设置为一样的才可实现单选 --><!-- 此处的value 并不会出现在页面中，主要作用是用户勾选并提交后将用户勾选的结果发送到后台 --><!-- 还有属性checked(属性值只能为checked)，它针对单选按钮和复选框，作用为一打开界面就默认选中某个表单元素 --> 男<inputtype="radio"name="sex"value="男"checked="checked"/> 女<inputtype="radio"name="sex"value="女"/><br/><!-- checkbox 复选框(正方形，可以单个用)， 注意name的值也要设置为一样 --> 性格:活泼<inputtype="checkbox"name="personality"value="活泼"/> 开朗<inputtype="checkbox"name="personality"value="开朗"checked="checked"/>阳光<inputtype="checkbox"name="personality"value="阳光"/><br/><!-- 普通按钮 button ，一般是结合javaScript启动脚本--><inputtype="button"value="获取验证码"/><br/><!-- file 实现选择文件上传功能 --> 上传头像：<inputtype="file"/><br/><!-- <select>为下拉列表 其至少包含一对<option> 在<option>中定义selected="selected"是，当前项即为默认选项 --> 籍贯: <select><option>山东</option><option>北京</option><option>天津</option><optionselected="selected">广东</option><option>福建</option></select><br/><!-- textarea标签是用于定义多行文本输入的控件，当输入内容可能过多时，就改text为textarea --><!-- rows="初始显示的行数" cols="每行中的字符数" 了解即可，在实际开发中不会使用，都是用CSS来改变大小--> 反馈留言: <textarearows="3"cols="20">我知道这个反馈留言是用textarea来做的</textarea><br/><!-- 当点击提交按钮(submit的默认显示文字为提交，可通过value更改显示的文字)时，会把表单数据发送到服务端 --><inputtype="submit"value="火箭提交"/><!-- reset重置按钮(默认显示文字为 重置，也可通过value修改、) --><inputtype="reset"/></form>显示效果：
三、HTML5新增特性🤔
HTML5带来了许多新特性，增强了网页的功能和语义化：
3.1 语义化标签
<header>：页面头部<nav>：导航栏<main>：主要内容<article>：独立文章内容<section>：内容区块<aside>：侧边栏<footer>：页脚
语义化标签的优势：
- 提高代码可读性
- 有利于SEO优化
- 方便屏幕阅读器等辅助技术解析
3.2 媒体标签
<video>：视频播放<audio>：音频播放
示例：
<audiosrc="..\music\邓壬鑫 - 这一秒只想在爱里沉溺（治愈《恋愛の資格》日语念白-溯 (Reverse).feat.mp3"controlswidth="400"></audio>显示效果：
3.3 其他新增特性
- 本地存储（localStorage、sessionStorage）
- Canvas绘图
- 地理定位
- 拖放API
- 新的表单类型（如date、time、number等）
四、学习资源推荐🐦🔥
- MDN Web Docs - 最权威的HTML参考文档
- W3Schools - 包含丰富的示例和在线编辑器
如果有任何问题或补充，欢迎在评论区留言讨论！
如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
![[开源推荐] 基于 Vue 3 + Hiprint 的 Web 打印设计器 vg-print：拖拽设计、静默打印一站式方案](https://qiniu.meowparty.cn/coder.2023/2026-04-11/cover_1775897759054_15760e53e44645d1a978ac996270812e.png)