html全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。html是最基本的网页语言,它具有简易性、可扩展性、平台无关性、通用性等特点。本文主要来讲解html的一些最基本的标签。
1.基本格式
平时看到的html语言的一个基本格式就如下所示,整体的框架是这样的,然后通过不断往里面添加更多的标签,从而实现网页。
<html>
<head><title></title></head>
<body></body>
</html>
通过以下代码进行演示:
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> hello,everyone!this is the area for us to learn about html</body></html>
直接点击html文件,得到如下网页:
从上面可以知道<head></head>表示网页的头部,可以用<title></title>添加标题。另外,网页正文部分,用<body></body>来添加内容。
2.样式与特殊字符
首先样式主要指字的大小,字的颜色等等。<font></font>可以对字体进行修饰:
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <font size="5" color="red" face="arial"> hello,everyone!this is the area for us to learn about html </font></body></html>
得到如下网页:
再通过b、u、i、s等标签对文字样式再做修饰。代码如下:
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <b>hello,everyone!this is the area for us to learn about html</b><br/> <u>hello,everyone!this is the area for us to learn about html</u><br/> <i>hello,everyone!this is the area for us to learn about html</i><br/> <s>hello,everyone!this is the area for us to learn about html</s><br/> </body></html>
得到如下网页:
可以看出b是加粗,u是下划线,i是斜体,s是删除线。
了解一下对于文章内容布局的span、div等
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <span>hello,everyone!</span> <span>this is the area for us to learn about html</span> <div>hello,everyone!</div> <div>this is the area for us to learn about html</div> </body></html>
得到如下网页:
根据结果可以看出span还有空格的作用,而div则有换行的作用。
接下来来看看特殊符号的作用:
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <hello,everyone!> this is the area for us to learn about html</span> </body></html>
得到如下网页:
从上可以看出:<表示<,>表示>, 表示空格。
接下来看看标题标签。
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <h1 align="center">HTML</h1> hello,everyone!this is the area for us to learn about html</body></html>
得到如下网页:
<h1/>是标题标签,<h2/>等也是标题标签,数字表示字体大小。
3.列表标签
定义列表:<dl></dl> 有序列表:<ol></ol> ul标签:<ul></ul>
<html> <head> <title>HTML</title> </head> <body> <!-- 列表标签 --> <dl> <dt>部门</dt> <dd>财务部</dd> <dd>学工部</dd> <dd>人事部</dd> </dl> <hr size="10" color="black"/> <!-- 有序列表 --> <ol type="a"> <title>部门</title> <li>财务部</li> <li>学工部</li> <li>人事部</li> </ol> <hr/> <!-- 无序列表 --> <ul type="square"> <li>财务部</li> <li>学工部</li> <li>人事部</li> </ul> </body></html>
得到如下结果:
定义列表中<dt/>表示标题,<dd/>来表示内容;有序列表用<li ></li>表示内容,<ol type=""></ol>中type值为1时则阿拉伯数字顺序,为a则字母顺序,i则为罗马数字;ul标签中<ul type=></ul>表示标签,其中type有disc、square、circle等取值,<li></li>修饰每条记录。
4.图像标签
图像标签用<img src= width= height= alt=>,其中src表示图像路径,width则表示宽,height表示高度,alt则表示当图片显示不出的时候替代的字符。
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <img src="img/w02.jpg" width="100" height="150" alt="此图有误"/></body></html>
得到如下结果:
5.超链接标签
<a href=""></a>和<a name=""></a>来表示超链接。
以下代码是使用<a href="">的示例。
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <a href="http://blog.csdn.net/carson0408"/>点击进入博客</a></body></html>
得到如下结果:
点击上面的超链接便可进入一个博客。
使用<a name=></a>的示例。
<html><head> <title size="10" color="red">welcome to HTML</title></head><body> <a name="top">welcome</a> <a href="#top"/>load in</a></body></html>
使用<a name="top"></a>可以标记位置,<a href="#top">xxx</a>点击href便可回到top所在的位置。