Java研学-HTML

HTML

1 介绍

  HTML(Hypertext Markup Language) 超文本标记语言。静态网页,用于在浏览器上显示数据

  超文本: 指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

  标记语言: 使用 < > 括起来的语言

  超文本标记语言的结构, 包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

2 基本语法

<!DOCTYPE html>
<!--定义根-->
<html lang="en">
<!--定义头-->
<head><meta charset="UTF-8"><!--定义页面标题--><title>Title</title>
</head>
<!--定义页面主体内容-->
<body>
</body>
</html>

3 属性与值

<!--color:属性名 red:属性值 属性名和属性值用 “=” 连接, 每个标签都有id,style,class等核心属性-->
<h1 style="color: red">这里是小红</h1>

  ① HTML 标准属性,是大多数 HTML 和 XHTML 都有支持的属性; class 规定元素的类名(classname); id 规定元素的唯一 id style 规定元素的行内样式(inline style) title 规定元素的额外信息以及其它的语言键盘属性等

  ② 标签上的可选和必选属性,只针对单个的标签有效果(Mapper.xml)

  ③ 事件属性,使 HTML 事件触发浏览器中的行为,例如点击某个 HTML 元素时启动一段 JavaScript

4 标签嵌套

<!--正确嵌套-->
<span>这里是小黑<h1 style="color: red">这里是小红</h1></span>
<!--这是错误的,标签不能错乱嵌套-->
<h1 style="color: red">这里是小红<span>这里是小黑</h1></span>

5 转义字符与特殊字符

此处引号需用英文
&gt;&lt;&amp;&quot;
><&"
&reg;&copy;&trade;&nbsp;&emsp;
®©  (两者都为空格)

6 常用 HTML 标签

<!-- 注释内容 -->:注释标签;<html>:文档根标签;<head>:页面头部标签;<title>:页面标题,放置于<head></head>之间;<body>:页面主体部分;<style>:写 css 或引入CSS文件,一般放在<head></head>中;<script>: 写 JavaScript 或引入 JavaScript 文件,一般在<head></head>中;<h1><h6>:标题一到标题六,与world一致;<p>:定义段落<div>:定义文档结构;为HTML提供结构和背景;<span>:和<div>基本相似,区别是<span>默认不换行;<br/>:单标签,插入一个换行;<hr/>:单标签,定义一条水平线;

  span 标签不会导致换行
  div 会换行
  p 会产生一个段落,段落之间有默认间距

7 超链接和锚点

  超链接,即指向内容链接,属于一个网页中,可通过超链接同其他网页或站点之间进行连接的元素。从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是图片,电子邮件地址,文件,甚至是一个应用程序。
  一个网页中作为超链接的对象,可以是一段文本或是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。各个网页链接后,才构成一个网站。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tj</title>
</head>
<body>
<a href="#a1">第一页</a> <br/>
<a href="#a2">第二页</a> <br/>
<a href="#a3">第三页</a> <br/>
<!--用 name 或 id 属性,创建一个文档内部的书签(创建指向文档片段的链接)-->
<a id="a1"><div style="height: 800px;background-color: mediumorchid;"></div>
</a>
<a id="a2"><div style="height: 800px;background-color:lemonchiffon"></div>
</a>
<a id="a3"><div style="height: 800px;background-color:orange;"></div>
</a>
</body>
</html>

8 列表标签

① 有序列表

<!--type属性: 可指定列表项目序号类型,属性值有: A : 表示使用大写英文字母作为序号;ABC;a : 表示使用小写英文字母作为序号;如a、b、c 等; I : 表示使用大写罗马数字作为序号;IIIIII;i : 表示使用小写罗马数字作为序号;如i、ii、iii 等; 1 : 表示使用阿拉伯数字作为序号;123;start属性:可表示列表的起始序号;--><ol type="a" start="3"><li>大黄</li><li>大白</li><li>小黑</li><li>小侯</li>
</ol>

② 无序列表

<!--type 属性: 可指定列表项目符号类型,属性值有:disc:表示实心圆点; ●square:表示空心圆圈; ■circle:表示实现方块;-->
<ul type="circle"><li>大黄</li><li>大白</li><li>大黑</li><li>小侯</li>
</ul>

③ 自定义列表 – 无标识列表

<!--<dl>:用于定义列表;该标签只有<dt>,<dd>两种子标签;<dt>:定义列表项的标题;<dd>:定义普通列表项;-->
<dl><dt>金毛</dt><dd>大黄</dd><dd>小黄</dd><dt>哈士奇</dt><dd>哈总</dd>
</dl>

