Html的几个小技巧.docx

上传人:b****2 文档编号:1205129 上传时间:2023-04-30 格式:DOCX 页数:22 大小:83.51KB
下载 相关 举报
Html的几个小技巧.docx_第1页
第1页 / 共22页
Html的几个小技巧.docx_第2页
第2页 / 共22页
Html的几个小技巧.docx_第3页
第3页 / 共22页
Html的几个小技巧.docx_第4页
第4页 / 共22页
Html的几个小技巧.docx_第5页
第5页 / 共22页
Html的几个小技巧.docx_第6页
第6页 / 共22页
Html的几个小技巧.docx_第7页
第7页 / 共22页
Html的几个小技巧.docx_第8页
第8页 / 共22页
Html的几个小技巧.docx_第9页
第9页 / 共22页
Html的几个小技巧.docx_第10页
第10页 / 共22页
Html的几个小技巧.docx_第11页
第11页 / 共22页
Html的几个小技巧.docx_第12页
第12页 / 共22页
Html的几个小技巧.docx_第13页
第13页 / 共22页
Html的几个小技巧.docx_第14页
第14页 / 共22页
Html的几个小技巧.docx_第15页
第15页 / 共22页
Html的几个小技巧.docx_第16页
第16页 / 共22页
Html的几个小技巧.docx_第17页
第17页 / 共22页
Html的几个小技巧.docx_第18页
第18页 / 共22页
Html的几个小技巧.docx_第19页
第19页 / 共22页
Html的几个小技巧.docx_第20页
第20页 / 共22页
亲,该文档总共22页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

Html的几个小技巧.docx

《Html的几个小技巧.docx》由会员分享,可在线阅读,更多相关《Html的几个小技巧.docx(22页珍藏版)》请在冰点文库上搜索。

Html的几个小技巧.docx

Html的几个小技巧

Html的几个小技巧

发表时间:

2004-8-2822:

03:

26 来源:

网页制作学习园地 点击4104次

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧.

1.使用,,
语句来控制文字排版比用

好得多.如:

实用网络
曾伟滨

2.不要用800*600的分辨率来制作网页,当浏览者用640*480看网页时,不旦会使速度减慢,还会使网页图像和文字出现错位.当然,也可以使用帧,

水平控制,表格等标识语句来取代己设定的象素,但就增加了工作量.

3.使用

只有一行,而使用


就会多了空白的一行.

4.使用16进制数来定义网页的颜色,而不要用red,black等语句,才能够充分利用Web调色板的216种色彩(另外的40种,一般人难以分辨).

5.在中加上就可以使你的网页不至于在帧链接到他处时缩小,或者用

//...">

打开一个新窗口.

6.用

来按制就能够让许多浏览器都可以看到表格居中的效果,如果您用的是Netscape4.0也可以加入align=center来代替它.

