HTML的基本语法_第1页
HTML的基本语法_第2页
HTML的基本语法_第3页
HTML的基本语法_第4页
HTML的基本语法_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Html的基本语法1.1 Html概况1.1.1 什么是HtmlHtml英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。是所有的internet站点的共同的语言，所有的页面都是以Html格式的文件为基础，再加上其他语言工具（例JavaScript、VBScript等）构成。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。签的开始和结束。在Html文档中这样的标签对一般是成对使用的。1.1.2 为什么要学习Html通过前面的学习我们知道，Micromedia公司的Dreamweaver是“所见即所得

2、”的网页制作工具，使用它可以直接开发网页，而不用费劲的书写代码，这使得用户在没有Html语言基础的情况下，照样可以设计网页，而相应的Html文档由开发工具自动编写，这是网页图形编辑工具的最大优点，同时也是它最大的不足。受到图形编辑工具自身的约束，将产生大量的垃圾代码。所以，我们应该在掌握图形编辑工具的基础上进一步学会HTML语言，从而知道哪些是垃圾代码，消除无用的代码，制作出高质量的网页。1.2 Html文档的结构超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。<HTML><HEAD>头 部 信 息 <

3、;/HEAD><BODY> 文 档 主 体， 正 文 部 分 </BODY></HTML>其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些网页省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD>之间包括文档的头部信息，如文档总标题等，若不需要头部信息则可省略此标记。<BODY> 标记一般不能省略，它表示正文内容的开始。下面是一个最基本的超文本文档的源代码：<HTML> <HEAD> <TITLE&

4、gt;网页标题</TITLE> </HEAD><BODY><H3>欢迎光临我的主页</H3><BR><HR> 这是一个我的第一个网页</BODY></HTML>文件头 文件体 1.3 标签的格式 1.3.1 标签的作用HTML标签是组成HTML文档元素，每一个标签描述了一个功能。HTML标签两端有两个包括字符：“<”和“>”，这两个包括字符被称为角括号。HTML标签一般成对出现，比如<table>和</table>。无斜杠的标签的为开始标签，有斜杠的为

5、结束标签，在开始和结束标签之间的对象是元素内容。如<table>表示一个表格的开始，</table>表示一个表格的结束。HTML标签是大小写无关的，但我们习惯用小写。1.3.2 标签的分类：标签分为单标签，双标签两种。单标签：只需单独使用就能完整地表达意思，这类标记的语法是：< 标签名称> 最常用的单标签是<BR>, 它表示换行。 双标签：它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：

6、<标签> 内 容</ 标签> 其中“内容”部分就是要被这对标记施加作用的部分1.3.3 标签的属性：为了增强标签的功能，许多单标记和双标记的始标记内可以包含一些属性，其语法是：<标签名字 属性1=“属性值1” 属性2=“属性值2” 属性3=“属性值3” > 各属性之间无先后次序，属性值应该被包含在引号中，常用双引号，但是单引号也可以使用，在有些情况下，比如说属性值本身包含引号，就得使用单引号。比如：name='John "ShotGun" Nelson'。注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引

7、号，属性也可省略（即取默认值）。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></scrip

8、t>等标签对，这些标签对都是描述Html文档头部信息的标签对，<head></head>标签对之间的内容是不会在浏览器的框内显示出来的。这对标签必须成对使用。1.4.3 网页标题 <title></title>使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标签对之间加入您要显示的文本即可。注意：<title></title>标签对只能放在<head&g

9、t;</head>标签对之间。1.4.4 <body></body><body></body>是Html文档的主体部分，在此标签对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。该标签必须成对使用。<body>标签中还可以有以下属性：属性用途示例<body bgcolor=”#rrggbb”>设置背景颜色。<body bgcolor=”red”>

10、;红色背景<body text=”#rrggbb”>设置文本颜色。<body text=”#0000ff”>蓝色文本<body background=”image-URL”>设置背景图像<body background=”002.jpg”>把图像设为背景 色彩rrggbb是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。例: body.html<html><head><title>唐诗</title></head><body bgcolor="

