位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML代码教程

提问人:刘团圆发布时间:2020-10-10

教程一、基本标志

1.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

    Html是英文 HyperText Markup Language 的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html.htm,它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件,既简单又方便,它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对),因此在Html文档中这样的标志对都必须是成对使用的。在此教程中,我先讲一下Html的基本标志:

 

1.<html></html>

    <html>标志用于Html文档的最前边,用来标识Html文档的开始。而</html>标志恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束,两个标志必须一块使用。

 

2.<head></head>

    <head></head>构成Html文档的开头部分,在此标志对之间可以使用<title>< /title><script></script>等等标志对,这些标志对都是描述Html文档相关信息的标志 对,<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。

 

3.<body></body>

    <body></body>Html文档的主体部分,在此标志对之间可包含<p>< /p><h1></h1><br><hr>等等众多的标志,它们所定义的文本、图像等将 会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性:

属性 用途 示例

<body bgcolor="#rrggbb"> 设置背景颜色。 <body bgcolor="red">红色背景

<body text="#rrggbb"> 设置文本颜色。 <body text="#0000ff">蓝色文本

<body link="#rrggbb"> 设置链接颜色。 <body link="blue">链接为蓝色

<body vlink="#rrggbb"> 设置已使用的链接的颜色。 <body vlink="#ff0000">

<body alink="#rrggbb"> 设置正在被击中的链接的颜色。 <body alink="yellow">

    说明:以上各个属性可以结合使用,如<body bgcolor="red" text="#0000ff">。引号内的rrggbb是 用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色,如#ff0000对应的是红色。此外,还可以使用Html语言所给定的常量名来表示颜 色:BlackWhiteGreenMaroonOliveNavyPurpleGrayYellowLimeAguaFuchsiaSilverRedBlueTeal,如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。

4.<title></title>

    使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,那些信息一般是网页的“主题”,要将您的网页的主题显示到浏览器的顶部其实很简 单,只要在<title></title>标志对之间加入您要显示的文本即可。注意:<title>< /title>标志对只能放在<head></head>标志对之间。

 

    下面是一个综合的例子,仔细阅读,您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。

1 Html文档中基本标志的使用

<html>

 

<head>

<title>显示在浏览器最上边蓝色条中的文本</title>

</head>

 

<body bgcolor="red" text="blue">

<p>红色背景、蓝色文本</p>

</body>

 

</html>

 

教程二、格式标志

1.<p></p>

2.<br>

3.<blockquote></blockquote>

4.<dl></dl><dt></dt><dd></dd>

5.<ol></ol><ul></ul><li></li>

6.<div></div>     

上一个教程中我们讲了Html文档的基本标志,但我们还不知道怎样在浏览器中显示文本之类的东西,这正是我们在教程二中将要谈到的。在学习之前,必须强调 一下,我们这个教程中所讲的格式标志统统都是用于<body></body>标志对之间的。

 

1.<p></p>

    <p></p>标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外,<p>标志还可以使用align属性,它用来说明对齐方式,语法是:<p align=""></p>align可以是Left(左对齐)Center(居中)Right(右对齐)三个值中的任何一个。如<p></p>表示标志对中的文本使用居中的对齐方式。

 

2.<br>

    <br>是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行,这么一说我想您该会使用了吧。在<br>的使用上还有一定的技巧,如果您把<br>加在<p></p>标志对的外边,将创建一个大的回车换行,即<br>前边和后边的文本的行与行之间的距离比较大,若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小,您不妨试试看。

 

3.<blockquote></blockquote>

    <blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。

 

4.<dl></dl><dt></dt><dd></dd>

    <dl></dl>用来创建一个普通的列表,<dt></dt>用来创建列表中的上层项目,<dd></dd>用来创建列表中最下层项目,<dt></dt><dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了:

 

2 创建一个普通列表

<html>

<head>

<title>一个普通列表</title>

</head>

<body text="blue">

<dl>

  <dt>中国城市</dt>

    <dd>北京 </dd>

    <dd>上海 </dd>

    <dd>广州 </dd>

  <dt>美国城市</dt>

    <dd>华盛顿 </dd>

    <dd>芝加哥 </dd>

    <dd>纽约 </dd>

</dl>

</body>

</html>

 

    此例在浏览器中的显示如下:

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

 

5.<ol></ol><ul></ul><li></li>

    <ol></ol>标志对用来创建一个标有数字的列表;<ul></ul>标志对用来创建一个标有圆点的列表;<li></li>标志对只能在<ol></ol><ul></ul>标志对之间使用,此标志对用来创建一个列表项,若<li></li>放在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点。请看下边的例子:

 

3 标有数字或圆点的列表

<html>

<head>

<title></title>

</head>

 

<body text="blue">

<ol>

<p>中国城市 </p>

<li>北京 </li>

<li>上海 </li>

<li>广州 </li>

</ol>

 

<ul>

<p>美国城市 </p>

<li>华盛顿 </li>

<li>芝加哥 </li>

<li>纽约 </li>

</ul>

</body>

</html>

 

    此例在浏览器中的显示如下:

中国城市

1. 北京

2. 上海

3. 广州

美国城市

? 华盛顿

? 芝加哥

? 纽约

6.<div></div>

    <div></div>标志对用来排版大块Html段落,也用于格式化表,此标志对的用法与<p></p>标志对非常相似,同样有align对齐方式属性,读者可以自己试试看。

教程三、文本标志

1.<pre></pre>

2.<h1></h1>……<h6></h6>

3.<b></b><i></i><u></u>

4.<tt></tt><cite></cite><em></em><strong></strong>

5.<font></font>     

上一个教程中我们已经讲了如何在浏览器中输出文本,以及文本输出的格式,这个教程中我们将谈一谈文本输出的字体,如斜体、黑体字、下加一划线等等。在本教程的最后给出了一个文本标志的综合示例,希望读者能认真阅读。


继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部