javaweb学习之HTML（一）

推荐学习使用网站

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文档示例：

<!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 属性中指定。

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

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

<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>
标题 <h1>到<h6>
<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>
<body>
<p>这是段落。</p>
<p>实现分行。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>
换行<br/>
<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>
<body>
<a href="https://www.csdn.net/">
This is a link</a>
<p>这个This is a link是对链接取的名字</p>
</body>
</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>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
</body>
</html>
 图像

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

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

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

<!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>
<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>
<body>
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10print i
next i
</pre>
</body>
</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>定义一个定义项目。

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

引用
<!DOCTYPE html>
<html>
<body>
<p>浏览器通常会在 q 元素周围包围引号。</p>
<p>q元素是用来：<q>表示引号</q></p>
</body>
</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>
<!DOCTYPE html>
<html>
<body><p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p><p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p></body>
</html>
<!DOCTYPE html>
<html>
<body><p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p><p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p></body>
</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），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!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>
<body>
<h4>一个无序列表：</h4>
<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>
<p>只是单纯的列出来，没有排序</p>
</body>
</html>

（有序）

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

<!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>
<!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>
<!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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/404986.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unity 麦扣 x 勇士传说 全解析 之 怪物基类与野猪（附各模块知识的链接，零基础也包学会的牢弟）（案例难度：★★☆☆☆）

Unity 麦扣 x 勇士传说 全解析 之 怪物基类与野猪（附各模块知识的链接，零基础也包学会的牢弟）（案例难度：★★☆☆☆）

通过一阵子的学习&#xff0c;我是这么认为的&#xff0c;因为该教程是难度两星的教程 &#xff0c;也就是适合学了一阵子基础组件以后的学习者 &#xff08;什么都不会的学习者要是学这套课程会困难重重&#xff0c;如果你什么都不会那么需要学习一星教程&#xff09; 所以该…
阅读更多...
SQL-事务与并发问题

SQL-事务与并发问题

在数据库管理系统中&#xff0c;事务是一个重要的概念&#xff0c;它确保了一组数据库操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而维护数据的完整性和一致性。随着多个用户同时访问数据库&#xff0c;事务的并发处理变得尤为重要。 1. 事务的定义 事务是指一组…
阅读更多...
AI 代理参考架构

AI 代理参考架构

LLM Agent部署框架 围绕 ChatGPT 的讨论&#xff0c;现在已经演变为AI 代理。 图&#xff1a;AI代理平台参考架构 比尔盖茨最近设想&#xff08;CNBC 采访&#xff1a;链接&#xff09;未来我们将拥有一个能够处理和响应自然语言并完成许多不同任务的AI 代理。盖茨以计划旅行…
阅读更多...
ETAS工具链自动化实战指南＜一＞

ETAS工具链自动化实战指南＜一＞

----自动化不仅是一种技术&#xff0c;更是一种思维方式&#xff0c;它将帮助我们在快节奏的工作环境中保持领先&#xff01; 目录 往期推荐 场景一&#xff1a;SWC 之间 port自动连接 命令示例 参数说明 场景二&#xff1a;SWC与ECU 自动映射 命令示例 参数说明 场景三&…
阅读更多...
c#实现数据导出为PDF的方式

c#实现数据导出为PDF的方式

PdfSharp vs iTextSharp: C#中PDF导出功能比较 PdfSharp 优点 轻量级&#xff1a;适合简单的PDF生成任务易于学习&#xff1a;API相对简单&#xff0c;学习曲线较缓开源&#xff1a;提供开源版本&#xff0c;可自由使用和修改纯C#实现&#xff1a;不依赖外部库或COM组件支持…
阅读更多...
对零基础想转行网络安全同学的一点建议

对零基础想转行网络安全同学的一点建议

最近有同学在后台留言&#xff0c;0基础怎么学网络安全&#xff1f;0基础可以转行做网络安全吗&#xff1f;以前也碰到过类似的问题&#xff0c;想了想&#xff0c;今天简单写一下。 我的回答是先了解&#xff0c;再入行。 具体怎么做呢&#xff1f; 首先&#xff0c;你要确…
阅读更多...
1.初识redis

1.初识redis

