您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 经营企划 > html新手3分钟速成秒杀一切教程
Html基础教程:1.Html的结构组成2.Body的常用属性3.字体Font4.图像Image5.表格表项对齐方式Align6.表格Table7.框架Frame8.序列卷标9.表单Form10.排版卷标11.背景标志12.链接标志其他实例教程13.关于Iframe标记14.关于播放音乐1.Html的结构组成返回目录HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。先简单的介绍一下HTML语言(我们在这灌输大家的是能够实际操作),HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。是呀,HTML并不是很神奇,只是因为你不是很了解它,现在咱们就开始接她的面纱:一、HTML的组成结构(头部、眼睛、身体----好像一个人一样是不是?)1、头部。只要你学过英语,你应该知道头怎么用英文写吧!yes,HEAD就是了;所以,头部的HTML写法就是head头部的内容/head,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。2、眼睛。就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?title,yes!大家知道眼睛是长在头上的,所以啦:title标题/title这些应放在head和/head之间。也就是headtitle标题/title/head3、身体。身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:body页面内容/body最后,别忘了把这些部分组成一体----网页,所以咱们就用html/html把他们给包起来。好了,咱们来大体看看网页的结构:htmlheadtitle标题/title/headbody页面内容/body/html2.Body的常用属性返回目录我们在第一讲里概括了一下网页的主要框架,现在我们来详细的研究网页的内部细则:先从它的身体部分(body)开始:?欣赏一个网页时,一般先注意到的是这个页面的背景,如果有背景音乐,那就更吸引人了!是不是呀,那么这些是怎么实现的呢?看下边:?1、背景颜色?bodybgcolor=red我们发现多了个bgcolor其实就是backgroundcolor(背景颜色)的意思,bgcolor=red设置网页的背景颜色为红色,现在颜色一般都是#ff0000样式的。?2、背景图片?bodybackgroud=back-ground.gif中“backgroud”就是设置背景图片的啦,back-ground.gif是背景图片的名字,为什么有的朋友也是如此写的,而网页却没有背景图片呢?其实back-ground.gif是该图片相对于这个页面的位置,比如你做的这个页面放在c:\我的网站\,而背景图片的位置放在c:\我的网站\images\,那么就得这样写了:bodybackgroud=images\back-ground.gif,注意两者的区别!3、背景音乐?背景音乐和上边介绍的两个有很大的不同,它的代码是放在页面的头部head/head里,为什么在这里讲呢?就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧:bgsoundsrc=background_sound.midloop=-1bgsound不用说了吧背景声音,background_sound.mid是音乐的文件名,当然也得写它的相对路径哦(关于相对路径,可能有的网友,一下子不能搞明白,我们将会在其他板块介绍的)!loop,循环,那么loop=-1是什么意思呢?loop是bgsound的一个属性,当然src也是了,后边跟得就是属性值了,那么loop=-1就是无限循环的意思,只要是页面打开,音乐不会停止的,loop=1说明循环一次,等于0就是不循环了,呵呵,简单不!4、body其它属性:topmargin,leftmargin。有的朋友再做页面的时候,感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边,怎么回事呢?因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12,如果你把他们的值设为0,你看看会有什么效果!如下比较一下body和bodytopmargin=0leftmargin=0,有兴趣的朋友可以任意设置他们的值!好了,这一节先讲到这里!大家在自己的电脑上实习一下,呵呵!3.字体返回目录同样我们在这里继续讲一下它的body,因为它能直观的让大家观察到你所学到的成果。?这一讲,我们来学习字体及其属性,然后大家在学习完后制作一下,看看它的每一个属性所表现的效果。?字体,英文font,这html语言中也是它---font,下面咱们来研究一下font:1、标题字体h#文字/h#?#=1,2,3,4,5,6?比如:h1今天天气真好!/h1?注意:这些一般的用在标题上,所以起名叫标题字体;h#.../h#这些标记显示黑体字;这些标记自动插入一个空行,不必用p标记再加空行,因此在一行中无法使用不同大小的字体。?2、字体的大小,用于一般文字。?fontsize=#文字/font#=1,2,3,4,5,6,7or+#,-#?basefontsize=##=1,2,3,4,5,6,7?例子:fontsize=7今天天气真好!/font?3、逻辑字体(LogicalStyle)?下划线:u文字/u,代码:code文字/code,删除线:strike文字/strike,闪烁:blink文字/blink,增强:strong文字/strong,强调:em文字/em,示例:samp文字/samp,还有老多,一般的这些了解一下就可以。?4、字体的标志,很常用的。粗体:b文字/b,斜体:i文字/i?5、字体颜色?指定颜色fontcolor=#文字/font#=#rrggbb16进制数码,或者是下列预定义色彩:Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua?对于16进制编码的颜色,我们可以这样理解rrggbb六个字符:前两个表示红色,中间的两个表示绿色,后两个表示蓝色;那么,红色(red)ff0000,同样绿色(green)00ff00,蓝色0000ff;其它的颜色就是这几个字符(0-9,a-f)的组合。?比如:fontcolor=red文字/font红色文字fontcolor=#ff0000文字/font红色文字?大家看看fontcolor=#rrggbb文字/font是什么颜色的文字?6、客户端字体(FontFace)?fontface=#,#,...,#.../font#=客户端可获得的字体,什么是客户端,通俗的讲,就是你的电脑,face=#就是从你的电脑获得的字体,大家可以点击客户端字体(FontFace)示例。?7、字符实体(Entities),字符实体一般用在把html里的符号显示在页面上比如、&等,如果你单独的打上,页面也可以显示,但如果你想显示b这几个字符,怎么办呢?就是它啦。?#=字符实体名称或者ascii值?&?&?????这些只是一小部分,那么要显示b就要写成b了。?以上学到的我们可以综合使用:比如fontsize=2color=#ff0000ib文字/b/i/font注意写的时候要前后一致前面b后边对应的也应该/b?好了,关于字体就讲完了!4.图像返回目录图像,也就是images,在html语法中用img来表示,其基本的语法是:imgsrc=##=图象的URL,关于url就是指的是图像在网上的地址。imgalt=##=在浏览器尚未完全读入图象时,在图象位置显示的文字;也是图像显示以后,当鼠标放在图片上时所显示的文字。例子:imgsrc=Image/sucai.png图象在页面中的对齐/布局:语法:imgalign=##=left,center,right,使用图像的align属性,其实这一属性布置在这里用到,以后我们在学习表格的时候也会遇到align,它的值left,center,right就是他的中文意思,left居左,center居中,right居右。例子:imgsrc==left网人交流论坛欢迎您的光临!图象和文字的对齐:语法:imgalign=##=top,middle,bottom,这里的align和上边的实现的效果不一样,大家从它的值可以看出,它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果,很容易记住哦!图像的边框:imgborder=##=value数字,指的是这个图像的边的宽度!示例:imgsrc==1大家可以在自己的机子上按照我给你的语法,写下来,看看效果就行了。5.控制表格及其表项的对齐方式返回目录缺省情况下,表格在浏览器屏幕上左对齐,你可以使用TABLE的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如,让一个表格在屏幕中央显示可以使用:TABLEALIGN=“CENTER”注意使用TABLE的ALIGN属性要小心,不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央,使用CENTER标识符来包含表格会更安全些。你可以使用TR的ALIGN属性来设置表格中每行元素的水平对齐方式,这个属性也可以取值“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式,可以使用TR的VALIGN属性,它可以取值“top”、“middle”和“botton”(缺省情况下取值“middle”)。要更好地控制表格中某个表头或元素的排列方式,可以使用TH和TD标识符的ALIGN和VALIGN属性,这两个属性的取值范围与TR相同,然而TH的TDALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。控制表项的空间当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用TABLE的CELLPADDING和CELLSPACING属性来改变这一缺省值。通过使用CELLPADDING属性,你可以为表格中的每一项安排一个更大的空间,使用CELLSPACING属性,你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性(见图6.20):HTMLHEADTITLECellSpacing/TITLE/HEADBODYTABLEBORDER=1CAPTIONNormalTable/CAPTIONTRTDFirstColumn/TDTDSecondColumn/TD/TR/TABLEHRTABLEBORDER=1CELL
本文标题:html新手3分钟速成秒杀一切教程
链接地址:https://www.777doc.com/doc-4552363 .html