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>
登场,
表示一个空格,<br/>
表示换行,因为只表示换行,所以中间没有内容。<br></br>
简写成<br/>
,<p>...</p>
标签中间表示一个段落。
如此,要想实现真实的意图,代码如下:
<html>
<body>
猫哥 很帅(这一行有6个空格)<br/>
很酷的换行(这一行有2个空格)<br/>
<p> 真的很帅(这一行有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>
好了,先到这里,剩下的以后再叙。