Java学习笔记(No.22)
2021/9/14 20:05:09
本文主要是介绍Java学习笔记(No.22)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
Java之HTML5详解(No.22)
1、HTML(Hyper Text Markup Language)
HTML(Hyper Text Markup Language，超文本标记语言)，其中"“超文本”"包括“文字、图片、音频、视频、动画等”。
2、HTML5优势(HTML5 Advantages)
- 2.1、世界知名浏览器厂商的支持。
- 2.1.1、MicroSoft。
- 2.1.2、Google。
- 2.1.3、Apple。
- 2.1.4、Opera。
- 2.1.5、Mozilla。
- 2.2、市场的需求。
- 2.3、跨平台。
3、W3C(World Wide Web Consortium)
- 3.1、W3C，英文全称“World Wide Web Consortium”，中文名称“万维网联盟”。
- 3.2、1994年成立，是Web技术领域最权威和最具影响力的国际“中立性技术标准机构”。
- 3.3、W3C官网(http://www.w3.org/)，中国W3C官网(http://www.chinaw3c.org/)。
4、W3C标准(W3C Standard)
- 4.1、结构化标准语言(HTML、XML<Extensible Markup Language,可扩展标记语言>)。
- 4.2、表现标准语言(CSS<Cascading Style Sheets,级联或层叠样式表>)。
- 4.3、行为标准(DOM、ECMAScript<JavaScript语言>)。
5、HTML基本结构(HTML Basic Structure)
HTML基本结构，如下所示。
<!-- <!DOCTYPE html>代表"声明规范"，即，告诉浏览器是用"HTML"规范。 --> <!DOCTYPE html> <!-- <html>与</html>之间的内容代表“HTML网页” --> <html lang="en"> <!-- <head>与</head>之间的内容代表“网页头部” --> <head> ... </head> <!-- <body>与</body>之间的内容代表“网页主体部分” --> <body> ... </body> </html>
6、HTML基本标签(HTML Basic Tags)
网页基本标签，如下所示。
<!--
<!DOCTYPE html>代表"声明规范"，即，告诉浏览器是用"HTML"规范。
-->
<!DOCTYPE html>
<!--
<html>与</html>、<head>与</head>、<body>与</body>等成对的标签，分别为“开放标签”与“闭合标签”。
<br>或<br/>或<br />、<hr>或<hr/>或<hr />等对应的标签，为“自闭合标签”。
-->
<!--
<html>与</html>之间的内容代表“HTML网页”
-->
<html lang="en">
<!--
<head>与</head>之间的内容代表“网页头部”
-->
<head>
<!--
meta代表“描述性标签”，描述网站信息，一般用作SEO(Search Engine Optimization，搜索引擎优化)
-->
<meta charset="UTF-8">
<meta name="keywords" content="HTML，HTML5">
<meta name="description" content="学习HTML5">
<!--
<title>与</title>之间的内容代表“网页标题”
-->
<title>HTML基本标签</title>
</head>
<!--
<body>与</body>之间的内容代表“网页主体部分”
-->
<body>
<!--
此内容代表“网页注释信息”
<strong>与</strong>代表“字体样式标签中的粗体标签”
<em>与</em>代表“字体样式标签中的斜体标签”
<h1>与</h1>、<h2>与</h2>、<h3>与</h3>、<h4>与</h4>、<h5>与</h5>、<h6>与</h6>代表“标题标签”
<p>与</p>代表“段落标签”
代表“特殊符号中空格符号”，<代表“特殊符号中小于符号”，>代表“特殊符号中大于符号”，©代表“特殊符号中版权符号”
<br>或<br/>或<br />代表“换行标签”
<hr>或<hr/>或<hr />代表“水平线标签”
-->
<strong>字体样式标签中的粗体标签</strong>
<hr/>
<em>字体样式标签中的斜体标签</em>
<hr/>
<h1 style="color: red">一级标题</h1>
<p>段落标签1</p>
<p>段落标签 2</p>
<p>段落标签 3</p>
<p>Java学习笔记©版权所有<学山学海></p>
<br>
<hr>
<h2 style="color: green">二级标题</h2>
<br/>
<hr/>
<h3 style="color: blue">三级标题</h3>
<br />
<hr />
<h4 style="color: rebeccapurple">四级标题</h4>
<hr/>
<h5 style="color: greenyellow">五级标题</h5>
<hr/>
<h6 style="color: blueviolet">六级标题</h6>
<hr/>
</body>
</html>
7、图像标签(Image Tag)
图像标签，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML图像标签</title>
</head>
<body>
<!--
img代表“图像标签”，其中参数“src”代表“图像地址(必填,一般建议使用相对地址)”，
参数“alt”代表“图像的替代文字(必填)”，参数“title”代表“鼠标悬停提示文字”，
参数“width”代表“图像宽度”，参数“height”代表“图像高度”。
-->
<img src="../resources/images/20210718002.png" alt="各大Java平台" title="以Java作为后台的各大平台" width="300" height="300">
<br/>
<a href="超链接/锚超链接.html#AnchorHyperlink">回到锚超链接</a>
</body>
</html>
8、超链接标签(Hyperlink Tag)
-
8.1、页面间超链接(Hyperlink Between Pages)。
页面间超链接，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面间超链接</title> </head> <body> <!-- a代表“a标签”，其中参数“href”代表“链接路径(必填)”， 其中参数“target”代表“链接在哪个目标窗口打开”，其值为“_blank”代表“在新标签窗口打开”，其值为“_self”代表“在当前标签窗口打开”， 其值为“_parent”代表“在父级标签窗口打开”，其值为“_top”代表“在顶级标签窗口打开”。 --> <a href="../HTML图像标签.html" target="_blank">在新标签窗口打开</a> <hr/> <a href="../HTML图像标签.html" target="_self">在当前标签窗口打开</a> <hr/> <a href="../HTML图像标签.html" target="_parent">在父级标签窗口打开</a> <hr/> <a href="../HTML图像标签.html" target="_top">在顶级标签窗口打开</a> <hr/> <a href="../HTML基本标签.html" target="_blank"> <img src="../../resources/images/20210718002.png" alt="各大Java平台" title="以Java作为后台的各大平台" width="300" height="300"> </a> </body> </html> -
8.2、锚超链接(Anchor Hyperlink)。
锚超链接，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>锚超链接</title> </head> <body> <!-- 锚链接：1、需要一个锚标记，2、跳转到锚标记 --> <a name="top">顶部</a> <a href="AnchorHyperlink">锚超链接</a> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <p>123</p><br/> <a href="#top">回到顶部</a> </body> </html> -
8.3、功能性超链接(Functional Hyperlink)。
功能性超链接，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>功能性超链接</title> </head> <body> <!-- 邮件链接 --> <a href="mailto:1207697231@qq.com">点击联系我</a> <!-- QQ链接 --> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1207697231&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:1207697231:53" alt="点击这里给我发消息" title="点击这里给我发消息"/> </a> </body> </html>
9、行内元素和块元素(Inline Elements And Block Elements)
- 9.1、行内元素(Inline Elements)
- 9.1.1、内容撑开宽度，左右都是行内元素的可以排在一行。
- 9.1.2、常见行内元素，如“p(段落标签)、h1~h6(标题标签)、hr(水平分割线标签)、form(交互表单标签)、table(表格标签)、div (常用块级元素，也是css layout的主要标签)”等。
- 9.2、块元素(Block Elements)
- 9.2.1、无论内容多少，该元素独占一行。
- 9.2.2、常见块元素，如“a(锚点标签)、strong(粗体标签)、em(斜体标签)、img(图像标签)、input(输入框标签)、span(常用内联容器标签，定义文本内区块)、textarea(多行文本输入框)”等。
10、列表标签(List Tag)
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
-
10.1、无序列表标签(Unordered List Tag)。
无序列表标签，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> <!-- 无序列表 一般应用于“导航、侧边栏”等 --> <ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> <li>无序列表4</li> <li>无序列表5</li> <li>无序列表6</li> <li>无序列表7</li> <li>无序列表8</li> <li>无序列表9</li> </ul> </body> </html> -
10.2、有序列表标签(Ordered List Tag)。
有序列表标签，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <!-- 有序列表 一般应用于“试卷、问答”等 --> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> <li>有序列表4</li> <li>有序列表5</li> <li>有序列表6</li> <li>有序列表7</li> <li>有序列表8</li> <li>有序列表9</li> </ol> </body> </html> -
10.3、定义列表标签(Defined List Tag)。
定义列表标签，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义列表</title> </head> <body> <!-- 定义列表:即，自定义列表 其中“dl”代表“列表标签” 其中“dt”代表“列表名称” 其中“dd”代表“列表内容” 一般应用于“公司网站底部”等 --> <dl> <dt>学课</dt> <dd>Java</dd> <dd>Python</dd> <dd>C#</dd> <dd>C++</dd> <dd>C</dd> <dt>人员</dt> <dd>小红</dd> <dd>小橙</dd> <dd>小黄</dd> <dd>小绿</dd> <dd>小蓝</dd> </dl> </body> </html>
11、表格标签(Table Tag)
表格标签的好处：“简单通用、结构稳定”。
表格标签的基本结构：“单元格、行、列、跨行、跨列”。
其示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
table代表“表格标签”
tr代表“行”
td代表“列”
rowspan代表“跨行”
colspan代表“跨列”
-->
<table border="1px">
<tr>
<td colspan="3">跨列</td>
</tr>
<tr>
<td rowspan="2">跨行</td>
<td>行2列1</td>
<td>行2列2</td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
</tr>
</table>
</body>
</html>
12、视频和音频(Video And Audio)
视频和音频(媒体元素)，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频与音频(媒体元素)</title>
</head>
<body>
<!--
Video：视频元素
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/medias/StartMenu_Win10.mp4" controls autoplay></video>
<hr/>
<!--
audio：音频元素
src：资源路径
controls：控制条
autoplay：自动播放
-->
<audio src="../resources/medias/Sleep_Away.mp3" controls autoplay></audio>
</body>
</html>
13、页面结构分析(Page Structure Analysis)
页面结构分析，如下表所示。
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
页面结构分析示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h1>网页头部</h1>
</header>
<section>
<h2>网页主体</h2>
</section>
<article>
<h3>网页内容</h3>
</article>
<aside>
<h4>侧边栏</h4>
</aside>
<nav>
<h5>导航栏</h5>
</nav>
<footer>
<h1>网页脚部</h1>
</footer>
</body>
</html>
14、Iframe内联框架(Iframe Inline Framework)
Iframe内联框架，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe内联框架</title>
</head>
<body>
<!--
iframe：内联框架
src：引用页面地址
frameborder：框架边框
name：框架标识名
width：宽度
height：高度
-->
<iframe src="https://gitee.com/mrxiaohu/openclass" frameborder="no" name="Iframe1" width="1200px" height="420px"></iframe>
<hr/>
<iframe src="https://gitee.com/xueshanxuehai/starred" frameborder="no" name="Iframe2" scrolling="no" allowfullscreen="true"></iframe>
<hr/>
<a href="https://www.bilibili.com/video/BV1x4411V75C" target="Iframe1">点击跳转链接1</a>
<a href="https://jingyan.baidu.com/article/e6c8503cca1302a54f1a18d3.html" target="Iframe2">点击跳转链接2</a>
</body>
</html>
15、表单标签(Form Tag)
表单标签元素，如下表所示。
| 属性 | 说明 |
|---|---|
| type | 指定表单元素的类型，如“text、password、checkbox、radio、submit、reset、file、hidden、Image、button”，默认为text。 |
| name | 指定表单元素的名称。 |
| value | 指定表单元素的初始值，且type为radio时必须指定一个值。 |
| size | 指定表单元素的初始宽度，当type为text或password时，表单像素的大小以字符为单位，而其它类型的宽度以像素为单位。 |
| maxlength | type为text或password时，输入的最大字符数。 |
| checked | type为radio或checkbox时，指定按钮是否被选中。 |
表单标签示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<h1>注册</h1>
<!--
form：表单标签
action：表单提交的位置，可以是网站，也可以是一个请求处理地址。
method：表单提交的方式，只有“get”与“post”两种方式，
get方式提交：可以在url中看到提交信息，不安全，但高效；
post方式提交：不能在url中看到提交信息，较安全，但不高效，适合传输大文件；
-->
<form action="" method="get">
<!--
input type="text"：文本输入框
name：文本输入框名称
value：文本输入框默认初始值
maxlength：文本输入框的最大输入字符数
size：文本输入框的长度大小(以字符为单位)
readonly：只读
hidden：隐藏
disabled：禁用
placeholder：文本输入框提示信息
required：文本输入框非空判断
pattern：文本输入框正则表达式
-->
<p>备注1：<input type="text" name="bz1" value="备注1" readonly></p>
<p>备注2：<input type="text" name="bz2" value="备注2" hidden></p>
<p>备注3：<input type="text" name="bz3" value="备注3" disabled></p>
<p>账号：<input type="text" name="uid" maxlength="20" size="20"
placeholder="请输入账号" required pattern="^[a-zA-Z0-9_-]{3,16}$"></p>
<!--
input type="password"：密码输入框
name：密码输入框名称
value：密码输入框默认初始值
maxlength：密码输入框的最大输入字符数
size：密码输入框的长度大小(以字符为单位)
-->
<p>密码：<input type="password" name="pwd" maxlength="15" size="20" placeholder="请输入密码"></p>
<!--
input type="radio"：单选框标签
name：单选框的组名称
value：单选框的值
checked：选中当前指定单选框
-->
<p>性别：
<input type="radio" name="sex" value="boy" checked/>男
<input type="radio" name="sex" value="girl"/>女
</p>
<!--
input type="checkbox"：多选框标签
name：多选框的组名称
value：多选框的值
checked：选中当前指定多选框
-->
<p>兴趣：
<input type="checkbox" name="interest" value="eat"/>吃饭
<input type="checkbox" name="interest" value="sleep"/>睡觉
<input type="checkbox" name="interest" value="study" checked/>学习
<input type="checkbox" name="interest" value="run"/>跑步
</p>
<p>按钮：
<!--
input type="button"：普通按钮
name：普通按钮名称
value：普通按钮文本值
-->
<input type="button" name="btn1" value="普通按钮">
<!--
input type="image"：图像按钮
name：图像按钮名称
value：图像按钮文本值
src：图像按钮的引用图片资源路径
width：图像按钮宽度
height：图像按钮高度
-->
<input type="image" name="btn2" value="图像按钮" src="../resources/images/20210718002.png" width="60px"
height="20px">
</p>
<p>国家：
<!--
select：列表框，下拉框
name：列表名称
id：列表ID
-->
<select name="select" id="s1">
<!--
option：列表框选项
value：列表框选项值
selected：当前列表框选中值
-->
<option value="china" selected>中国</option>
<option value="America">美国</option>
<option value="Britain">英国</option>
<option value="Russia">俄罗斯</option>
</select>
</p>
<p>反馈：
<!--
textarea：文本域
name：文本域名称
id：文本域ID
cols：文本域列数
rows：文本域行数
-->
<textarea name="textarea" id="ta1" cols="30" rows="10" placeholder="请输入反馈信息"></textarea>
</p>
<p>
<!--
input type="file"：文件域
-->
<input type="file" name="files">
<input type="button" name="upload" value="上传文件">
</p>
<p>邮箱：
<!--
input type="email"：邮箱输入框
name：邮箱输入框名称
value：邮箱输入框默认初始值
maxlength：邮箱输入框的最大输入数
size：邮箱输入框的长度大小
-->
<input type="email" name="email" value="1207697231@qq.com" maxlength="30" size="30"
pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$">
</p>
<p>URL：
<!--
input type="url"：url输入框
name：url输入框名称
value：url输入框默认初始值
maxlength：url输入框的最大输入数
size：url输入框的长度大小
-->
<input type="url" name="url" value="https://gitee.com/xueshanxuehai/starred" maxlength="50" size="50">
</p>
<p>货物数量：
<!--
input type="number"：数字输入框
name：数字输入框名称
max：数字输入框最大值
min：数字输入框最小值
step：数字输入框偏移量
value：数字输入框默认初始值
-->
<input type="number" name="number" max="100" min="0" step="1" value="1">
</p>
<p>音量：
<!--
input type="range"：滑块
name：滑块名称
max：滑块最大值
min：滑块最小值
step：滑块偏移量
value：滑块默认初始值
-->
<input type="range" name="voice" max="100" min="0" step="1" value="50">
</p>
<p>搜索：
<!--
input type="search"：搜索
-->
<input type="search" name="search">
</p>
<p>
<!-- 增强鼠标可用性 -->
<label for="mark">增强鼠标可用性</label>
<input type="text" id="mark">
</p>
<p>
<!-- input type="submit"：提交按钮 -->
<input type="submit">
<!-- input type="reset"：重置按钮 -->
<input type="reset">
</p>
</form>
</body>
</html>
参考资料(Reference Data)：正则表达式速查表
学习网站地址(即"学习网址",Learning Website Address)：Java之HTML5详解
这篇关于Java学习笔记(No.22)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-01为什么公共事业机构会偏爱 TiDB ：TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发：想要快速交付就必须舍弃产品质量？
- 2024-04-26静态代码分析的这些好处，我竟然都不知道？
- 2024-04-26你在测试金字塔的哪一层？（下）
- 2024-04-26快刀斩乱麻，DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器！
- 2024-04-2203-为啥大模型LLM还没能完全替代你？
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者，Spring Boot 项目如何部署
