Java Web简明教程–网页篇[3]–继续基本标签

简介: Java Web简明教程–网页篇[3]–继续基本标签

点此查看全部文字教程、视频教程、源代码https://studyingpanda.blog.csdn.net/article/details/105329926

接上一篇博客,还有2个标签要讲,分别为链接和表格

3,链接

链接标签yyy用法跟可以说非常相似,相似是必然的,html作为一种语言,当然各种标签习惯要差不多。

具体来说,yyy代表链接显示的文字内容,如点此跳转到主页


重点是xxx部分的内容,可以链接互联网的网址,也可以链接相对路径的网页文件。

下面一个例子是点击链接标签,跳转互联网地址的例子:

<html>
  <head>
    <title>html1.html</title>
  </head>
  <body>
     <a href="http://www.baidu.com/">点此跳转百度</a><br>
  </body>
</html>

写到这,发现标签和,都是在标签的一个属性(herf和src)中设置连接的资源的位置,互联网资源写网址,本地(本服务器)资源写目录和文件信息即可。

所以可想而知,对于下图目录中的html1文件要访问同目录html2、上层目录的htmlfather和子目录的htmlson,如下图写即可实现:


image.png

<html>
  <head>
    <title>网页1</title>
  </head>
  <body>
    <a href="folderson/htmlson.html">点此跳转子目录下网页</a>
    <a href="html2.html">点此跳转同目录网页</a>
    <a href="../htmlfather.html">点此跳转上级目录网页</a>
  </body>
</html>


到此,非常简便的就实现了网页跳转,也就是传说中的“超级链接”功能。

4,表格

表格是非常重要的,缺一不可的标签。

前文猫哥说过一个很重要的观点,当前阶段,程序设计的根本就是设计规则,规则可以用来处理重复的问题。好了,关键就是重复,有时候,重复需要显示在界面上。例如,要显示所有的学生信息(学号、姓名、性别)在一个网页上,每个学生显示的内容是一样的,但是要重复显示多个学生,此时,就需要表格了。所以我把表格放在了不得不将的html标签的压轴位置,突出其身份的尊贵。

实际上,应用设计中很多问题就是数据库——内存——显示的表格优雅投影问题,跑偏了,继续聊这次的主角——表格标签。

首先以


开始必然以

结尾

其次,表格有行、有列,依照写字的习惯,先行后列,一行包含多列。行标签为

,列标签为 。先行后列,一行包含多列。所以,一个最简单的显示三个学生信息的表格应该如下编码:

 

<html>
  <head>
    <title>测试</title>
  </head>
  <body>
    <table>
       <tr>
        <td>001</td>
         <td>张三</td>
        <td>男</td>
      </tr>
      <tr>
        <td>002</td>
        <td>李四</td>
        <td>女</td>
      </tr>
    </table>
  </body>
</html>

上面的代码运行下,就出现了一个完美的表格,依然很简单很符合我们的惯性逻辑。但是好像少了表头啊,001、002是啥意思?

那就添加上表头,代码为,thead表示表头,th表示表头的列标题,所以上述代码再次完善下为:

<html>
  <head>
    <title>测试</title>
  </head>
  <body>
    <table border="1">
      <thead>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      </thead>
      <tr>
        <td>001</td>
        <td>张三</td>
        <td>男</td>
      </tr>
      <tr>
        <td>002</td>
        <td>李四</td>
        <td>女</td>
      </tr>
    </table>
  </body>
</html>

这样,就是个有头有脸的网页了,猫哥还偷偷添加了border="1"属性,让表格更像表格。

好了,至此网页标签介绍完毕,以后前端打天下就靠这几位虎将:

空格、换行、段落

图像

链接

表格

其他的都是小喽啰,稍后再叙!


相关文章
|
25天前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
3天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
17天前
|
NoSQL Java 关系型数据库
Liunx部署java项目Tomcat、Redis、Mysql教程
本文详细介绍了如何在 Linux 服务器上安装和配置 Tomcat、MySQL 和 Redis,并部署 Java 项目。通过这些步骤,您可以搭建一个高效稳定的 Java 应用运行环境。希望本文能为您在实际操作中提供有价值的参考。
95 26
|
26天前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
48 6
Spring Boot 入门:简化 Java Web 开发的强大工具
|
24天前
|
安全 Java 编译器
Kotlin教程笔记(27) -Kotlin 与 Java 共存(二)
Kotlin教程笔记(27) -Kotlin 与 Java 共存(二)
|
24天前
|
Java 开发工具 Android开发
Kotlin教程笔记(26) -Kotlin 与 Java 共存(一)
Kotlin教程笔记(26) -Kotlin 与 Java 共存(一)
|
1月前
|
Java 编译器 Android开发
Kotlin教程笔记(28) -Kotlin 与 Java 混编
Kotlin教程笔记(28) -Kotlin 与 Java 混编
33 2
|
1月前
|
Java Maven Spring
Java Web 应用中,资源文件的位置和加载方式
在Java Web应用中,资源文件如配置文件、静态文件等通常放置在特定目录下,如WEB-INF或classes。通过类加载器或Servlet上下文路径可实现资源的加载与访问。正确管理资源位置与加载方式对应用的稳定性和可维护性至关重要。
59 6
|
1月前
|
存储 安全 搜索推荐
理解Session和Cookie:Java Web开发中的用户状态管理
理解Session和Cookie:Java Web开发中的用户状态管理
74 4
|
23天前
|
Java 数据库连接 编译器
Kotlin教程笔记(29) -Kotlin 兼容 Java 遇到的最大的“坑”
Kotlin教程笔记(29) -Kotlin 兼容 Java 遇到的最大的“坑”
42 0