【JavaEE进阶】HTML
本节⽬标
- 认识 HTML 的基本结构, 学习常⽤的 HTML 标签.
一 HTML基础
1.什么是HTML
HTML(Hyper Text Markup Language), 超⽂本标记语⾔.
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.
标记语⾔: 由标签构成的语⾔
HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容.
类似⻜书⽂档, Word⽂档
如果选中⽂本, 点击标题1, 就会使⽤标题1的样式来显⽰⽂本, 上述标题1就是⼀个"标签"
⽐如下⽅代码:
<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>经过浏览器解析后的效果如下:
上⾯代码中的<h1> <h2> <h3> 就是标签
学习HTML 主要就是学习标签.
2.认识 HTML 标签
HTML 代码是由 "标签" 构成的.
形如:
<h3>我是三级标题</h3>
•标签名 (body) 放到 < > 中
•⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.
•少数标签只有开始标签, 称为 "单标签".
•开始标签和结束标签之间, 写的是标签的内容.
开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).
<h3 id="myId">我是三级标题</h3>3.HTML ⽂件基本结构
<!DOCTYPE html>
<html><head><title></title></head><body></body>
</html>• html 标签是整个 html ⽂件的根标签(最顶层标签)
• head 标签中写⻚⾯的属性.
• body 标签中写的是⻚⾯上显⽰的内容
• title 标签中写的是⻚⾯的标题.
4.标签层次结构
• ⽗⼦关系
• 兄弟关系
其中:
• head 和 body 是 html 的⼦标签(html 就是 head 和 body 的⽗标签)
• title 是 head 的⼦标签. head 是 title 的⽗标签.
• head 和 body 之间是兄弟关系.
可以使⽤ chrome 的开发者⼯具查看⻚⾯的结构.
F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements 标签, 就可以看到⻚⾯结构细节.
标签之间的结构关系, 构成了⼀个 DOM树
DOM 是 Document Object Mode (⽂档对象模型) 的缩写.
二 HTML 快速⼊⻔
1.开发⼯具
HTML 可以使⽤系统⾃带的记事本来编写, 但是⾮常不⽅便, 我们课程中使⽤前端专业的开发⼯具:Visual Studio Code
Visual Studio Code（简称"VS Code"）是Microsoft在2015年4⽉30⽇Build开发者⼤会上宣布的⼀款跨平台源代码编辑器. 可以运⾏在Windows, macOS 和Linux上. 它具有对JavaScript，TypeScript和 Node.js的内置⽀持，并具有丰富的其他语⾔(例如C++，C＃，Java，Python，PHP，Go).
• 官⽹： https://code.visualstudio.com
进⾏下载, 安装即可.
2.快速开发
在 VS Code中创建⽂件 xxx.html , 直接输⼊ ! , 按 Enter或 tab 键, 此时能⾃动⽣成代码的主体框
架.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>我的第一个HTML文件</title>
</head>
<body><h1></h1>
</body>
</html>
细节解释:
• <!DOCTYPE html> 称为 DTD (⽂档类型定义), 描述当前的⽂件是⼀个 HTML5 的⽂件.
• <html lang="en"> 其中 lang 属性表⽰当前⻚⾯是⼀个 "英语⻚⾯". 这⾥暂时不⽤管. (有些
浏览器会根据此处的声明提⽰是否进⾏⾃动翻译).
• <meta charset="UTF-8"> 描述⻚⾯的字符编码⽅式. 没有这⼀⾏可能会导致中⽂乱码.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• name="viewport" 其中 viewport 指的是设备的屏幕上能⽤来显⽰我们的⽹⻚的那⼀块
区域.
• content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要⼀些).
在<body></body>标签中, 任意书写⽂字, 按Ctrl + s 保持⽂件, 通过浏览器访问即可.
3.HTML常⻅标签
行级标签：h1-h6、p、div
块级标签：a、input、span
（1）标题标签 h1-h6
有六个, 从 h1 - h6. 数字越⼤, 则字体越⼩.
<h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>
（2）段落标签: p
在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签
<p>What are you saying?</p><p>I dont know</p>注意:
• p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学)
• ⾃动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换⾏, 空格均⽆效.
• 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.
• html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格.
（3）换⾏标签: br
想要完成换⾏的话, 也可以通过<br/>标签来实现.
br 是 break 的缩写. 表⽰换⾏.
• 大部分标签都是成对出现的，但br 是⼀个单标签(不需要结束标签)
• br 标签不像 p 标签那样带有⼀个很⼤的空隙.
• <br/> 是规范写法. 不建议写成 <br>
展⽰结果:
观察<br>标签和<p>标签的区别：行与行之间距离不相同
（4）空格标签:
想要完成添加多个空格的话, 可以通过 标签来实现.
• HTML中即使文本中间打上多个空格符，实际上也就是相当于一个空格符
• 前面必须有&，结尾必须是分号；
<p> What are you saying?</p><p>I dont know</p>
（5）图⽚标签: img
img 标签必须带有 src 属性. 表⽰图⽚的路径.
<img src="rose.jpg " alt="">
此时要把 rose.jpg 这个图⽚⽂件放到和 html 中的同级⽬录中.
img 标签的其他属性：
• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.
• border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设定.
<img src="rose.jpg" width="500px" height="800px" border="5px">
注意:
1. 属性可以有多个, 不能写到标签之前
2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.
3. 属性之间不分先后顺序
4. 属性使⽤ "键值对" 的格式来表⽰.
关于⽬录结构:
对于⼀个复杂的⽹站, ⻚⾯资源很多, 这种情况可以使⽤⽬录把这些⽂件整理好.
1. 相对路径: 以 html 所在位置为基准, 找到图⽚的位置.
- 同级路径: 直接写⽂件名即可 (或者 ./)
- 下⼀级路径: image/1.jpg
- 上⼀级路径: ../image/1.jpg
2. 绝对路径: ⼀个完整的磁盘路径, 或者⽹络路径. 例如
- 磁盘路径 D:/rose.jpg ( 最好使⽤ / , 不要使⽤ \ )
- ⽹络路径 https://img2.baidu.com/it/u=3359649605,3626874592&fm=253&fmt=auto&ap
- p=138&f=JPEG?w=500&h=752
（6）HTML特殊转义字符列表
（7） 超链接: a
• href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.
• target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开.
<a href="http://www.baidu.com">百度</a>
链接的⼏种形式:
• 外部链接: href 引⽤其他⽹站的地址
<a href="http://www.baidu.com">百度</a>
• 内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.
在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html
• 空链接: 使⽤ # 在 href 中占位.
<a href="#">空链接</a>4 表格标签
- table 标签: 表⽰整个表格
- tr: 表⽰表格的⼀⾏
- td: 表⽰⼀个单元格
- thead: 表格的头部区域
- tbody: 表格的主体区域.
table 包含 tr , tr 包含 td
表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.
这些属性都要放到 table 标签中.
- align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
- border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.
- cellpadding: 内容距离边框的距离, 默认 1 像素
- cellspacing: 单元格之间的距离. 默认为 2 像素
- width / height: 设置尺⼨.
- colspan：合并单元列
注意, 这⼏个属性, vscode 都提⽰不出来.
以下为演示：
（1）画出基本表格，四行三列
<table style="width: 500px;height: 400px;" border="1px black"><tr><td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td></tr><tr></tr><td>eee</td><td>fff</td><tr></tr><tr><td>ggg</td><td>hhh</td></tr></table>（2） 将单元格中间间隔为0，且列合并
<tr><td colspan="2">aaa</td><!-- <td>bbb</td> --></tr>5 表单标签
表单是让⽤⼾输⼊信息的重要途径.
分成两个部分:
- 表单域: 包含表单元素的区域. 重点是 form 标签.
- 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.
（1）form 标签
<form action="test.html">... [form 的内容]
</form>描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中.
关于 form 需要结合后端代码来进⼀步理解. 后⾯再详细研究.
method：
- get：从服务端获得资源
- post：向服务端发送资源
（2）input 标签
各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框.
- type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
- value: input 中的默认值.
- checked: 默认被选中. (⽤于单选按钮和多选按钮)
下⾯介绍⼀些常⽤的类型:
1. ⽂本框 text
<input type="text">2. 密码框 password
<input type="password">3. 单选框 radio
性别：<input type="radio" name="gender" >男 <input type="radio" name="gender">女注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选⼀ 效果.
如果想要按字也可以选中该框，应该用label去识别id
性别：<input type="radio" name="gender" id="gender1" ><label for="gender1">男 </label><input type="radio" name="gender" id="gender2"> <label for="gender2">女</label>4. 复选框 checkbox
兴趣爱好：<input type="checkbox" name="" id="">篮球<input type="checkbox" name="" id="">足球<input type="checkbox" name="" id="">排球<input type="checkbox" name="" id="">羽毛球<br>5. 普通按钮 button
<button>注册</button><input type="button" value="按钮">当前点击了没有反应. 需要搭配 JS 使⽤(后⾯会重点研究).
<input type="button" value="我是个按钮" onclick="alert('hello')">6. 提交按钮 submit
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求
（3）select 标签 select-option
下拉菜单
• option 中定义 selected="selected" 表⽰默认选中.
专业：<select><option value="1" selected>计算机科学与技术</option><option value="2">人工智能</option><option value="3">软件工程</option><option value="4">信息安全</option></select><br>（4）textarea 标签
个人描述：<textarea rows="10" cols="10"></textarea><br>⽂本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使⽤, 都是⽤ css 来改的.
6 ⽆语义标签: div&span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒⼦. ⽤于⽹⻚布局
- div 是独占⼀⾏的, 是⼀个⼤盒⼦.
- span 不独占⼀⾏, 是⼀个⼩盒⼦.
<div><span>咬⼈猫</span><span>咬⼈猫</span><span>咬⼈猫</span></div><div><span>兔总裁</span><span>兔总裁</span><span>兔总裁</span></div><div><span>阿叶君</span><span>阿叶君</span><span>阿叶君</span></div>(7) 综合练习: ⽤⼾注册
⽤⼾注册界⾯
提⽰:
- 使⽤表格进⾏整体布局
- 使⽤各种 input 标签实现⻚⾯中的输⼊控件
<!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><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><button>注册</button><span>已有帐号？</span><a href="#">登录</a><br></div>
</body>
</html>相关文章：
【JavaEE进阶】HTML
本节⽬标 认识 HTML 的基本结构, 学习常⽤的 HTML 标签. 一 HTML基础 1.什么是HTML HTML(Hyper Text Markup Language), 超⽂本标记语⾔. 超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它…...
ElasticSearch 添加IK分词器
ElasticSearch 添加IK分词器 前言一、IK分词器的算法二、Ik分词器的下载安装（Winows 版本）三、Ik分词器的下载安装（Linux 版本）四、验证测试（postman工具）测试 ik_smart 分词算法测试 ik_max_word 分词算法…...
可视化建模与UML《顺序图实验报告》
旷野的规则是永不回头。 一、实验目的： 1、熟悉顺序图的构件事物。 2、熟悉发送者与接受者的关系 3、熟练掌握描绘顺序图 4、加深对顺序图的理解和应用能力 二、实验环境： window7 | 10 | 11 EA15 三、实验内容： 据如下描述绘制顺序图&…...
Mac的极速文件搜索工具，高效管理文件
Mac的资源管理可以说是许多转Mac的朋友用不明白的一点了，访达怎么用，文件怎么找，为什么找不到，非常的头大 All作为Mac上的极速文件搜索管理工具，有效的为文件查找困难的用户解决难题 基于极速搜索引擎，快…...
公开仓库改私有再配置公钥后Git拉取仍需要输入用户名的问题
问题描述：git拉取私有仓库需要输入用户名和密码 我之前写了一个脚本用来定时自动拉取远程仓库更新本地仓库，后来将这个远程仓库改成私有后执行脚本就会需要输入用户名和密码。 [rootLH2020 ~]# ./sync_repo.sh 正在从远程仓库拉取最新更改… Username f…...
工作流初始错误 泛微提交流程提示_泛微协同办公平台E-cology8.0版本后台维护手册(11)–系统参数设置
工作流初始错误 泛微提交流程提示_泛微协同办公平台E-cology8.0版本后台维护手册(11)–系统参数设置...-CSDN博客 工作流初始错误 泛微提交流程提示_泛微OA 工作流WebService接口使用说明 工作流初始错误 泛微提交流程提示_泛微OA 工作流WebService接口使用说明-CSDN博客 工作…...
window下安装rust 及 vscode配置
安装 安装mingw64 （c语言环境 选择posix-ucrt） ucrt:通用c运行时库配置mingw64/bin的路径到环境变量中在cmd窗口中输入命令 "gcc -v" 4. 下载Rust安装程序 安装 Rust - Rust 程序设计语言 5. 配置rustup和cargo目录 （cargo是包管…...
)
【数据结构】【线性表】单链表1—概念即创建(附C语言源码)
单链表的定义， 链表用链式存储的方式实现线性表，链表中每个结点元素中需要指向下一个结点的指针（有时候也要指向上一个结点的指针），链表中的每个结点指针只指向下一结点的被叫为单链表。 单链表的创建和初始化 先定…...
centos7的maven配置
首先进入conf配置文件夹下的setting.xml 要改两个地方 第一：设置镜像源 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>https://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>c…...
day57 图论章节刷题Part08（拓扑排序、dijkstra（朴素版））
拓扑排序-117. 软件构建 思路：拓扑排序是经典的图论问题。给出一个有向图，把有向图转成线性的排序就叫拓扑排序，拓扑排序也要检测有向图是否有环，即存在循环依赖的情况，因为这种情况是不能做线性排序的，所…...
【Steam登录】protobuf协议逆向
https://api.steampowered.com/IAuthenticationService/GetPasswordRSAPublicKey/v1 搜索 input_protobuf_encoded定位 input_protobuf_encoded的值就是 o s r.SerializeBody() o i.iI(s) 精准定位 打上条件断点：t ‘Authentication.GetPasswordRSAPublicKey…...
git 对已提交的说明进行编辑
如果提交代码的时候，对上次提交代码的说明不准确的话，例如 1、可以使用 git log 查看代码提交的记录； 2、使用 git commit --amend 命令对上次提交的说明进行编辑： 当显示上次提交的内容的时候，按下键盘 i 键即可编辑…...
CTF —— 网络安全大赛
前言 💻随着大数据、人工智能的发展，人们步入了新的时代，逐渐走上科技的巅峰。 ⚔科技是一把双刃剑，网络安全不容忽视，人们的隐私在大数据面前暴露无遗，账户被盗、资金损失、网络诈骗、隐私泄露ÿ…...
【大数据测试spark+kafka-详细教程（附带实例）】
大数据测试：Spark Kafka 实时数据处理与窗口计算教程 1. 概述1.1 大数据技术概述1.2 Apache Kafka 与 Spark 的结合 2. 技术原理与流程2.1 Kafka 简介2.2 Spark Streaming 简介2.3 数据流动与处理流程 3. 环境配置3.1 安装依赖项 4. 实例：实时数据处理与…...
如何为 GitHub 和 Gitee 项目配置不同的 Git 用户信息20241105
🎯 如何为 GitHub 和 Gitee 项目配置不同的 Git 用户信息 引言 在多个代码托管平台（如 GitHub 和 Gitee）之间切换时，正确管理用户信息至关重要。频繁使用不同项目时，若用户配置不当，可能会导致意外提交或…...
【Lucene】原理学习路线
基于《Lucene原理与代码分析完整版》，借助chatgpt等大模型，制定了一个系统学习Lucene原理的计划，并将每个阶段的学习内容组织成专栏文章，zero2hero 手搓 Lucene的核心概念和实现细节。 深入的学习和专栏计划，覆盖Lucen…...
Go语言的并发安全与互斥锁
线程通讯 在程序中不可避免的出现并发或者并行，一般来说对于一个程序大多数是遵循开发语言的启动顺序。例如，对于go语言来说，一般入口为main，main中依次导入import导入的包，并按顺序执行init方法，之后在按…...
SpringBoot框架在资产管理中的应用
3系统分析 3.1可行性分析 通过对本企业资产管理系统实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本企业资产管理系统采用Spring Boot框架，JAVA作…...
ElasticSearch备考 -- 集群配置常见问题
一、集群开启xpack安全配置后无法启动 在配置文件中增加 xpack.security.enabled: true 后无法启动，日志中提示如下 Transport SSL must be enabled if security is enabled. Please set [xpack.security.transport.ssl.enabled] to [true] or disable security b…...
【UE5】一种老派的假反射做法，可以用于移动端，或对反射的速度、清晰度有需求的地方
没想到大家这篇文章呼声还挺高 这篇文章是对它的详细实现，建议在阅读本篇之前，先浏览一下前面的文章，以便更好地理解和掌握内容。 这种老派的假反射技术，适合用于移动端或对反射效果的速度和清晰度有较高要求的场合。该技术通过一…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...