Java中组件字体设置器

转载

编程小匠人传奇 2024-10-29 19:37:42

文章标签 Java中组件字体设置器 HTML 表单超链接 文章分类 Java 后端开发

文章目录

一、HTML简介
二、基本标签

1.文档结构
2. 标题元素
3.段落
4.换行与分隔线
5. 注释
6.文字标签
7.字符实体
8.图片标记
9.超链接
10.列表
11.表格
12. 表单
13.框架

三、结语

一、HTML简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。HTML并不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。

二、基本标签

标记分为单标记和双标记两种
单标记可以独自使用，例如<br> <hr>
双标记则由首标记和尾标记构成，例如：<b></b>

1.文档结构

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. 
This text is bold
</body>
</html>

在HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。
在和标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在和标签之间的文本是正文，会被显示在浏览器中。

body属性的常用标签

<bgcolor> :设置背景颜色
<text> :设置文本颜色

定时刷新或跳转：

表示一秒钟刷新一次页面
<meta http-equiv="refresh" content="1"/>

页面3秒后自动跳转到百度页面
<meta http-equiv="refresh" content="3;url=http:www.baidu.com"/>

2. 标题元素

标题元素由标签<h1>到<h6>定义。<h1>定义最大的标题元素，<h6>定义最小的。

常用属性：

<align>：设置对齐方式。

例如，

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

显示效果：

This is a heading

3.段落

段落是用

标签定义的。

常用属性：
<align>：设置对齐方式。

<p>This is another paragraph</p>

显示效果

This is another paragraph

HTML自动在一个段落前后各添加一个空行。

4.换行与分隔线

1.换行
当需要结束一行，并且不想开始新段落时，使<br>标签。<br>标签不管放在什么位置，都能够强制换行。

<p>This <br> is a para<br>graph with line breaks</p>

显示效果：

This
is a para
graph with line breaks

<br>标签是一个空标签，它没有结束标记。

2.分隔线

分隔线用<hr>来表示

常用属性：

size:控制直线的粗细
color：控制直线的颜色
align：对齐方式
width：控制直线的宽度（占页面的多少）

例如：

<hr color="blue" size="5px" align="center" width="50%">

5. 注释

注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。

<!-- This is a comment -->

注意：需要在左括号“<”后面跟一个感叹号，右括号不用。

6.文字标签

标签	功能
<b></b>	加粗文字
<strong></strong>	加粗+斜体文字
<font></font>	字体标记

其中<font>中有许多属性来控制字体样式，例如：

color：设置字体颜色（取值颜色名字或颜色的对应16进制）
size：设置字体大小（取值1-7）
face：设置字体字形（宋体、楷体等）

注意： <font>标签现在并不常用，目前的主流是用css来控制文本格式，后面会学到。

7.字符实体

在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。

一个字符实体拥有三个部分：

一个and符号（&）
一个实体名或者一个实体号
最后是一个分号（;）

想要在HTML文档中显示一个小于号，必须这样写：<或者<
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。

注意： 实体名是大小写敏感的。

在HTML中，最常见的字符实体就是不可拆分空格。
通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体： 

常用的字符实体

显示结果	描述	实体名	实体号
	不可拆分的空格
<	小于	<	<
>	大于	>	>
&	and符号	&	&
"	引号	"	"
’	单引号		'
¢	分	¢	¢
£	英镑	£	£
¥	人民币元	¥	¥
§	章节	§	§
©	版权	©	©
®	注册	®	®
×	乘号	×	×
÷	除号	÷	÷

8.图片标记

格式：
<img src=“url” alt="" height="" width="" >

属性：

src ：src”属性的值是所要显示图像的URL。URL指向图像存储的地址。
alt：用来给图像显示一个“交互文本”，值是由用户定义的。
width：控制图片的宽度
height：控制图片的高度

说明：

当浏览器在文档中遇到img标签时，就放置一个图像。如果把img标签放在两个段落之间，就会先显示一个段落，然后是这个图像，最后是另外一个段落。

alt属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个交互文本来代替图像。

实例：

插入本地图像

<img src="image.gif" width="144" height="50">

插入非本地图像

