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>