11、;blue" text="yellow" >静晚思<br>床前明月光，疑是地上霜。<br>举头望明月，低头叫故乡。<br></body.></html>1.5 格式标签1.5.1 段落标签 <p> </p>格式：<p align=# >说明：</p>标签是用来创建一个段落，在此标签之间加入的文本将按照段落的格式显示在浏览器上。HTML自动在一个段落前后各添加一个空行。align可以控制段落的对齐方式，取值为：Left(左对齐)、Center(居中)和R

12、ight(右对齐)三个值中的任何一个。例：<body><p align=”center”>浣溪沙</p><p>一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。</p></body>1.5.2 换行标签<br>当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。它是单标签。例：<body><p align=”center”>浣溪沙</p><p>一

13、曲新词酒一杯，去年天气旧亭台，<br>夕阳西下几时回。无可奈何花落去，<br> 似曾相识燕归来。小园香径几徘徊。</p></body>1.5.3 文章标题标签Hn一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>，其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：H1></H1>第一级标题H2></H2>第二级标题H3></H3>第三级标题H4></H4>第四级标题H5><

14、/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> 浣溪沙一曲新词酒一杯，去

15、年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。</pre></body>1.5.5 环绕标签 格式: <marquee direction=# bihavior=* loop=数字 scrollamount=数字 scrolldelay=数字 scrollamount=数字 height=数字 width=数字 > . </marquee>说明：方向属性 direction=# #=left， right，up，down例：<marquee direction=left>啦啦啦，我从右向左移！</

16、marquee> <marquee direction=right>啦啦啦，我从左向右移！</marquee>方式属性 bihavior=* 8=scroll， slide， alternate例：<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <marquee behavior=alternate>啦啦啦，我来回走耶！</marquee> 循环次数

17、 loop，若未指定则循环不止(infinite)速度属性 scrollamount=数字 延时属性 scrolldelay=数字例：<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee> 面积属性 height=数字 width=数字例：<marquee height=40 width=50% bgcolor=”red”>啦啦啦，我会移动耶！</marquee> 这些属性可以单独使用，也可混合使用，下面是一个综合实例：例：制作滚动的新闻<body> <

18、marquee id="a" behavior="scroll" direction="up" height="150" width="150" bgcolor="#FFCC00" scrollamount="2" onmouseover="a.stop()" onmouseout="a.start()"><p>当鼠标指向时停止 当鼠标移过时滚动<br>当鼠标指向时停止 当鼠标移过时滚动

19、<br>当鼠标指向时停止 当鼠标移过时滚动<br></p></marquee></body>其中id为这段文本的名称，要注意的是一个环绕标签只对一个段落起作用。1.6 图像标签1.6.1 图像标签 <img>在网页中插入图像的标签为<img>，它是单标签，语法格式为：<img src=# alt=* align=* border=数字 width=数字 height=数字> 说明：src为必带属性，它给出了图像的位置，一般是是相对地址，或某个网址。例: <img src=”./images/0

20、02.jpg”><img src=”http:/www. Align属性设置图像的对齐方式，它可以取值top，middle， bottom 。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和Height属性是图像的宽和高，默认单位也是象素。alt属性是在浏览器装载图像失败的时，告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且对纯文本浏览器很有用。例：<img src="boat.gif" alt="Big Boat&qu

21、ot; height=”50” width=”50” aligh=”bottom” border=0>1.6.2 水平线标签 <hr><hr>标签是在Html文档中加入一条水平线，它是单标签，可以直接使用。格式：<hr size=# color=* width=数字 hoshade>说明：size属性设置水平线的厚度Width属性设定水平线的宽度，默认单位是像素color属性设置颜色，noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。例1：<hr >例2：<hr wi

