猫哥带你去战斗——Java Web开发——网页篇[3]——继续基本标签
2017-01-24 14:11
246 查看
接上一篇博客,还有2个标签要讲,分别为链接和表格
3,链接
链接标签
具体来说,yyy代表链接显示的文字内容,如
重点是xxx部分的内容,可以链接互联网的网址,也可以链接相对路径的网页文件。
下面一个例子是点击链接标签,跳转互联网地址的例子:
写到这,发现
所以可想而知,对于下图目录中的html1文件要访问同目录html2、上层目录的htmlfather和子目录的htmlson,如下图写即可实现:
到此,非常简便的就实现了网页跳转,也就是传说中的“超级链接”功能。
4,表格
表格是非常重要的,缺一不可的标签。
前文猫哥说过一个很重要的观点,当前阶段,程序设计的根本就是设计规则,规则可以用来处理重复的问题。好了,关键就是重复,有时候,重复需要显示在界面上。例如,要显示所有的学生信息(学号、姓名、性别)在一个网页上,每个学生显示的内容是一样的,但是要重复显示多个学生,此时,就需要表格了。所以我把表格
d9ea
放在了不得不将的html标签的压轴位置,突出其身份的尊贵。
实际上,应用设计中很多问题就是数据库——内存——显示的表格优雅投影问题,跑偏了,继续聊这次的主角
首先以
开始必然以
结尾
其次,表格有行、有列,依照写字的习惯,先行后列,一行包含多列。行标签为
上面的代码运行下,就出现了一个完美的表格,依然很简单很符合我们的惯性逻辑。但是好像少了表头啊,001、002是啥意思?
那就添加上表头,代码为
这样,就是个有头有脸的网页了,猫哥还偷偷添加了border=”1”属性,让表格更像表格。
好了,至此网页标签介绍完毕,以后前端打天下就靠这几位虎将:
空格、换行、段落
图像
链接
表格
其他的都是小喽啰,稍后再叙!
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,表格
表格是非常重要的,缺一不可的标签。
前文猫哥说过一个很重要的观点,当前阶段,程序设计的根本就是设计规则,规则可以用来处理重复的问题。好了,关键就是重复,有时候,重复需要显示在界面上。例如,要显示所有的学生信息(学号、姓名、性别)在一个网页上,每个学生显示的内容是一样的,但是要重复显示多个学生,此时,就需要表格了。所以我把表格
d9ea
放在了不得不将的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”属性,让表格更像表格。
好了,至此网页标签介绍完毕,以后前端打天下就靠这几位虎将:
空格、换行、段落
图像
链接
表格
其他的都是小喽啰,稍后再叙!
相关文章推荐
- 猫哥带你去战斗——Java Web开发——网页篇[2]——基本标签
- 猫哥带你去战斗——Java Web开发——网页篇[4]——表单
- 猫哥带你去战斗——Java Web开发——网页篇[5]——样式
- 猫哥带你去战斗—Java Web开发—Servlet篇[3]—获取网页数据
- 猫哥带你去战斗——Java Web开发——网页篇[0]——第一个网页,第一次访问
- 猫哥带你去战斗——Java Web开发——网页篇[6]——布局
- 猫哥带你去战斗——Java Web开发——Java篇[0]——小谈动态网页
- 猫哥带你去战斗——Java Web开发——Java篇[3]——常用类型
- 猫哥带你去战斗—Java Web开发—Servlet篇[6]—漂亮的终结篇
- 猫哥带你去战斗—Java Web开发—Java篇[14]—数据库操作简化
- 猫哥带你去战斗——Java Web开发——开发环境介绍[3]——图文安装流程
- 猫哥带你去战斗——Java Web开发——Java篇[9]——使用SQL语句实现增删改查
- 猫哥带你去战斗—Java Web开发—Servlet篇[0]—Servlet是干嘛的
- 猫哥带你去战斗——Java Web开发——Java篇[11]——数据库连接池
- 猫哥带你去战斗——Java Web开发——开发环境介绍[0]
- 猫哥带你去战斗——Java Web开发——Java篇[4]——常用容器
- 猫哥带你去战斗——Java Web开发——Java篇[5]——大王,有异常!
- 猫哥带你去战斗——Java Web开发——开发环境介绍[2]
- 猫哥带你去战斗—Java Web开发—Java篇[12]—使用连接池的MySQL操作类
- 猫哥带你去战斗——Java Web开发——前言[0]