HTML标签及Java中内存中所创建对象调用的流程

HTML标签及Java中栈，堆和方法区的相关知识

今天我来分享一下HTML中的一些常见的标签，以及Java中的栈，堆和方法区的相关知识。

HTML相关格式

首先我们来了解一下HTML的一些格式。

1.1.1 <!DOCTYPE> 标签

标签是文档类型声明，作用是告诉浏览器使用那一种HTML版本去显示网页。

1.1.2 lang 语言

lang 语言是告诉浏览器我们使用的语言，如我们用到的中文包含在内的lang语言是 zh-CN语言。

1.1.3charset字符集

即我们使用的字符集，字符集我们理解为是一个包含这各种字符的集合，通常呢，我们使用UTF-8来保存文字。

HTML的实用标签

1.2.1 文本标签

文本标签有很多种，我在先这里介绍加粗，倾斜，删除线和下滑线。

1.2.2 div和span 标签

div和span标签是没有语义的，他们就像是一个盒子，用来装内容。如果说span是一个小的盒子，那么div就是一个大盒子。

1.2.3 具体的区分

$<span>$ 是一个内联元素，用于对文本的一部分或行内元素进行包裹和组合。
它通常用于对一小段文本应用样式、添加类名或在脚本中进行操作。
由于是内联元素，$<span>$ 不会独占一行，而只会包裹其内容。

$<div>$ 是一个块级元素，用于创建一个独立的区块，可以包含其他块级或内联元素。
它通常用于组织和布局页面的内容，可以作为容器包裹其他元素。
$<div>$ 可以设置宽度、高度、背景颜色等样式属性，并且可以使用CSS类名和ID进行选择。
由于是块级元素，$<div>$ 会独占一行，并且在前后创建额外的垂直空间。

<p>请与我们联系：<span class="email">123@example.com</span></p>


<div class="container">
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
</div>

第一块运用了span标签的文本将输出 请与我们联系：123@example.com
第二块将输出：

这是一个标题
这是一段文本

1.2.4 其他一些文本标签

1. 标题标签
   $<h1>$ ~ $<h6>$ 分别是不同等级的标题。

2. 段落标签 $<p>$：

   用于表示文字段落。

3. 下标标签 $<sub>$ 和 上标标签 $<sup>$

   分别用于表示下标和上标的文本。

    H<sub>2</sub>O
    x<sup>2</sup>
   
   

   在以上的文本中将会展现为：
   H₂O
   x²

4. 换行标签 $<br>$：

   用于在文本中创建换行。文本若无换行或换段标签将会黏成一快。

1.3 图像标签

在HTML中，使用 $<img>$ 标签向网页中插入图像。$<img>$ 标签是一个自闭合标签，不需要闭合标签。

$<imgsrc="path/to/image.jpg"alt="这是一张图像"width="300"height="200"title="图像标题">$

这就是一个标准的图像应用所需要包含的东西。其中除了img标签之外的东西，我们叫做属性。

1. src：指定图像的URL，可以是相对路径或绝对路径。
2. alt：指定图像的替代文本，用于在图像无法加载时显示或者作为屏幕阅读器的描述。
3. width 和 height：指定图像的宽度和高度，可以使用像素值、百分比或其他单位。
4. title：指定图像的标题，用于鼠标悬停时显示额外的信息。
5. border：设置图像的边框粗细。

1.4 路径

路径分为相对路径和绝对路径，相对路径可以看为是相对于当前HTML页面的位置，而绝对路径则是电脑中的路径或是网络中的路径

以下是具体介绍：

1. 相对路径：相对路径是相对于当前文件所在位置的路径。它指定了从当前位置到目标文件或目录的相对位置。相对路径可以是相对于当前文件所在目录的路径，也可以是相对于当前网页的URL路径。

2. 绝对路径：绝对路径是从根目录或者当前文件系统的根目录开始指定的完整路径。它指定了从文件系统的根目录到目标文件或目录的完整路径。绝对路径包含完整的目录结构信息，可以在任何位置唯一标识文件或目录。

两种方法各有利弊，相对路径比较简单，适合维护与移植。更适合在同一文件系统内移动文件时保持路径的正确性，而绝对路径更适合在不同文件系统或网络上引用文件时确保准确的路径。

三种相对路线写法：

1.5 超链接

HTML中的链接是通过 $<a>$ 标签来创建的。$<a>$ 标签用于定义一个超链接，使用户能够点击链接并导航到其他页面、资源或位置。

$<a>$ 标签有以下常用属性：

1. href：指定链接的目标地址，可以是一个URL、一个文件路径或一个锚点。
2. target：指定链接的打开方式，常见的取值有** _blank**（在新窗口或标签页中打开）、_self（在当前窗口或标签页中打开）、_parent（在父级窗口或标签页中打开）等。
3. title：指定链接的标题，用于鼠标悬停时显示额外的信息。
4. rel：指定链接与当前页面之间的关系，常见的取值有 nofollow（告知搜索引擎不要追踪该链接）、noopener（在新窗口打开时防止新页面能够访问到原页面）等。

