HTML语言入门

基本结构:
<HTML>
<HEAD>
<TITLE> 我的页面 </TITLE>
</HEAD>
<BODY>
网页的内容.......
</BODY>
</HTML>


例1-1
当你点开任何网页的源文件的时候,相信都可以在长长的字符中寻找到上面这些单词,或者你现在把上面这些单词复制到你新建的文档文件中,保存之后把后缀名改成.html,一个网页就诞生了。这就是HTML语言,它不象C++,VB等等程序语言要你摸不清头脑,HTML语言只是一个在SGML定义下的描述性语言,或者说是标识语言。
既然是标识语言,我们就从标识开始进行学习好了,也许当你完全掌握标识之后,就会发现基本上已经明白什么是HTML了。

标识的写法:
1.任何标识都应该写在"<"和">"之间,如<html>
2.标识的字母没有大小写的区分。
3.在起始标识中加入“/”就是终止标识,一般情况下有起始表示就有终止标识。例如<html>...</html>
4.有的标识需要加入参数,有的不必,需要注意的是这些参数只能加在起始标识中。
现在我们开始认识第一类标识:文件标识
事实上你已经见过了这些标识,没错就是<HTML> ; <HEAD> ; <BODY> ; <TITLE> ,
<html>.....</html>
这段标识告诉浏览器现在运行HTML文件,所以你写HTML文件都应该以<html>开头,</html>.
<head>.....</head>
这是HTML文件的开头部分,相应的<body>...</body>就是本文部分,开头部分主要是用来记载关于这个页面的一写重要资讯,所以呢大部分的标记都将在本文部分进行应用。
<title>...</title>
这里的文字就成了你所建立页面的标题,你可以更改一下例1-1中非标记部分。
这些标记就构成了HTML的基本构架,其中只有<body>具有参数设定,我们就通过一个例子还认识好了
<BODY text="" link="" alink="" vlink="" background="" bgcolor="" leftmargin= topmargin= bgproperties="fixed">
text=""
用以设定文字颜色。
link=""
设定一般文字连结颜色。
alink=""
设定刚按下时文字连结颜色。
vlink=""
设定连结后的颜色。(被按过)。
background=""
设定背景墙纸。
bgcolor=""
设定背景颜色。
leftmargin=
设定整份文件显示画面的左方边沿空间,单位为像素。

