当前位置:文档之家› HTML基本语法

HTML基本语法

Html的基本语法1.1 Html概况1.1.1 什么是HtmlHtml英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。

是所有的internet站点的共同的语言,所有的页面都是以Html格式的文件为基础,再加上其他语言工具(例JavaScript、VBScript等)构成。

用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台。

Html文件扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。

Html语言使用标签对的方法编写文件,它通常使用<标签名></标签名>来表示标签的开始和结束。

在Html文档中这样的标签对一般是成对使用的。

1.1.2 为什么要学习Html通过前面的学习我们知道,Micromedia公司的Dreamweaver是“所见即所得”的网页制作工具,使用它可以直接开发网页,而不用费劲的书写代码,这使得用户在没有Html语言基础的情况下,照样可以设计网页,而相应的Html文档由开发工具自动编写,这是网页图形编辑工具的最大优点,同时也是它最大的不足。

受到图形编辑工具自身的约束,将产生大量的垃圾代码。

所以,我们应该在掌握图形编辑工具的基础上进一步学会HTML语言,从而知道哪些是垃圾代码,消除无用的代码,制作出高质量的网页。

1.2 Html文档的结构超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。

<HTML><HEAD>头部信息</HEAD><BODY>文档主体,正文部分</BODY></HTML>其中<HTML>在最外层,表示这对标记间的内容是HTML文档。

我们还会看到一些网页省略<HTML>标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。

<HEAD>之间包括文档的头部信息,如文档总标题等,若不需要头部信息则可省略此标记。

<BODY> 标记一般不能省略,它表示正文内容的开始。

下面是一个最基本的超文本文档的源代码:<HTML><HEAD><TITLE>网页标题</TITLE> </HEAD><BODY><H3>欢迎光临我的主页</H3> <BR><HR>这是一个我的第一个网页</BODY></HTML>━┓┃文件头━┛━┓┃┃┃┃文件体┃┃━┛1.3 标签的格式1.3.1 标签的作用HTML标签是组成HTML文档元素,每一个标签描述了一个功能。

HTML标签两端有两个包括字符:“<”和“>”,这两个包括字符被称为角括号。

HTML标签一般成对出现,比如<table>和</table>。

无斜杠的标签的为开始标签,有斜杠的为结束标签,在开始和结束标签之间的对象是元素内容。

如<table>表示一个表格的开始,</table>表示一个表格的结束。

HTML标签是大小写无关的,但我们习惯用小写。

1.3.2 标签的分类:标签分为单标签,双标签两种。

单标签:只需单独使用就能完整地表达意思,这类标记的语法是:< 标签名称>最常用的单标签是<BR>, 它表示换行。

双标签:它由“始标签”和“尾标签”两部分构成,必须成对使用,其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标签告诉Web浏览器在这里结束该功能。

始标签前加一个斜杠(/)即成为尾标记。

这类标记的语法是:<标签> 内容</ 标签>其中“内容”部分就是要被这对标记施加作用的部分1.3.3 标签的属性:为了增强标签的功能,许多单标记和双标记的始标记内可以包含一些属性,其语法是:<标签名字属性1=“属性值1”属性2=“属性值2”属性3=“属性值3”… > 各属性之间无先后次序,属性值应该被包含在引号中,常用双引号,但是单引号也可以使用,在有些情况下,比如说属性值本身包含引号,就得使用单引号。

比如:name='John "ShotGun" Nelson'。

注意:中文引号跟英文引号是不一样的。

上面所指的引号都是英文状态下的引号,属性也可省略(即取默认值)。

1.4 基本标签1.4.1 <html></html> 用于创建Html文档<html>标签用于Html文档的最前边,用来标识Html文档的开始。

而</html>标签恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束,这对标签必须成对使用。

1.4.2 <head></head><head>和</head>构成Html文档的头部分,在此标签对之间可以使用<title></title>、<script></script>等标签对,这些标签对都是描述Html文档头部信息的标签对,<head></head>标签对之间的内容是不会在浏览器的框内显示出来的。

