JSP程序设计之HTML常用标签

EL(̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)

于 2023-09-25 10:30:07 发布

阅读量1.1k

点赞数 3

文章标签： java html 前端

本文链接：https://blog.csdn.net/m0_74058330/article/details/133135492

版权

一、列表标签

1、有序列表

指各列表项按一定的编号顺序显示。

列表以<ol>开始，以</ol>结束，每个列表项用<li> </li>。其语法结构如下：

<ol>
   <li>列表项</li>
   <li>列表项</li>
   .
   .
   .
</ol>

<ol>标签的属性：

type属性：用于设置编号的种类，取值如下所示：

l：编号为数字，如：1，2，3...
A：编号为大写英文字母，如：A,B,C...
a：编号为小写英文字母，如：a,b,c...
Ⅰ：编号为大写罗马字符，如：Ⅰ、Ⅱ、Ⅲ...
i：编号为小写罗马字符，如：i，ii，iii...

start属性：用于设置编号的开始序号，无论type取值是什么，start的值只能是1、2、3等整数，默认值为1。

<li>标签属性：

type属性：用于设置编号种类，使用方法同上。

value属性：用来设置该项的编号，其后各项将以此作为起始编号而递增，其值只能是1、2、3等整数，默认值为1。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表实例</title>
</head>
<body>
  Java方向核心专业课程：
  <ol type="1"> 
  <li>Java程序设计</li>
  <li>JSP程序设计</li>
  <li>Java Web框架技术</li>
  <li>数据库技术</li>
  </ol>
</body>
</html>

运行结果如下：

2、无序列表

指各列表项之间没有顺序关系，列表项显示时前面有一个项目符号。

列表以<ul>开始，以</ul>结束，每个列表项用<li> </li>来定义。其语法如下：

<ul>
   <li>列表项</li>
   <li>列表项</li>
   .
   .
   .
</ul>

<ul>标签属性：

type属性:用于设置所有列表项前的项目符号类型，其取值如下：

disc:实心圆点，默认值。
circle：空心圆点。
square：实心正方形

<li>标签属性：

type属性：用于设置当前列表项前的项目符号类型，取值同上。

实例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无序列表实例</title>
</head>
<body>
  Java方向其他专业课程：
  <ul type="disc">
    <li>计算机网络</li>
    <li type="circle">数据结构</li>
    <li type="square">专业英语</li>
  </ul>
</body>
</html>

运行结果如下：

3、自定义列表

自定义列表可以实现一种分两层的项目清单。

列表以<dl>开始，以</dl>结束，列表项用<dt></dt>标签来定义，用<dd></dd>标签来对列表项进行说明。其语法结构如下：

<dl>
  <dt> 列表项</dt>
  <dd>对列表项进行说明</dd>
  <dt> 列表项</dt>
  <dd>对列表项进行说明</dd>
  .
  .
  .
</dl>

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
  Java方向核心专业课程介绍：
  <dl>
     <dt>Java程序设计</dt>
     <dd>该课程主要讲述了...</dd>
     <dt>JSP程序设计</dt>
     <dd>该课程主要讲述了...</dd>
  </dl>
</body>
</html>

运行结果如下：

二、多媒体和超链接标签

1、插入图像

使用<img>标签可以添加.gif、.jpg、.png等格式的图像，<img>的主要属性如下图所示：

src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。
width：指定图像的宽度，单位为像素。
height：指定图像的高度，单位为像素。
hspace：指定图像水平方向的边沿空白，单位为像素。
vspace：指定图像垂直方向的边沿空白，单位为像素。
border：指定图像的边框厚度。
align：当文字和图像并排放置时，指定图像与文本行的对齐方式，其属性值可以是：top（与文本行顶部对齐）、center（水平居中对齐）、middle（垂直居中对齐）、bottom（底部对齐，默认值）、left（图像左对齐）、right（图像右对齐）。
alt：用于描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性作为提示信息显示。

2、插入视频

使用<embed>标签可以插入视频，主要属性如下图所示：

src：指定视频的源文件路径。
width：视频宽度。
height：视频高度。

3、插入背景音乐

使用<embed>标签可以插入格式为.way、.mid、.mp3的背景音乐。

使用<a></a>标签来创建超链接。其属性如下所示：

href：指定连接地址，若是连接到网站外部页面，必须为URL地址；若是连接到网站内部页面，只需要指明该页面的绝对路径或相对路径。
target：指定显示链接的窗口，可取：_blank（浏览器总在一个新打开，未命名的窗口中载入并显示目标文档）、_parent（目标文档载入当前窗口的父窗口中）、_self（默认值，目标窗口载入并显示在当前窗口）、_top（清除当前窗口所有被包含的框架并将目标文档载入整个浏览器窗口）。

三、表格标签

使用<html></html>标签可以进行一个完整表格的声明，<tr></tr>标签用来定义表格中的一行，<th></th>标签用来定义表格中的列标题单元格，<td></td>标签用来定义行的一个单元格。

<tr></tr>只能放在<table></table>之间使用，<th></th>、<td></td>只能放在<tr></tr>标签之间使用。定义格式如下所示：

<table>
  <tr>
  <th>表格第一列标题</th>
  <th>表格第二列标题</th>
  .
  .
  .
  </tr>
  <tr>
  <td>表格第一行第一个单元格的内容</td>
  <td>表格第一行第二个单元格的内容</td>
  .
  .
  .
  </tr>
</table>

1、<table>常用属性

border：设置表格边框的宽度，值为非负数，如果为0表示边框不可见，单位为像素。
cellspacing：设置单元格边框到表格边框的距离，单位为像素。
cellpadding:设置单元格内的文字到单元格边框的距离，单位为像素。
width：设置表格边框的宽度，其值为整数，单位为像素；也可以为相对于页面的宽度的百分比。
height：设置表格边框的高度，取值方式与width相同。
bgcolor：设置表格背景颜色，取值可以为十六进制代码，也可以是英文字母。
bordercolor：设置表格边框颜色。
align：设置表格水平方向的对齐方式，可取：center、right和left。
valign设置表格在垂直方向上的对齐方式，可取：top、middle、baseline。

2、<tr>常用属性

colspan：设置单元格所占的列数，默认值为1。
rowspan：设置单元格所占行数，默认值为1。
background：设置单元格背景图像。
width：设置单元格宽度。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签实例</title>
</head>
<body>
  <table border="1" width="90%" bordercolor="red" cellpadding="2">
    <tr height="50" valign="middle">
     <th width="33%" colspan="2">Java方向</th>
     <th width="36%" colspan="2">软测方向</th>
     <th width="36%" colspan="2">.NET方向</th>
    </tr>
    
    <tr align="center">
      <td width="16%">Java程序设计</td>
      <td width="16%">JSP程序设计</td>
      <td width="17%">Java程序设计</td>
      <td width="17%">JSP程序设计</td>
      <td width="17%">C#程序设计</td>
      <td width="17%">ASP.NET程序设计</td>      
    </tr>
    
    <tr align="center">
      <td width="16%">Java Web框架技术</td>
      <td width="16%">数据库技术</td>
      <td width="16%">软件测试理论</td>
      <td width="16%">软件测试技术</td>
      <td width="16%">.NET Framework技术</td>
      <td width="16%">数据库技术</td>      
    </tr>
  </table>
</body>
</html>

运行结果如下：