【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】一种老派的假反射做法，可以用于移动端，或对反射的速度、清晰度有需求的地方
没想到大家这篇文章呼声还挺高 这篇文章是对它的详细实现，建议在阅读本篇之前，先浏览一下前面的文章，以便更好地理解和掌握内容。 这种老派的假反射技术，适合用于移动端或对反射效果的速度和清晰度有较高要求的场合。该技术通过一…...
uniapp 对接腾讯云IM群组成员管理（增删改查）
UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言 在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
向量几何的二元性：叉乘模长与内积投影的深层联系
在数学与物理的空间世界中，向量运算构成了理解几何结构的基石。叉乘（外积）与点积（内积）作为向量代数的两大支柱，表面上呈现出截然不同的几何意义与代数形式，却在深层次上揭示了向量间相互作用的…...
MySQL体系架构解析（三）：MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录，这个目录下存放着许多可执行文件。与其他系统的可执行文件类似，这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中，用…...
Yii2项目自动向GitLab上报Bug
Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...
五、jmeter脚本参数化
目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...
分布式光纤声振传感技术原理与瑞利散射机制解析
分布式光纤传感技术（Distributed Fiber Optic Sensing，简称DFOS）作为近年来迅速发展的新型感知手段，已广泛应用于边界安防、油气管道监测、结构健康诊断、地震探测等领域。其子类技术——分布式光纤声振传感（Distribut…...