javaweb学习之HTML（一）

不要数手指啦2024-08-20 10:32

推荐学习使用网站

w3school 在线教程

认识HTML

HTML（HyperText Markup Language）是超文本标记语言，它是一个用于创建网页和网页应用程序的标准标记语言。HTML文档由一系列的元素（elements）组成，这些元素通过标签（tags）来定义。这些标签告诉浏览器如何呈现内容，比如文本、图片、链接、列表、表格等。

HTML文档的结构通常包括以下几个部分：

  1. <!DOCTYPE html> 声明：这不是一个HTML标签；它是一个指示，告诉浏览器文档使用哪个HTML版本进行编写。

  2. <html> 元素：这是HTML文档的根元素，它包含了文档的所有其他元素。

  3. <head> 元素：包含了文档的元数据（metadata），如文档的标题（<title>）、字符集声明（<meta charset="utf-8">）、链接到样式表（<link rel="stylesheet" href="style.css">）和脚本文件（<script src="script.js"></script>）等。

  4. <body> 元素：包含了可见的页面内容，如文本、图片、链接、表格、列表等。

下面是一个简单的HTML文档示例：

html 复制代码 
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>我的第一个HTML页面</title>  
</head>  
<body>  
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个段落。</p>  
</body>  
</html>

HTML使用实例

根据 w3school 网站进行的基础学习总结，更深入的学习大家可以到网站上面去练练手。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签 ，第二个标签是结束标签

开始和结束标签也被称为开放标签 和闭合标签

元素

元素就是<开始标签><结束标签>之间的所有代码

属性

属性为 HTML 元素提供附加信息。HTML 标签可以拥有属，且属性总是在HTML元素的开始标签中进行规定。如：

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定。

html 复制代码 
<a href="链接">名字</a>

HTML标题由<p>标签定义。 标题的属性在align中就可以进行指定。<h1 align="center"> 拥有关于对齐方式的附加信息。

html 复制代码 
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>
标题 <h1>到<h6>
html 复制代码 
<html>
<body>
<h1>标题采用的关键词是h</h1>
<h2>一共有六个等级</h2>
<h3>h1到h6</h3>
<h4>标题效果会进行加粗</h4>
<h5>h1最大，h6最小</h5>
<h6>注意事项</h6>
<p>段落：请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
段落<p>
html 复制代码 
<html>
<body>
<p>这是段落。</p>
<p>实现分行。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>
换行<br/>
html 复制代码 
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
</p>
</body>
</html>
链接

<a href="链接">名字</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签
html 复制代码 
<html>
<body>
<a href="https://www.csdn.net/">
This is a link</a>
<p>这个This is a link是对链接取的名字</p>
</body>
</html>

将图像作为链接

html 复制代码 
<!DOCTYPE html>  
<html>  
<head>  
    <!-- 这里可以添加页面的标题、引入的CSS文件等 -->  
    <title>图像链接示例</title>  
</head>  
<body>  
    <p>  
        <!-- 注释：说明以下代码段展示了如何使用图像作为链接 -->  
        您也可以使用图像来作链接：  
        <a href="/example/html/lastpage.html">  
            <!-- 注释：这是一个链接，当用户点击这个链接时，会跳转到"/example/html/lastpage.html"页面 -->  
            <!-- 注释：以下是一个图像标签，用于显示链接的图像 -->  
            <img border="0" src="/i/eg_buttonnext.gif" alt="下一个" />  
            <!-- 注释：border="0"属性用于移除图像周围的边框（虽然在现代浏览器中，图像默认没有边框） -->  
            <!-- 注释：src属性指定图像的来源路径 -->  
            <!-- 注释：alt属性为图像提供替代文本，用于图像无法显示时（如加载失败或屏幕阅读器） -->  
        </a>  
    </p>  
  
</body>  
</html>

target属性

html 复制代码 
<html>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
</body>
</html>
图像

注意：插入动图与插入普通图像并没有语法上面的区别。

html 复制代码 
<html>
<body>
<img src="/i/eg_w3school.gif" width="300" height="120" />
<p>src里面填写的是图片的地址，width和height指宽高</p>
</body>
</html>
样式