22、dth="600" size="1" color="#0000FF">1.7 链接标签1.7.1 文字链接：格式：<a href=url target=#> 要链接的文字 </a> 说明：href是必带的属性， url为链接要转到的目标网页，它可以是相对地址，也可以是另一个网站的网址。Target属性：定义在什么地方打开链接地址，它可以取值：_blank 、_top、 self 、_parent等值。例：<a href="lastpage.htm">点击则转到下一个页面&l

23、t;/a> <a href="" target="_blank ">新浪 </a>1.7.2 图像链接：格式：<a href=url1 target=#> <img src=url2> </a> 说明：url1为点击链接后要转到的目标网页，url2为被链接的图片地址。例：<a href="lastpage.htm"> <img border="0" src=".images "> </a>点击n

24、ext.gif后转到lastpage.htm页.1.7.3 电子邮件链接 格式：<a href="mailto:EMAIL"> 文字 </a>说明：EMAIL为接收邮件的邮箱。例：<a href="mailto:xygzjsj">联系我们</a>1.7.4 锚点链接：格式： 格式：<a name=”锚名”>文字</a>说明：name属性用来创建一个命名的锚。锚名相当于文章中的一个标签。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。它要

25、和<a href="url"> </a>.配合使用。锚点命名好后，进行链接只要在url后加#，再接锚名即可。例：在网页wenzang.htm中命名了三个锚点,<a name=”a”>第一节</a><a name=”b”>第二节</a><a name=”c”>第三节</a>在网页school.htm中，要链接到wenzang.htm的第二节，<a href=”wenzang.htm#b”>第二节</a>1.8 表格标签<table>.</t

26、able> - 定义表格<tr> - 定义表行<th> - 定义表头，一般用黑体字表示。<td> - 定义表元(表格的具体数据)常用属性:属性用途<table bgcolor="">设置表格的背景色。<table border="">设置边框的宽度，若不设置此属性，则边框宽度默认为0。<table bordercolor="">设置边框的颜色。<table cellspacing=""> 设置表格格子之间空间的大小。<t

27、able cellpadding=""> 设置表格格子边框与其内部内容之间空间的大小。<table width="">设置表格的宽度，单位用绝对像素值或总宽度的百分比<table frame=”>设置表格的边框显示，可以取这八个值box显示所有 4 个边框above只显示上边框below只显示下边框hsides只显示上、下边框vsides只显示左、右边框 lhs只显示左边框rhs只显示右边框void不显示任何边框<table rules=”>设置表格分隔线，可以取all、groups、rows、cols、none

28、all显示所有分隔线groups只显示组(Groups)与组之间的分隔线rows只显示行与行之间的分隔线cols只显示列与列之间的分隔线none不显示任何分隔线<tr align=”>设置水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)<tr valign=”>设置是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)例1：三行二列表：<table border=1 bgcolor=yellow width=200 r><th>班级</th><th&g

29、t;姓名</th><tr align=center><td >一班</td><td>李芳</td></tr><tr align=center><td >二班</td><td>刘军</td></tr></table>例2：只显示上下边框 <table border=1 width=200 frame=hsides><th>班级</th><th>姓名</th><tr

30、align=center><td >一班</td><td>李芳</td></tr><tr align=center><td >二班</td><td>刘军</td></tr></table>例3：只显示列分隔线<table border=1 width=200 rules=cols ><th>班级</th><th>姓名</th><tr align=center><td &

31、gt;一班</td><td>李芳</td></tr><tr align=center><td >二班</td><td>刘军</td></tr></table>1.9 框架标签可以用框架把页面分割成几个窗口，在不同窗口打开不同的文件。1.9.1 <frameset> </frameset>这是一对双标签，它有两个常用属性：cols、 rows，cols是把页面纵向分割成若干个窗口，rows是把页面横向分割成几个窗口。1.9.2 帧标签 <