<img src="http://www.baidu.com/images/ie.gif" width="73" height="68">

9.超链接

HTML使用超级链接来连接到网络上的其他页面。

格式：
<a href=“url”>超链接名称或图片</a>

例如：
以文字作为超链接

<a href="https://www.baidu.com/">百度</a>

以图片作为超链接

<a href="lastpage.htm"><img border="0" src=".\images\next.gif"></a>

target属性
在框架子窗口中如果含有超链接，当点击超链接时，目标网页显示的位置由target指定，默认是在子窗口打开。

<a href="目标网页地址" target="显示目标网页的子窗口名称">超链接文字</a>

10.列表

列表标签分为两类：有序标签和无序标签

1.有序列表

格式：

<ol type="序号类型">
	<li></li>
	<li></li>
</ol>

其中type属性指定列表项前的项目编号的样式，取值

1：阿拉伯数字（默认）
a：小写英文
A：大写英文
i：小写罗马数字
I：大写罗马数字

2.无序列表

格式：

<ul type="序号类型">
	<li></li>
	<li></li>
</ul>

type属性的取值：

disc：实心圆点
circle：空心圆点
square：实心方块

例如：

有序列表

<h4>Numbered list:</h4>
<ol>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
<li>Oranges</li>
</ol>

效果展示:

Numbered list:

Apples
Bananas
Lemons
Oranges

Letters list:

Apples
Bananas
Lemons
Oranges

Lowercase letters list:

Apples
Bananas
Lemons
Oranges

Roman numbers list:

Apples
Bananas
Lemons
Oranges

Lowercase Roman numbers list:

Apples
Bananas
Lemons
Oranges

无序列表：

<h4>Disc bullets list:</h4>
<ul type="disc">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ul>

11.表格

表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）,表格头使用<th>标签指定。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。可以控制页面布局。

基本语法：

<table>
	<caption>表格标题</caption>
		<tr>
			<th>列名1</th>
			<th>列名2</th>
		</tr>
		<tr>
			<td>数据一</td>
			<td>数据二</td>
		</tr>
	......
</table>

table标签属性：

width：表格宽度
height：表格高度
align：表格水平对齐方式
border：表格边框厚度
cellpadding：边距
cellspacing：间距
bgcolor：表格背景颜色
background：表格背景图像

tr标签属性:

align：单元格水平对齐方式
valign：单元格中内容的垂直对齐方式
bgcolor：背景颜色

td th的属性：

align：水平对齐方式
valign：垂直对齐方式
background：背景图像
bgcolor：背景颜色
colspan：横向合并单元格
rowspan：纵向和平单元格
height：高度
width：宽度

实例

1.单元格跨行（列）的表格：

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
	<th>Name</th>
	<th colspan="2">Telephone</th>
</tr>
<tr>
	<td>Bill Gates</td>
	<td>555 77 854</td>
	<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
	<th>First Name:</th>
	<td>Bill Gates</td>
</tr>
<tr>
	<th rowspan="2">Telephone:</th>
	<td>555 77 854</td>
</tr>
<tr>
	<td>555 77 855</td>
</tr>
</table>

显示效果：

Cell that spans two columns:

Name	Telephone
Bill Gates	555 77 854	555 77 855

Cell that spans two rows:

First Name:	Bill Gates
Telephone:	555 77 854
555 77 855

2.有标题的表格：

<h4>
This table has a caption,and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
	<td>100</td>
	<td>200</td>
	<td>300</td>
</tr>
<tr>
	<td>400</td>
	<td>500</td>
	<td>600</td>
</tr>
</table>

显示效果：

This table has a caption,and a thick border:

My Caption

100	200	300
400	500	600

12. 表单

表单是一个能够包含表单元素的区域。表单元素能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。

表单是用<form>元素定义的。

格式：

<form>
	<input>
	<input>
	<select></select>
	<textarea></textarea>
	......
</form>

form标签属性：

name：表单名称
method：提交方法
action：处理程序

配合form标签嵌套使用的，有<input> <select> <textarea>标签。下面分别来介绍

<input>标签

