Java学习笔记(No.22)

2021/9/14 20:05:09

编程Tag： 标签 html 列表 Java 笔记所示 123 序列表 No.22

本文主要是介绍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>代表“段落标签”
    &nbsp;代表“特殊符号中空格符号”，&lt;代表“特殊符号中小于符号”，&gt;代表“特殊符号中大于符号”，&copy;代表“特殊符号中版权符号”
    <br>或<br/>或<br />代表“换行标签”
    <hr>或<hr/>或<hr />代表“水平线标签”
     -->
    <strong>字体样式标签中的粗体标签</strong>
    <hr/>
    <em>字体样式标签中的斜体标签</em>
    <hr/>
    <h1 style="color: red">一级标题</h1>
    <p>段落标签1</p>
    <p>段落标签&nbsp;2</p>
    <p>段落标签&nbsp;&nbsp;&nbsp;3</p>
    <p>Java学习笔记&copy;版权所有&lt;学山学海&gt;</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)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！