style 属性用于改变 HTML 元素的样式。可以在 CSS 教程中学习关于样式和 CSS 的所有知识。

html 复制代码 
<!DOCTYPE html> 
<!-- 声明文档类型和HTML版本，但此例中未直接包含，通常在HTML5中可省略 -->  
<html>  
<head>  
    <!-- 通常在这里会包含CSS样式表链接或<style>标签定义内联样式，但此例中直接在元素中使用了内联样式 -->  
</head>  
<body style="background-color:PowderBlue;">
 <!-- 设置页面的背景颜色为PowderBlue -->  
    <h1>Look! Styles and colors</h1> 
    
    <!-- 第一段文本，设置字体为Verdana，颜色为红色 -->  
    <p style="font-family:verdana;color:red">  
        This text is in Verdana and red  
    </p>  
  
    <!-- 第二段文本，设置字体为Times，颜色为绿色 -->  
    <p style="font-family:times;color:green">  
        This text is in Times and green  
    </p>  
  
    <!-- 第三段文本，设置字体大小为30像素 -->  
    <p style="font-size:30px">This text is 30 pixels high</p>  
  
</body>  
</html>
格式化
html 复制代码 
<html>
<body>
<b>定义粗体文本</b>
<br />
<strong>定义加重语气</strong>
<br />
<big>大号字体</big>
<br />
<em>着重文字</em>
<br />
<i>This text is italic</i>
<br />
<small>小号字体</small>
<br />
This text contains
<sub>下标字</sub>
<br />
This text contains
<sup>上标字</sup>
</body>
</html>

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> *不赞成使用。*使用 <del> 代替。
<strike> *不赞成使用。*使用 <del> 代替。
<u> *不赞成使用。*使用样式（style）代替。

"计算机输出"标签

html 复制代码 
<html>
<body>
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
</body>
</html>
html 复制代码 
<html>
<body>
<code>计算机代码</code>
<br />
<kbd>键盘码</kbd>
<br />
<tt>打字机代码</tt>
<br />
<samp>计算机样本</samp>
<br />
<var>定义变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>
标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> *不赞成使用。*使用 <pre> 代替。
<plaintext> *不赞成使用。*使用 <pre> 代替。
<xmp> *不赞成使用。*使用 <pre> 代替。

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

下面会展示，就不在这里写了。

引用
html 复制代码 
<!DOCTYPE html>
<html>
<body>
<p>浏览器通常会在 q 元素周围包围引号。</p>
<p>q元素是用来：<q>表示引号</q></p>
</body>
</html>
html 复制代码 
<!DOCTYPE html>  
<html>  
<body>  
  
<!-- 这是一个段落标签，用于展示文本信息。这里解释了浏览器如何对blockquote元素进行样式处理（缩进）。 -->  
<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>  
  
<!--   
    这是一个blockquote元素，用于引用外部来源的文本或长段落的引用。  
    cite属性用于指定引用的来源链接，但请注意，并非所有浏览器都会以特殊方式显示这个链接。  
    在这个例子中，它引用了世界自然基金会（WWF）的简介。  
-->  
<blockquote cite="http://www.worldwildlife.org/who/index.html">  
五十年来，WWF 一直致力于保护自然界的未来。  
WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。  
</blockquote>  
  
</body>  
</html>
html 复制代码 
<!DOCTYPE html>
<html>
<body>

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html>
<body>

<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html>
<body>

<p>The
<dfn>WHO</dfn> World Health Organization was founded in 1948.
</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>
表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

html 复制代码 
<!DOCTYPE html>  
<html>  
<head>  
    <title>表格示例</title>  
</head>  
<body>  
  
<!-- 表格基础说明 -->  
<p>每个表格由 table 标签开始。</p>  
<p>每个表格行由 tr 标签开始。</p>  
<p>每个表格数据由 td 标签开始。</p>  
  
<!-- 一列表格 -->  
<h4>一列：</h4>  
<table border="1">  
    <tr>  
        <td>100</td>  
    </tr>  
</table>  
  
<!-- 一行三列表格 -->  
<h4>一行三列：</h4>  
<table border="1">  
    <tr>  
        <td>100</td>  
        <td>200</td>  
        <td>300</td>  
    </tr>  