最常用的表单标签是<input>标签。<input>是单个标记，必须嵌套在表单内使用，用于定义一个输入项。主要属性有6个，即type name size value maxlength checked,其中name type属性是必选的。

格式：

<form>
	<input name="输入域名称" type="域类型" value="输入域的值">
	......
</form>

type属性的取值共有9种类型：

1. 文本域

<input type="text" name="自定义名称" maxlength="" size="" >

size用来限制此区域显示的大小
maxlength限制输入的最大字符数

2.密码域

<input type="password" name="自定义名称" maxlength="" size="" >

属性作用同上，密码域与文本域的区别是，当输入密码时区域内会显示*来代替输入的内容。

3.单选按钮

<input type="radio" name="自定义名称" value="值" checked/>

check属性设置该按钮在默认状况下是否被选中。
当需要设置多个互斥的按钮时，设置相同的name值即可。

4.复选框

<input type="checkbox" name="自定义名称" value="值" checked/>

check属性设置该按钮在默认状况下是否被选中。
当需要设置多个复选框时，可设置相同的name值。

5.提交按钮

<input type="submit" name="自定义名称" value="" />

将表单提交到服务器

6.取消按钮

<input type="reset" name="自定义名称" value="" />

将表单内的内容清除

7. 图像按钮

<input type="image" src="url"/>

使用图像代替submit按钮

8.文件域

<input type="file" name="" size="" maxlength="">

9.隐藏域

<input type="hidden" name="" size="" value="">

用户不能输入信息，用来预设某些要传递的信息

<select>标签

在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带滚动条的列表。

<select name="" size="" multiple>
	<option value="" selected>...</option>
	<option value="">...</option>
	...
</select>

select标签常用属性

name:设定下拉表名字
size：改变下拉框的大小
multiple：允许用户选择多项

option标签常用属性

selected：在初始时被选中
value：需要提交的数据

<textarea>标签

格式

<textarea name="" rows="" cols="" wrap="">
初始值
</textarea>

rows设置输入域的行数，cols设置域的列数，wrap设置是否自动换行。

综合实例：

<h2 align="center">学生信息注册</h2>
<form action="" method="post">
	姓名：<input type="text" name="name"><br>
	性别：<input type="radio" name="sex" value="男">男
	<input type="radio" name="sex" value="女">女<br>
	出生日期：<input type="text" name="birth"><br>
	学校：<input type="text" name="school"><br>
	专业：<select name="zy">
		<option selected="selected">计算机科学与技术</option>
		<option>大数据</option>
		<option>物联网</option>
	</select><br>
	体育特长：<input type="checkbox" name="tiyu" value="篮球">篮球
		<input type="checkbox" name="tiyu" value="排球">排球
		<input type="checkbox" name="tiyu" value="足球">足球
		<input type="checkbox" name="tiyu" value="游泳">游泳<br>
	上传照片：<input type="file"><br>
	密码：<input type="password"><br>
	个人介绍：<textarea name="jieshao" rows="5" cols="30"></textarea><br>
	<input type="submit" value="提交">
	<input type="reset" value="取消">
</form>

13.框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。

frameset标签

<frameset>标签定义了如何将窗口拆分成框架。每个frameset标签定义了一组行和列。行/列的值指明了每个行/列在屏幕上所占的大小。 <frame>标签定义了每个框架中放入什么文件。

语法结构：

<frameset rows="高度1，高度2.." 或者 cols="宽度1，宽度2..">
	<frame src="网页1">
	<frame src="网页2">
</frameset>

说明：

rows属性是水平分割，cols属性是垂直分割
rows是从上往下分割，cols是从左往右分割

frame标签

语法

<frame src="html文件位置" name="子窗口名称" scrolling="">

常用属性

name：指定子窗口的名称
scrolling：用于控制窗口框架中是否显示滚动条

实例：

垂直分栏：

<frameset cols="25%,50%,25%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
	<frame src="frame_c.htm">
</frameset>

水平分栏：

<frameset rows="25%,50%,25%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
	<frame src="frame_c.htm">
</frameset>

三、结语

如果这篇文章对你有所帮助，动动小手点个赞吧！！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java面试题mysql事务

下一篇：kubeadm 关闭 kubernetes

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