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

程序员大阳

已于 2022-09-21 15:40:40 修改

阅读量1.1k

点赞数 4

分类专栏： # 零基础Java入门文章标签： html java java web

于 2017-01-24 14:11:59 首次发布

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/54707505

版权

零基础Java入门专栏收录该内容

35 篇文章 13 订阅

订阅专栏

点此查看 所有教程、项目、源码导航

接上一篇博客，还有2个标签要讲，分别为链接和表格
3，链接
链接标签<a href="xxx">yyy</a>用法跟<img>可以说非常相似，相似是必然的，html作为一种语言，当然各种标签习惯要差不多。
具体来说，yyy代表链接显示的文字内容，如<a href="">点此跳转到主页</a>。

重点是xxx部分的内容，可以链接互联网的网址，也可以链接相对路径的网页文件。
下面一个例子是点击链接标签，跳转互联网地址的例子：

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

写到这，发现<a>标签和<img>，都是在标签的一个属性（herf和src）中设置连接的资源的位置，互联网资源写网址，本地（本服务器）资源写目录和文件信息即可。
所以可想而知，对于下图目录中的html1文件要访问同目录html2、上层目录的htmlfather和子目录的htmlson，如下图写即可实现：
这里写图片描述

<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标签的压轴位置，突出其身份的尊贵。
实际上，应用设计中很多问题就是数据库——内存——显示的表格优雅投影问题，跑偏了，继续聊这次的主角<table>——表格标签。
首先以

开始必然以

结尾
其次，表格有行、有列，依照写字的习惯，先行后列，一行包含多列。行标签为 <tr>，列标签为 </td>。先行后列，一行包含多列。所以，一个最简单的显示三个学生信息的表格应该如下编码：

<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></th></thead>，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>