javaweb学习之HTML(一)

news2024/9/23 19:27:25

推荐学习使用网站

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 10
     print 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.coloradmin.cn/o/2057145.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大模型日报|10 篇必读的大模型论文

大家好&#xff0c;今日必读的大模型论文来啦&#xff01; 1.斯坦福推出大模型网络安全能力和风险评估框架 Cybench 用于网络安全的语言模型智能体&#xff08;agent&#xff09;能够自主识别漏洞并执行漏洞利用&#xff0c;有可能对现实世界造成影响。政策制定者、模型提供者…

海外媒体投稿:怎样在法国媒体发稿宣传中获得成功

法国是一个充满机遇的销售市场&#xff0c;而媒体发稿营销推广是企业在法国市场里扩张曝光度和提升知名度的有效途径。下面我们就共享如何运用低投资得到高收益的办法&#xff0c;帮助企业在法国媒体发稿推广过程中获得成功。 第一步&#xff1a;掌握目标群体在进行法国媒体发稿…

HCIP-交换实验

根据实验要求&#xff0c;完成实验内容&#xff1a; 实验拓扑图如下所示 &#xff1a; 搭建拓补图&#xff1a; LSW1&#xff0c;LSW2&#xff1a; [LS1]interface Eth-Trunk 0 [LS1-Eth-Trunk0]q [LS1]interface g0/0/3 [LS1-GigabitEthernet0/0/3]eth-trunk 0 [LS1]interf…

微信支付商家转账到零钱申请必过方案总结

商家在申请商家转账到零钱时总会遇到各种原因的驳回&#xff0c;不少商家不断的修改又产生新的驳回原因从而导致工期无限延长&#xff0c;本文根据我们上万次成功申请商家转账到零钱的经验整理&#xff0c;帮助商家可以快速过审&#xff1a; 准备工作和注意事项 - 确认主体资格…

mq-fanout交换机

交换机 交换机是什么?步骤 交换机本身具备路由功能 消息先发到交换机,交换机在路由到队列,消费者监听队列拿到消息 广播模式是什么 是什么 例如:每个微服务创建队列,订单服务只启动1台,1个消费者,订单 怎么创建 创建一个队列 -交换机里type-选择模式(广播模式) 在交换…

AMD为何花49亿美元收购ZT Systems?

是的&#xff0c;是不是很震惊&#xff01; 苏妈再次出手&#xff0c;在美国当地时间8月19日&#xff0c;AMD同意用价值49亿美元的现金和股票收购ZT Systems——这笔费用超过了AMD 2024年预期在数据中心GPU销售总额。 从收购的金额我们就能看出这笔收购的重要性。 但为什么AM…

NGINX常用指令及其防盗链

目录 1 NGINX的指令及其应用 1.1 if指令 1.2 set 指令 - 实现变量定义 1.3 break 指令 1.4 return 指令 1.5 rewrite 指令 1.5.1 Nginx rewrite 介绍 1.5.2 Nginx rewrite 语法 1.5.3 rewrite 指令结尾的 flag 标记说明 2 域名永久与临时重定向 2.1 永久重定向301 2.2 临时重…

同行聚势,喆啡酒店11周年熠熠生辉

当下酒店与消费者之间已超越传统服务关系&#xff0c;在旅途中彼此相伴&#xff0c;相互支持&#xff0c;并肩前行&#xff0c;喆啡酒店作为生活方式酒店的标杆品牌&#xff0c;超百万忠诚消费者正是其品牌旅伴。十一年发展旅程&#xff0c;喆啡酒店携手万千消费者&#xff0c;…

Mantel Test分析与绘图

目录 1.前言 2.步骤 3.在R语言中&#xff0c;除了mantel_test函数&#xff0c;还有其他几个工具和方法可以用于进行Mantel Test分析&#xff1a; 4.利用ggcor包在进行Mantel Test分析 5.使用ggcor包进行Mantel Test分析 6.两个距离矩阵的行名和列名不完全相同的处理方法 …

一个BUG搞懂ThreadLocal、InheritableThreadLocal、TransmittableThreadLocal

首发公众号&#xff1a;赵侠客 引言 最近我收到一个非常诡异的线上BUG&#xff0c;触发BUG的业务流程大概是这样的&#xff1a;A系统新建任务数据需要同步到B系统&#xff0c;数据是多租户的&#xff0c;比如C租户在A系统新建了一条任务&#xff0c;那么C租户登录B系统后会看到…

