Java Web开发–网页篇[3]–继续基本标签

接上一篇博客,还有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>

这样,就是个有头有脸的网页了,猫哥还偷偷添加了border="1"属性,让表格更像表格。
好了,至此网页标签介绍完毕,以后前端打天下就靠这几位虎将:
空格、换行、段落
图像
链接
表格
其他的都是小喽啰,稍后再叙!


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页