HTML 语言教程(新手版) [复制链接]

动动

荣誉会员

Rank: 12

交易币: 300 枚
金豆子: 691 粒
推广分: 0 分
帖子: 589

发表于 2008-4-30 22:08:35 |显示全部楼层

首先,普及一下基础知识
a.如何看HTML的源代码
在浏览器看到的HTML网页，是浏览器解释HTML源代码后产生的结果。
要查看这个HTML的源代码，有两种方法。一是点击鼠标右键，点击(查看源文件)命令；二是选择浏览器菜单(查看)中的(源文件)命令。
利用产看源文件得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下，看别人复杂的HTML源代码，只会让你头晕。建议你还是再等等，先掌握一些基础再说。
b常用的HTML编辑软件:
1.Dreamweaver (我这里推荐新手使用该款软件)　
Dreamweaver是美国Adobe(原Macromedia，2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。　　
2.Frontpage 2003　　
Microsoft公司出品的FrontPage是制作表单式网页的常用工具。FrontPage 2003是目前最常用的中文版网页制作工具之一，简单易学。　

第一课: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>等等众多的标记，
它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标记必须一块使用。
4.<title></title>
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，
那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，
只要在<title></title>标记对之间加入您要显示的文本即可。
注意：<title></title>标记对只能放在<head></head>标记对之间。
下面是一个综合的例子,通过这个例子便可以了解以上各个标记对在一个Html文档中的布局或所使用的位置。
例1  Html文档中基本标记的使用
<html>
<head>
<title>显示在浏览器最上边蓝色条中的文本</title>
</head>
<body>
   文本
</body>
</html>

链接
基本语法 <a href="URL"> ... </a>
这是一个
<a href="samp/link.html">链接的例子</a>。
这是一个链接的例子。
开一个新的(浏览器)窗口
<a href="URL" target="#"> ... </a>
<a href="samp/window.html" target="#">
开一个新窗口!
</a>
target="_blank"在新窗口。
target="_self"本窗口。
target="_parent"父窗口。
target="pcart"一个名叫pcart的窗口
水平线
<hr>
<hr size=#>
<hr width=#>
<hr align=#> #=left, right
<hr color=#>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第二课: HTML语言之字体标记
动画简介：
标题字体
<h1></h1>……<h6></h6>
Html语言提供了一系列对文本中的标题进行操作的标记对：<h1></h1>……<h6></h6>，
即一共有六对标题的标记对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，
也即是标记中 h 后面的数字越大标题文本就越小。如果您的Html文档中需要输出标题文本的话，
便可以使用这六对标题标记对中的任何一对。
字体大小
<font></font>
<font></font>是一对很有用的标记对，它可以对输出文本的字体大小、颜色进行随意地改变，
这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。
size属性用来改变字体的大小，它可以取值：-1、1和+1；而color属性则用来改变文本的颜色，
颜色的取值是十六进制RGB颜色码或Html语言给定的颜色常量名。
物理字体
<b></b><i></i><u></u>
经常使用 WORD 的人对这三对标记对一定很快就能掌握。
<b></b>用来使文本以黑体字的形式输出；<i></i>用来使文本以斜体字的形式输出；
<u></u>用来使文本以下加一划线的形式输出。
逻辑字体
<tt></tt><cite></cite><em></em><strong></strong>
这些标记对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。
<tt></tt>用来输出打字机风格字体的文本；<cite></cite>用来输出引用方式的字体，
通常是斜体；<em></em>用来输出需要强调的文本(通常是斜体加黑体)；
<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。
字体颜色
指定颜色 <font color=#> ... </font>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<font color=ff0000>red</font>
<font color=red>red</font>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第三课：HTML语言之文字布局标记
动画简介：
行的控制
段 (可以看作是空行) <p>
你好吗？<p>很好。
你好吗？
很好。
换行 <br>
你好吗？<br>很好。
你好吗？
很好。
不换行<nobr></nobr>
<nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
</nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
文字的对齐
<h3 align=#>...</h3>
#=left, center, right
<h3 align=center>Hello<\h3>
<h3 align=right>Hello<\h3>
                                          Hello
                                                                                    Hello
<center>...</center>
<center>Hello</center>
                                          Hello
文字的分区显示
<div align=left> ... </div>
<div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div>
Can you feel happiness without unpleasant?
Please show me your smile.
<div align=center> ... </div>
                                 Can you feel happiness without unpleasant?
                                 Please show me your smile.
<div align=right> ... </div>
                                                                     Can you feel happiness without unpleasant?
                                                                     Please show me your smile.

列表
无序列表 <ul><li>...</ul>
<ul>
<li>Today
<li>Tommorow
</ul>
有序列表 <ol><li>...</ol>
<ol>
<li>Today
<li>Tommorow
</ol>
定义列表 <dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
定制列表元素
定制表中的标记 <li type=#> #=disk, circle, square
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
预格式化文本
<pre>...</pre>
<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第四课：HTML语言之图象标记
动画简介：
链入图象的基本语法
<img src=#> #=图象的 URL
<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。
<img src=URL alt="sunset">

图象和文字的对齐
<img align=#> #=top, middle, bottom
<img src=URL align=top> sunset
<img src=URL align=middle>  sunset
<img src=URL align=bottom>  sunset
图象在页面中的对齐/布局
<img align=left>
<img src=URL align=left> sunset<br>
sunset<br>
sunset<br>
sunset<br>
<img align=right>
<img src=URL align=left>sunset<br>
sunset
<br clear=all>
sunset<br>
sunset<br>
边框
<img border=#> #=value
<img src=URL border=15>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第五课：HTML语言之表单标记(1)
动画简介：
基本语法
表单的基本语法
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST
表单中提供给用户的输入形式
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset
**=标记的名称
文字输入和密码输入
*=text, password
<input type=*>
<input type=* value=**>
<form action="url" method=POST>
您的姓名:
<input type=text name=姓名><br>
您的主页的网址:
<input type=text name=网址 value=http://><br>
密码:
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

<input type=* size=**>
<input type=* maxlength=**>
<form action="url" method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>

复选框和单选框
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action="url" method=POST>
<input type=checkbox name=水果1>
      Banana<p>
<input type=checkbox name=水果2 checked>
      Apple<p>
<input type=checkbox name=水果3 value=橘子>
      Orange<p>
<input type=submit><input type=reset>
</form>

隐藏表单的元素
<input type=hidden value=*>
<form action="url" method=POST>
<input type=hidden name=add value=home>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第六课：HTML语言之表单标记(2)
动画简介：
列表框
基本语法
<select name=*>
<option> ...
</select>
<option selected>
<option value=**>
<form action="url" method=POST>
<select name=fruits>
      <option>Banana
      <option selected>Apple
      <option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

<select size=**>
<form action="url" method=POST>
<select name=fruits size=3>
      <option>Banana
      <option selected>Apple
      <option value=My_Favorite>Orange
      <option>Peach
</select><p>
<input type=submit><input type=reset>
</form>
<select size=** multiple>
<form action="url" method=POST>
<select name=fruits size=3 multiple>
      <option selected>Banana
      <option selected>Apple
      <option value=My_Favorite>Orange
      <option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>

文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action="url" method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

对于很长的行是否进行换行的设置
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。
<textarea wrap=soft> ... </textarea>
“软换行”，好象 MS－WORD 里的“软回车”。

<form action="url" method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
<textarea wrap=hard> ... </textarea>
“硬换行”，好象 MS－WORD 里的“硬回车”。

<form action="url" method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第七课：HTML语言之表格标记
动画简介：
表格的基本语法
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
带边框的表格：
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
不带边框的表格：
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
跨多行、多列的表元
跨多列的表元 <th colspan=#>
<table border>
<tr><td colspan=3> Morning Menu</td></tr>
<tr><td>Food</td>    <td>Drink</td>  <td>Sweet</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
跨多行的表元 <th rowspan=#>
<table border>
<tr><td rowspan=3> Morning Menu</td>
      <td>Food</td> <td>A</td></tr>
<tr><td>Drink</td> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>

表格尺寸设置
<table border=#>
边框尺寸设置：
<table border=10>
<tr><td>Food</td><td>Drink</td><td>Sweet</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
<table border width=# height=#>
表格尺寸设置：
<table border width=170 height=100>
<tr><td>Food</td><td>Drink</td><td>Sweet</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第八课：HTML语言之多窗口页面标记
动画简介：
基本语法
<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
   <FRAME SRC="url">
   <NOFRAMES> ... </NOFRAMES>
</FRAMESET>
</HTML>
各窗口的尺寸设置
<frameset cols=#>
纵向排列多个窗口：
<frameset cols=30%,20%,50%>
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>
<frameset rows=#>
横向排列多个窗口：
<frameset rows=25%,25%,50%>
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>

纵横排列多个窗口：
<frameset cols=20%,*>
<frame src="url">
   <frameset rows=40%,*>
   <frame src="url">
   <frame src="url">
   </frameset>
</frameset>
不允许各窗口改变大小 <frame noresize>
缺省设置是允许各窗口改变大小的。
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第九课：HTML语言之会移动的文字标记
动画简介：
基本语法
<marquee> ... </marquee>
<marquee>啦啦啦，我会移动耶！</marquee>

文字移动属性的设置
方向 <direction=#> #=left, right
<marquee direction=left>啦啦啦，我从右向左移！</marquee> <br>
<marquee direction=right>啦啦啦，我从左向右移！</marquee>
方式 <bihavior=#> #=scroll, slide, alternate
<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <br>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <br>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>

速度 <scrollamount=#>
<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时 <scrolldelay=#>
<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

底色 <bgcolor=#>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>
文字教程提供BY新手站长论坛:www.cnzhanzhang.com
第十课：HTML语言之多媒体页面标记
动画简介：
嵌入多媒体文本
基本语法 <embed src=#> #=URL
本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，需要把 plugin 安装完备。
背景音乐
<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
<bgsound src="sound.wav" loop=3>
插入视频剪辑
<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器
尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI">

何时开始播放 AVI <img start=#> #=fileopen, mouseover
缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放 AVI。
mouseover 是指您把鼠标移到 AVI 播放区域之上时才开始播放 AVI。
也可以两者同时设置：<img start=fileopen,mouseover>
另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 AVI。

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover>

控制条 <img controls>
用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>

循环播放 <img loop=#>
<loop=infinite> 将循环播放不止。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>

延时 <img loopdelay=#> #=毫秒数
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"
loop=3 loopdelay=250>

文字教程提供BY新手站长论坛:www.cnzhanzhang.com

所有课程相关视频教程下载地址:

游客，如果您要查看本帖隐藏内容请回复