基于springboot和vue的酒店管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图详细视频演示技术栈系统测试为什么选择我官方认证闲鱼玩家&#xff0c;服务很多代码文档&#xff0c;百分百好评&#xff0c;战绩可查&#xff01;&#xff01;入职于互联网大厂&#xff0c;可以交流&#xff0c;共同进步。有保障的售后 代码参考数据…

《黑神话.悟空》:一场跨越神话与现实的深度探索

《黑神话.悟空》&#xff1a;一场跨越神话与现实的深度探索 在国产游戏日益崛起的今天&#xff0c;《黑神话.悟空》以其独特的剧情、丰富的人物设定和深刻的主题&#xff0c;成为了无数玩家翘首以盼的国产3A大作。这款游戏不仅是一次对传统故事的创新演绎&#xff0c;更是一场对…

oracle日常巡检命令

一、日常巡检命令 1、检查Oracle实例状态 SQL> set pages 600 lines 600 SQL> select instance_name,host_name,startup_time,status,database_status from v$instance; 说明&#xff1a;“STATUS”表示Oracle当前的实例状态&#xff0c;必须为“OPEN”&#xff1b;“…

中国软件评测中心:2024最新人工智能大语言模型技术发展研究报告 (附文档)

人工智能作为引领新一轮科技产业革命的战略性技术和新质生产力重要驱动力&#xff0c;正在引发经济、社会、文化等领域的变革和重塑&#xff0c;2023 年以来&#xff0c;以 ChatGPT、GPT-4 为代表的大模型技术的出台&#xff0c;因其强大的内容生成及多轮对话能力&#xff0c;引…

swift微调款框架使用自定义数据集进行通义千问1.5的微调

使用自定义数据集进行通义千问1.5的 Swift 微调 模型训练手册文档 通义千问&#xff08;T2IQA&#xff09;是一个基于Transformer架构的问答系统&#xff0c;本文将介绍如何使用自定义数据集对Swift语言版本的通义千问进行微调&#xff0c;以适应特定的问题和领域。 swift微…

ubuntu server 扩容

环境&#xff1a;VirtualBox、Ubuntu-server 调整虚拟磁盘大小 在 VirtualBox 主界面 工具 -- 介质 中选择你要操作的虚拟磁盘&#xff0c;点击属性&#xff0c;更改大小即可&#xff0c;保存后启动虚拟机 查看磁盘状态 lsblk 可以看到 sda 已经是 128G 了。ubuntu--vg-ubun…

Vue下载文件的两种方法以及文件流处理

点击按钮下载文件 1.文件流形式 pdfHeaders: {Authorization: localStorage.getItem(Access-Token).replace(/"/g, ),Content-Type: application/json,}, downLoad(){let getUrl if (process.env.NODE_ENV "development") {getUrl 测试地址} else if (p…

浅探空间智能

空间智能&#xff0c;这一概念在人工智能领域逐渐升温&#xff0c;部分归功于AI界的领军人物李飞飞博士所领导的创新项目。 Seeing is for doing and learning. 【精校】TED&#xff1a;李飞飞 | 空间智能让AI理解真实世界 2024.5 李飞飞在 X 上介绍称&#xff0c;「空间智能…

【流媒体】基于libRTMP的H264推流器

目录 1. 整体流程2. 代码2.1 头文件2.2 c文件 3. 测试 RTMP协议相关&#xff1a; 【流媒体】RTMP协议概述 【流媒体】RTMP协议的数据格式 【流媒体】RTMP协议的消息类型 【流媒体】RTMPDump—主流程简单分析 【流媒体】RTMPDump—RTMP_Connect函数&#xff08;握手、网络连接&a…

智云-一个抓取web流量的轻量级蜜罐docker一键启动

智云-一个抓取web流量的轻量级蜜罐docker安装教程 github地址 https://github.com/xiaoxiaoranxxx/POT-ZHIYUN docker快速启动(v1.4) git clone https://github.com/xiaoxiaoranxxx/POT-ZHIYUN.git cd POT-ZHIYUN docker-compose up -d默认映射到80和8080端口 mysql不对外开放…