9 图片标签

  于网页中嵌入一张图片; 标签不是在网页中插入图像,而是从网页上链接图像

<!--标签属性: 两个必需属性:src 和 altsrc : 指定显示图片文件所在位置; alt : 指定一段文本,可用于当图片不能显示时显示的提示信息; height: 图片高度,可为像素值或百分比; width: 图片宽度,可为像素值或百分比;-->
<img src="dog.jpg" alt="dog" height="30%"><!--<a><img>标签同时使用可做图片超链接;-->
<a href="demo.html"><img src="image/dog.jpg"></a>

10 表格标签

<!--<table>: 定义表格,<table>可以有多个<tr>子标签常用属性:border:指定表格边框的宽度,默认是0;cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;cellspacing:指定单元格之间的间距,值可是像素或百分比;width:指定表格的宽度,值可以是像素或百分比;
<tr>: 定义表格的行align: 设置行中的单元格内容的位置(left/center/right)定义表格行,该标签只能有<td><th>子标签;
<td>: 定义单元格,放在<tr>,表示把一行分成 N 个单元格;(N取决于N<td>);常见属性:colspan:指定该单元格跨多少列,属性值是数字; columrowspan:指定该单元格横跨的行数; rowheight:指定单元格的高度;width:指定单元格的宽度;
<th>:定义表格标题头的单元格,用法和<td>标签一样的,只是显示效果不同;--><body>
<table border="1" cellpadding="0" cellspacing="0" width="80%"><tr style="background-color: orange"><th>姓名</th><th>性别</th><th>年龄</th><th>体长</th><th>体重</th><th>电话</th></tr><tr><td height="60px;">大黄</td><td colspan="2"></td><td width="60px;">80</td><td rowspan="2">20</td><td>19212312314</td></tr><tr><td>大白</td><td></td><td>50</td><td>18</td><td>19232132122</td></tr>
</table>
</body>

11 表格分层标签

<body>
<!--
<tbody>: 定义表格的主体,该标签只能包含<tr>子元素;
使用<tbody>标签可以将一个表格分成几个独立的部分;
<tbody>可以将表格里的一行或多行合并成一组,使用Ajax编程的时需要动态修改表格的某几行,此时可使用<tbody>标签;
<thead>:定义表格头(标题行),用法和 <tbody> 一致,功能有点差别;
<tfoot>:定义表格脚(统计行),用法和 <tbody> 一致,功能有点差别;
当打印表格式,表格头和表格脚的数据也会包含在数据的页面上;
<thead>,<tbody>,<tfoot>标签可以对表格的行进行分组,每对<tbody>就是一组;
无论三者的先后顺序如何,不影响页面顺序为上面显示表格头,中间是显示表格体,最下面显示表格脚数据;
建议顺序为:<thead>,<tfoot>,<tbody>;若网速慢没有加载出表格体的数据,但是表格头和表格脚的信息会先显示出来,表明页面可用--><table>
<thead>
<tr><th>名字</th><th>体重</th><th>颜色</th><th>电话</th>
</tr>
</thead>
<tfoot><tr align="center"><td colspan="4">首页 上一页 下一页 末页</td></tr></tfoot>
<tbody>
<tr><td>大黄</td><td>20</td><td>黄色</td><td>19212312322</td>
</tr>
<tr><td>大白</td><td>22</td><td>白色</td><td>19232132122</td>
</tr>
</tbody>
</table>
</body>

12 表单标签

  form action=“#” 中#的作用是将表单的提交目标设置为当前页面。当表单提交时,页面将重新加载并执行相应的处理程序。这种设置通常用于在同一页面上处理表单数据,而不需要跳转到其他页面。

<body>
<!--
from : 表单标签,用来收集用户录入的数据
action: 指定数据提交的位置,当点击”提交”按钮时,表单数据提交到哪个地址
method : 指定表单数据提交的方式,分为 GETPOST 请求,默认是 get 方式(数据会显示在地址栏上);
enctype : 指定表单数据提交的编码格式,属性有一下三种 :application/x-www-form-urlencoded url 发送前编码所有字符(默认)multipart/form-data  不做编码,二进制方法提交 ,以后使用文件上传必须使用text/plain  空格转+号,不对特殊字符编码
--><form action="#" method="get">
</form>
</body>

13 表单控件标签

  表单控件用于收集用户数据,是 form 表单的子元素。不同标签与类型的展现方式不同,需放在 form 标签内部

① input 标签
  功能丰富,用于接收用户输入的信息

