当前位置：首页 > news >正文

Java研学-HTML

news 2025/7/4 16:54:57

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 : 表示使用大写英文字母作为序号;如A、B、C 等;a : 表示使用小写英文字母作为序号;如a、b、c 等; I : 表示使用大写罗马数字作为序号;如I、II、III 等;i : 表示使用小写罗马数字作为序号;如i、ii、iii 等; 1 : 表示使用阿拉伯数字作为序号;如1、2、3 等;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 : 指定表单数据提交的方式,分为 GET 或 POST 请求,默认是 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>