32、;frame>它是单标签，用来指定在每一个窗口要打开的文件。把页面分割成窗口后，若没有使用<frame>，则窗口显示为空。常和<frameset>配合使用。例：<frameset cols=30%,70%> <frame src=”a.html”><frame src=”b.html”></frameset></frameset>标签把页面纵向分割成两个窗口，第一个窗口的宽度占30%，在第一个窗口中打开a.html，第二个窗口宽度占70%，在其中打开b.html。分割的比例也可用像素来表示，或剩余值用*表

33、示。例：<frameset rows=100,*> <frame src=”a.html”><frameset cols=20%,*> <frame src=”b.html”><frame src=”c.html”></frameset></frameset>格式：<frame src=# name=* scrolling=* noresize>说明：src属性 用来指定在窗口中打开的文件名 name 属性：用来给窗口命名。scrolling 属性：用于描述窗口是否设有滚动条，可以取值：yes/no

34、/auto，默认autonoresize 属性：是一个标志，没有取值，设定了该属性，则窗口不能调整大小，缺省为可以自行调整窗口大小。noframeset> </noframeset>标签，对于不支持框架的浏览器，可以用该标签给出一个说明。若要在多窗口中相互操作，我们要用到<a>标签和 target属性。对上例进行修改：<frameset rows=100,*> <frame src=”kuangjia.jpg”><frameset cols=20%,*> <frame src=”b.html” name=”b”>&l

35、t;frame src=”c.html” name=”c”></frameset></frameset>b.html文件中和内容为：<body><body> 内框架<iframe> 这是一对双标签，如果想在表格或框架内调入一个外部文件，可以使用内框架标签，也称浮动窗口。格式：Iframe标记的使用格式是:<Iframe src="/blog/URL" width="x" height="x" scrolling="OPTION" name=&q

36、uot;*"> </iframe>说明：src：文件的路径，既可是HTML文件，也可以是文本、ASP等；width、height：“内部框架”区域的宽与高；scrolling：当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;name：框架的名字，用来进行识别。例：<table width="600" height="500" border="0" > <tr> <td width=

37、"150"><p><a href="b.html" target="a">第一章</a></p> <p><a href="c.html" target="a">第二章</a></p> <p><a href="main.html" target="a">第三章</a></p></td> <td

38、 width="526"><iframe width="450" height="400" scrolling="yes" name=a></iframe></td> </tr></table>1.10 表单标签表单的基本语法<form name="#" action="url" method=* ></form> 说明：#表单的名称*提交表单的方法：有GET、POST两种，GET方法把

39、表单信息作为字符串附加在action所设定的URL后面，中间用“？”隔开，CGI程序可以用query、string环境变量去取得FORM所传送的输入信息。系统环境变量的长度限制了输入字符串的长度。POST方法，将输入信息进行包装CGI程序中可以用CONTENT_LENGTH环境变量去决定传送输入信息的长度，再从标准输入（STDIN）的方式将内容读出。url 处理表单数据的程序文件名，(包括网络路径、网址或相对路径)，如：<form action=“”在表单标签之间，可以使用除<form>以外的任何HTML标签，其中有三种特殊的标签一定要放中表单标签之间。它们是：1.10.1输

40、入标签：<input type=* name=* value=#>说明：*=text, password, checkbox, radio, image, hidden, submit, reset*= 输入标签的名称Text:单行文本的输入，Password：密码输入，checkbox：复选框，radio:单选框，image：图像域，hidden：隐藏域，submit：提交按钮，reset：重置按钮。 #:初始值，这是可选属性例：<h3>用户注册</h3><form action=/cgi-bin/post-query method=POST nam

41、e="register">姓名: <input type=text name=姓名><br>密码: <input type=password name=密码><br>电子邮件: <input type=text name=邮件><br>性别:<input type=radio checked name=男>男 <input type=radio name=女>女<br>学历:<input type=checkbox name=硕士> 硕士 <input type=checkbox name=大学 checked> 大学 <input type=checkbox name=大专 > 大专<input type=checkbox name=大专以下 >大专以下 <br><input type=sub

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论