第一章HTML语言简介及基本语法
Html(Hyper text markup language)超文本标记语言。
HTML语言的编写环境及运行环境
HTML的编写环境是任何一个文字处理软件都可，比如：记事本、写字板等。大家要注意的是用记事本或写字板编写的主页文件一定要存成扩展名为htm或html的文本文件，用别的文字处理软件编写的文件也要保存成这种形式。
HTML语言的运行环境是IE或Netscape以及其它的浏览器软件。比如你编写了一个文件叫my.htm的超文本文件，用IE浏览的步骤是：在地址栏里输入相应的文件名及其所在的路径。
HTML语言的基本结构(Document Structures)
<html>……….</html>
<head>………..</head>
<body>………..</body>
比如：
<html>
<head><title>这是我的第一个主页</title></head>
<body>请在这里填写正文。。。。。。。。。。。。。。。。</body>
</html>
<html>……….</html>任何的HTML都是以<html>开始，以</html>结束，当浏览器看到<html>标签后，就会将其后的方法按照HTML的标准进行解释，如果HTML文件的内容不在<html>与<html>之间，那么这些文字可能会被解释为一般的文本，而任何在HTML中所定义的参数都不会影响这些文本。
<head>………..</head>定义了HTML文档的页头部分。
<title>…………..</title>指出文档的标题，这种标题会在WEB浏览器上的标题条内显示出来。但是不会在浏览器主窗口内显示。
<body>………..</body>HTML的内容都定义在它们之间，以下介绍的HTML的语句基本都是在body中使用。
背景和文字彩
<body bgcolor=#text=#link=#alink=#vlink=#>
bgcolor背景颜
text非可链接文字的彩
link可链接文字的彩
alink正被点击的可链接文字的彩
vlink已经被点击过(访问过)的可链接文字的彩
leftmargin页面左边的空白
topmargin页面上边的空白
#=rrggbb是指的用16进制表示的三基(RGB)
16进制数主要有0~9和a~f
也可用英文字母来表示：
black(黑),olive(黄褐),teal(深青),red(红),blue(蓝),maroon(灰),nevy(深蓝),gray(灰),lime(浅绿),fuchsia(浅红),white(白),green(绿),purple(紫),sliver(银),yellow(黄),aqua(水绿)
背景图象
<body background=”image_url”>背景图像必须是扩展名为gif,png或jpg格式的图像文件。Image_url为背景图象的文件全名。
1当图象文件与超文本文件在同一个目录下时可以直接写文件的全名。
如：<body background=”p1.gif”>
2当图象文件在超文本文件所在目录的子目录下时写上路径及文件全名
<body background=”image/p1.gif”>
3当不是以上两种情况时应把文件全名及路径名写上。
如：<body background=file:///E:/mypicture0001.jpg>
Non scrolling background<body bgproperties=fixed>
页面空白(margin)(只适用于IE)
leftmargin页面左边的空白<body leftmargin=#>
topmargin页面上边的空白<body topmargin=#>
链接(link)
基本语法：<a href=”url”>……..</a>
1链接到超文本文件
如：<a href=link.htm>链接到超文本文件</a>
2链接到页面的另外一个地方
如：<a href=”#name”>链接到页面的另外一个地方</a>
<a name=”name”>另外一个地方</a>
<a href=”#jump_test”>跳转到目标点</a>
<a name=”jump_test”>目标点</a>
3跳转到另一个页面某个地方
<a href=”url#name”>……</a>
<a name=”name”>………..</a>
4链接到某个地址：
<a href=”www.qfnu.edu”>曲阜师范大学</a>
<a href=”ftp://ftp.qfnu.edu”>曲阜师范大学ftp文件传输</a>
开一个浏览器新窗口或叫在新窗口中装载新文件
基本语法：<a href=”url”target=”window name”>…….</a>
_top,_blank,_parent,_self
<a href=”www.163”target=”_blank”>在新窗口中打开网页</a>
标尺线
<hr size=n width=n width=n%align=#color=#noshade>
size=n线粗几个像素
width=n线长几个像素
width=n%线长为页面的宽度的的n%
align=left,center,right
color=#设置线条的颜
noshade不带阴影(即没有浮雕效果)
<hr>
<hr size=20>
<hr width=50%>
html居中标签代码<hr width=50>
<hr align=center>
<hr align=right>
<hr color=red>
第二章文字及文字的布局
文字的字体(font)设置(tags)
标题字体(Header):
基本语法:<hn>……….</hn>n=1,2,3,4,5,6n越大字体越小。这些标题都显示为黑字体。这些标记自动插入一个空行，不必用<p>加空行。因此一行中无法使用不同大小的字体。例：<h1>这是一级标题。</h1>
<h2>这是二级标题。</h2>
<h3>这是三级标题。</h3>
<h4>这是四级标题。</h4>
<h5>这是五级标题。</h5>
<h6>这是六级标题。</h6>
物理字体(Physical style)
<b>把文字用粗字体来显示</b>
<i>把文字用斜字体来显示</i>
<u>在文字下面加下划线</u>
<tt>打印机风格的字体</tt>
我用上标<sup>这里的是上标字体</sup>
我用下标<sub>这里的是下标字体</sub>
<s>给文字加上删除线</s>
逻辑字体(Logical style)
<em>这里用的是强调粗体文字</em>
<strong>这里用的是对字体的着重强调</strong>
<code>计算机码文字</code>
<var>文字变量</var>
<small>小一号的字体</small>
<big>大一号的字体</big>
字体大小设置
<font size=n>…………….</font>n=1,2,3,4,5,6,7or+n,-n
以一种特定的尺寸显示字体，取值范围从1到7(-1代表最小的字体，+7代表最大的字体)例：<font size=7>测试对字体大小的控制。</font>
<font size=6>测试对字体大小的控制。</font>
<font size=5>测试对字体大小的控制。</font>
<font size=4>测试对字体大小的控制。</font>
<font size=3>测试对字体大小的控制。</font>
<font size=2>测试对字体大小的控制。</font>
<font size=1>测试对字体大小的控制。</font>
字体颜设置
<font color=#>…………….</font>#为英文字母或16进制数表示的三基(RGB) 16进制数主要有0~9和a~f
也可用英文字母来表示：
black(黑),olive(黄褐),teal(深青),red(红),blue(蓝),maroon(灰),nevy(深蓝),gray(灰),lime(浅绿),fuchsia(浅红),white(白),green(绿),purple(紫),sliver(银),yellow(黄),aqua(水绿)
如：<font color=#000000>测试对字体颜的设置。<font>
<font color=red>测试对字体颜的设置。</font>
例：字体大小，字体颜，指定字体的组合使用。
<i><font size=5color=red><b>今天</b>天气<font size=6>真好!</font>
<font></i>
客户端字体(font face)
<font face=”#,#,…….,#”>……………….</font>
#=客户端所能获得的字体。
例：<font face=”隶书”>山东水利专科学院</font>
字符实体
&#其中#指的是字符实体名称或ascii值
如
 &<>"™¿¼»º¹²³&ce dil;·¶µ´±°¯®&sky;¬«ª&cop y;¨&seet;¦¤¥¢£