这对标签必须成对使用。

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

注意:<title></title>标签对只能放在<head></head>标签对之间。

1.4.4 <body></body><body></body>是Html文档的主体部分,在此标签对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等众多的标签,它们所定义的文本、图像等将会在浏览器的框内显示出来。

该标签必须成对使用。

<body>标签中还可以有以下属性:色彩rrggbb是用16 进制的红-绿-蓝(red-green-blue, RGB) 值来表示。

例: body.html<html><head><title>唐诗</title></head><body bgcolor="blue" text="yellow" >静晚思<br>床前明月光,疑是地上霜。

<br>举头望明月,低头叫故乡。

<br></body.></html>1.5 格式标签1.5.1 段落标签<p> </p>格式:<p align=# >说明:</p>标签是用来创建一个段落,在此标签之间加入的文本将按照段落的格式显示在浏览器上。

HTML自动在一个段落前后各添加一个空行。

align可以控制段落的对齐方式,取值为:Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。

例:<body><p align=”center”>浣溪沙</p><p>一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。

无可奈何花落去,似曾相识燕归来。

小园香径几徘徊。

</p></body>1.5.2 换行标签<br>当需要结束一行,并且不想开始新段落时,使用<br>标签。

<br>标签不管放在什么位置,都能够强制换行。

它是单标签。

例:<body><p align=”center”>浣溪沙</p><p>一曲新词酒一杯,去年天气旧亭台,<br>夕阳西下几时回。

无可奈何花落去,<br> 似曾相识燕归来。

小园香径几徘徊。

</p></body>1.5.3 文章标题标签Hn一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签<Hn>,其中n为标题的等级,HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列出所有等级的标题:〈H1>…</H1>第一级标题〈H2>…</H2>第二级标题〈H3>…</H3>第三级标题〈H4>…</H4>第四级标题〈H5>…</H5>第五级标题〈H6>…</H6>第六级标题例:<body>这是一行普通文字<P>〈H1>一级标题</H1>〈H2>二级标题</H2>〈H3>三级标题</H3>〈H4>四级标题</H4>〈H5>五级标题</H5>〈H6>六级标题</H6></body>1.5.4 预格式化文本<pre></pre>为控制换行和空格,可以预先设定好文本的格式例:<body><pre> 浣溪沙一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。

无可奈何花落去,似曾相识燕归来。

小园香径几徘徊。

</pre></body>1.5.5 环绕标签格式: <marquee direction=# bihavior=* loop=数字scrollamount=数字scrolldelay=数字scrollamount=数字height=数字width=数字> ... </marquee>说明:方向属性direction=# #=left,right,up,down例:<marquee direction=left>啦啦啦,我从右向左移!</marquee><marquee direction=right>啦啦啦,我从左向右移!</marquee>方式属性bihavior=* 8=scroll,slide,alternate例:<marquee behavior=scroll>啦啦啦,我一圈一圈绕着走!</marquee><marquee behavior=slide>啦啦啦,我只走一次就歇了!</marquee><marquee behavior=alternate>啦啦啦,我来回走耶!</marquee>循环次数loop,若未指定则循环不止(infinite)速度属性scrollamount=数字延时属性scrolldelay=数字例:<marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee> 面积属性height=数字width=数字例:<marquee height=40 width=50% bgcolor=”red”>啦啦啦,我会移动耶!</marquee>这些属性可以单独使用,也可混合使用,下面是一个综合实例:例:制作滚动的新闻<body><marquee id="a" behavior="scroll" direction="up" height="150" width="150" bgcolor="#FFCC00" scrollamount="2" onmouseover="a.stop()" onmouseout="a.start()"> <p>当鼠标指向时停止当鼠标移过时滚动<br>当鼠标指向时停止当鼠标移过时滚动<br>当鼠标指向时停止当鼠标移过时滚动<br></p></marquee></body>其中id为这段文本的名称,要注意的是一个环绕标签只对一个段落起作用。

相关主题