</table>  
  
<!-- 两行三列表格 -->  
<h4>两行三列：</h4>  
<table border="1">  
    <tr>  
        <td>100</td>  
        <td>200</td>  
        <td>300</td>  
    </tr>  
    <tr>  
        <td>400</td>  
        <td>500</td>  
        <td>600</td>  
    </tr>  
</table>  
  
</body>  
</html>
列表

（无序）

列表建立用<ul>,列表项建立用<li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

html 复制代码 
<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<p>只是单纯的列出来，没有排序</p>
</body>
</html>

（有序）

列表建立用<ol>,列表项建立用<li>。

html 复制代码 
<!DOCTYPE html>  
<html>  
<body>  
  
<!-- 第一个有序列表，从默认的序号1开始 -->  
<ol>  
  <li>咖啡</li> <!-- 列表项1：咖啡 -->  
  <li>牛奶</li> <!-- 列表项2：牛奶 -->  
  <li>茶</li>   <!-- 列表项3：茶 -->  
</ol>  
  
<!-- 第二个有序列表，使用start属性从序号50开始 -->  
<ol start="50">  
  <li>咖啡</li> <!-- 列表项50：咖啡 -->  
  <li>牛奶</li> <!-- 列表项51：牛奶 -->  
  <li>茶</li>   <!-- 列表项52：茶 -->  
</ol>  
  
</body>  
</html>
内联框架

用于在网页内显示网页。

复制代码 
删除边框:（frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框）<iframe src="网页链接" frameborder="0"></iframe>
html 复制代码 
<!DOCTYPE html>  
<html>  
<body>  
  
<!-- 嵌入一个外部页面到当前页面中，使用iframe元素。这里的src属性指定了要嵌入的页面的URL。  
     宽度和高度分别通过width和height属性设置。
     属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。 -->  
<iframe src="https://www.csdn.net/" width="600" height="400"></iframe>  
  
<!-- 说明某些老式的浏览器可能不支持内联框架（iframe）的功能。 -->  
<p>某些老式的浏览器不支持内联框架。</p>  
  
<!-- 如果浏览器不支持iframe，则iframe元素在页面上将不会显示任何内容，也不会占据空间（除非设置了CSS样式来改变其行为）。 -->  
<p>如果不支持，则 iframe 是不可见的。</p>  
  
</body>  
</html>
html 复制代码 
<!DOCTYPE html>  
<html>  
<body>  
  
<!-- 定义一个iframe元素，其src属性尝试加载/example/html/demo_iframe.html页面。  
     同时，该iframe被赋予了一个name属性值为"iframe_a"，这个名称将在后续链接的target属性中使用。 -->  
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>  
  
<!-- 定义一个段落，其中包含一个超链接。该链接的href属性指向http://www.w3school.com.cn。  
     重要的是，链接的target属性被设置为"iframe_a"，这与上面iframe的name属性值相匹配。  
     这意味着，当点击这个链接时，链接指向的页面将不会在新窗口或标签页中打开，  
     而是会在名为"iframe_a"的iframe中加载和显示。 -->  
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>  
  
<!-- 这是一个简单的注释，用于解释上述链接和iframe之间的关系。  
     它指出，由于链接的target属性与iframe的name属性相匹配，因此链接将在iframe中打开。 -->  
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>  
  
</body>  
</html>
续集：

Javaweb学习之HTML（二）-CSDN博客

相关推荐
西岸行者5 天前
学习笔记：SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意5 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码5 天前
嵌入式学习路线
学习
毛小茛5 天前
计算机系统概论——校验码
学习
babe小鑫6 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms6 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下6 天前
Linux Virtual Server（LVS）学习总结
linux·学习·lvs
我想我不够好。6 天前
2026.2.25监控学习
学习
im_AMBER6 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J6 天前
从“Hello World“ 开始 C++
c语言·c++·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤07OpenClaw优化飞书API 额度已耗尽问题08Window 10部署openclaw报错node.exe : npm error code 12809【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆10OpenClaw大龙虾机器人完整安装教程