HTML语言简介(一)
作者黑马
此篇的目的是想通过网页制作基础知识的简单介绍让大家对HTML语言有个总体的了解,一者不枉来中年人生一趟(总算学到点什么嘛),二者可以在发贴时偶尔突破论坛的限制,制作出更具个性化的更为精美的贴子来。当然论坛不完全开放HTML功能,但通过不断尝试,你总会找到办法的。
本篇约定:为能使代码正确显示,我将用*号加入代码中,实际使用时应当去掉这个*号,文中不再提示。另,<!-和-->之间的文字为代码注释文字(实际应用时也是这样的约定,程序将不对这些文字作任何处理)。
黑马声明:以下介绍的代码暂时不能用于论坛,应如何使用方便时黑马再作介绍。
HTML的英语全称为Hyper Text Markup Language,中文意思是超文本标识语言,简称为超文本语言。我们先来看看HTML语言的基本构架:
<html> <!-文档开始-->
<head> <!-文档头开始-->
<title>标题</title> <!-标题,将显示于浏览器左上方的标题栏中-->
</head> <!-文档头结束-->
<body> <!-文档体开始-->
文档体 <!-文档体,即在浏览器里显示的内容-->
</body> <!-文档体结束-->
</html> <!-文档结束-->
如果我们把上面的<*title>和<*/title>之间的“标题”改为“黑马教程”,把<*body>和<*/body>之间的“文档体”改为一段文字,那么,当我们把这些代码用记事本保存为.html文件之后(如:test.html),我们双击这个文件,IE将把它打开,IE左上方的标题栏将显示为:黑马教程 - Microsof Internet Explorer,IE浏览框里则是我们输入的那段文字。
从上面的代码应该可以看出,HTML文件有很多标识符,它们形式上是由相应的英文嵌在“<>”内,而且大多数成对出现(有标识开始、标识结束,结束符号为“/”)。标识符也有不成对出现的,比如插入一个换行符<*br>。标识符很多,这里不可能一一介绍,我们将在下面的举例当中所用到的标识符以注释及其他形式加以说明。
■字体修饰开始。请研究以下代码:
<html>
<head>
<title>字体设置举例</title>
</head>
<body>
<font size=5 color=blue> <!-字体修饰开始:大小和颜色-->
男女从相识到相恋,到携手走进围城,就像建立一种合伙关系,成立一家合资的婚姻公司。
</font> <!-本段字体修饰结束-->
<br> <!插入换行符-->
<font size=6 color=red><b> <!-字体改变颜色并加粗-->
论证入伙:</font></b> <!-改变字体颜色及加粗修饰结束>
<font size=5 color=blue> <!-字体改回上一段的修饰-->
合资前,男女双方要对对方的长相、学识、品德等项目进行详尽的考察。恋爱到一定程度后,认为有合资的必要,然后按照平等自愿、互惠互利、和平共处和长期合作的原则,签订一份共同投资的合同。经婚姻登记机关审核后,颁发婚姻公司的营业执照,这就标志着婚姻公司可以正式开业运行了。
</font> <!-本段字体修饰结束-->
</body>
</html>
以上代码保存为html文件后,浏览器的标题将有“字体设置举例”字样,而正文效果如下:
男女从相识到相恋,到携手走进围城,就像建立一种合伙关系,成立一家合资的婚姻公司。
论证入伙:合资前,男女双方要对对方的长相、学识、品德等项目进行详尽的考察。恋爱到一定程度后,认为有合资的必要,然后按照平等自愿、互惠互利、和平共处和长期合作的原则,签订一份共同投资的合同。经婚姻登记机关审核后,颁发婚姻公司的营业执照,这就标志着婚姻公司可以正式开业运行了。
■插入图像
由于论坛本身对贴图的大小作了处理,同时也出于方便阅读和理解,这里只简单地探讨一下如何插入图片。加入图片的格式为:<*img src = 图片地址>。你可以用本地磁盘里的图片,如:<*img src = D:\Pic\01.jpg>,如果目录正确并有01.jpg图片,那么保存为html文件后打开此文件IE里会显示这张图片,但这样的代码是不可能在网上正确显示的,你必须用正确的网址来取代D:\Pic\01.jpg。
下面代码将在网页中显示两幅图片,其中第二幅图是居中的。
<html>
<head>
<title>图像的嵌入<*/title>
</head>
<body>
<img src="D:\Pic\01.jpg"> <!-第一幅图,注意小角双引号-->
<br> <!-换行-->
<center> <!-图片居中-->
<img src="D:\pic\02.jpg"> <!-第二幅图-->
</center> <!-图片居中结束-->
</body>
</html>
效果如下(实际图片采用了网上的而不是我的硬盘里的):
今天先讲到这里——讲得多了,授课的人累,听课的人打瞌睡。下课!(值日生怎么不叫起立?!) |