topmargin=
设定整份文件显示画面的上方边沿空间。
bgproperties="fixed"
固定背景墙纸,当卷动文字时墙纸不会跟著卷动。
这里需要说明的是色彩的问题,色彩是用 16 进制的 红-绿-蓝(red-green-blue, RGB) 值来表示的,所以一个颜色也就由RRGGBB的格式构成,而16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
#000000, 其中红=00,蓝=00,绿=00,色彩即为黑色
#0000FF,其中红=00,绿=00,蓝=ff,色彩即为蓝色
如果你想深入了解色彩的问题,你可以查看诸如FLASH等等软件的色彩表.
首先我们看<font>,<basefont>
这两个标识都是用于控制字体的大小,色彩,字体,但<basefont>可以用于<head></head>之间,控制全文的文字;而<font>只应用与<body></body>之间,控制在它选择范围中的文字.两个标识出现在一个html文件中的时候,没有被<font>选择的文字才会受到<basefont>的影响。
下面我们就来看一个例子:
<html>
<head>
<title>H.S Workshop</title><basefont face="Arial" size="7" color="#000000">
</head>
<body>
欢迎来到<font face="Arial" size="5" color="ff0000">H.S Workshop</font>
</body>
<html>
[例2-1]
我们看到<basrfont>告诉IE全文用7号黑色Arial字体显示,但H.S Workshop被我们用<font>围住了,所以执行
<font>的设定.这里有face=,size=,color=三个参数可以进行设定,
face=
设定字体。
size= (1,2,3,4,5,6,7,-x,+x)
设定字体大小,这里需要注意的是相对值和绝对值,我们在例2-1中,把<font>的size的值改成"-2"你会发现效果是一样的,相应的把<basefont>的size值改成其他任何小于7的数值,你就会发现改变。我们在这里就把size="-2"称为相对值,被<font>围住的文字在<basefont>的基础上,减少2个字符大小,公式为"n-/+x".当然只有<font>可以设定相对值。
color=
设定文字色彩.
这里我们还发现了一个问题,<basefont>没有终止标识,但它一样可以实现它的功能,这就是HTML的空标识,因为我们看到</basefont>没有存在的意义,所以可以忽略,当然如果你在<basefont>后面添加</basefont>对整个html文件也没有影响。其他的我们就称之为围堵标识。
接下来看<Hn>...</Hn>(n=1,2,3,4,5,6)
这是一个标题标识,从1到6替减,是一个围堵标识,我们需要注意的是这个标识独占一行并自动插入一个空行,你可以自己尝试一下,这里就不举例说明了。
<STRONG> <B> <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <s> <BIG> <SMALL> <SUP> <SUB> <I> <EM> <VAR> <CITE> <DFN> <ADDRESS>:
这是对文字进行一些特殊处理的标识,我们就来看看他们的效果来进行学习好了.
欢迎来到H.S Workshop 欢迎来到H.S Workshop
<strong>欢迎来到H.S Workshop</strong> 欢迎来到H.S Workshop
<b>欢迎来到H.S Workshop</b> 欢迎来到H.S Workshop
<tt>欢迎来到H.S Workshop</tt> 欢迎来到H.S Workshop
<samp>欢迎来到H.S Workshop</samp> 欢迎来到H.S Workshop
<code>欢迎来到H.S Workshop</code> 欢迎来到H.S Workshop
<kbd>欢迎来到H.S Workshop</kbd> 欢迎来到H.S Workshop
<u>欢迎来到H.S Workshop</u> 欢迎来到H.S Workshop
<strike>欢迎来到H.S Workshop</strike> 欢迎来到H.S Workshop
<s>欢迎来到H.S Workshop</s> 欢迎来到H.S Workshop
<big>欢迎来到H.S Workshop</big> 欢迎来到H.S Workshop
<small>欢迎来到H.S Workshop</small> 欢迎来到H.S Workshop
<sup>欢迎来到H.S Workshop</sup> 欢迎来到H.S Workshop
<sub>欢迎来到H.S Workshop</sub> 欢迎来到H.S Workshop
<i>欢迎来到H.S Workshop</i> 欢迎来到H.S Workshop
<em>欢迎来到H.S Workshop</em> 欢迎来到H.S Workshop
<var>欢迎来到H.S Workshop</var> 欢迎来到H.S Workshop
<cite>欢迎来到H.S Workshop</cite> 欢迎来到H.S Workshop
<dfn>欢迎来到H.S Workshop</dfn> 欢迎来到H.S Workshop
<address>欢迎来到H.S Workshop</address> 欢迎来到H.S Workshop