type 属性指定输入标签的类型:
单行文本框 : type = text,输入的文本信息直接显示在框中;
密码输入框 : type = password,输入的文本以圆点形式显示;
单选框 : type = radio,如:性别选择;
复选框 : type = checkbox,如:多个兴趣选择;
隐藏域 : type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个
数据;
提交按钮 : type = submit,用于提交表单中的数据内容;
重置按钮 : type = reset,将表单中填写的内容均设置为初始值;
无动作按钮 : type = button,可使用javascript为其自定义事件;
文件上传域 : type = file,会生成一个文本框和一个浏览按钮;
图像域 : type = image, 它可以替代submit按钮,即图像提交按钮<input> 标签中其他常见属性:
name: 指定 input 标签的名字,没有设置 name 属性的标签不能提交数据;
value:指定input标签的初始值;
checked:设置单选框,复选框的初始状态是否选中;
disabled: 设置input标签加载时禁用此标签; 不能提交到
maxlength:文本框输入最大字符数,属性值是数字;
readonly: 指定文本框内值不允许直接修改; 能被提交
placeholder :提示信息的显示

② select 标签
  下拉框标签,以 option 标签为子标签,二者一般结合使用:

<!--
<select > 常用属性:
multiple="multiple" 可以选中多个
size="3" 显示几个
<option> 常用的属性 :
selected=”selected”:默认选中的选项--><select name="city" >
<option value="">---请选择---</option>
<option value="zh" selected="selected">牙克石</option>
<option value="en">海拉尔</option>
</select>

③ textarea 标签
  文本域标签: 用户录入多行多列数据

<textarea cols="60" rows="6">今天的天气是零下40</textarea>

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

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

相关文章

javaEE -17(13000字 CSS3 入门级教程)

一&#xff1a;CSS3 简介 CSS3 是 CSS2 的升级版本&#xff0c;它在 CSS2 的基础上&#xff0c;新增了很多强大的新功能&#xff0c;从而解决一些实际面临的问题&#xff0c;CSS3 在未来会按照模块化的方式去发展&#xff1a;https://www.w3.org/Style/CSS/current-work.html …

Guardrails for Amazon Bedrock 基于具体使用案例与负责任 AI 政策实现定制式安全保障(预览版)

作为负责任的人工智能&#xff08;AI&#xff09;战略的一部分&#xff0c;您现在可以使用 Guardrails for Amazon Bedrock&#xff08;预览版&#xff09;&#xff0c;实施专为您的用例和负责任的人工智能政策而定制的保障措施&#xff0c;以此促进用户与生成式人工智能应用程…

电子/计算机专业词汇中法对照(持续更新)

文章目录 【计算机词汇】计算机基础符号数据结构与算法网络编程 | ProgrammationGit 【电气词汇】电气基础数电&模电电气 【数学词汇】基础数学电气类数学缩写控制理论 | Systme linaire/asservi | Asservissement 【管理词汇】财政|市场 |Finance|Marketing 【计算机词汇】…

TCP/UDP 的特点、区别及优缺点

1.TCP协议 传输控制协议&#xff08;TCP&#xff0c;Transmission Control Protocol&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP协议通过建立连接、数据确认&#xff08;编段号和确认号&#xff09;和数据重传等机制&#xff0c;保证了数据的可靠性…

智能优化算法应用:基于哈里斯鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于哈里斯鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于哈里斯鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.哈里斯鹰算法4.实验参数设定5.算法结果6.…

【ArkTS】循环控制与List的使用

ArkTS如何进行循环渲染 现有数据如下 class Item{name:stringimage:Resourceprice:numberdicount:numberconstructor(name:string,image:Resource,price:number,dicount?:number) {this.name namethis.image imagethis.price pricethis.dicount dicount} }private items…

力扣72. 编辑距离

动态规划 思路&#xff1a; 假设 dp[i][j] 是 word1 前 i 个字母到 word2 前 j 个字母的编辑距离&#xff1b;那么状态 dp[i][j] 状态的上一个状态有&#xff1a; dp[i - 1][j]&#xff0c;word1 前 i - 1 个字母到 word2 前 j 个字母的编辑距离&#xff0c;此状态再插入一个字…

linux性能优化-上下文切换

如何理解上下文切换 Linux 是一个多任务操作系统&#xff0c;它支持远大于 CPU 数量的任务同时运行&#xff0c;这是通过频繁的上下文切换、将CPU轮流分配给不同任务从而实现的。 CPU 上下文切换&#xff0c;就是先把前一个任务的 CPU 上下文&#xff08;CPU 寄存器和程序计数…

JVM学习之JVM概述

JVM的整体结构 Hotspot VM是目前市面上高性能虚拟机代表作之一 它采用解释器与即时编译器并存的架构 在今天&#xff0c;Java程序的运行性能已经达到了可以和C/C程序一较高下的地步 Java代码执行流程 具体图为 JVM架构模型 Java编译器输入的指令流基本上是一种基于 栈的指令…

