首页手记猫哥带你去战斗——Java...

猫哥带你去战斗——Java Web开发——网页篇[2]——基本标签

标签：

Java Html/CSS

html最基本的就是标签，本章介绍最最基本的几个标签，其实也够用了，其他的碰到的时候再百度下，也不迟嘛。
本章主要内容：
空格、换行、段落
图像
链接
表格
是不是觉得内容不少，其实内容放在一个章节里面真是超级多啊，且听猫哥细细道来。

1，空格、换行、段落
很多人看了就要哈哈大小了，这个简单，空格是键盘space、换行回车、段落嘛前后回车，So Easy！确实很Easy，但是全部不是这样的，还是稍微有点规则的。
你以为下面这个，就是换行、段落了吗？

<html>  
<body>  
猫哥      很帅（这一行有6个空格）  
  很酷的换行(这一行有2个空格)  
  真的很帅(这一行有2格空格)  
<body>  
</html>

打开MyEclipse，继续在WebRoot下建立一个LearnLabel.html。然后敲上如上代码，启动Tomcat，在浏览器地址栏输入【http://localhost:8080/WebSiteFirst/LearnLabel.html】，你会发现空格永远都只有一个、换行也没换、段落也么有啊。

所以，此处猫哥隆重介绍  
登场， 表示一个空格， 表示换行，因为只表示换行，所以中间没有内容。 简写成 ，...标签中间表示一个段落。
如此，要想实现真实的意图，代码如下：

<html>  
<body>  
猫哥&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很帅（这一行有6个空格）<br/>
&nbsp;&nbsp;很酷的换行(这一行有2个空格)<br/>
<p>&nbsp;&nbsp;真的很帅(这一行有2个空格)</p>  
<body>  
</html>

你的，明白了？好像 比简单点哦，为啥不都用 ，哈哈，暂不解释，会用就行。
2，图像
没有图像的网页，太单调了，好吧，不过在html语言中，图像的实现是那么的简单，简单到让人发指，而且一个简简单单的<img>标签，竟有如此强大的功力，实在让人感叹。（猫哥是做C/S结构程序出身的，故有此感概，在桌面应用程序中，图片的实现还是挺有难度的哦）。
好的，先了解下<img>的用法，如：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx" alt="yyy">，其中xxx处填写图片的网络地址或者本地地址、yyy填写图片找不到时候的代替文字，图片找不到的可能性还是非常大的，比如你用的本机的图片，误删除了呢?网上的图片，被删除了呢，所以建议alt还是写上为好。
来个例子，先打开百度首页(www.baidu.com)，右键百度图标，复制（IE10），后者复制图片地址（chrome），地址为：http://www.baidu.com/img/bd_logo1.png。
所以构造网页：

<html>  
<body>  
美丽的图片：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.baidu.com/img/bd_logo1.png" alt="百度首页图片"></img>  
<body>  
</html>

在IE中查看，自己的网页轻而易举的显示了百度的图片，好犀利啊。把src里面造一个东西比如class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="luanqibazao.haha.jpg"，alt中的文字就出来啦。
好了，src中填写图片网络地址还是so easy的，关键还是填写本地地址，如图所示，在网页TestSrc.html中要显示同目录的pic1.png，上层目录的pic3.png，更深一层目录的pic2.png，怎么显示呢。

其实很简单，同目录在TestSrc.html直接写<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pic1.png"/>即可，然后对于pic2，因为folderson跟TestSrc.html同目录也可以直接写，所以为
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="folderson/pic2.png"/>。比较难想的是上层目录的pic3，这样写<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../pic3.png"/>，其中两点一斜线，表示上层目录，记住即可。可以去试下，真的都访问到了。如图所示，哈哈，猫哥太懒三张图片复制来的，都是一样的。
代码：

<html>  
<body>  
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pic1.png"/>  
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="folderson/pic2.png"/>  
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../pic3.png"/>  
</body>  
</html>

好了，先到这里，剩下的以后再叙。

点击查看更多内容