文章目录 1.认识redis1.1 mysql和redis 对比1.2分布式系统1.2.1单机架构与分布式架构1.2.2数据库分离(应用服务器和存储服务器分离)与负载均衡1.2.3负载均衡器1.2.4 数据库读写分离1.2.5 数据库服务器引入缓存1.2.6数据库分库分表1.2.7 引入微服务 2.常见概念解释2.1 应用(Appl…
阅读更多...
音频导出后为什么效果变差了 FL Studio音频导出设置推荐

音频导出后为什么效果变差了 FL Studio音频导出设置推荐

FL Studio是一款功能强大的编曲软件&#xff0c;除了可以编曲之外&#xff0c;FL Studio还支持各种音频格式导出。有的小伙伴在使用FL Studio导出音频后&#xff0c;会发现的导出的音频效果不理想&#xff0c;这很大的原因可能是导出设置不对造成的。下面给大家详细讲解&#x…
阅读更多...
全面解析Gerapy分布式部署：从环境搭建到定时任务，避开Crawlab的坑

全面解析Gerapy分布式部署：从环境搭建到定时任务，避开Crawlab的坑

Gerapy分布式部署 搭建远程服务器的环境 装好带docker服务的系统 Docker:容器可生成镜像&#xff0c;也可拉去镜像生成容器 示例&#xff1a;将一个环境打包上传到云端(远程服务器)&#xff0c;其他8个服务器需要这个环境直接向云端拉取镜像生成容器,进而使用该环境,比如有MYS…
阅读更多...
代码块分类

代码块分类

局部代码块 public class Test {public static void main(String[] args) {{int a 10;}// 执行到此处时候,变量a已经从内存中消失了。 // System.out.println(a);} } 构造代码块 public class Test {private String name;private int age;{// 构造代码块System.out.…
阅读更多...
GEC6818开发板的学习

GEC6818开发板的学习

1、开发板的简介 首先连接 开发板与电脑，需电脑安装串口驱动：例CH340 2、开发板的特性： 像素：800*480Pix分辨率：高，宽两个维度的像素点数目开发板色深为32位一个像素点占4个字节：分别为灰度保留位、RGB三原色各占一位3、为什么要内存映射 虽然LCD设备本质上也可以看作…
阅读更多...
R语言：如何安装包“linkET”

R语言：如何安装包“linkET”

自己在R语言中安装包“linkET”时报错不存在叫‘linket’这个名字的程辑包 尝试了install.packages("linkET")和BiocManager::install("linkET")两种安装办法都不行 >install.packages("linkET") WARNING: Rtools is required to build R pa…
阅读更多...
【Java】对象与toString()方法

【Java】对象与toString()方法

1.前言 了解toString之前&#xff0c;要先明白Object类是什么&#xff0c;Object是所有对象的父类。在Object类当中含有toString()方法&#xff0c;因此所有的对象也都包含有一个toString()方法。 2.toString 2.1 方法调用 toString()方法主要的作用&#xff0c;是对类与对象的…
阅读更多...
错误信息“缺少msvcr120.dll”或“找不到msvcr120.dll”应该如何修复？几种方法快速修复

错误信息“缺少msvcr120.dll”或“找不到msvcr120.dll”应该如何修复？几种方法快速修复

由于这个msvcr120.dll文件与应用程序的运行密切相关&#xff0c;任何与之相关的问题都可能导致应用程序无法正常运行。错误信息如“缺少msvcr120.dll”或“找不到msvcr120.dll”&#xff0c;通常出现在软件安装不正确或系统更新后。接下俩就教大家几种方法快速修复msvcr120.dll…
阅读更多...
CentOS 7 安装流程详细教程

CentOS 7 安装流程详细教程

目录 前言1. CentOS 7 概述2. 安装环境准备2.1 硬件要求2.2 安装介质准备 3. CentOS 7 安装步骤3.1 引导安装程序3.2 选择语言和键盘布局3.3 配置安装源和软件包3.4 配置分区3.5 设置网络和主机名3.6 设置时间和日期3.7 设置 root 密码和创建用户3.8 开始安装并完成配置 4. 安装…
阅读更多...
Cocos Creator2D游戏开发(14)---CocosCreator常用组件详解

Cocos Creator2D游戏开发(14)---CocosCreator常用组件详解

Canvas RenderRoot2D 组件所在的节点是 2D 渲染组件数据收集的入口,而 Canvas&#xff08;画布&#xff09; 组件继承自 RenderRoot2D 组件&#xff0c;所以 Canvas 组件也是数据收集入口。所有 2D 渲染元素都必须作为 RenderRoot2D 的子节点才能被渲染。 Canvas还作为屏幕适配…
阅读更多...
用基础项目来理解spring的作用

用基础项目来理解spring的作用

简介 spring官方的解释过于专业化&#xff0c;初学者可能比较难懂&#xff0c;接下来我将通过一个最基础的Java项目来尽可能的展示spring中的作用及spring的底层是如何来实现的。 项目结构 该项目是一个简单的JavaSE项目&#xff0c;没有maven或者tomcat等其他。只在控制台进…
阅读更多...
《黑神话悟空》2024官方配置要求一览

《黑神话悟空》2024官方配置要求一览

黑神话悟空配置要求 1080P 高画质推荐6650xt和4060以上的显卡高画质 全景光追推荐4060 2k 高画质推荐4060ti/7700x以上的显卡 高画质全景光追推荐4070 4K 高画质推荐4070s起步 高画质全景光追推存4080S 一、官方配置要求一览 1、最低配置: 需要 64 位处理器和操作系…
阅读更多...
什么是逃逸分析

什么是逃逸分析

如何快速判断是否逃逸就看方法内new的对象实体是否能够被外部方法进行调用 什么是逃逸分析 在java虚拟机中&#xff0c;对象是在java堆中分配内存的&#xff0c;这是一个普遍的常识。但是&#xff0c;有一种特殊情况&#xff0c;那就是如果经过逃逸分析&#xff08;escape an…
阅读更多...
[HDCTF 2023]Welcome To HDCTF 2023

[HDCTF 2023]Welcome To HDCTF 2023

方法一&#xff1a;找个炸弹死掉&#xff0c;flag就出现 方法二&#xff1a;查看页面源码&#xff0c;发现底部assets/js/game.js 复制后访问看到jsfuck编码 复制到控制台查看flag
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发