Transformer的学习

文章目录 Transformer1.了解Seq2Seq任务2.Transformer 整体架构3.Encoder的运作方式4.Decoder的运作方式5.AT 与 NAT6.Encoder 和 Decoder 之间的互动7.Training Transformer 1.了解Seq2Seq任务 NLP 的问题&#xff0c;都可以看做是 QA&#xff08;Question Answering&#x…

只要陪着你——来自歌手朱卫明的音乐与情感的交织

在这个五彩斑斓又纷繁复杂的世界中&#xff0c;情感是我们最珍贵的财富。有一种情感&#xff0c;它不受时间的限制&#xff0c;不受空间的束缚&#xff0c;它能够跨越四季&#xff0c;穿越风雨&#xff0c;那就是陪伴。朱卫明的歌声就是这种陪伴的象征&#xff0c;他用音乐为我…

vue自定义指令及常用的自定义指令封装

vue2 自定义指令 官网链接https://v2.cn.vuejs.org/v2/guide/custom-directive.html 指令注册 这里是一个 Vue2 的指令合集&#xff0c;详细的指令移步下面具体的指令文章&#xff0c;现在我们在这里要介绍如何在项目中统一管理和使用这些指令。 注册指令 单文件引入注册 …

机器学习的12个基础问题

1.阐述批归一化的意义 算法 1&#xff1a;批归一化变换&#xff0c;在一个 mini-batch 上应用于激活 x。 批归一化是一种用于训练神经网络模型的有效方法。这种方法的目标是对特征进行归一化处理&#xff08;使每层网络的输出都经过激活&#xff09;&#xff0c;得到标准差为 …

K8S的安装工具

kubectl Kubernetes 命令行工具 kubectl&#xff0c; 让你可以对 Kubernetes 集群运行命令。 你可以使用 kubectl 来部署应用、监测和管理集群资源以及查看日志。 有关更多信息&#xff0c;包括 kubectl 操作的完整列表&#xff0c;请参见 kubectl参考文件。 kubectl 可安装在…

vue路由传参(query和params两种方式)

vue传参常用的两种传参方式 query方式&#xff1a; 参数拼接在url上刷新页面不会丢失数据但如果传递对象或者数组过大时&#xff0c;会出现url过长导致异常错误的问题参数为对象或者对象组成的数组时&#xff0c;需要使用JSON.stringify()格式化&#xff0c;接收时JSON.parse(…

2. 皇后的控制力

题目描述&#xff1a; 我们对八皇后问题进行扩展。 国际象棋中的皇后非常神勇&#xff0c;一个皇后可以控制横、竖、斜线等4个方向&#xff08;或者说是8个方向&#xff09;&#xff0c;只要有棋子落入她的势力范围&#xff0c;则必死无疑&#xff0c;所以对方的每个棋子都要…

1.4【应用开发】缓冲区(一)

写在前面 缓冲区是存储像素数据的内存区域。多个缓冲区可以与窗口或流相关联,但只有一个缓冲区可以与位图相关联。 一,创建缓冲区 你可以创建内部缓冲区和外部缓冲区,如下: 1.1 内部缓冲区 我们可以通过调用以下Screen API函数来为位图,流,窗口创建内部缓冲区: sc…

O_APPEND影响写入追加,而不影响读文件

O_APPEND 标志用于打开文件时&#xff0c;对写入操作进行追加。它并不直接影响读取文件的操作。 当使用 O_APPEND 标志打开文件时&#xff0c;写入操作会自动将数据追加到文件的末尾&#xff0c;而无论文件指针的位置在哪里。这对于避免并发写入时的竞争条件非常有用&#xff…

腾讯云服务器优惠活动大全页面_全站搜优惠合集

腾讯云推出优惠全站搜页面 https://curl.qcloud.com/PPrF9NFe 在这个页面可以一键查询所需云服务器、轻量应用服务器、数据库、存储、CDN、网络、安全、大数据等云产品优惠活动大全&#xff0c;活动打开如下图&#xff1a; 腾讯云优惠全站搜 腾讯云优惠全站搜页面 txybk.com/go…

java-IO流

File类 引入 【1】文件&#xff0c;目录&#xff1a; 文件&#xff1a; 内存中存放的数据在计算机关机后就会消失。要长久保存数据&#xff0c;就要使用硬盘、光盘、U 盘等设备。为了便于数据的管理和检索&#xff0c;引入了“文件”的概念。一篇文章、一段视频、一个可执…