JavaWeb学习总结（一）HTML基础
一、HTML与网页概述
- 网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。
- HTML（英文：Hypertext Markup Language，简称：HTML）也叫作超文本标记语言，是一种用来结构化 Web 网页及其内容的标记语言，标准通用标记语言下的一个应用，通过它，可以实现图片、链接、音乐以及程序等等多种元素。
注意：HTML 不是一种编程语言，而是一种标记语言 - 万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
三个标准：- 结构标准—>XHTML , XML等
- 表现标准—>CSS
- 行为标准—>ECMA Script
- 网页编辑工具
- 记事本
- Notpat++
- Hbuilder
- IDEA
- WebStorm
- VScode
- …
注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。
二、HTML的基本结构
（一）HTML注释
<!-- 注释 -->
注意：注释不能嵌套注释
（二）HTML基本结构实例
<!DOCTYPE html><!--约束，声明 : 告诉浏览器使用什么规范-->
<html lang="zh_CN"><!-- html标签表示html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分,分别是:head和body -->
<!--标签是成对出现-->
<!--头部标签-->
<head><!-- 表示头部信息,一般包含三部分内容,title标签,css样式,js代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
<!--网页标题-->
<title>HELLO</title>
</head>
<!--网页主体-->
<body><!--body标签是整个html页面显示的主体内容-->
Hello,World!
</body>
</html>
- DOCTYPE声明了文档的类型
<html>标签是 HTML 页面的根元素，该标签的结束标志为</html><head>标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。<title>标签定义文档的标题<meta>标签 : 关键字标签<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body><h1>标签作为一个标题使用，该标签的结束标志为</h1>– Html标题，同样地还有h2、h3、h4、h5和h6<p>标签作为一个段落显示，该标签的结束标志为</p>
<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号
<!--搜索关键字-->
<meta name="keywords" content="Java,Python,linux,大数据">
<!--网页的描述-->
<meta name="description" content="可爱的动物">
（三）HTML标签
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 标签不能交叉嵌套
- 标签必须正确闭合
- 标签内的属性必须有值，且必须加引号
- 标签拥有自己的属性。分为：
- 基本属性：
bgcolor="red"可以修改简单的样式效果 - 事件属性：
onclick="alert('你好')" 可以直接设置事件响应后的代码。
- 基本属性：
例如
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--alert() 是javaScript语言提供的一个警告框函数.
它可以接收任意参数.参数就是警告框的提示信息-->
<button onclick="alert('Hello World!')">按钮</button>
</body>
</html>
1.标题标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--标题标签-->
<!--H1最大 , H6最小-->
<!-- align 属性是对齐属性 left 左对齐(默认) center 居中 right 右对齐-->
<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
展示：
2.段落标签
p 段落标签 默认会在段落的上方或下方各空出一行来
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--段落标签-->
<!--p:表示段落标签-->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
</body>
</html>
展示：
3.换行标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--换行标签-->
<!--br:单标签-->
两只老虎 两只老虎 跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
</body>
</html>
展示：
4.水平线标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--水平线标签-->
<!--hr表示水平线标签-->
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
<hr/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
</body>
</html>
展示：
5.字体标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
I love you
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>
</body>
</html>
展示：
问：HTML中和都能达到加粗的效果，以及和也都能达到斜体的效果，区别在哪呢？答：和是起强调的作用，而和是一种字体的形式
6.特殊符号
其他特殊字符表：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--特殊符号-->
<!--& + 符号字符 + 分号结束-->
<!---->
<p>大于号 : > </p>
<p>小于号 : < </p>
<p>空格 :（未加空格符号）你 好 |（加了空格符号）你 好</p>
<p>引号 : ""</p>
<p>版权符号 : © ZaynFox版权所有</p>
</body>
</html>
展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-78mnBr5c-1678525748029)(C:\Users\23886\AppData\Roaming\Typora\typora-user-images\image-20230311120538087.png)]
（四）图像标签
请注意：img元素是自关闭元素，不需要结束标记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<!--
src = 图片的路径 (必填)
title = 鼠标悬停显示的标题
alt = 图片的名字（图片加载失败后显示）
width->宽
height->高
-->
<body>
<img src="../../../resources/photos/006CKO5uly1fy6hrpsqubj31ig0u0hdt.jpg"
title="这是一张图片" alt="复仇者联盟" width="500px" height="300px">
</body>
</html>
注意看图片和代码的相对路径
- JavaSE中的相对路径和绝对路径
- 相对路径:从工程名开始算
- 绝对路径:盘符:/目录/文件名
- web中的相对路径和绝对路径
- 相对路径:
.表示当前文件所在的目录
../表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件，相当于./文件名（./可以省略） - 绝对路径:
http://ip:port/工程名/资源路径，不推荐使用
- 相对路径:
（五）链接标签
1.超链接
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--a:表示超链接-->
<!--
href : 表示连接的地址 : 必填
-->
<a href="https://www.baidu.com">点击跳转</a>
<br/>
<!--图像链接-->
<a href="https://www.baidu.com">
<img src="../../../resources/photos/006CKO5uly1fy6hrpsqubj31ig0u0hdt.jpg"
width="200px" height="100px">
</a>
</body>
</html>
展示：
无论点击文字还是图片都能实现跳转到百度页面
2.锚链接
2.锚链接
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--锚链接-->
<!--
可以从一个地方跳到锚指定的地方
需要的东西: 标记 ..跳转
-->
<!--创建一个标记-->
<a name="mark">锚链接标记</a>
<!--跳转到标记-->
<a href="#mark">点击跳转</a>
<!--跳转到另一个网页的标记位置-->
<a href="demo.html#top">跳转到demo页top标记</a>
</body>
</html>
3.target
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--target : 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开
-->
<p>
<a target="_blank" href="https://www.baidu.com">打开百度网页_在新网页中打开</a>
<br/>
<a target="_self" href="https://www.baidu.com">打开百度_在自己网页中打开</a>
</p>
</body>
</html>
（六）行内元素和块元素
独占一行的标签 : 块标签
- p
- h1~h6
只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签
- a
- strong
- img
- em
（七）列表标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--无序列表-->
<!--
<ul> -> 无序列表
<li> -> 选项
-->
<ul>
<li>java</li>
<li>C/C++</li>
<li>Linux</li>
<li>Python</li>
</ul>
<!--有序列表-->
<!--
<ol> -> 有序列表
<li> -> 选项
-->
<ol>
<li>java</li>
<li>C/C++</li>
<li>Linux</li>
<li>Python</li>
</ol>
<!--自定义列表-->
<!--
<dl> -> 自定义列表
<dt> -> 列表标题
<dd> -> 列表选项
-->
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>油条</dd>
<dd>面条</dd>
<dt>午餐</dt>
<dd>蛋炒饭</dd>
<dd>酸辣粉</dd>
<dd>冒菜</dd>
</dl>
</body>
</html>
展示：
ul和ol标签里有个type属性，可以修改列表项前面的符号
（八）表格
- table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距 - tr 是行标签
- th 是表头标签
- td 是单元格标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<!--colspan=跨列-->
<th colspan="3">1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<!--colspan=跨行-->
<td rowspan="3">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
</body>
</html>
展示：
（九）视频和音频标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--播放视频-->
<!--前端要考虑问题 : 浏览器兼容性-->
<!--
video标签
src -> 视频路径 (必填)
controls -> 给视频增加控制播放的按钮
autoplay -> 自动播放视频
w-h -> 视频窗口大小
-->
视频：<video src="../../../resources/videos/onekey_animation.5d7deb3.mp4" controls
width="400px" height="200px" autoplay></video>
<br/>
<!--音频标签-->
<!--
src -> 音频路径
controls -> 给音频增加控制播放的按钮
autoplay -> 自动播放视频
....
-->
音频：<audio src="../../../resources/music/Lopu$ - So Cute~.mp3" controls autoplay></audio>
</body>
</html>
（十）内联框架
iframe 内联框架
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--iframe内联框架-->
<!--
作用:在一个网页中嵌入另外一个网页
-->
<!--
<iframe src="https://www.baidu.com" frameborder="0" width="960" height="540">
</iframe>
-->
<!--在网页中实现容器的效果,实现页面内容加载-->
<iframe name="markup" src="" frameborder="0" width="500" height="250"></iframe>
<a href="https://www.baidu.com" target="markup">百度</a>
<a href="https://www.hao123.com" target="markup">hao123</a>
<iframe src="//player.bilibili.com/player.html?aid=19375362&cid=31595839&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true">
</iframe>
</body>
</html>
（十一）表单元素
1.常见表单元素
文本框 、密码框 、按钮 、单选框 、多选框 、文本域 、下拉框 、文件域、邮箱 、网址 、数字 、滑块 、搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单</title>
</head>
<body>
<h1>注册</h1>
<!--
input属性:
type=类型
name: 名字 , 可以重复
id: 不能重复,保证全代码唯一
disabled: 禁用文本框
-->
<!--form为表单元素-->
<!--
action : 提交地址
method : 提交方式 : post/get
-->
<!--post安全，get不安全，会在跳转的网页地址显示密码用户名
post:安全 效率低 理论上能提交无限大的数据
get：不安全 效率高 数据长度有限制
网页中一般使用post方式提交-->
<form action="http://localhost:8080" method="post">
<!--
required 必填项
placeholder 默认提示信息
-->
<!--文本框 : input type=text-->
<p>用户名：<input type="text" name="username" id="username" placeholder="请输入用户名" required></p>
<!--密码框 : input type=password -->
<p>密码：<input type="password" name="password" placeholder="请输入密码" required></p>
<p>确认密码：<input type="password" name="password" placeholder="请再次输入密码" required></p>
<!--文件域-->
<p>照片上传：<input type="file"></p>
<!--radio单选框-->
<!--name:绑定同一个组-->
<!--checked 默认选中-->
<!--
注意事项:
1. 若是要提交,则必须要有name和value属性
2. name就是key 提交的键 , vlaue就是提交的信息
3. 表单项必须在提交的form标签中
-->
<p>
性别：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</p>
<!--数字的简单验证-->
<p>年龄：<input type="number" name="age" placeholder="请输入年龄"></p>
<!-- checkbox多选框-->
<p>
爱好：
<input type="checkbox" value="movie" name="hobby">看电影
<input type="checkbox" value="music"name="hobby">听歌
<input type="checkbox" value="code" name="hobby">敲代码
</p>
籍贯：
<!--下拉框-->
<select name="国家">
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Canada">加拿大</option>
</select>
<select name="列表名称">
<option value="Xian">西安</option>
<option value="Shanghai">上海</option>
<option value="Beijing" selected>北京</option><!--selected设置默认选中-->
</select>
<!--邮箱表单简单验证-->
<p>邮箱：<input type="email" name="email" placeholder="请输入邮箱"></p>
<!--url简单验证-->
<p>博客地址：<input type="url" name="blog" placeholder="请输入网址"></p>
<!--
文本域
多行的文本框
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<p>自我描述：<textarea name="textarea" cols="20" rows="10" placeholder="请输入文本内容"></textarea>
</p>
<p><input type="submit" name="Button" value="提交到服务器">
<!--
submit默认文字是提交，手动给按钮赋值使用（value=""）
提交会产生事件 , 会将表单的内容提交到action请求的地址,方法为method指定的方法-->
<!--重填按钮 : type="reset"-->
<input type="reset" name="Button" value="重写表单">
</p>
</form>
</body>
</html>
- form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST - GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制 - POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制 - 表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中
其他
search：搜索框
range：滑块
button：按钮
hidden : 隐藏域
readonly : 只读
disabled : 禁用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<form action="http://localhost:8080">
<!--禁用-->
disabled:<input type="text" value="zhangsan" name="name" disabled="disabled"><br/>
<!--只读-->
readonly:<input type="text" value="18" name="age" readonly="readonly"><br/>
<!--隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）-->
hidden: <input type="hidden" value="man" name="sex"><br/>
<!--滑块,值的范围0~100-->
默认值为50的滑块（0-100）：<input type="range" name="range" value="50"><br/>
<!--搜索框-->
搜索框：<input type="search" name="search"><br/>
<!--按钮-->
<input type="button" value="确认">
<!--图片按钮-->
<!--<input type="image" src="../resources/photos/a.jpg">-->
<input type="submit" value="添加"><br/>
</form>
</body>
</html>
通过结果我们知道，禁用框不可对该框操作，只读框我们不可修改其中的值，隐藏域的值我们无法看到。
2.表单格式化
将表单写进表格中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单</title>
</head>
<body>
<h1 align="center">注册</h1>
<form action="http://localhost:8080" method="post">
<table align="center">
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" id="username" placeholder="请输入用户名" required>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" placeholder="请输入密码" required>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="password" placeholder="请再次输入密码" required>
</td>
</tr>
<tr>
<td>照片上传：</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>年龄：</td>
<td>
<input type="number" name="age" placeholder="请输入年龄">
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" value="movie" name="hobby">看电影
<input type="checkbox" value="music"name="hobby">听歌
<input type="checkbox" value="code" name="hobby">敲代码
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select name="国家">
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Canada">加拿大</option>
</select>
<select name="列表名称">
<option value="Xian">西安</option>
<option value="Shanghai">上海</option>
<option value="Beijing" selected>北京</option>
</select>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="email" name="email" placeholder="请输入邮箱">
</td>
</tr>
<tr>
<td>博客地址:</td>
<td>
<input type="url" name="blog" placeholder="请输入网址">
</td>
</tr>
<tr>
<td>自我描述：</td>
<td>
<textarea name="textarea" cols="20" rows="10" placeholder="请输入文本内容"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" name="Button" value="提交到服务器">
</td>
<td>
<input type="reset" name="Button" value="重写表单">
</td>
</tr>
</table>
</form>
</body>
</html>
3.表单验证
为什么要表单验证？
- 降低服务器压力
- 保证数据的安全性
表单验证需要哪些东西？
- 提示信息
placeholder-->默认提示信息
<p>用户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>
- 非空判断 (必填项)
required-->必须填写此项
<p>密码 : <input type="password" name="password" required> </p>
- 正则表达式验证
pattern-->正则表达式
自定义验证 : <input type="text" pattern=" RE "/>
（十二）div和span标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单</title>
</head>
<body>
<!-- 1：div、span 标签的演示
div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
（十三）网页结构分析
- 头部
- 导航
- 主体内容
- 底部
<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>
.......
户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>
- 非空判断 (必填项)
required-->必须填写此项
<p>密码 : <input type="password" name="password" required> </p>
- 正则表达式验证
pattern-->正则表达式
自定义验证 : <input type="text" pattern=" RE "/>
（十二）div和span标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单</title>
</head>
<body>
<!-- 1：div、span 标签的演示
div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
（十三）网页结构分析
- 头部
- 导航
- 主体内容
- 底部
<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>
.......
扫一扫
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
