HTML之简单标签_html 简单标签-CSDN博客

本文链接：https://blog.csdn.net/carson0408/article/details/79586243

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>

得到如下网页：

从上可以看出：<表示<,&gt表示>， 表示空格。

接下来看看标题标签。

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