文字的布局(text style)标记(tags)
行的控制
<p>………….</p>也可只用<p>对文字进行分段。
如：你好吗?<p>很好!谢谢!
换行使用<br>标记
如：你好吗？<br>很好!谢谢!
不换行请使用<nobr>…………..</nobr>
这样在<nobr>和</nobr>之间的文字无论有多长都不会换行的!
文字的对齐(Alignment)
<hn align=#>…………..</hn>#=left,center,right
定义标题居左，居中和居右显示。
<p align=#>…………….</p>#=left,center,right
定义一段文字居左，居中和居右显示。
<center>……………………</center>
它们之间的内容居中显示。
例：<h3align=center>Hello!Hello!Hello!Hello!</h3>
<h3align=right>Hello!Hello!Hello!Hello!</h3>
<center>Hello!Hello!Hello!</center>
文字的分区(Division)显示
<div align=#>……….</div>#=left,center,right
例：<div align=right>Can you tell me your name?<br>
Please tell me!ok?
</div>
列表
1无序列表<ul><li>…….</ul>
例：<ul><li>today<li>tommorow<ul>
<li type=#>#=disc,circle,squre
如：<ul>
<li type=disc>ONE<li type=circle>TWO<li type=square>THREE
</ul>
2有序列表<ol><li>………..<ol>
例：<ol><li>today<li>tommorow</ol>
<li type=#>#=A(大写字母顺序),a(小写字母顺序)，I(罗马大写字母顺序)，i(罗马小写字母顺序),1(数字顺序)
如：<ol><li type=A>ONE-ONE<li type=A>ONE-TWO<ol>
<ol><li type=a>ONE-ONE<li type=a>ONE-TWO<ol>
<ol><li type=I>ONE-ONE<li type=I>ONE-TWO<ol>
<ol><li type=1>ONE-ONE<li type=1>ONE-TWO<ol>
定制有序列表表中的序号的起始值<ol start=#>#=number
<ol start=5><li type=a>one-one<li>one-two</ol>
<ol start=10><li type=i>one-one<li>one-two</ol>
3定义列表(definition lists)<dl><dt>…..<dd>…….</dl>
例：<dl><dt>today<dd>today will be yesterday!
<dt>tommorow<dd>tommorow will be today!</dl>
预格式化文本(preformatted text)
<pre>……………<pre>，在其中的内容会原封不动的(一般是文本)按照预先编排的格式在浏览器中显示出来。预格式文本一般用在一些特殊场合。如一首诗歌、程序、代码、一般是按照原先设计的格式显示。而不希望被插入换行符等。这时就可使用<pre>…….</pre>。如：
<pre>
please put your heart into lessons!
OK?
<b>There is two advantages!</b>
<ul><li>learn knowledge!
<li>achieve skill!
<ul>
</pre>
<xmp>…………………</xmp>和<pre>语句相似，不同点是在<xmp>和</xmp>之间的文字和html标记都会原样显示。
例：<xmp>
please put your heart into lessons!
OK?
<b>There is two advantages!</b>
<ul><li>learn knowledge!
<li>achieve skill!
<ul>
</xmp>
闪烁<blink>……………….</blink>(netscape only)