继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

程序员大阳
关注TA
已关注
手记 357
粉丝 1.5万
获赞 1523

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

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

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

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

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

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

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

<html>  
<body>  
美丽的图片:<img src="http://www.baidu.com/img/bd_logo1.png" alt="百度首页图片"></img>  
<body>  
</html>  

在IE中查看,自己的网页轻而易举的显示了百度的图片,好犀利啊。把src里面造一个东西比如src="luanqibazao.haha.jpg",alt中的文字就出来啦。
好了,src中填写图片网络地址还是so easy的,关键还是填写本地地址,如图所示,在网页TestSrc.html中要显示同目录的pic1.png,上层目录的pic3.png,更深一层目录的pic2.png,怎么显示呢。
图片描述
其实很简单,同目录在TestSrc.html直接写<img src="pic1.png"/>即可,然后对于pic2,因为folderson跟TestSrc.html同目录也可以直接写,所以为
<img src="folderson/pic2.png"/>。比较难想的是上层目录的pic3,这样写<img src="../pic3.png"/>,其中两点一斜线,表示上层目录,记住即可。可以去试下,真的都访问到了。如图所示,哈哈,猫哥太懒三张图片复制来的,都是一样的。
代码:

<html>  
<body>  
    <img src="pic1.png"/>  
    <img src="folderson/pic2.png"/>  
    <img src="../pic3.png"/>  
</body>  
</html> 

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

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP