精华内容
下载资源
问答
  • 基本网页制作代码,最适合与初学者学习与使用。
  • 文档里边包括几个关于网页制作方面实现一些基本功能的代码,自己整理的,可供借鉴。
  • 网页设计制作,网页揭秘刚才我们了解了网页的基本元素、构件,这些不但美化了网页,还丰富了网页内容,增强了网页功能。下面让我们来看一看网页究竟是怎样组织的。以课堂在线网站为例,选择滚动字幕,点击“查看”...
  • 网页制作常用代码

    2012-04-05 11:57:55
    这些都是自己开发过程中平时整理的网页制作常用代码,共享啦
  • 网页制作代码

    2015-08-18 20:24:05
    这是制作网页基本的一些代码,对于初学者是非常实用的,在网页制作中经常会用到
  • 一个简单的网页制作作业,学计算机的应该都会遇到要交这样的一个作业,本人做的是球员雷·阿伦的个人主页,分别介绍了基本资料、技术特点、精彩时刻、技术统计等,每页都有返回首页的链接。希望对初学网页制作的同学...
  • 一个简单的网页制作作业,学计算机的应该都会遇到要交这样的一个作业,本人做的是球员雷·阿伦的个人主页,分别介绍了基本资料、技术特点、精彩时刻、技术统计等,每页都有返回首页的链接。希望对初学网页制作的同学...
  • jsp网页制作常用代码

    2011-08-01 22:23:48
    jsp网页制作,常用代码,主要是在jsp页面中实现的,其中有基本的功能和一些复杂功能。
  • 网页制作HTML代码全攻略

    万次阅读 多人点赞 2017-06-08 09:06:44
    网页制作HTML代码全攻略

    网页制作HTML代码全攻略

     

    第一章:HTML 语言的结构

       html文件是标准的ASCII文件,它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。从结构上讲,html文件由元素(element)组成,组成html文件的元素有许多种,用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”,即它有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag),元素结束标记叫做结尾标注(end tag),在起始标注和结尾标注中向的部分是元素体。 每一个元素都有名称和可选择的属性,元素的名称和属性都在起始标注内标明。 比如体元素(body)

    <body backgroud="back-ground.gif">

    <h2> demo</h2>

    This is my firsthtml file. <p>

    </body>

       第一行是体元素的起始标注,它标明体元素从此开始。因为所有的标注都具有相同的结构,所以我们将仔细分析这个标注的各个部分,以便读者对标注的写法

    有一大概了解。

       < 起始标注开始

       body 元素名称,由于元素和标注一一对应,所以元素名也叫标注名。需要注意的是<和body之间不能有空格。元素名称不分大小写。

       background属性名。一个元素可以有多个属性,属性及其属性值不分大小写。本属性指明用什么方法来填充背景。

      指明属性值

       “background.gif”属性值,表示用background.gif文件来填充背景。

       属性名,,属性值合起来构成一个完整的属性,一个元素可以有多个属性,各个属性用空格分开。

       > 起始链接链结束

       第二行和第三行是body元素的元素体,最后一行是body元素的结尾标注。结尾标注用</开始,随后是元素名,然后是大于号>。

       从上面的例子中,我们可以看出,一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素<h2></h2>和第三行的分段元素<p>。实际上,html文件仅由一个html元素组成,即文件以<html>开始,以</html>结尾,文件其部分都是 html的元素体。html元素的元素体由

    两大部分,即头元素<head>..</head>和体元素<body></body>和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说,一个html文件应具有下面的结构:

       <html>  html文件开始

       <head> 文件头开始

       文件头

       </head> 文件头结束

    <body> 文件体开始

       文件体

       </body> 文件体结束

       </html>   html文件结束

       需要说明的是,html是一门发展很快的语言,早期的html文件并没有如此严格的结构,因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。还需要说明的是,各种浏览器对html元素及其属性的解释也不完全一样,本书中所讲的元素,元素的属性及其输出是以Netscape2.0 浏览器为准的,作者将尽量给出别的浏览器对某一元素的解释。

       一般来讲,html的元素有下列三种表示方法:

       1)<元素名>文件或超文本</元素名>

       2)<元素名  属性名=“属性值…>文本成超文本</元素名>

       3)<元素名>

       第三种写法仅用于一些特殊的元素,比如分段元素P,它仅仅通知www浏览器在此处分段,因而不需要界定作用范围, 所以它没有结尾标注。htlm3.0标准中,也定义了</p>标注,它用于需要界定作用范围的段落,比如增加对齐方式属性的段落。

       注意:HTML并非大小写敏感. <title> <TITLE>或者<TiTlE>是一样的.

       html文件中,有些元素只能出现在头元素中,绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息,比如文件名称,是否可检索等等。这些元素书写的次序是无关紧要的,它只表明该html有还是没有该属性。与此相反,出现在体元素中的元素是次序敏感的,改变元素在html文件中的次序会改变该html文件的输出形式

    第二章: 构成网页的基本元素

      2.1标题(TITLE)

       Title元素是文件唯一一个必须出现的元素,它也只能出现在文件头中。title元素的格式为:

       <title>文件标题</title>

       title标明该html文件的标题,是对文件内容的概括。一个好的标题应该能使读者从中判断出该文件的大概内容。文件的标题一般不会显示在文本窗口中,而以窗口的名称显示出来。除了标识窗口外,当将某一 homepage 存入书签或文件时,title还用作书签名或缺省的文件名。

       title的长度没有限制,但过长的标题会导致折行,一般情况下它的长度不应超过64字符。由于title的作用是标明文件内容,所以太短的title也是不可取的,比如:introduction这个标题,读者不可能根据它判断出本文介绍的是什么。一个好的例子是:

       <title> AnIntroduction to HTML </title>

       在头元素中还可以出现其他元素,如<isindex>,<meta>等等。这些元素都不是必须的,而且也不常用。 这些元素的用法和它们的含义可以参考有关文献。

    下面是一个最简单的html 文件

    <html>

    <title>thesimplest html file</title>

    This is my firsthtml file.

    </html>

     §2.2 标题(hn)

       标题元素有6种,分别为h1, h2,…h6,用于表示文章中的各种标题。标题号越小,字体越大。一般情况下,浏览器对标题作如下解释:

       h1 黑体,特大字体,居中,上下各有两行空行。

       h2 黑体,大字体,上下各有一到两行空行

       h3 黑体(斜体),大字体,左端微缩进,上下空行

       h4 黑体,普通字体,比h3更多缩进,上边一空行

       h5 黑体(斜体),与h4相同缩进,上边一空行

       h6 黑体,与正文有相同缩进,上边一空行

       Netscape hn的解释为,一律黑体,字体越来越小。

       hn可以有对齐属性,align#,   #表示

    left标题居左

    center标题居中

    right 标题居右

       例: <h2 align=center>Chapter2 </h2>

    <h1>标题元素!</h1> 标题元素!

    <h2>标题元素!</h2> 标题元素!

    <h3>标题元素!</h3> 标题元素!

    <h4>标题元素!</h4> 标题元素!

    <h5>标题元素!</h5> 标题元素!

    <h6>标题元素!</h6> 标题元素!

     §2.3 分段<P>

       html的浏览器是基于窗口的,用户可以随时改变显示区的大小,所以html将多个空格以及回车等效为一个空格,这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素<P>。比如下面两段源文件有相同的输出。

    <h2>This is alevel Two Heading </h2>

    paragraph one<p>paragraph two <p>

    … … … … … … … … … …

    <h2>This Is aLevel Two Heading</h2>

    paragraph one<p>

    paragraph Two<p>

       <p>也可以有多种属性,比较常用的属性是:

       aligh=#,  #可以是left,center,right,其含义同上文。

       例 <p align=center>This is a centeredparagraph </p>

       当 html文件中有图形,图形可能占据了窗口的一端,图形的周围可能还有较大的空白区。这时,不带clear属性的<p>可能会使文章的内容显示在该空白区内为确保下一段内容显示在图形的下方,可使用clear属性。clear属性的含义为:

    clear=left 下一段显示在左边界处空白的区域

    clear=right 下一段显示在右边界处空白的区域

    clear=all 下一段的左右两边都不许有别的内容

       §2.4 列表List

       列表用于列举事实,常用的列表有3种格式,即无序列表(unordered List),有序列表(ordered list)和定义列表(definition list)

      2.4.1 无序列表(ul)

       无序列表用(ul)开始,每一个列表条目用<li>引导,最后是</ul>,注意列表条目不需要结尾标注</Li>。输出时每一列表条目缩进,并且以黑点标示。

    例 :

      <ul>

      <li>Today

      <li>Tommorow

      </ul>

    输出为

     Today

     Tommorow

      2.4.2 有序列表<ol>

       有序列表与无序列表相比,只是在输出时列表条目用数字标示,下面是一个例子及其输出:

       例:

        <ol>

        <li>Today

        <li>Tommorow

        </ol>

       输出为:

       1.Today

        2.Tommorow

       2.4.3 定义列表<dl>

       定义列表用于对列表条目进行简短说明的场合,用<dl>开始,列表条目用<dt>引导,列表条目的说明用<dd>引导。

    <dl>

    <dt>Item 1

    <dd>The definition of item 1

    <dt>Item 2

    <dd>Definition or explaination of item 2

    </dl>

    输出为:

    Item 1

       The definition of item 1

    Item 2

       Definiton or explaination of item 2

      2.4.4 改变条目标记

       1.改变无序列表条目标记

       无序列表输出时,每一条目前都有一个黑色圆点,用户可以用type序性修改条目的标记。type可以是disc 实心圆点 cirde圆圈 square实心方点

    <ul>

    <li type=disc>ONE

    <li type=circle>TWO

    <litype=square>THREE

    </ul>

    输出为:

    ●ONE

    ○TWO

    ■THREE

       2.改变有序列表条目标记

       有序列表条目标记的缺省值是阿拉伯数字,可以用type属性修改。方法为:

    <li type=#>

    Li=    A, 大写字母

    a, 小写字母

    I, 大写罗马数字

    i, 小写罗马数字

    l, 缺省,阿拉伯数字

    <ol><litype=A>ONE-ONE

    <li>ONE-TWO</ol>

    输出为:

    A.ONE-ONE

    B.ONE-TWO

    <ol><litype=a>ONE-ONE

    <li>ONE-TWO</ol>

    输出为:

    a.ONE-ONE

    b.ONE-TWO

    <ol><litype=I>ONE-ONE

    <li>ONE=TWO</ol>

    输出为:

    .ONE-ONE

    .ONE-TWO

    <ol><litype=i>ONE-ONE

    <li>ONE-TWO</ol>

    输出为:

    i.ONE-ONE

    ii.ONE-TWO

    <ol><litype=1>ONE-ONE

    <li>ONE-TWO</ol>

    输出为:

    1.ONE-ONE

    2.ONE-TWO

      3.改变有序列表条目的起始数字

       有序列表的条目数字在缺省情况下是从1开始的,用start属性可修改这一值。方法为<ol start=#>   #是条目起始号

    <ol start=5>

    <litype=A>ONE-ONE

    <li>ONE-TWO

    <ol start=10>

    <li>TWO-ONE

    <litype=i>TWO-ONE

    </ol></ol>

    输出为:

    E.ONE-ONE

    F.ONE-TWO

    10.TWO-ONE

    xi.TWO-TWO

       2.4.5 列表的嵌套

       各种列表可以相互嵌套,每一个列表条目都可以是一个单独的列表。每嵌套一层,列表条目的输出就会有更大的缩进。请参照上面的例子。

       §2.5 预格式化文本<pre>

       html的输出是基于窗口的,因而html文件在输出时都是要重新格式化的,若确实不需要重新格式化的内容,可以用<pre>…</pre>通知浏览器。浏览器在输出时,对这部分内容几乎不做修改地输出,输出的字体电传打字机字体。早期的html规范规定在预格式化区内不能出现格式化输出的元素。如hn等,Netscape在遇到预格式化元素时,允许其中有其他元素。

    <pre>

    please use yourcard.

    VISA Master

    <b>Here is anorder form.</b>

    <ul><li>Fax

    <li>Air Mail</ul>

    </pre>

    输出为:

    please use yourcard

    VISA Master

    Here is an orderform.

    ●Fax

    ●Air Mail

       §2.6 块引用<BLOCKQUOTE>

       块引用用<BLOCKQUOTE>标注,使屏幕显示单独的一块。大多数的浏览器采用缩进编排的方式,使这一块和其他部分的文本区分开来,上下各有一空行。

    块引用(Blockquote)<blockquote>...</blockquote>

    Her Song:

    <blockquote>

    When I was young, Ilistened to the radio

    waiting for myfavorite songs....

    </blockquote>

    Her Song:

    When I was young, Ilistened to the radio waiting for my favorite songs....

       §2.7 居中

       很多元素都有对齐方式属性,如hn 、p等。也可以直接用居中标注<center>…</center>

    <h3align=center>Wonderful!!</h3>

    <center>Thismust be my dream.</center>

    输出为:

    Wonderful!!

    This must be mydream.

    第三章:超文本链接指针

       超文本链接指针是html最吸引人们优点之一。链接指针可以使读者在整个Internet网上方便地链接。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力,而每一个链接指针正好代表了作者或者读者的思维跳跃,这更加符合人类的思维方式。因而组织得好的链接指针有助于理解作者的意图。

       一个超文本链接指针由两部分组成。一是被指向的目标,它可以是同一文件的另一部分,也可以是世界另一端的一个文件,还可以是动画或音乐;另一部分是指向目标的链接指针。

       §3.1 统一资源定位器URL

       统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中,定位一个文件需要路径和文件名,对于遍布全球的Internet网,显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中,所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而在Internet上,各个网络,各台主机的操作系统都不一样,因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为:

       protocol:// machine.name[:port]/directory/filename

       其中protocol是访问该资源所采用的协议,即访问该资源的方法,它可以是: http 超文本传输协议,该资源是html文件file 文件传输协议,用ftp访问该资源ftp 文件传输协议,用ftp访问该资源gophergopher协议,该资源是gopher文件news 表明该资源是网络新闻

       madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如sun.ihep.ac.cn port端口号,是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。 只有当服务器所使用的端口号不是缺省的端口号时才指定。

       directory和filename是该资源的路径和文件名。

       一个典型的URL为:http://www.ihep.ac.cn它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。

       与单机系统绝对路径,相对路径的概念类似,统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件,如果想看同一个目录下的另一个文件china.html,你可以直接使用china.html,这时china.html就是一个相对url,它的绝对url为http://www.ihep.ac.cn/china.html

       §3.2 指向一个目标<a>

       在html文件中用链接指针指向一个目标。其基本格式为:

       <a href="/url">字符串

       href属性中的统一资源定位器(url)是被指向的目标,随后的“字符串”在html文件中充当指针的角色, 它一般显示为蓝色。当读者用鼠标点这个字符串时,浏览器就会将url处的资源显示在屏幕上。例如:

       IHEP CHINA homepage

       用户用鼠标点取IHEP china homepage,即可看到高能所编写的关于中国情况的介绍。在这个例子中, 充当指针的是IHEP china homepage,下面我们将看到用图象做为指针的例子。

       在编写html文件时,需要知道目标的url。如何才能得到目标的url呢?对于自己主机内的文件,它的url 可以根据该文件的实际情况决定。对于Interner上的资源, 我们在用浏览器观看时,它的url会在浏览器的Location一栏中显示出来,把它抄下来写到你的html文件中即可。

       在编写html文件时,对有能确定关系的一组资源(比如在同一个目录中)应采用相对url,这不仅简化你的html文件,而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时,用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变)。但如果你用绝对url编写html,你就不得不逐字修改每个链接指针中的url,这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系,比如你的html文件是介绍各大学情况的,它所指向的目标分布在全球的主机中,这时你就只能用绝对url了。

       在本章的末尾,作者给出一个完整的html文件,该文件使用了前三章介绍的全部元素,以便于读者理解。

       §3.3 标记一个书签

       上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件,从头到尾地读很浪费时间,能不能在同一文件的不同部分之间也建立起链接,使用户方便地在上下方之间跳转呢?答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。对于一个完整的文件,我们可以用它的url来唯一地标识它, 但对于同一文件的不同部分,我们怎样来标识呢?下面的内容将介绍链接指针元素的另外的一个用途,标识书签。

       标识一个书签的方法为:

       <a name="name">text</a>

    name属性将放置该标记的地方标记为“name”,name是一个全文唯一的标记串,text部分可有可无。这样,我们就把放置标记的地方做了一个叫做“name”的标记。

       做好标记后,可以用下列方法来指向它,

       <a href="url#name">text

    url是放置标记的html文件的url name是标记名,对于同一个文件,可以写为

       <ahref="#name">text

    这时就可以点取text跳转到标记名为name的部分了。

       §3.4 目标窗口

       如果希望被指向的目标在一个新的窗口中显示,可以使用target属性来修饰链接指针元素。

       <ahref="/url" target="window-name">text

    将url代表的资源显示在一个新的窗口中,该窗口的名字叫window-name。

       §3.5 图象链接指针

       图象也可以做为链接指针。格式为:

       <a href="/url"><imgsrc="/url">

       可以看出,上例中用<img src="/url">取代了链接指针中text的位置。

       <img src="/url">是图象元素,它表明显示url代表的图象文件,参见图象一章。

       下面是一个简单的图象链接指针:

       <ahref="/www.ihep.ac.cn">China home page<imgsrc="flag.gif">

       边框 <img border=#> #=value

    <ahref="/URL">

    <imgsrc="/URL" border=15>

    §3.6 图象地图(imagemap)

       上一节介绍的图象链接指针每幅图只能指向一个地点,而图象地图可以把图象分成多个区域,每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。

       使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明,它还需要一个后缀为.map的文件,用来说明图象分区及其指向的url的信息。 在.map文件中说明分区信息的格式如下:

       rect url 左上角坐标,右下角坐标

       poly url 各顶点坐标

       circle url 直径两端点坐标

       default url

       rect指定一个矩形区域,该区域的位置由左上角坐标和右下角坐标说明。poly 指定一多边形区域, 该区域的位置由各顶点坐标说明。circle 指定一圆形区域, 该区

    域的位置由垂直通过圆心的直径与该圆的交点坐标说明。default 指定图象地图其它部分的url。坐标的写法为:x,y ,各点坐标之间用空格分开。下面是一个完整的说明文件,

       default http://www.ihep.ac.cn

       rect http://www.ibm.com 140,20 280,60

       poly http://www.microsoft.com 180,80200,140

       circle http://www.yahoo.com 80,140 80,100

       图象地图需要一个特殊的处理程序 imagemap,imagemap放在/cgi-bin 中。在html 文件中引用图象地图的 格式为:

       <ahref="/cgi-bin/imagemap/mymap.map">

       <img src="mymap.gif" ismap>

       可以看出这是一个包含图象元素的链接指针元素。图象元素指明用于图象地图的图象的url,并用Ismap属性说明。需要说明的是链接指针中的href属性,它由两部分组成,第一部分是/cgi-bin/imagemap ,它指出用哪个程序来处理图象地图,它必须原样写入,第二部分才是图形地图的说明文件mymap.map。/cgi-bin/imagemap/mymap.map绝不表示mymap.map在/cgi-bin/imagemap目录中。在netscape扩展中,图象地图可以用一种比较简化的方式来表示,这就是客户端图象地图。用户端地图可以将图象地图的说明文件写在html文件中,而且不需要另外的程序来处理。这就使html作者可以用同别的元素相一致的写法来写图象地图。 客户端图象地图还有一个优点,当鼠标指向图象地图的不同区域时,浏览器能显示出各个区域所指向的url。但目前只有netscape2.0以上版本才支持这一扩展。

       用户端图象地图的格式为:

       <img src="/url"usemap="#mymap">

       src="/url" 指定用作图象地图的图象

       usemap属性指明这是客户端图象地图

       "#mymap"是图象文件说明部分的标记名,浏览器寻找名字为mymap的<map>元素并从中得到图象地图的分区信息。客户端图象地图的分区信息用<map name=mapname>元素说明,name属性命名<map>元素。图象地图的各个区域用<areashape="形状" coords="坐标" href="/url">说明,形状可以是:rect矩形,用左上角,右下角的坐标表示,各个坐标值之间用逗号分开; poly多边形,用各顶点的坐标值表示;circle圆形,用圆心及半径表示,前两个参数分别为圆心的横、纵坐标, 第三个参数为半径。

    href="/url",表示该区域所指向的 资源的url,也可以是nohref,表示在该区域鼠标点取无效。客户端图象地图各个区域可以重叠,重叠区以先说明的条目为准,下面是一个例子:

    源程序:

    <imgsrc="mapimg.gif" usemap="#Face>

    <mapname="Face">

    <!TextBOTTON> 此行是注释

    <areashape="rect"

    href="page.html"

    coords="140,20,280,60">

    <!TriangleBOTTON>

    <areashape="poly"

    href="/image.html"

    coords="100,100,180,80,200,140">

    <!FACE>

    <areashape="circle"

    href="/nes.html"

    coords="80,100,60>

    </map>

    第四章: 版面风格控制

       §4.1 字体大小

       html有七种字号,1号最小,7号最大。缺省字号为3,可以用<basefontsize=字号>设置缺省字号。

       设置文本的字号有两种办法,一种是设置绝对字号,;另一种是设置文本的相对字号;。用第二种方法时“+”号表示字体变大,“-”号表示字体变小。

    字体大小 字体大小

    字体大小  字体大小

    字体大小 字体大小

    字体大小 字体大小

    字体大小 字体大小

    字体大小 字体大小

    字体大小 字体大小

       §4.1.2 字体风格

       字体风格分为物理风格和逻辑风格。

       物理风格直接指定字体,物理风格的字体有:<b>黑体,<i>斜体,<u>下划线,<tt>打字机体。

       逻辑风格指定文本的作用:<em>强调<srrony>特别强调 <code>源代码<samp>例子 <kbd>键盘输入<var>变量 <dfn>定义<cite>引用 <small>较小<big>较大 <sup>上标<sup>下标

    物理风格(Physical Style):

    <b>今天天气真好!</b> 今天天气真好!

    <i>今天天气真好!</i> 今天天气真好!

    <u>今天天气真好!</u> 今天天气真好!

    <tt>今天天气真好!</tt> 今天天气真好!

    <sup>今天天气真好!</sup> 今天天气真好!

    <sub>今天天气真好!</sub> 今天天气真好!

    <s>今天天气真好!</s> 今天天气真好!

    <strike>今天天气真好!</strike> 今天天气真好!

    逻辑风格(Logical Style):

    <em>今天天气真好!</em> 今天天气真好!

    <strong>今天天气真好!</strong> 今天天气真好!

    <code>今天天气真好!</code> 今天天气真好!

    <samp>今天天气真好!</samp> 今天天气真好!

    <kbd>今天天气真好!</kbd> 今天天气真好!

    <var>今天天气真好!</var> 今天天气真好!

    <dfn>今天天气真好!</dfn> 今天天气真好!

    <cite>今天天气真好!</cite> 今天天气真好!

    <small>今天天气真好!</small> 今天天气真好!

    <big>今天天气真好!</big> 今天天气真好!

       §4.1.3 字体颜色

       字体的颜色用...指定

       xxxxxx可以是6位16进数,分别指定红、绿、兰的值,也可以是black,olive,teal,red,blue,maroon,navy,gray,lime,fudrsia,white,green,purple,sliver,yellow,aqua 之一。

       字体风格

       字体风格

       §4.1.4 闪烁

       <blink>文本</blink>使文本闪烁,闪烁频率为1秒钟一次。

       §4.2 标尺线(hr)

       标尺线,一般用于分隔同一文体的不同部分。在窗口中划一条标尺线非常简单,只要写一个<hr>即可。标尺线的宽度用<hrsize=n>指定,width=#>指n是线宽,单位是象素。例:<hr size=10>。 <hr 定标尺线长度,可以指定绝对线长,也可以指定标尺线长度占窗口宽度的百分比。例<hr width=50> 、<hr width=50%>。

       标尺线的位置用<hr align=#>指定。

       #是left成right之一,left表示左端与左边界对齐,right是右端与右边界对齐,缺省,标尺线出现在窗口正中。

    <hr>

    --------------------------------------------------------------------------------

    <hr size=10>

    --------------------------------------------------------------------------------

    <hr width=50>

    --------------------------------------------------------------------------------

    <hrwidth=50%>

    --------------------------------------------------------------------------------

    <hr width=50%align=left>

    --------------------------------------------------------------------------------

    <hr width=50%align=right>

    --------------------------------------------------------------------------------

    <hr noshade>

    --------------------------------------------------------------------------------

    <hr color=#>

    #=rrggbb 16 进制 RGB 数码,或者是下列预定义色彩:

    Black, Olive, Teal,Red, Blue, Maroon, Navy, Gray, Lime,

    Fuchsia, White,Green, Purple, Silver, Yellow, Aqua

       4.3 行间图象

       行向图象使你的页面更加漂亮,但是行向图象会导致网络通讯量急剧增大。使访问时间延长。所以在主页(homepage),不宜采用很大的图象。如果确实需要一些大图象,最好在主页中用一个缩小的图象指向原图,并标明该图的大小。这样读者可以快速地访问您的主页,自己选择看还是不看那些图象。

       图象的基本格式为:

        <img src="/image-url">或<img src="/image-urd"alt="text">image-url是图象文件的url。目前,大部分浏览器支持 .gif 和 .xbm文件,netscape还支持jpeg文件。alt属性告诉不支持图象的浏览器用text代替该图。

       4.3.2 图象与文本的对齐方式

       图象在窗口中会占据一块空间,在图象的左右可能会有空白,不加说明时,浏览器将随后的文本显示在这些空白中,显示的位置由align属性指定。

    <imgsrc="/URL" align=top> My face!

    My Face!

    <imgsrc="/URL" align=middle> My face!

    My Face!

    <imgsrc="/URL" align=bottom> My face!

    My Face!

    4.3.3 图象在页面中的对齐方式/布局(Floating Image)

    <imgalign=left>

    <imgsrc="/URL" align=left>My Face!<br>

    It isalways<br>

    smiling.<br>

    Hahaha....<br>

    My Face!

    It is always

    smiling.

    Hahaha....

     

     

    <imgalign=right>

    My Face!

    It is always

    smiling.

    Hahaha....

     

     

    <br clear=all>

    <imgsrc="/URL" align=left>My Face!<br>

    It is always

    <brclear=all>

    smiling.<br>

    Hahaha....<br>

    My Face!

    It is always

    smiling.

    Hahaha....

     

     

    <img vspace=#hspace=#> #=value

    <imgsrc="/URL" align=left vspace=10 hspace=20>My Face!<br>

    It is always<br>

    smiling.<br>

    Hahaha....<br>

    My Face!

    It is always

    smiling.

    Hahaha....

       4.4 分行<BR>和禁止分行<nobr>

       <Br>表示在此处分行,<nobr>....</nobr>叫通知浏览器,其中的内容在一行内显示,若一行内显示不了,则超出部分被裁剪掉。

       <br clear=#>clear属性标明下一行的情况,如clear=left,表示下一行从左边界处开始。#可以是left,right,all之一。例:

       §4.5 背影和文本颜色

       窗口背景可以用下列方法指定

       <bodybackground="/image-url">

       <body bgcolor=# text=# link=# alink=#vlink=#>

       前者指定填充背景的图象,如果图象的大小小于窗口大小,则把背景图象重复,直到填满窗口区域。

       后者指定的是16进制的红、绿、兰分量。

    bgcolor 背景颜色

    Text 文本颜色

    Link 链接指针颜色

    alinik 活动的链接指针颜色

    vlinik 已访问过的链接指针颜色

       例 <body bgcolor=FFoooo>大红背景色.

       注意,此时体元素必须写完整,即用<body>结束

       4.6 转义字符与特殊字符

       html中< , >,&有特殊含义,(前两个字符用于标注,&用于转义),不能直接使用。使用这三个字符时,应使用它们的转义序列。

       & 的转义序列为 &amps 或 & #38;

       < 的转义序列为 &Lt; & #60;

       > 的转义序列为 &gt; & #62;

       前者为字符转义序列,后者为数字转义序列。

       例如 & Lt; font &Lgt;显示为<font>若直接写为<font>则被认为是一个标注。

       需要说明的是:

    a. 转义序列各字符间不能有空格;

    b. 转义序列必须以“;”结束;

    c. 单独的&不被认为是转义开始。

       如“ & Lt; ”被解释为 “& Lt;”而不是<“&# 62 ;”被解释为 “& # 60;”而不是>另一个需要转义的字符是引号,它的转义序列为"""或""",例如<imgsrc="/image.gif"alt="A &quol; real " example">。html使用的字符集是ISO &859 Larin-1字符集,该字符集中有许多标准键盘上无法输入的字符。对这些特殊字符只能使用转义序列。

     

     

     

      主题:Re:网页制作HTML代码全攻略

    第五章:表格(Table)

       §5.1 表格的基本形式

       一个表由<table>开始,</table>结束,表的内容由<tr>,<th>和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th>说明表的列数和相应栏目的名称,有多少个栏就有多少个<th>;<td>则填充由<tr>和<th>组成的表格。是否用表格线分开为部分内容用border属性说明,下面是一个有表格线和一个元表格线的表及其输出。

    带边框的表格:

    <tableborder>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Food Drink Sweet

    A B C

    不带边框的表格:

    <table>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Food Drink Sweet

    A B C

       5.2 有通栏的表

       1、有横向通栏的表用<thcolspan=#>属性说明:colspan表示横向栏距,#代表通栏占据的网格数,它是一个小于表的横向网格数的整数。

    跨多列的表元 <th colspan=#>

    <tableborder>

    <tr><thcolspan=3> Morning Menu</th>

    <tr><th>Food</th><th>Drink</th> <th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Morning Menu

    Food Drink Sweet

    A B C

       2、有纵向通栏的表用rowspan=#属性说明:rowspan表示纵向栏距,#表示通栏占据的网格数,应小于纵向网络数。需要说明的是有纵向通栏的表,每一行必须用</tr>明确给出一横向栏目结束,这是和表的基本形式不同的。

    跨多行的表元

    <throwspan=#>

    <tableborder>

    <tr><th rowspan=3>Morning Menu</th>

    <th>Food</th><td>A</td></tr>

    <tr><th>Drink</th><td>B</td></tr>

    <tr><th>Sweet</th><td>C</td></tr>

    </table>

    Morning Menu Food A

    Drink B

    Sweet C

       5.3 表格属性

       1、表的大小用width=#和height=#属性说明。前者为表宽,后者为表高,#是以象素为单位的整数。

    <table borderwidth=# height=#>

    表格尺寸设置:

    <table borderwidth=170 height=100>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Food Drink Sweet

    A B C

       2、边框宽度由border=#说明,#为宽度值,单位是象素。

    <tableborder=#>

    边框尺寸设置:

    <table border=10>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Food Drink Sweet

    A B C

       3、表格间距即划分表格的线的粗细用cellspacing=#表示,#的单位是象素,下面的例子将表格间距定义为10个象素,它看起来象用很粗的线划分的表格。

    <table bordercellspacing=#>

    表元间隙设置:

    <table bordercellspacing=10>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Food Drink Sweet

    A B C

       5.4 表中文本的输出

       1、文本与表框的距离用cellpadding=#说明。下面的例子使表的内容与表框离开10个象素。

    <table bordercellpadding=#>

    表元内部空白设置:

    <table bordercellpadding=10>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Food Drink Sweet

    A B C

       2、表格的后度大于其中的文本后度时,文本在其中的输出位置用align=#说明。#是 left,center和right三者之一,分别表示左对齐,居中和右对齐,align属性可修饰<tr>,<th>和<td>标注。

    <tr align=#>

    <th align=#>#=left, center, right

    <td align=#>

    <table borderwidth=160>

    <tr>

    <th>Food</th><th>Drink</th><th>Sweet</th>

    <tr>

    <tdalign=left>A</td>

    <tdalign=center>B</td>

    <tdalign=right>C</td>

    </table>

    Food Drink Sweet

    A B C

       3、表格的高度大于其中文本的高度时,可以用valign=#说明文本在其中的位置。#是top,middle,bottom,baseline四者之一。分别表示上对齐,文本中线与表格中线对齐, 下对齐,文本基线与表格中线对齐,特别注意的是baseine对齐方式,它使得文本出现在网格的上方而不是相象中的下半部。同样,valign可以修饰<tr>,<th>,<td>中的任何一个。

    <tr valign=#>

    <th valign=#>#=top, middle, bottom, baseline

    <td valign=#>

    <table borderheight=100>

    <tr>

    <th>Food</th><th>Drink</th>

    <th>Sweet</th><th>Other</th>

    <tr>

    <tdvalign=top>A</td>

    <tdvalign=middle>B</td>

    <tdvalign=bottom>C</td>

    <tdvalign=baseline>D</td>

    </table>

    Food Drink SweetOther

    A B C D

       5.5 浮动表格

       所谓浮动表格是指表与文件中重中内容对齐时,若在现在位置上不能满足其对齐方式,表格含上下移动,即“挤开”一些内容,直到满足其对齐要求。

       浮动属性一般由align=left或right指定。

       下面的例子也可以看出,cllign=left时把字符串“挤到”了表的右边。当右边空间不够时,该字符串会显示在表的下在边,看起来象是表“浮”到了字符串上。

    <tablealign=left>

    <tablealign="left" border>

    <tr><th>Food</th><th>Drink</th><th>Sweet</th>

    <tr><td>A</td><td>B</td><td>C</td>

    </table>

    Myfavorites...<br>

    cookies,chocolates, and more.

    Food Drink Sweet

    A B C

    My favorites...

    cookies,chocolates, and more.

    <tablealign=right>

    Food Drink Sweet

    A B C

       5.6 表格颜色

       表格的颜色用bgcolor=#指定。

       #是16进制的6位数,格式为rrggbb,分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称,参见文本颜色。

    <tableborder>

    <tr><thbgcolor=000000>

    Food</th>

    <thbgcolor=whit>Drink</th>

    <tr><tdbgclor=ffaaaa>A</td><td>B</td>

    </table>

    Food Drink

    A B

    第六章:帧结构 Frame

       6 .1 帧结构的基本格式

       帧结构将流览器的窗口分成多个区域,每个区域可以单独显示一个html文件,各个区域也可相关连地显示某一个内容,比如可以将索引放在一个区域,文件内容显示在另一个区域。

    帧结构的基本结构如下

    <html>

    <head>

    <title>...</title>

    </head>

    <noframes>...</noframes>

       <frameset>

       <frame src="/url">

    </frameset>

    </html>

       <noframes>...</noframes>中的内容显示在不支持帧结构的浏览器窗口中,因而这里指向一个普通版本的html文件,以便使用不支持帧结构浏览器的用户阅读。

       帧结构由<frameset>指定,并且可以嵌签,分区中种部分显示的内容用<framre>指定。

       可以将窗口横向分成几个部分,也可以分成纵向几个部分,还可以混和帧结构。

       6.2 横向帧结构

       横向帧结构用<frameser rows=#>指定,#可以是一个百分数,也可以是一整数。前者规定各帧占窗口的百分数,后者指定各帧的绝对大小。例如,下面的例子将窗口分成30%、20%、50%的几个区域,各区域的内容分别为A.html,B.html,C.html.

    <frameset rows=#>

    横向排列多个窗口:

    <framesetrows=25%,25%,50%>

    <framesrc="/A.html">

    <framesrc="/B.html">

    <framesrc="/C.html">

    </frameset>

    A

    B

    C

       6.3 纵向帧结构

       纵向帧结构用<frameset cols=#>指定,参见下例:

    <framesetcols=#>

    纵向排列多个窗口:

    <framesetcols=30%,20%,50%>

    <framesrc="/A.html">

    <framesrc="/B.html">

    <framesrc="/C.html">

    </frameset>

    A B C

       6.4 混合帧结构

       将窗口分成横纵几个区域时,用<frameset>代替<frame>链接至即可将原的分好的<frame>区域再次帧结构, 下面的例子先将窗口分成20%,80%, 然后将右边的区域再分成分别占40%和60%的上下两个区域。

    纵横排列多个窗口:

    <framesetcols=20%,*>

    <framesrc="/A.html">

    <frameset rows=40%,*>

    <framesrc="/B.html">

    <framesrc="/C.html">

    </frameset>

    </frameset>

    A B

    C

       6.5 帧结构与帧中文本的间距

       帧结构与其中的文本间距可以用Marginwidth=#和marginneigh=#来指定,前者指定文本与帧结构的边缘的横向距离,后者为纵向距离,其单位都为象素,下面的例子中,将右边帧结构的左右边距,上下空白都设为50个象素。

       6.6 帧结构间的关联

       帧结构之间可以有特定的关联,比如将某一帧的内容输出到另一个帧,这样我们就可以把其中一个帧作为输出帧,另一个帧作为选择帧。实现这种关联需要做下列的事情。

       ①在帧结构的hrme文件中标记各个帧,标记的方法是在<frame>中加入name属性,比如上例,定义左边的帧为输出,右边帧为主帧。

       <framesrc="/A.html"name=display>

       <framesrc="/B.htme"name=index>

       ②在B.html文件中指定输出到哪个帧方法是在B.html文件中加入下列一行。

       <base target="display">

       这便得用鼠标点取B.html中的链接指针,它的输出会显示在左边的帧中。

       特殊的 4 类操作(很有用喔)

    <ahref="/url" target=_blank> 新窗口

    <ahref="/url" target=_self> 本窗口

    <ahref="/url" target=_parent> 父窗口

    <ahref="/url" target=_top> 整个浏览器窗口

    1.οncοntextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

    <table borderοncοntextmenu=return(false)><td>no</table> 可用于Table

    2. <bodyonselectstart="return false"> 取消选取、防止复制

    3.οnpaste="return false" 不准粘贴

    4.οncοpy="return false;" oncut="return false;" 防止复制

    5. <linkrel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

    6. <linkrel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

    7. <inputstyle="ime-mode:disabled"> 关闭输入法

    8. 永远都会带着框架

    <scriptlanguage="javascript"><!--

    if (window ==top)top.location.href = "frames.htm"; //frames.htm为框架网页

    // --></script>

    9. 防止被人frame

    <SCRIPTLANGUAGE=javascript><!--

    if (top.location !=self.location)top.location=self.location;

    //--></SCRIPT>

    10.<noscript><iframesrc="/*.html>";</iframe></noscript> 网页将不能被另存为

    11. <inputtype=button value=查看网页源代码

    οnclick="window.location= 'view-source:'+ 'http://www.csdn.net/'">

    12. 怎样通过asp的手段来检查来访者是否用了代理

    <% ifRequest.ServerVariables("HTTP_X_FORWARDED_FOR")<>""then

    response.write"您通过了代理服务器,"& _

    "真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")

    end if

    %>

    13. 取得控件的绝对位置

    //javascript

    <scriptlanguage="javascript">

    function getIE(e){

    var t=e.offsetTop;

    var l=e.offsetLeft;

    while(e=e.offsetParent){

    t+=e.offsetTop;

    l+=e.offsetLeft;

    }

    alert("top="+t+"nleft="+l);

    }

    </script>

    //VBScript

    <scriptlanguage="VBScript"><!--

    function getIE()

    dim t,l,a,b

    seta=document.all.img1

    t=document.all.img1.offsetTop

    l=document.all.img1.offsetLeft

    whilea.tagName<>"BODY"

    set a =a.offsetParent

    t=t+a.offsetTop

    l=l+a.offsetLeft

    wend

    msgbox"top="&t&chr(13)&"left="&l,64,"得到控件的位置"

    end function

    --></script>

    14. 光标是停在文本框文字的最后

    <scriptlanguage="javascript">

    function cc()

    {

    var e =event.srcElement;

    var r=e.createTextRange();

    r.moveStart('character',e.value.length);

    r.collapse(true);

    r.select();

    }

    </script>

    <input type=textname=text1 value="123" οnfοcus="cc()">

    15. 判断上一页的来源

    asp:

    request.servervariables("HTTP_REFERER")

    javascript:

    document.referrer

    16. 最小化、最大化、关闭窗口

    <object id=hh1classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

    <paramname="Command" value="Minimize"></object>

    <object id=hh2classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

    <paramname="Command" value="Maximize"></object>

    <OBJECT id=hh3classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

    <PARAMNAME="Command" value="Close"></OBJECT>

    <inputtype=button value=最小化 οnclick=hh1.Click()>

    <inputtype=button value=最大化 οnclick=hh2.Click()>

    <inputtype=button value=关闭 οnclick=hh3.Click()>

    本例适用于IE

    17.

    <%

    '定义数据库连接的一些常量

    ConstadOpenForwardOnly = 0 '游标只向前浏览记录,不支持分页、Recordset、BookMark

    Const adOpenKeyset= 1 '键集游标,其他用户对记录说做的修改将反映到记录集中,但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark

    Const adOpenDynamic= 2 '动态游标功能最强,但耗资源也最多。用户对记录说做的修改,增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)。

    Const adOpenStatic= 3 '静态游标,只是数据的一个快照,用户对记录说做的修改,增加或删除记录都不会反映到记录集中。支持向前或向后移动

    ConstadLockReadOnly = 1 '锁定类型,默认的,只读,不能作任何修改

    ConstadLockPessimistic = 2 '当编辑时立即锁定记录,最安全的方式

    ConstadLockOptimistic = 3 '只有在调用Update方法时才锁定记录集,而在此前的其他操作仍可对当前记录进行更改、插入和删除等

    ConstadLockBatchOptimistic = 4 '当编辑时记录不会被锁定,而更改、插入和删除是在批处理方式下完成的

    Const adCmdText =&H0001

    Const adCmdTable =&H0002

    %>

    18. 网页不会被缓存

    HTM网页

    <METAHTTP-EQUIV="pragma" CONTENT="no-cache">

    <METAHTTP-EQUIV="Cache-Control" CONTENT="no-cache,must-revalidate">

    <METAHTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57GMT">

    或者<META HTTP-EQUIV="expires"CONTENT="0">

    ASP网页

    Response.Expires =-1

    Response.ExpiresAbsolute= Now() - 1

    Response.cachecontrol= "no-cache"

    PHP网页

    header("Expires:Mon, 26 Jul 1997 05:00:00 GMT");

    header("Cache-Control:no-cache, must-revalidate");

    header("Pragma:no-cache");

    19. 检查一段字符串是否全由数字组成

    <scriptlanguage="javascript"><!--

    functioncheckNum(str){return str.match(/D/)==null}

    alert(checkNum("1232142141"))

    alert(checkNum("123214214a1"))

    //--></script>

    20. 获得一个窗口的大小

    document.body.clientWidth,document.body.clientHeight

    21. 怎么判断是否是字符

    if(/[^x00-xff]/g.test(s)) alert("含有汉字");

    else alert("全是字符");

    22.TEXTAREA自适应文字行数的多少

    <textarea rows=1name=s1 cols=27onpropertychange="this.style.posHeight=this.scrollHeight">

    </textarea>

    23. 日期减去天数等于第二个日期

    <scriptlanguage=javascript>

    functioncc(dd,dadd)

    {

    //可以加上错误处理

    var a = newDate(dd)

    a = a.valueOf()

    a = a - dadd * 24 *60 * 60 * 1000

    a = new Date(a)

    alert(a.getFullYear()+ "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

    }

    cc("12/23/2002",2)

    </script>

    24. 选择了哪一个Radio

    <HTML><scriptlanguage="vbscript">

    function checkme()

    for each ob inradio1

    if ob.checked thenwindow.alert ob.value

    next

    end function

    </script><BODY>

    <INPUTname="radio1" type="radio" value="style" checked>Style

    <INPUTname="radio1" type="radio"value="barcode">Barcode

    <INPUTtype="button" value="check"οnclick="checkme()">

    </BODY></HTML>

    25.获得本页url的request.servervariables("")集合

    Response.Write"<TABLE border=1><!-- Table Header--><TR><TD><B>Variables</B></TD><TD><B>value</B></TD></TR>"

    for each ob inRequest.ServerVariables

    Response.Write"<TR><TD>"&ob&"</TD><TD>"&Request.ServerVariables(ob)&"</TD></TR>"

    next

    Response.Write"</TABLE>"

    26.

    本机ip<%=request.servervariables("remote_addr")%>

    服务器名<%=Request.ServerVariables("SERVER_NAME")%>

    服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>

    服务器端口<%=Request.ServerVariables("SERVER_PORT")%>

    服务器时间<%=now%>

    IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>

    脚本超时时间<%=Server.ScriptTimeout%>

    本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>

    服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>

    服务器解译引擎<%=ScriptEngine & "/"&ScriptEngineMajorVersion&"."&ScriptEngineMinorVersion&"."&ScriptEngineBuildVersion %>

    服务器操作系统<%=Request.ServerVariables("OS")%>

    27.ENTER键可以让光标移到下一个输入框

    <inputοnkeydοwn="if(event.keyCode==13)event.keyCode=9">

    28. 检测某个网站的链接速度:

    把如下代码加入<body>区域中:

    <scriptlanguage=javascript>

    tim=1

    setInterval("tim++",100)

    b=1

    var autourl=newArray()

    autourl[1]="www.njcatv.net"

    autourl[2]="javacool.3322.net"

    autourl[3]="www.sina.com.cn"

    autourl[4]="www.nuaa.edu.cn"

    autourl[5]="www.cctv.com"

    function butt(){

    document.write("<formname=autof>")

    for(vari=1;i<autourl.length;i++)

    document.write("<inputtype=text name=txt"+i+" size=10 value=测试中……> =》<input type=text name=url"+i+" size=40>=》<input type=button value=GOοnclick=window.open(this.form.url"+i+".value)><br/>")

    document.write("<inputtype=submit value=刷新></form>")

    }

    butt()

    function auto(url){

    document.forms[0]["url"+b].value=url

    if(tim>200)

    {document.forms[0]["txt"+b].value="链接超时"}

    else

    {document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}

    b++

    }

    functionrun(){for(var i=1;i<autourl.length;i++)document.write("<imgsrc=http://"+autourl[i]+"/"+Math.random()+" width=1height=1 οnerrοr=auto('http://";;;+autourl[i]+"')>")}

    run()</script>

    29. 各种样式的光标

    auto :标准光标

    default :标准箭头

    hand :手形光标

    wait :等待光标

    text :I形光标

    vertical-text :水平I形光标

    no-drop :不可拖动光标

    not-allowed :无效光标

    help :?帮助光标

    all-scroll :三角方向标

    move :移动标

    crosshair :十字标

    e-resize

    n-resize

    nw-resize

    w-resize

    s-resize

    se-resize

    sw-resize

    1、去掉IE的滚动条

    有时候做好的网页明明没有超出窗口,可IE却偏偏给加上滚动条,这样看上去很不舒服,其实这也是可以通过一些小技巧避免的。具体如下:

    <body style=”overflow-x:hidden”>…</body> //去掉X轴方向的滚动条

    <body style=”overflow-y:hidden”>…</body> //去掉Y轴方向的滚动条

    <body style=”overflow:hidden”>…</body> //去掉全部的滚动条

    现在你看到的和你想像中的网页应该一样了吧,如果其中有什么不明白的地方可以参照注释中的说明。

    2、 使网页中的复制无效

    有方法防止网页被保存了(参见《你别看我的源代码》),可不可以也防止网页内容被复制呢?答案是当然可以。看看下面的例子你就会明白的。

    <html>

    <head>

    <scriptlanguage=”javascript”>

    function nocopy() {

    alert(“对不起,你不能非法复制本站内容”);

    event.returnvalue=false;

    }

    </script>

    </head>

    <bodyοncοpy=”nocopy()”>copyright by commander.</body>

    </html>

    这其实中是利用了document的一个oncopy事件,也就是说当发生复制事件时,弹出警告框,同时事件(event)的返回值为false使oncopy事件失效,从而达到防止复制的目的。

    3、 用脚本控制浏览器

    看到标题是不是有点不相信,那么试试下面的这几个例子吧!你一定会吃惊的。

    在<body>和</body>之间加入如下代码:

    <button οnclick=”document.execCommand(‘open’)”>打开</button>

    <button οnclick=”document.execCommand(‘saveas’)”>另存为…</button>

    <button οnclick=”document.execCommand(‘print’)”>打印</button>

    上面其实都是利用了document.execCommand()这个内置的函数,其参数为相应的浏览器命令,还有很多命令就留给大家自己发现吧!

    4、 IFrame也可以编辑文字

    有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢?只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。

    <html>

    <bodyοnlοad=”editer.document.designMode=’On’”>

    <IFrameID=”editer”></IFrame>

    </body>

    </html>

    其中designMode属性表示IFrame的设计模式的状态(开/关),还在犹豫什么呢,快试试吧!

    只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。

    <html>

    <body οnlοad=”imgEditer.document.designMode=’On’;imgEditer.document.write(‘<img src=图片.gif>’)”>

    <IFrameid=”imgEditer”></IFrame>

    </body>

    </html>

    用鼠标点击图片是不是有新的发现,其实大家只要利用自己的想象和充分利用这个属性一定能做出更多的花样来,别忘了到时候有什么新的东东,告诉我一声呀!(Email:BluePBoy@yesky.com)

    5、 打开硬盘

    这是打开硬盘的另一种方法,把它写出来只是想告诉大家,要达到同一个目的有很多种方法,这里就是利用了表单的Action属性达到的,其实打开硬盘有很多种方法,只是这种不太被人们注意,所以这里就选择了这种方法。

    <formaction=file ://c|><input type=”submit” value=”打开C盘”></form>

    展开全文
  • 网页制作基本素材

    2012-11-06 14:51:52
    web网页制作的一些基本代码 包过html标签的应用,CSS,div的一些用法还有javascript的经典用法
  • 网页设计基本框架

    2013-08-29 17:57:40
    网页设计基本框架,可以很快就使用上手.平时我们工作都是要自己创建利用css样式,而这个都集成一些基本通用的样式。
  • HTML代码设计,初学者了解HTML代码设计基本语法
  • 网页设计制作 (HTML基本语言 ) 网页设计制作 一 HTML基本语言 1.HTML基本语法如图 表示 HTML文档的开始和结束 <head</head> : 表示 HTML文档的头部最常用的标记是 <title> , </title<title> 标记中的内容对应...
  • Dreamweaver 8 基础代码 HTML基本结构每个网页都是在基本结构的基础上添加内容的 <html>---------网页文件开始标签 <head>--------头部元素开始标签 <title>----------网页标题开始标签 头部元素 </title>---------...
  • 精选文库 PAGE PAGE 3 -- 网页设计制作 一HTML基本语言 1.HTML基本语法如图 表示HTML文档的开始和结束 表示HTML文档的头部最常用的标记是标记中的内容对应浏览窗口标题的信息 标记之内的内容对应的是浏览器中的...
  • 网页设计制作 一HTML基本语言 1.HTML基本语法如图 表示HTML文档的开始和结束 表示HTML文档的头部最常用的标记是标记中的内容对应浏览窗口标题的信息 标记之内的内容对应的是浏览器中的内容 2标记的使用如图 ...
  • html5网页基本制作和php入门代码

    千次阅读 2017-10-12 21:46:42
    html部分程序代码(王劲松 吴杨杨) php部分代码

    html部分程序代码(王劲松     吴杨杨)

    php部分代码


    展开全文
  • Dreamweaver 8 基础代码 HTMLS 本结构每个网页都是在基本结构的基础上添加内容的 <html> - ----- 网页文件开始标签 <head>- ----- 头部元素开始标签 <title> - ---- 网页标题开始标签 头部元素 </title> - --- 网页...
  • 第2章 HTML网页设计 HTMLHyperText Markup Lanquage即超文本标记语言是构成网页最基本的要素也是编写ASP文档和开发各种Web应用程序的基础 2.1 HTML概述 2.1.1 什么是HTML HTML是一种颇为结构化的网页内容标记语言...
  • html网页设计:一个简单的登录界面代码!http.w3;"tr> bgcolor="/button"body> /是这样的效果吗; &lt.w3;3登 录"tr>head>td>/...求html静态页面的代码,简单点的?滚动字幕 请进入音乐休闲屋...

    6079db3c053b47e81c3ad1028be2c5d9.png

    html网页设计:一个简单的登录界面代码!

    http.w3;"tr> bgcolor="/button"body> /是这样的效果吗; &lt.w3;3登 录"tr>head>td>/...

    求html静态页面的代码,简单点的?

    滚动字幕请进入音乐休闲屋看我还会动呢,并且是...

    求一段简单的网页的代码

    js特效

    求一个HTML网页设计的代码

    原发布者:粽子爱猪 网页设计HTML代码教程教程>>HTML>>基本标志教程一、基本标志1.2.3.4.Html是英文HyperTextMarkupLanguage的缩写,中文意思是“超文本标志语...

    我需要一个网页的设计代码,HTML网页设计,设计一个网页,一个完...

    帅哥的个人主页我是XXX,男,XX年X月... 把上面的代码用记事本存为index.html文件打开就行。怎么样,这个够简单了吧。纯手...

    如何用html编写一个简单的网页

    HTML源码如下:

    求一简单网页代码

    神经病啊 把 url3.html 这个文件改名为 index.html就可以了

    给我发个网页制作代码大全,比如等等!

    你到这里看吧,很全面。http://www.yesky.com/imagesnew/software/html/index.html ... 档

    Sets off the title and other information that isn't displayed on the Web...

    谁能给个简单网页的代码(个人主页或者博客)和HTML基本常用代码...

    自己总结的基本语法。你所要的网页代码太多,写不下,网页的简单与否跟代码多少没关系 文件格式(文件的开头与结尾) 主题

    (放在文件的开...

    一个最简单的网页代码·麻烦改进

    -//W3C//DTD XHTML 1.0 Transitional//EN" "http://... 把他全部复制到你页面中,看看效果。是不是你要 的。

    简单的网页设计代码

    一个简单的网页代码

    网页设计代码

    简单网页设计代码

    html网页设计代码

    html网页设计代码范文

    简单的网页设计

    简单的网页代码

    简单html网页设计代码

    html网页设计代码大全

    个人网页设计代码

    html网页设计代码范例

    现在很多人都在使用电脑,那么今天为大家讲讲一个简单的网页设计代码。

    材料/工具

    电脑

    方法

    1

    首先在桌面右击选择“新建”中的“文本文档”。

    02315300044863eff65b5eb3c30e1ea4.png2

    然后输入以下代码:

    360新知欢迎你360新知欢迎你

    e842b423b1d789e70bee0b96513f307c.png3

    然后点击“文件”中的“另存为”。

    7fe92f7d6f84c1ec15bf4127a97ac032.png4

    然后选择保存路径,并且要将后缀名修改“.htm”。

    b7a14c1b24b35c1f57fd244b8361cf1f.png5

    然后右击刚刚保存的文件选择“打开方式”,然后选择“360安全浏览器”。

    a083e021d64889b0fea7851668ac6f6f.png6

    最后就可以看到一个简单的网页了。

    54ccfab73df8508b141b6c9b97913b99.pngEND

    展开全文
  • HTML全名超文本标记语言(Hyper Text Markup Language),可以用来制作网页。它有一套语法规则,通过这些语法规则,就可以设计出丰富多彩的网页了。 首先,html的标签格式为: <标签名>标签内容</标签名>...

    HTML全名超文本标记语言(Hyper Text Markup Language),可以用来制作网页。它有一套语法规则,通过这些语法规则,就可以设计出丰富多彩的网页了。
    首先,HTML标签定义格式为:

    <标签名>标签内容</标签名>
    

    以<标签名>开头,以</标签名>结尾。
    还有亿点要说明,HTML代码最常使用两个空格进行缩进,当然,也可以为4格,3格,甚至可以不用缩进。但我建议缩进代码,因为这利于网页后期开发时的修改。
    开始今天的学习吧!

    html 标签 定义网页代码

    用于标识网页代码的开始位置与结束位置,如:

    <!DOCTYPE html>
    <html>
      网页代码
    </html>
    

    注:第一行的代码用于标识这个文件使用的HTML规范。

    head 标签 设置网页头部信息

    用于定义网页的头部信息,格式:

    <!DOCTYPE html>
    <html>
      <head>头部信息</head>
    </html>
    

    这个标签嵌套在html标签里。

    meta 标签 描述HTML文档的属性

    用于描述HTML文档的属性,例如作者,创建日期等。经常用于声明HTML文档在外部脚本文件中使用的字符编码。 如果外部文件中的字符编码与主文件中的编码方式不同,就要用到 charset 属性。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        其它标签
      </head>
    </html>
    

    注:要嵌套在head标签内。

    title 标签 设置网页标题

    用于显示网页的标题,格式如下:

    <!DOCTYPE html>
    <html>
      <head>
        <title>测试标题</title>
        其它标签
      </head>
    </html>
    

    注:也要嵌套在head标签里。

    body 标签 定义网页主体

    定义网页的主体,一般HTML代码都在这里面编写,位置在head标签的后面:

    <!DOCTYPE html>
    <html>
      <head>
        头部标签
      </head>
      <body>
        HTML网页主体
      </body>
    </html>
    

    h1-h6 标签 设置文字大小

    这些标签一般在body标签里,可以将嵌套的文字的大小进行改变,h1最大,h6最小:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <h1>我是h1</h1>
        <h2>我是h2</h2>
        <h3>我是h3</h3>
        <h4>我是h4</h4>
        <h5>我是h5</h5>
        <h6>我是h6</h6>
      </body>
    </html>
    

    用浏览器打开此网页,看到的应该是一段从大到小的文字。

    i 标签 创建斜体文字

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <i>斜体测试</i>
      </body>
    </html>
    

    i标签主要将标签内的文字变成斜体。

    b 标签 创建粗体文字

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <b>粗体测试</b>
      </body>
    </html>
    

    b标签主要将标签内的文字变成粗体。

    p 标签 创建段落

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <p>我正在开发网页。我很开心。</p>
        <p>我正在开发网页。我很开心。</p>
      </body>
    </html>
    

    p标签将会把标签内的文字起新的一段来展示。

    ul 标签 创建无序列表

    用于展示一个无序列表,格式为:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <ul>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
        </ul>
      </body>
    </html>
    

    里面要嵌套li标签,每个li标签就是列表的其中一项。

    ol 标签 创建有序列表

    用于展示一个有序列表,格式为:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <ol>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
        </ol>
      </body>
    </html>
    

    里面也要嵌套li标签,每个li标签就是列表的其中一项。

    table 标签 创建表格

    table标签用于创建表格,如:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <table>
          <tr>
            <td>测试1</td>
            <td>测试2</td>
          </tr>
          <tr>
            <td>测试1</td>
            <td>测试2</td>
          </tr>
        </table>
      </body>
    </html>
    

    这个标签内需要嵌套tr标签,tr标签为表格的一行,内部的td标签定义这一行每个列显示的内容。

    a 标签 链接网址

    此标签用于链接到某个网址:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <a href="https://blog.csdn.net/">CSDN博客网站</a>
      </body>
    </html>
    

    a标签的属性href定义跳转到的网址,文字内容定义这个标签在哪样的文字上创建链接。

    div 标签 划分板块

    用于将页面分成独立的板块,为页面分区或节:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <div>
          <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
          </ul>
        </div>
        <div>
          <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
          </ol>
        </div>
      </body>
    </html>
    

    span 标签

    HTML的行内标签,方便了给行内元素设置单独的样式。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <span>文字内容</span>
      </body>
    </html>
    

    br 标签 换行符

    这个标签没有结尾,和换行符作用一样,可以插入文本内:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <p>第一段文字<br>第二段文字</p>
      </body>
    </html>
    

    script 标签 加载或编写js代码

    这个标签用于在网页中编写或加载javascript文件代码:
    加载:(一般在head内加载,body也行)

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
        <script src="js脚本文件.js"></script>
      </head>
      <body>
        <p>测试网页</p>
      </body>
    </html>
    

    编写:(一般在主体body内编写)

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <script type="text/javascript">
           var a = 1;
           var b = 2;
           alert(a + b);
        </script>
      </body>
    </html>
    

    如上,我们在script标签内写了亿些简单的js代码,这些代码在浏览器浏览时时将会运行。

    img 标签 加载图片

    img标签主要用来加载图片,上代码:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
      </head>
      <body>
        <img src="test.png" />
      </body>
    </html>
    

    属性src指定图片路径,这里为test.png,当然,网络图片也是可以加载显示的。
    (注:img标签没有结束标签,只是在">“前写一个”/"即可)

    style 样式设置

    CSS又叫做层叠样式表(英文全称:Cascading Style Sheets),主要用来设置HTML网页的样式。
    CSS提供来选择器来选定HTML标签设置相应的样式,常用的选择器是类选择器和ID选择器。

    类选择器

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
        <style type="text/css">
        .test1{
                width:300px;
                height:50px;
                background:red;
        }
        .test2{
                width:100px;
                height:50px;
                background:green;
        }
        </style>
      </head>
      <body>
        <div class="test1">style测试1</div>
        <div class="test2">style测试2</div>
      </body>
    </html>
    

    首先,我们定义了style标签,在内部写上了两个类选择器,一个叫test1,另一个叫test2,在每个选择器里边,我们定义了width,height,background属性(什么意思可以自己上网查一下),然后在body内定义了两个div标签,都有属性class(类),这里面我们写上了类选择器名称,就可以加载显示对应的样式了。

    ID选择器

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
        <style type="text/css">
        #test1{
                width:300px;
                height:50px;
                background:red;
        }
        #test2{
                width:100px;
                height:50px;
                background:green;
        }
        </style>
      </head>
      <body>
        <div id="test1">style测试1</div>
        <div id="test2">style测试2</div>
      </body>
    </html>
    

    首先,我们定义了style标签,在内部写上了两个ID选择器,一个叫test1,另一个叫test2,在每个选择器里边,我们定义了width,height,background属性,然后在body内定义了两个div标签,都有属性id,这里面我们写上了ID选择器名称,就可以加载显示对应的样式了(其实就是把div的class换成id,style标签里的“.”换成“#”而已)。

    link 标签 链接资源

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>测试标题</title>
        <link rel="stylesheet" href="test.css" />
      </head>
      <body>
        <p>测试段落</p>
      </body>
    </html>
    

    link标签用于定义HTML文档与外部资源的关系,经常用于链接CSS样式表文件,外部资源等。link标签上面的代码加载了test.css文件,也就是CSS文件。
    (注:link标签没有结束标签,只是在">“前写一个”/"即可)


    课程就到这里,有些不懂的地方可以发在评论区,大家一起来讨论呀!

    展开全文
  • }}请输入网址学生个人网页制作代码:将以上内容复制到记事本后学生个人网页制作代码,另存为\"xxx.html\"对回答的内容有问题学生个人网页制作代码,或认为不妥,百度消息我。(在消息的内容里加上问题的网址哦)谁会...
  • HTML网页设计:二、网页的基本标签

    千次阅读 多人点赞 2021-03-19 17:59:58
    网页基本标签 1.标题标签 基本标题标签:一级标题最大,依次越来越小。 <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>...
  • 有html,css文件,全部都有,还有JavaScript的代码网页中有图片定时滑动,切换,图标的使用等
  • 总结有8个在网页设计中常用到的html基本代码,分别如下: 1.在网页中设置自己的浏览器ico图标先准备一个.ico的文件放置在站点的根目录下、并在网页中加入以下代码 link 为网页中的链接标签。rel 指定ico图标将要显示的...
  • html网页详细代码

    万次阅读 多人点赞 2016-07-07 12:03:28
    禁止鼠标右键的代码很简单: 48、在网页的Head部分加入如下代码,这段代码的主要功能是屏蔽PrintScreen键,不断清空剪贴版,防止图片被用文件——另存为菜单另存。 /其他脚本/// 1. 将彻底屏蔽鼠标右键 no 可用于...
  • 信息发布与网页设计 DREAMWEAVER 5 信息学院 信息发布与网页设计 课题组 2020 年 3 月 6 日星期五 返回 5 HTML 代码 5.1 HTML 文件基本结构略 ? 基本标记 ? 代码窗口 5.2 设置 HTML 代码 ? 代码颜色编辑 参数选择 ...
  • PAGE PAGE 30 HTML的简单规则 HTML的构成要素 要素以段落式形成内容要素则由标签表现 开始标签 结束标签 要素如要素名为H1要素内容为给网页插上CSS的翅膀 属性值 HTML的基本结构 标签 使用head标签设定网页 给文本注...
  • 网页代码基本格式和语法

    千次阅读 2007-04-18 08:25:00
    网页里连接一个背景音乐: //loop=-1代表永远循环在网页里连接一个视频: 在网页里连接一个图片: 在网页里建立一个表格: 在网页里建立一个表单: 字段名: 改变字体大小、颜色、字体: 要改的文字连接到网站、...
  • 手把手教你利用爬虫爬网页(Python代码

    万次阅读 多人点赞 2019-05-14 14:34:48
    但是我们一般不采用这种方式,而是使用ProxyHandler在程序中动态设置代理,示例代码如下: import  urllib2 proxy = urllib2.ProxyHandler({ 'http' :  '127.0.0.1:8087' }) opener = urllib2.build_opener(...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 202,398
精华内容 80,959
关键字:

网页制作基本代码