7.HMTL中的四个特殊字符(<,>,&,")是不能直接写在文件中的,必须用后面的语句来替换,<=<>=>&=&"="(英文字母一定要小写)

8.一些语义格式的字体效果,标题的斜体字,显示源程序的宽体字,强调用的斜体字,要求键盘输入的宽体字,状态表示的宽体字,强调的粗体字,构造变量的斜体字

HTML编写小经验

发表时间:

2004-8-2822:

02:

12 来源:

网页制作学习园地 点击1571次

  在用HTML(HyperTextMarkupLanguage,超文本链接标示语言)语言编写Web页面时,由于所用的Web浏览器对HTML支持的程度不同,常常会在HTML语言的运用上产生一些疑问。

在此,笔者将学习和实践中获得的几点经验奉献给大家,以供参考。

                      

   HTML中的几种常用特殊符号:

                              

   符号    替代指令                                    

    <(小于符号)  &lt                                    

    >(大于符号)  &gt                                    

    &(与符号)   &amp                                  

   ″(双引号)   &quot                                  

   不可分的空格 &nbsp                                  

   其中,不可分的空格是指两个单词有时会因版面关系而分成两行,此时如果将两个单词之间的空格替代为&nbsp,则它们将总是在一行中。

                                                      

    例1:

在HTML中,语句                                    

   A+B

 3>1

 (显示为A+B3>1)                  

   应写为                                                  

    A+B&ltC

 3&gt1

    (显示为A+B1)                                            

   例2:

′&′符一般不使用,只要不产生歧义,就不必用′&amp′替代。

如:

                                                

    ′if(ac)′可用语句                            

    if(a&ltb&&b&gtc)表示,而不必用                    

    if(a&ltb&amp&ampb&gtc)表示。

                      

   ′&lt′则必须用语句&amplt表示,而不能用&lt表示(显示为<)。

                                                        

    例3:

替代指令中的英文字母在HTML语句中的大小写必须统一,即或者均为大写,或者均为小写,而不能大小写混合。

如:

        

    ′<′符可用′&LT′或′&lt′表示,而不能用′&Lt′或′&lT′表示。

                                                

    笔者所使用的是Netscape Navigator30,在Windows31环境中运行。

HTML4.0的AccessKey

发表时间:

2004-8-2822:

00:

35 来源:

网页制作学习园地 点击644次

  例程1:

  通常我们在制作form表单时,实现聚焦一般得用鼠标在form框中点选,下面的例子都是用HTML4.0实现的,象windows菜单一样,首字符有下划线,用“ALT+首字符”就可以降光标定位在form框内了。

  代码是这样的:

Name:

Email:

Phone:

Suggest

  ...标签产生下划线;

  For="Name"和ID="Name"中的Name是一致的。

  ACCESSKEY=...设置“热键”。

  例程2:

  看看下面的选择框范例,它的微妙之处在于,选择项目时不必非得在框内点击鼠标了,在文本上选择即可。

不信试一试吧。

经常来这里

偶尔来看看

完整的HTML文件

发表时间:

2004-8-2821:

59:

35 来源:

网页制作学习园地 点击1841次

  INTERNET的迅猛发展,让许多软件公司看到了无限的商机,纷纷开发出各种主页制作软件。

为了让读者了解这些软件的特性,在学HTML代码的过程中也学会使用一些合适的工具,现在我们就来建立一个介绍主页制作软件的网站,讲解网站制作。

index.html

主页制作软件介绍

   输入上面的代码,存盘。

因为这一页是我们网站的首页,我们想浏览者输入我们的网址后,就显示这一页的内容,所以我们把这个文件设为默认文档,文件名为index.html,也可为index.htm。

字体和段落

FONT,PRE,STRONG,EM,B,I,Hx,P

段落

现在加入一些实质性的内容。

在和之间加入:

  如果愚公有推土机的话,也许到他孙子那辈,就可以把太行、王屋二山移走了,不必等到“子子孙孙,无穷尽矣”。

同样,虽然用记事本就可以写出主页来,但是好的主页制作软件却可以让你工作起来轻松自如,事半功倍。

  去yahoo查找一下主页制作软件(HTMLEDITOR),其结果让人目瞪口呆。

INTERNET所蕴藏的无尽商机让众多软件开发商蜂拥而上,极力争取分一勺羹。

庆幸的是,这些软件一般都是可以免费得到或试用的,你可以试用几个,从中发现符合你的要求的软件。

这当然要花一些时间,包括那段揪人肺腑的需要付费的上网下载时间。

  本站主要介绍几个当前流行的主页制作软件,对比它们的优缺点,帮助读者选择自己的软件。

源代码应该是:

  还记得小学语文老师的话吗?

“当文章的内容出现变化时,要另起一段;段落的开头空两格。

”显然这篇用HTML作的文章要不及格的。

怎么会这样?

原来,HTML忽略源代码里面的回车和连续空格,而必须用专门的标记安排段落格式。

   段落的标记是

,中间是一段的内容。

可以省略,因为HTML碰到下一个

就知道另起一段了。

   在每一段的开头加上

P的属性

   P的一个基本属性是ALIGN(对齐),可以有LEFT(左)、CENTER(中间)、RIGHT(右)几个值,默认值是LEFT。

左对齐段落。

居中段落。

右对齐段落。

空格

  空格是一个特殊字符。

HTML用&加字符串表示一些特殊字符。

空格是“ ”。

   一个汉字要占2个英文字符的大小,空2个汉字的位置就需要加4个“ ”。

   现在的效果就比较满意了。

特殊段落

PRE

ADDRESS

HR

标题

   虽然读者可以根据浏览器标题栏显示的TITLE里的内容,知道你的主页的标题。

但是由于内容大多在浏览器窗口的客户区内,所以在BODY部分加上一个标题,可以让人一目了然。

   紧跟着加上一句:

   主页制作软件介绍

   标题的字自然要大一些,就像MICROSOFTWORD里为标题专门定义了几个格式一样,HTML有几个标记是定义标题字体大小的,即,其中x的取值可以从1到6,总共有6级。

标题1

标题2

标题3

标题4

标题5

标题6

   不必添加

里的文字都是自成一段。

而且,Hx标记也有ALIGN属性,其设置和

一样。

   现在把标题设置成H1的格式,即:

   主页制作软件介绍

换行


   你可以看到,在有

的地方,HTML空了一行的位置,然后再开始下一段。

如果我想写一首诗或一段歌词,就要在一个段落里换行,这样的间隔就太大了。

可以用
来实现,如:

静夜思

床前明月光,

疑是地上霜。


举头望明月,

低头思故乡。


   我们来考虑一下另外一个极端。

这首诗的一行比较短,而有些歌词的一行可能要很长。

当浏览器的宽度达不到时,就会自动换行。

而我不想这样,我想保证这一行在同一行内显示,即使浏览器需要水平滚动条。

只要把这一行用包含起来就行了。

静夜思

床前明月光,

疑是地上霜。


举头望明月,

低头思故乡。


   如果希望在对里几个固定的地方可以换行,可以用

静夜思

床前明月光,

疑是地上霜。

举头望明月,

低头思故乡。

   当窗口宽度足够宽时,这四句诗在一行里显示。

如果不行,就会在有的地方换行,这样就可以保证每句诗在一行里。

动态HTML教程

(二)

发表时间:

2004-8-2911:

07:

50 来源:

网页制作学习园地 点击1004次

   动态HMTL网页利用串接样式表布局,并利用Javascript控制网页元素。

实际并不复杂或有很多的规定。

我们所需要作的只是要给网页加入样式,能使其运动,并且在两种主要的浏览器中都能正确显示。

   精通我们将用CSS-P布局网页,这是学习动态HTML的第1步。

学习完定位元素之后,我们将接着学习编写使其动态显示的脚本。

   大多数用于设计和页面布局的程序或文件格式必须现生成box,它们的宽度和高度可以改变,它们还能使你控制将对象叠放在对象之上。

   CSS-P的原理与其相似,你先用HTML定义一个容器(为了便于具备跨平台应用的兼容性,你最好实用

标签),设置其水平和垂直位置,然后设定哪个对象应该叠放在哪个对象之上。

   真的很简单,它能象大多数人(尤其那些利用表格定位和布局的人)希望的那样让HTML发挥功能。

你只需以一种不同的思维角度来思考网页的布局,本教程将重点讲述一些基本的布局技巧明天我们将利用Javascript控制你的网页布局。

   动态HTML中大多数的内容都要用到

标签作为容器。

(在串接样式表和CSS定位的规范草案中规定可以将任何对象定位,但Netscape的浏览器还不支持这项规定。

所以你必须用

标签作为类属容器),在容器内加入对象然后再定位。

   我们先为本教程中的范例生成一个box。

在本教程的范例中我们将用网猴的一个编辑Tim作为范例中的主角:

  

dramatispersonae

    

   

     

   

   这里是box的显示结果(为了辨认的方便,我给它加了一个红色边框)

   现在我们有了一个空的box,其ID名称为tim,其位置在距窗口左边10个像素,距窗口顶部10个像素的位置。

现在它还没有体现出动态HTML的魅力,所以我们在这个box中填入Tim的图片,并给它加一点说明:

   Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

   在3.2版本的HTML的网页(即不能支持动态HTML的网页)中,你将会注意到文字一直流到屏幕边缘之外,而Tim的图片朝左浮动。

  Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

   实际上是它浮动到了本文所在的表格单元的左边。

这是一个重要的区别。

当你将HTML放在一个已经被定位了的

之内时,你可以把它看作是放在了一个表格单元中(或者象在其他出版系统之内的制作方法那样)。

  在支持HTML3.2以后的版本的网页中,你可以看到文字自动回行:

  Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

  现在这个

标签里已经填充了内容,让我们利用CSS-P的LEFT和TOP选项技将其定位。

  

      

dramatispersonae     

    

    

       

      

   

  显示结果:

  Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

  你可能会注意到在本例中我使用了相对定位。

在相对定位和绝对定位中有一个很微妙但确确实实的区别。

  当你将一个对象用绝对定位指令定位时,你实际将其从你的HTML文件流中抽了出来,将其直接根据网页的左上角的位置进行定位。

这种情况下各个对象有可能互相重叠在一起。

  相对定位并不指根据百分比值或其他某个元素的位置来定位这个元素的位置。

它实际占据的就是它在这个HTML文件中的位置,它的定位起点基于HTML页所在的位置,这里是一个例子:

Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

  这两个句子中,单词Webmonkey都定位在距左边200像素的位置。

第1个句子用的是绝对定位,第2个用的是相对定位。

注意相对定位的句子中空出了相当于单词Webmonkey长度的空间,而绝对定位了的句子中没有这个空间,如果我给两个句子都加一个"top"参数值,则你会看到绝对定位了的句子将飘在文章的顶部,而相对定位的句子则就在它所在的句子的位置之下:

 Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.

  现在我们已经了解了两种定位的不同。

我们作一个小练习。

我们用CSS-P作一个网页。

试着做网页,然后我们将制作更复杂的布局(提示:

你可以用这个屏幕快照中的图象作为网页背景图象来帮助你定位。

注意将字体采用ComicSansMS)。

  你可以注意到上面的那个布局用表格就能很轻易地做到。

但是串接样式表比表格有一项独特的优势:

分层。

  你肯定注意到你无法用表格将几幅图片或文字叠放在一起。

一般情况下,如果人们希望实现这种效果只有制作一幅位图,在图片中制作出文字或图象叠放在一起的效果,然后将图片放在网页中。

  而利用动态HTML,则可以利用分层顺序将叠放显示各个对象,例:

HereisAaroninfrontofadesk.

 HereisAaronbehindadesk.

  在这个例子中,Aaron在他的桌子后面,Aaron的图片首先出现在源代码中:

 

  

 dynamic_html/tutor/aaron.gif">

  

 dynamic_html/tutor/extraDesk.gif">

但是如果我们想让Aaron站在桌子前面,我们可以这样写HTML代码:

   

  

 dynamic_html/tutor/extraDesk.gif">

  

dynamic_html/tutor/aaron.gif">

  这种类型的分层在HTML暗示编写。

所以搭建动态HTML网页的方法之一就是将各个对象按照显示的前后层次顺序排列排在显示底层的对象最先列出,而排在显示最上层的对象在源代码顺序的最后列出。

但是这种方式不一定不出问题。

很多时候象在源代码中的顺序和它最后的显示顺序必须没有任何关系。

而此时就需要用到z-indexCSS属性。

  这里是重新制作后的例子。

这次的HTML标识和一起一样,但是对象采用了明示的z-index。

  Aaronhasaz-indexof2.Thedeskhasaz-indexof1.

 Aaronandthedeskhaveanimpliedz-index.

  两个例子的HTML都是相同的,但CSS不同。

  #aaron{position:

absolute;left:

8px;top:

31px;width:

79px;height:

73px;z-index:

2}

  z-index可以是一个正值或一个负值(带负值的元素将位于母体元素的下面),它所造成的显示效果为:

展开阅读全文
相关搜索

当前位置:首页 > 总结汇报 > 学习总结

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2