你是否已经了解了呢,这些就是HTML实现字体特殊效果的标识,唯一特别的是,<address>可以不用插入<br>换行。至于<br>是什么,我想看了明天的排版标识我就可以了解了。
昨天我们已经认识了文字标识,为了让整个网页更清晰美观,我们就不可以少了排版标识,那么现在就要我们开始来认识他们吧。
现在比较讲知识产权,呵呵~我们就先来看看如何告诉别人这是你的产权好了,当然我们还可以用它来告诉你的工作伙伴,这段开始是什么,那就是<!--注释-->
HTML和其他的程序语言一样,可以在代码中添加注释,来告诉别人这里开始写的是什么,当然这也是告诉自己,方便以后的管理,不过你放心,这只存在于你的原代码中,不会在浏览器中发生任何影响。
现在我们开始认识对段落控制的标识,<p>,<br>,<nobr>.
<p>
我们可以把他看做一个空行标识,既在网页中显示一段空白行,一般在DW或者FG等网页编辑工具中,回车即在HTML插入一个<P>,这也是一个空标记,他的常用参数是
align="#"(#=right, left, center)
分别表示左对齐,右对齐,居中。默认值为left.
实现一下下面的例子你就明白了:
<HTML>
<HEAD>
</HEAD>
<BODY>
H.S Wrokshop
<p>H.S Wrokshop
<p align="center"> H.S Wrokshop
<p align="right">H.S Workshop
</BODY>
</HTML>
[例3-1]
<br>,<nobr>
这两个标记分别表示换行和不换行,前者使网页中的元素直接在下一行,不插入空行,后者则表示不 换行,对于一些必须在一行中显示的文字,对电话号码等等的显示比较有用。这里的<br>是个空标识,<nobr>是围堵标识.需要注意的是align=""在BR中没有的意义.
这时候我们就要通过一个另一个标识来实现对齐效果,<div>....</div>,当然这个标识有它更广泛的用途,在这里只简单的提一下其中的对齐参数运用。下面我们就来看一个简单的例子。
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV align="center">H.S Workshop
<br>H.S Workshop </DIV>
<br>H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop <nobr>H.S Workshop</nobr>
<DIV align="right">H.S Workshop
<br>H.S Workshop </DIV>
</BODY>
</HTML>
[例3-2]
这样一来我们就可以实现对<br>的对齐效果了。
<left>,<center>,<right>
现在我们把align=""的三个值提出来,发现他们其实自身也是标识,它们可以对单个,单行文字进行围堵,实现他的效果,这样又多了一个途径实现<br>的对齐效果了,具体的就举例说明了,你可以自行尝试一下,注意,他们可是围堵标识哦。
<wbr>
这里把它从换行中分出来,是想大家于<br>对比一下,这是个建议折行的标识,当用户的分辨率无法完整的显示出一段文字的时候,你就可以插入这个标识,这时候就会发生于<br>同样的效果,如果达到了条件则没有效果产生,你可以自己尝试一下,它是一个空标识。接着我们来看看HTML两个在排版上非常使用的标识。
<pre>,<listing><xmp>
预格式化文本标识,他们允许你在HTML原文件里输入空白,并显示出和你在HTML编辑的一模一样的格式,区别就在<pre>显示出来的是设定好了的字体大小,<listing>显示小于设定的一号字体, 〈xmp>则在<pre>的基础上把html里的标识也显示出来。
<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
<listing>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</listing>
<xmp>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp>
大家可以自己看看三者的效果。
<hr>
今天的最后一个标识称为水平线。顾名思义,它实现插入一条水平线的效果。
<HR align="" size="" width="" color="" noshade>。
align=
设定线条置放位置,可选择:left;right;center 三种设定值。
size=
设定线条厚度,以像素作单位.
width=
设定线条长度,可以是绝对值(以像素作单位)或相对值,默认值为 100%。
color=
设定线条颜色,内定为黑色.
noshade
设定线条为平面显示,若删去则具阴影或立体,这是默认值。
通过这三天的学习,你是否可以运用已知的标识写出一个网页了呢?呵呵~这就开始尝试一下吧.
今天我们学习的只有一个标识,重点并不在这个标标识本身,而在于这个标识的参数设置,现在我们就来认识一下吧。
<img>
图形对于一个网页来说其占的位置尽次于文字所占的比重,我们同过这个标识在网页中加入一张图片做到图文并茂,它只是一个空连接,现在我们就来看看它的参数设定。
<img src="" width= height= hspace= vspace= border= align="" alt="" lowsrc="">
src=
首先我们必须向HTML中导入一张图片,这张图片的格式可以是jpg,gif或者png,同时我们还要注意导入图片的途径书写,当你要求导入的图片和显示此图的html在同一个文件夹下,我们就可以只写文件名即可,如则需要完整的途径表示。
width=,height=
设定图象显示的大小,以象素为单位,不过一般情况下为了保持页面的美观,我们使用真实的大小为佳,通过专业的图形编辑工具来编辑图形的大小。
border=
设定图象边框的大小,单位也是象素,它可以是任何数值,在现代网页编辑中通常取值为1。
hspace=,vspace=
设定图象边缘的空白数,hspace设定左右,vspace设定上下,这样可以确保其他元素与图片的距离。
align=(top, middle, bottom, left, right)默认值为 botom
这个参数昨天我们已经讲过,在这里我们我们需要注意的是它的作用是控制文字的位置,具体的运用我们就通过这下面的例子来看看好了.
alt=
在图片显示的位置插入一段文字,当图片还没有被读取或这浏览者使用的是文字游览器的时候,这段文字就会显示出来。
lowsrc=
同样在显示src所显示的图片之前先显示出一张图片,条件也是在src还没有被读取的时候,一般我们用于显示原图片的缩略图,使浏览者不会因为图片读取慢而失去浏览的兴趣。
表格在网页排版中所占的比重不用说相信大家也都知道,它把整个页面清晰的分成多个区域。专业的网页怎么可以少了对表格的操作呢~现在我们就来看看关于表格的标识。

首先我们必须建立一个表格,我们可以通过<table>着个围堵标识来实现,着个标识的作用就好象<html>告诉浏览器开始处理HTML文件一样,它告诉浏览器现在开始处理表格,其他所有的表格标识都必须写在<table>里面。
关于它的参数比较多,我们现在一个个来看它有什么作用。
<table width="" border="" cellspacing="" cellpadding="" align="" valign="" background="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="" cols="" rules="" frame="">
windth=
设定表格的宽度,一般来说在这层我们只需要指定一个表格的宽度就可以了。这个值可以是绝对的也可以是相对的。
border=
设定表格边框的厚度,当取值为0时或者不用这个参数的时候,表格就不在浏览器中显示出来,但表格中的元素仍然是按表格排列。
cellspacing=
表格线的厚度,为了和border=区别开来,我们看个例子
<table width="70" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table width="70" border="1" cellspacing="5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
[例5-1]
比较一下这两个例子,我们就可以很清晰的看到两个例子的不同.
cellpadding=""
文字和格线之间的距离,使文字看起来更清晰。
align=""(left, right, center)
这个值在前面我们已经重复的介绍过了,这里是对表格的位置进行水平位置设定.
valign=""(top, middle, bottom)
这是对表格垂直位置的设定.
background=""
导入表格的背景图片。
bgcolor=""
设定表格的背景颜色。
bordercolor=""
设定表格的边框颜色。(注意,当设定border=为0时,这个值无效)
bordercolorlight=""
设定表格边框向光部分的颜色.
bordercolordark=""
设定表格边框背光部分的颜色.
cols=""
表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己.
frame=""(box,above,below,hsides,vsides,lhs,rhs,void)
显示边框,参数的含义依此是:显示所有边框,只显示上边框,只显示下边框,只显示上下边框,只显示左右边框,只显示左边框,只显示右边框,不显示任何边框.
rules=""(all,groups,rows,cols,none)
显示分隔线,参数的含义依此是:显示所有分隔线,只显示组与组之间的分隔线,只显示行与行之间的分隔线,只显示列与列之间的分隔线,不显示任何分隔线。
建立了一个表格区,接着我们就要把这个表格分开,那么就必须用到<tr></tr>这个标识,一般我们添加多少个<tr></tr>就表格就会分成多少行。一个表格的基本格式如下:
<table>
<tr>
<td>
</td>
</tr>
</table>
[例5-2]
现在我们就来看看<tr>的参数设定吧。
<tr align="" valign="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="">
align=""(left, right, center)
这就不多说了。水平位置的设定.
valign=""(top, middle, bottom)
垂直位置的设定琀?瑧?瑬;开嫞??????。
bgcolor=""
这一列的背景色。
bordercolor=""
这一列的边框颜色 。
bordercolorlight=""
这一列的向光部分.
bordercolordark=""
这一列的背光部分.
有了列,就要开始设定单元格,可以说单元格就是一个表格的最小单位。我们用过<td></td>来实现.在<tr>下面写入多少个<td></td>就会在这一列中显示出多少个单元格。然后我们来看看对单元格有些什么参数可以设定吧。
<td width="" height="" colspan="" rowspan="" align="" valign="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="" background="">
windth=""
通过相对值或绝对值设定这个单元格的宽.
height=""
通过相对值或绝对值设定这个单元格的高.
colspan=""
rowspan=""
这里我们看一个例子来说明一下好了.
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<tr>
<td>第一列第一栏</td>
<td colspan="2">第一列 之 第二栏及第三栏</td>
</tr>
<tr>
<td rowspan="2">第二列及第三列 之 第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>
</tr>
<tr>
<td>第三列第二栏</td>
<td>第三列第三栏</td>
</tr>
</table>  
第一列第一栏 第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
第三列第二栏 第三列第三栏
                              [例5-3]
同过标识,我们看到这实际上是个三列三行的表格,如果只看第一行第一列是不是认为这是两行两列的呢。没错,colspan就是向右合并单元格,rowspan则是向下合并单元格.
align=""(left, right, center)
元素水平位置设定.
valign=""(top, middle, bottom)
元素垂直位置设定.
background=""
导入单元格的背景图片。
bgcolor=""
设定单元格的背景颜色。
bordercolor=""
设定单元格的边框颜色。(注意,当设定border=为0时,这个值无效)
bordercolorlight=""
设定单元格边框向光部分的颜色.
bordercolordark=""
设定单元格边框背光部分的颜色.
另一个单元格表示<th></th>,它同样也表示一个单元格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现,当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。用它取代<td>即可显示效果,关于它的参数和<td>一样,这里就不详细说明了.
今天最后一个标识<CAPTION>,它可以在表格上显示出一段没有格线的列。通常我们把他来给表格内容命题。关于它的参数有两个,分别是align和valigan,(left, right, center,top, middle, bottom)

加支付宝好友偷能量挖...


评论(0)网络
阅读(85)喜欢(1)HTML/CSS兼容/XML