超链接可以分为六种，我们一一来介绍。

1. 外部链接和内部链接：外部链接就是指链接是外部的网页，内部则相反。直接链接内部名称即可，如$<ahref="classes/document.html">课表</a>$。
2. 空链接：暂时没有链接目标时。例：

<a href="#">首页</a>

3. 下载链接
   当href里面地址是一个文件或压缩包是，会下载这个文件。

4. 锚点链接
   通过设置锚点，可以实现类似导航的功能。点击后就能够跳转到锚点所在的位置。

   1. 锚点：在页面中的某个位置定义一个锚点，可以通过在目标元素上添加 id 属性来实现。
   2. 链接：创建一个指向锚点的链接，即通过$ $标签来实现。

    <h2 id="section1">可学技能</h2>
    <p>这是第一部分的内容。</p>
   
   
    <a href="#section1">跳转到可学技能部分</a>
   
   

5. 网页文件链接
   指的是图片甚至是视频等网页元素也可以运用链接。

1.6 注释标签

注释在网页文件中也是必不可少的。

格式为 <-- + 文字 + -->

1.7 一些另外的特殊字符

重要的有空格，大于号和小于号。

1.8 表格

在HTML中，可以使用表格标签来创建和呈现表格。HTML表格由 $<table>$ 标签定义，其中的每行由 $<tr>$ 标签定义，每个单元格由 $<td>$ 标签定义。可以使用 $<th>$ 标签定义表头单元格，以及 $<caption>$ 标签定义表格标题。

<table>
  <caption>学生成绩表</caption>
  <thead>
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>001</td>
    <td>张三</td>
    <td>数学</td>
    <td>90</td>
  </tr>
  <tr>
    <td>002</td>
    <td>李四</td>
    <td>英语</td>
    <td>85</td>
  </tr>
  </tbody>
</table>

表格使用了 $<table $标签来定义，其中的表格标题使用了 $<caption>$ 标签定义。表头行使用了 $<thead>$ 标签定义，其中的每个表头单元格使用了 $<th>$ 标签定义。表格正文使用了 $<tbody>$ 标签定义，其中的每行使用了 $<tr>$ 标签定义，每个单元格使用了 $<td>$ 标签定义。
除此之外，表格还有一系列相关属性：

若是我们想要合并列表，我们可以使用rowspan和colspan两种方式分别使跨行和跨列单元格合并。
格式为$<tdcolspan="2"></td>$
但要记得把多余的单元格删去。

列表

1.9.1 无序列表

无序列表（Unordered List）：无序列表使用 $<ul>$ 标签来定义，其中的每个列表项使用 $<li>$ 标签来定义。无序列表中的项没有特定的顺序，通常以项目符号（如实心圆点）显示。注意ul标签内只能嵌套li标签，不允许输入其他标签。但是li标签相当是一个容器，能够容纳所有元素。

1.9.2 有序列表

有序列表（Ordered List）：有序列表使用 $<ol>$ 标签来定义，其中的每个列表项使用 $<li>$ 标签来定义。有序列表中的项按照指定的顺序进行排序，通常以数字或字母作为项目符号。

1.9.3 自定义列表

在HTML标签中，dl标签用于定义描述列表，会和dt和dd一起使用。即dd来解释dt中的内容。

表单

表单就是我们平时用来收集用户信息
一系列界面。类似调查问卷，信息填写，兴趣点选择等都属于表单。

在HTML中，表单常常包括表单域、表单控件和提示信息组成。

<form action="/submit-form" method="post">
  <div>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  </div>
  <div>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  </div>
  <div>
  <input type="submit" value="提交">
  </div>
</form>

$<form>$ 标签定义了整个表单，其中的 action 属性指定了表单提交时将数据发送到的URL，method 属性指定了提交数据的HTTP方法（通常是 POST 或 GET）。
$<label>$ 标签用于定义每个输入字段的标签，其中的 for 属性与对应输入字段的 id 属性关联，以便提高可访问性和用户体验。
$<input>$ 标签用于创建各种输入字段，例如文本输入框（type=“text”）、密码输入框（type=“password”）、提交按钮（type=“submit”）等。

二、对象创建运用在内存中的流程

我们创建一个类，我们就把类的成员变量和成员方法放入方法区之中。然后，我们创造一个类的对象，把对象放入堆之中，我们所创建的对象等价于堆中的地址。接着，我们运用对象实现一些功能，在main方法中调用对象的方法，main方法入栈，其他方法入栈，通过指向堆的地址，再用堆中指向方法区的地址实现调用。调用完后，出栈，下一个方法入栈。从而实现对类中的方法高效利用，节省了内存空间。