开发者社区> 程序员大阳> 正文

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"属性,让表格更像表格。

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

空格、换行、段落

图像

链接

表格

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java 8 简明教程
文章概览 默认接口方法 Lambda表达式 方法引用 重复注解 简单介绍 接口中有默认方法 @FunctionalInterface interface Formula { double calculate(int a); default double sqrt(int a) { return Math.
707 0
Java Web简明教程–Servlet篇[1]–手(首)写Servlet
Java Web简明教程–Servlet篇[1]–手(首)写Servlet
70 0
Web Worker 使用教程
JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。
3283 0
python 包之 PyQuery 网页解析教程
网页元素不再让你抓狂
19 0
分享30个优秀的 Photoshop 网页设计教程
PS 网页设计教程 最新20个很棒的 Photoshop 网页设计教程 分享25个很棒的网页设计教程和资源网站 最新31个非常棒的 Photoshop 网页设计教程 最新25个很棒的 Photoshop 网页设计教程分享 分享50个很棒的 Photoshop 网页背景设计教程   Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一,集图像扫描、编辑修改、图像制作、广告创意,图像输入与输出于一体的图形图像处理软件。
1086 0
PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局
作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。 本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。
871 0
Git教程4——Git标签管理
在版本回退里已经知道,每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支。截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支。
933 0
IntelliJ IDEA 12 创建Web项目 教程 超详细版
原文:IntelliJ IDEA 12 创建Web项目 教程 超详细版 IntelliJ IDEA 12 新版本发布 第一时间去官网看了下  黑色的主题 很给力 大体使用了下  对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走在路上 ... 首先要说一点,在IntelliJ IDEA里面“new Project” 就相当于我们eclipse的“workspace”,而“new Module”才是创建一个工程。
1080 0
PS网页设计教程XXVII——设计一个大胆和充满活力的作品集
作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。 本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。
944 0
Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库
前面为JSTL中的常用EL函数,后面的为具体演示实例! JSTL简介: JSTL(Java Standard Tag Library) –Java标准标签库。 SUN公司制定的一套标准标签库的规范。
1064 0
+关注
程序员大阳
努力努力再努力
591
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载