HTML之简单标签

时间:2022-06-11 13:19:14

        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文件,得到如下网页:

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>

得到如下网页:

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>

得到如下网页:

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>

得到如下网页:

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之简单标签

          从上可以看出:&lt;表示<,&gt表示>,&nbsp;表示空格。

接下来看看标题标签。

<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>

得到如下网页:

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>

得到如下结果:

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>

得到如下结果:

                                            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>

得到如下结果:

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所在的位置。