HTML练习代码

 

HTML语法
 

HTML语法教学

(HTML标签快速导览) HTML教程 HTML代码


◆ 网页架构
◆ 分隔标签
◆ 排版标签
◆ 字体标签
◆ 文字标签
◆ 影像标签
◆ 背景标签		 ◆ 表格标签
◆ 序列标签
◆ 表单标签
◆ 框架标签
◆ 其他技巧
◆ 连结标签

■ 细说HTML标签

在HTML语言语法中，大致上可以分为：

  1. 网页架构：主要网页主架构的介绍
  2. 分隔标签：也就是所谓的水平线
  3. 排版标签：针对标签的属性，可做适当的版面编排
  4. 字体标签：教导您设定文字的字体。
  5. 文字标签：教导您设定文字的颜色、行距、变化.....等等。
  6. 影像标签：教导您如何在网页中，植入图像。
  7. 背景标签：教导您如何设定背景颜色或是背景图像。
  8. 连结标签：教导您如何设定超连结，以及开视窗的条件。
  9. 表格标签：教导您如何在网页中运用表格。
  10. 序列标签：教导您如何设定文字序列或图形序列。
  11. 表单标签：教导您如何制作可填写用的表单。
  12. 框架标签：可让同一个视窗由多个网页一起组成。
  13. 其他技巧：让您的整个网页背景可以让您设定为图片或是声音。

4.1 网页架构<回细说索引>

<HTML>
　<HEAD>
　　<TITLE>网页制作教学</TITLE>
　　<Meta>
　</HEAD>
　<BODY>
　　BODY之间则为主要语法所在，也是网页的主要呈现部分。
　</BODY>
</HTML>

【标签解说】

以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。

简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。

在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。

您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。

4.2 HTML语法分隔标签<回细说索引>


【文字上的分隔标签】

或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！

  1. 使用方法：强制断行标签<br>、强制分段标签<p>

  2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。

  3. 使用范例：
    原始码 呈现结果
    这是一个断行的范例<br>看出来了吗？ 这是一个断行的范例
    看出来了吗？
    这是一个分段的范例<p>基本上他会比断行还多空出一行 这是一个分段的范例

    基本上分段会比断行还多空出一行



【分隔线标签】

  1. 使用方法：上一段文字内容<hr>下一段文字内容

  2. 标签解说：利用<hr>这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：

  3. 使用范例：
    一般用法 尚未加任何属性。
    原始码 普通分隔线<hr>
    呈现结果 普通分隔线

    颜色属性 用法：<hr color="颜色码或颜色名称">
    原始码 橘色分隔线<hr color="#ff8000">
    呈现结果 橘色分隔线

    宽度属性 用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。
    原始码 宽度为240px的分隔线<hr width="240">
    呈现结果 宽度为240px分隔线

    厚度属性 用法：<hr size="厚度">
    原始码 厚度为5的分隔线<hr size="5">
    呈现结果 厚度为5分隔线

    位置属性 用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"
    原始码 靠右的分隔线<hr align="right">
    呈现结果 靠右的分隔线

    阴影属性 用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。
    原始码 实心分隔线（无阴影）<hr noshade>
    呈现结果 实心分隔线（无阴影）

4.3 HTML语法排版标签<回细说索引>


【文字置左、置中、置右】

  1. 使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：

    原始码 呈现结果
    <p align="left">文字靠左</p>

    文字靠左
    <p align="center">文字置中</p>

    文字置中
    <p align="right">文字靠右</p>

    文字靠右

    标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。



【置中标签】

  1. 使用方法：<center>这是置中</center>

  2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！

  3. 使用范例：
    原始码 呈现结果
    <center>这是最中间</center>
    这是最中间



【向右缩排标签】

  1. 使用方法：<blockquote>要缩排的文字</blockquote>

  2. 标签解说：利用<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

  3. 使用范例：
    原始码 呈现结果
    <blockquote>缩排1单位</blockquote>
    缩排1单位
    <blockquote><blockquote>缩排2单位</blockquote></blockquote>
    缩排2单位



【保存原始格式标签】

  1. 使用方法：<pre>文字内容<pre>

  2. 标签解说：利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。

  3. 使用范例：
    原始码 呈现结果
    <pre>
    文　字
    　格　式
    </pre>    		 
    文　字
　格　式

4.4 HTML语法字体标签<回细说索引>


【标题标签】

  1. 使用方法：<h1>标题内容</h1>

  2. 标签解说：标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。

  3. 使用范例：
    原始码 呈现结果
    <h1>标题一</h1>

    标题一
    <h2>标题二</h2>

    标题二
    <h3>标题三</h3>

    标题三
    <h4>标题四</h4>

    标题四
    <h5>标题五</h5>
    标题五
    <h6>标题六</h6>
    标题六



【设定字体大小标签】

  1. 使用方法：<font size=3>文字内容</font>

  2. 标签解说：标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。

  3. 使用范例：
    原始码 呈现结果
    <font size=1>字体一</font> 或是
    <font size=-2>字体一</font>    		 字体一
    <font size=2>字体二</font> 或是
    <font size=-1>字体二</font>    		 字体二
    <font size=3>字体三</font> 或是
    <font size=+0>字体三</font>    		 字体三
    <font size=4>字体四</font> 或是
    <font size=+1>字体四</font>    		 字体四
    <font size=5>字体五</font> 或是
    <font size=+2>字体五</font>    		 字体五
    <font size=6>字体六</font> 或是
    <font size=+3>字体六</font>    		 字体六
    <font size=6>字体七</font> 或是
    <font size=+4>字体七</font>    		 字体七



【字型变化标签】

  1. 使用方法：<b>文字</b>

  2. 标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。

  3. 使用范例：
    原始码 呈现结果
    <b>粗体</b> 粗体
    <i>斜体</i> 斜体
    <u>底线</u> 底线
    <sup>上标</sup> 上标
    <sub>下标</sub> 下标
    <tt>打字机</tt> 打字机
    <blink>闪烁</blink>（ie没效果） 闪烁
    <em>强调</em> 强调
    <strong>加强</strong> 加强
    <samp>范例</samp> 范例
    <code>原始码</code> 原始码
    <var>变数</var> 变数
    <dfn>定义</dfn> 定义
    <cite>引用</cite> 引用
    <address>所在地址</address>
    所在地址



【文字颜色设定】

  1. 使用方法：<font color="#fefecb">文字颜色</font>

  2. 标签解说：文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！

  3. 使用范例：
    原始码 呈现结果
    <font color="#ff0000">红</font> 红色的字喔！
    <font color="#ff8000">橙</font> 橙色的字喔！
    <font color="#ffff00">黄</font> 黄色的字喔！
    <font color="#00ff00">绿</font> 绿色的字喔！
    <font color="#0080ff">蓝</font> 蓝色的字喔！
    <font color="#0000a0">靛</font> 靛色的字喔！
    <font color="#8000ff">紫</font> 紫色的字喔！
    <font color="#000000">黑</font> 黑色的字喔！
    <font color="#c0c0c0">灰</font> 灰色的字喔！

4.5 HTML语法文字标签<回细说索引>

【文字字型设定】

  1. 使用方法：<font face="字型名称">文字</font>

  2. 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！

    另外，如果您的网页中有加上这一行叙述<meta http-equiv="content-type" content="text/html;charset=big5">（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。

  3. 使用范例：
    原始码 呈现结果
    <font face="楷体_GB2312">楷体_GB2312</font> 楷体_GB2312
    <font face="华康俪中黑">华康俪中黑</font> 华康俪中黑



【特殊字元】

  1. 使用方法：&nbsp;

  2. 标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“&lt;”，常用的如下：

  3. 使用范例：
    原始码 呈现结果
    &nbsp;   (&nbsp;代表一个不断行空白)
    &lt; <
    &gt; >
    &amp; &
    &quot; "



【设定文字内定值大小】

  1. 使用方法：<basefont size="1~7">

  2. 标签解说：这个标签可以改变文字大小的内定值，直接加在<body>标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。

4.6 HTML语法影像标签<回细说索引>

【影像标签】

在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。

另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。

  1. 使用方法：<img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>

  2. 标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。

  3. 使用范例：

    基本用法 用法：<img src="图档名称、路径">
    显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。
    原始码 <img src="images/pic.gif">嗨！我是本站的模特儿喔！
    呈现结果 嗨！我是本站的模特儿喔！

    长宽设定 用法：<img src="图档" height="高度" width="宽度">
    设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。
    原始码 <img src="images/pic.gif" height=32 width=32>
    呈现结果

    加上说明 用法：<img src="图档" alt="说明文字">
    滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。
    原始码 <img src="images/pic.gif" alt="本站特约模特儿">移到图上看看。
    呈现结果 本站特约模特儿移到图上看看。

    图片位置 用法：<img src="图档" align="位置">
    图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。
    原始码 <img src="images/pic.gif" align=right>嗨！我往右边靠！
    呈现结果 嗨！我往右边靠！
    原始码 <img src="images/pic.gif" align=left>嗨！我往左边靠！
    呈现结果 嗨！我往左边靠！
    原始码 <img src="images/pic.gif" align=top>文字对齐我头顶！
    呈现结果 文字对齐我头顶！
    原始码 <img src="images/pic.gif" align=bottom>文字对齐我脚底！
    呈现结果 文字对齐我脚底！
    原始码 <img src="images/pic.gif" align=middle>文字对齐我中间！
    呈现结果 文字对齐我中间！
    原始码 <img src="images/pic.gif" align=absmiddle>文字对齐我绝对中间！
    呈现结果 文字对齐我绝对中间！

    边框设定 用法：<img src="图档" border="边框粗细">
    设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在连结时，设框框简直是丑毙了...。
    原始码 <img src="images/pic.gif" border="4">
    呈现结果

    左右间距 用法：<img src="图档" hspace="离左右物件的距离">
    离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
    原始码 左边的字<img src="images/pic.gif" hspace="15">右边的字
    呈现结果 左边的字右边的字

    上下间距 用法：<img src="图档" vspace="离上下物件的距离">
    离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
    原始码 上面的字<br><img src="images/pic.gif" vspace="15"><br>下面的字
    呈现结果 上面的字

    下面的字

    由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。



【网页影像重要观念】

  1. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:\images里，而网页档放在c:\demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：
    html档的位置 图档的位置 写法 情形说明
    c:\demo c:\demo <img src="tad.gif"> 图文均在同一目录
    c:\demo c:\demo\images <img src="images/tad.gif"> 图在网页下一层目录
    c:\demo c:\ <img src=" ../tad.gif"> 图在网页上一层
    c:\demo c:\image <img src=" image/tad.gif"> 图文在同一层但不同目录

    或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“images/”的意思就是，回到上一层目录，然后再进入目录images中。以上我们使用的均为“相对路径”的概念。

  2. 影像单位：或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是萤幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，萤幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说，其代表的就是在萤幕上有宽640个光点，高有480光点，若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，萤幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。

  3. 影像格式：网页用的图档目前只有gif格式（即副档名为gif的图档，如：bg.gif）以及jpg格式（即副档名为jpg的图档，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！

    图档范例 说明
    gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。
    jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。

4.7 HTML语法背景标签<回细说索引>

【背景标签】

说穿了，背景标签只有<BODY>这个标签，其余的效果，只要加上一些简单的属性便可做到。

  1. 使用方法：<body bgcolor="#ffffff" background="bg.jpg">

  2. 标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在<body>这标签里面。我就其属性来一一解说：
    背景颜色 用法：<body bgcolor="颜色码">
    设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！
    原始码 <html>
    <head>
    <title>这是标题</title>
    </head>

    <body bgcolor="#f9e6a2">

    这里是本文区

    </body>
    </html>
    呈现结果 按下此处观看结果

    背景图案 用法：<body background="图档名称、路径">
    g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。
    原始码 <html>
    <head>
    <title>这是标题</title>
    </head>

    <body background="bg.jpg">

    这里是本文区

    </body>
    </html>
    呈现结果 按下此处观看结果



【内文、连结文字颜色设定】

  1. 使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

  2. 标签解说：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个<body>标签中，便有设定内文、连结等文字的颜色内定值功能。用法如下：

    内文颜色 用法：<body text="颜色码">
    设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。
    原始码 <html>
    <head>
    <title>这是标题</title>
    </head>

    <body text="#0906a2">

    这里是本文区

    </body>
    </html>
    呈现结果 按下此处观看结果

    连结颜色 用法：<body link="颜色码">
    设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。
    原始码 <html>
    <head>
    <title>这是标题</title>
    </head>

    <body link="#ff6600">

    <a href="index.htm">连结文字</a>

    </body>
    </html>
    呈现结果 按下此处观看结果（设定连结为橘色）

    连结时颜色 用法：<body alink="颜色码">
    设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。
    原始码 <html>
    <head>
    <title>这是标题</title>
    </head>

    <body alink="#0099ff">

    <a href="index.htm">连结中文字</a>

    </body>
    </html>
    呈现结果 按下此处观看结果（滑鼠点下连结瞬间才会出现我们设定的浅蓝色）

    已连结颜色 用法：<body vlink="颜色码">
    设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。
    原始码 <html>
    <head>
    <title>这是标题</title>
    </head>

    <body vlink="red">

    <a href="demo1-10-6.htm">连结文字</a>

    </body>
    </html>
    呈现结果 按下此处观看结果（设定已执行过的连结以红色显示）

     

4.8 HTML语法连结标签<回细说索引>

【WWW连结标签基本概念】

  1. 连结基本概念：一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站（以上这段是给超级新手看的...）。

    扯到连结，最基本来看有‘内部连结’及‘外部连结’，所谓‘内部连结’就是自己网站间网页的连结，至于外部连结我们稍后再来讨论。

    要了解内部连结，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。

    现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！

    现在我们想在 index.htm 里面设一个连结，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：

    <a href="/c|/www/text1.htm"> 这就是‘绝对路径’
    <a href="text1.htm"> 这就是‘相对路径’

    瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。

    如果说，今天我们将 c:\www 里所有的档案都上传到网路上的网页伺服器（总不能做好了只给自己看吧！），且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种连结会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？

    为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:\ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用‘相对路径’来作连结吧！好写又不容易出错。

    另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个连结到 p1.gif 这图档（连结不限于只能连html档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？

    <a href="/c|/www/gif/p1.gif"> 这是‘绝对路径’的写法
    <a href="gif/p1.gif"> 这是‘相对路径’的写法

    如何？不难吧！（只是字有点多，看到脑子发胀）

  1. 总整理：很乱吗？嗯...看看这表，或许会清楚些。

    相对路径表示方式 代表连结位置
    <a href="text1.htm"> text1.htm在目前的目录中（就例子而言，就是在c:\www中）
    <a href="docs/text1.htm"> text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）
    <a href="../text1.htm"> text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）



【网页内部的连结】

  1. 使用方法：

    1. 先在欲连结处作记号：<a name="here1">这里是你想连结的点</a>

    2. 设定连结：<a href="#here1">连结</a>

  2. 标签解说：有时候，当某页的内容很多时，我们可以利用网页的内部连结，来使使用者快速的找到资料。其原理不过是：在欲连结处做个记号（网页的任何地方都可以喔！），然后，连结时就寻这记号，就可以快速找到资料。很简单吧！

  3. 使用范例：

    范例 第一步骤 第二步骤
    www连结标签基本概念 <a name="m1">欲连结的位置</a> <a href="#m1">www连结标签基本概念</a>
    网页内部的连结 <a name="m2">欲连结的位置</a> <a href="#m2">网页内部的连结</a>
    网页外部的连结 <a name="m3">欲连结的位置</a> <a href="#m3">网页外部的连结</a>



【网页外部的连结】

  1. 标签解说：连结到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的连结方法，我将之整理在下表。

  2. 使用范例：

    网站连结 英文站点 <a href="http://linkswhere.com/">英文站点</a>
    电子邮件连结 写情书给我 <a href="mailto:bloghuman@gmail.com">写情书给我</a>
    ftp连结 下载档案 <a href="ftp://ftp.bloghuman.com">下载档案</a>
    news连结 seednet news服务 <a href="news:news.seed.net.tw">seednet news服务</a>
    gopher连结 seednet gopher服务 <a href="gopher://gopher.seed.net.tw/">seednet gopher服务</a>
    bbs连结 seednet gopher服务 <a href="telnet://bbs.seed.net.tw/">seednet bbs服务</a>



【连结标签的参数】

  1. 使用方法：在连结后面加入 target=_参数

  2. 标签解说：连结的参数并不多，常见的大概就属 target 这参数了，target 的意思是‘目标’，也就是网页连结的指向目标，这参数在框窗（frame）里尤为重要！

  3. 使用范例：

    • target=框窗名称：
      这在‘框架标签’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标签，来指定连结的内容显示到哪一个框窗中。

    • target=_blank：
      将连结的画面内容，开在新的浏览视窗中。

    • target=_parent：
      将连结的画面内容，当成文件的上一个画面。

    • target=_self：
      将连结的画面内容，显示在目前的视窗中。

    • target=_top：
      这个参数可以解决新连结的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成连结的画面内容。

4.9 HTML语法表格标签<回细说索引>

【网页中的表格观念】

举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：

  1. 首先我们来看一个最简单的表格：

    原始码 呈现结果
    <TABLE BORDER=1>
    <TR><TD>1</TD></TR>
    </TABLE>
    1

    利用<TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。

  2. 现在我们再来增加二个格子：

    原始码 呈现结果
    <TABLE BORDER=1>
    <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
    </TABLE>
    1 2 3

  3. 看见没有，<TR></TR>没有增加，<TD></TD>却增加了二组。那如果我要再加上一列呢？很简单，就像这样：

    原始码 呈现结果
    <TABLE BORDER=1>
    <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
    <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
    </TABLE>
    1 2 3
    4 5 6



【合并表格栏位】

  1. 并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。

  2. 左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格：

    原始码 呈现结果
    <TABLE BORDER=1>
    <TR><TD COLSPAN=3>1</TD></TR>
    <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
    </TABLE>
    1
    4 5 6

    您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！

  3. 上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格：

    原始码 呈现结果
    <TABLE BORDER=1>
    <TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
    <TR><TD>5</TD><TD>6</TD></TR>
    </TABLE>
    1 2 3
    5 6

    有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：



【表格栏位对齐位置设定】

  1. 我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下：

    原始码 呈现结果
    <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
    <TR><TD>1</TD></TR>
    </TABLE>
    1

  2. 哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入 ALIGN=CENTER 这参数即可：

    原始码 呈现结果
    <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
    <TR><TD ALIGN=CENTER>1</TD></TR>
    </TABLE>
    1

    此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。

  3. 既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。

    原始码 呈现结果
    <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
    <TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
    </TABLE>
    1

    利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。
【表格背景、底色设定】

  1. 那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法：

    原始码 呈现结果
    <TABLE BORDER="1" BGCOLOR=#FFCC33>
    <TR><TD>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    1 2
    3 4

    将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色：

    原始码 呈现结果
    <TABLE BORDER="1" >
    <TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    1 2
    3 4

    将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：

    原始码 呈现结果
    <TABLE BORDER="1" >
    <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    1 2
    3 4

  2. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片：

    原始码 呈现结果
    <TABLE BORDER="1" BGCOLOR=#FFCC33>
    <TR><TD>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    1 2
    3 4

    将BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色：

    原始码 呈现结果
    <TABLE BORDER="1">
    <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    1 2
    3 4



【表格框线设定】

  1. 如何设定表格粗细？只要利用BORDER="粗细值"就行了。

    原始码 呈现结果
    <TABLE BORDER=5>
    <TR><TD>1</TD></TR>
    </TABLE>
    1

  2. 如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。

    原始码 呈现结果
    <TABLE BORDER="5" BORDERCOLOR="#0080FF">
    <TR><TD>1</TD></TR>
    </TABLE>
    1

  3. 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。

    原始码 呈现结果
    <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
    <TR><TD>1</TD></TR>
    </TABLE>
    1



【表格栏距设定】

  1. 我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。

    原始码 呈现结果
    <TABLE BORDER="1" CELLPADDING="10">
    <TR><TD>1</TD><TD>2</TD></TR>
    </TABLE>
    1 2

  2. 我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。

    原始码 呈现结果
    <TABLE BORDER="1" CELLSPACING="5">
    <TR><TD>1</TD><TD>2</TD></TR>
    </TABLE>
    1 2

4.10 HTML语法序列标签<回细说索引>

【无序标签】

  1. 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。

  2. 我们先来看看“无序列表标签”如何使用：

    原始码 呈现结果
    <UL>
    <LI>姓名：LUKE
    <LI>生日：1981/11/10
    <LI>星座：天蝎座
    </UL>
    • 姓名：LUKE
    • 生日：1981/11/10
    • 星座：天蝎座

    其中<UL>标签即为“无序列表标签”，每增加一列内容，就必须加一个<LI>。

  3. 前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）：

    原始码 呈现结果
    <UL TYPE="CIRCLE">
    <LI>姓名：LUKE
    <LI>生日：1981/11/10
    <LI>星座：天蝎座
    </UL>
    • 姓名：LUKE
    • 生日：1981/11/10
    • 星座：天蝎座



【有序标签】

  1. 接下来，我们来看看“有序列表标签”如何使用：

    原始码 呈现结果
    <OL>
    <LI>姓名：LUKE
    <LI>生日：1981/11/10
    <LI>星座：天蝎座
    </OL>
    1. 姓名：LUKE
    2. 生日：1981/11/10
    3. 星座：天蝎座

    其中<OL>标签即为“有序列表标签”，每增加一列内容，就必须加一个<LI>。

  2. 和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种：

    原始码 呈现结果
    <OL TYPE="A">
    <LI>姓名：LUKE
    <LI>生日：1981/11/10
    <LI>星座：天蝎座
    </OL>
    1. 姓名：LUKE
    2. 生日：1981/11/10
    3. 星座：天蝎座

  3. 另外，我们亦可指定序列起始的数目，其方法如下：

    原始码 呈现结果
    <OL START="8">
    <LI>姓名：LUKE
    <LI>生日：1981/11/10
    <LI>星座：天蝎座
    </OL>
    1. 姓名：LUKE
    2. 生日：1981/11/10
    3. 星座：天蝎座



【定义列表标签】

  1. 接下来我们要说明的这个标签，是“定义列表标签”也是属于序列标签之一。我们先来举个例子，我们常常会在文章中看见这样的格式：
    CSS（Cascading style sheet）
    CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何物件均有更佳的操控性…

    网页里也有可以做到这种效果的标签喔！现在要来跟各位说的就是这个标签。咱们先来看看这标签的用法：

  2. 我们先来看看“定义列表标签”如何使用：

    原始码 呈现结果
    <DL>
    <DT>小标题
    <DD>标题的内容说明
    </DL>
    小标题
    标题的内容说明

4.11 HTML语法表单标签<回细说索引>

【表单的用途】

对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！

本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此我就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。

【各种输入类型】

  1. 文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是TYPE="TEXT，其使用方法如下：

    呈现结果
    姓名：
    原始码 <FORM>
    姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一栏位的名称，程式中常会用到。
    • SIZE="数值"，是设定此一栏位显现的宽度。
    • VALUE="预设内容"，是设定此一栏位的预设内容。
    • ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
    • MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。

  2. 单选核取表单：利用TYPE="RADIO"就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。

    呈现结果
    性别：男 女
    原始码 <FORM>
    性别：
    男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">
    女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一栏位的名称，程式中常会用到。
    • VALUE="内容"，是设定此一栏位的内容、值或是意义。
    • ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
    • CHECKED，是设定此一栏位为预设选取值。

  3. 复选核取表单：利用TYPE=" CHECKBOX "就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。

    呈现结果
    喜好： 电影 看书
    原始码 <FORM>
    喜好：
    <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影
    <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一栏位的名称，程式中常会用到。
    • VALUE="内容"，是设定此一栏位的内容、值或是意义。
    • ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
    • CHECKED，是设定此一栏位为预设选取值。

  4. 密码表单：利用TYPE=" PASSWORD "就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差别就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。

    呈现结果
    请输入密码：
    原始码 <FORM>
    请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT">
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一栏位的名称，程式中常会用到。
    • SIZE="数值"，是设定此一栏位显现的宽度。
    • VALUE="预设内容"，是设定此一栏位的预设内容，不过呈现出来仍是星号。
    • ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
    • MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。

  5. 送出按钮：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE=" SUBMIT "及TYPE=" RESET "来产生，相当的简单易用。

    呈现结果
    原始码 <FORM>
    <INPUT TYPE="SUBMIT" VALUE="送出资料">
    <INPUT TYPE="RESET" VALUE="重新填写">
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一按钮的名称。
    • VALUE="文字"，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上“送出查询”、“重设”等字样。
    • ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

  6. 按钮元件：表单中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。

    呈现结果
    请按下按钮：
    原始码 <FORM>
    请按下按钮：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一按钮的名称。
    • VALUE="文字"，是设定此一按钮上要呈现的文字。
    • ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

  7. 隐藏栏位：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的栏位。

    呈现结果
    隐藏栏位：
    原始码 <FORM>
    隐藏栏位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一栏位的名称。
    • VALUE="文字"，是设定此一栏位的值、文字或意义。



【大量文字输入元件】

  1. 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用<TEXTAREA></TEXTAREA>来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。

    呈现结果
    请输入您的意见：
    原始码 <FORM>
    请输入您的意见：<BR>
    <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
    </FORM>

    其有下列可设定之属性：

    • NAME="名称"，是设定此一栏位的名称。
    • WRAP="设定值"，是设定此一栏位的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效果送出）。
    • COLS="数值"，是设定此一栏位的行数（横向字数）。
    • ROWS="数值"，是设定此一栏位的列数（垂直字数）。



【下拉式选单】

  1. 下拉式选单令整个网页看起来有很专业的感觉，我们只要利用<SELECT NAME="名称">便可以产生一个下拉式选单，另外，还需要配合<OPTION>标签来产生选项，这样才算完整喔！

    呈现结果
    您喜欢看书吗？：
    原始码 <FORM>
    您喜欢看书吗？：
    <SELECT NAME="LIKE">
    <OPTION VALUE="非常喜欢">非常喜欢
    <OPTION VALUE="还算喜欢">还算喜欢
    <OPTION VALUE="不太喜欢">不太喜欢
    <OPTION VALUE="非常讨厌">非常讨厌
    </SELECT>
    </FORM>

    其有下列可设定之属性：

    • SIZE="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。
    • MULTIPLE，是设定此一栏位为复选，可以一次选好几个选项。

4.12 HTML语法框架标签<回细说索引>


【框架的基本概念】

  1. 首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。框架说明图 OK！我们可以看见，右边的这个视窗，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢？

  2. 原来，左下角的这个档案 index.htm，就是要告诉电脑，我们要将画面分割成这样，也就是说，所有Frame的标签，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其他档名也是可以的。）

  3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的 index.htm 档啦！）



【开始分割】

  1. 别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？

    原始码 呈现结果
    <HTML>
    <HEAD>
    <TITLE>框窗实作</TITLE>
    </HEAD>
    </HTML>

  2. 各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>标签给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>标签告诉电脑说：‘喂！我要开始分割了！’此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！

  3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：

    原始码 呈现结果
    <HTML>
    <HEAD>
    <TITLE>框窗实作</TITLE>
    </HEAD>
    <FRAMESET COLS="120,*" >
    　<FRAME SRC="a.htm" NAME="1">
    　<FRAME SRC="b.htm" NAME="2">
    </FRAMESET>
    </HTML>

  4. 在<FRAMESET>中，我们要告诉电脑到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随视窗大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。

  5. 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：

    原始码 呈现结果
    <HTML>
    <HEAD>
    <TITLE>框窗实作</TITLE>
    </HEAD>
    <FRAMESET COLS="120,*">
    　<FRAME SRC="a.htm" NAME="1">
    　<FRAMESET ROWS="100,*">
    　　<FRAME SRC="b.htm" NAME="2">
    　　<FRAME SRC="c.htm" NAME="3">
    　</FRAMESET>
    </FRAMESET>
    </HTML>

  6. 看见了没？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 点的语法中）被另一组<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！（乱七八糟了对不对？）

  7. 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。



【其他标签参数说明】

<FRAMESET COLS="120,*" frameborder=0 framespacing=5>

  1. COLS="120,*"
    就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！

  2. ROWS="120,*"
    就是横向切割画面，也就是将画面上下分开，切法同上。

  3. frameborder=0
    设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。

  4. framespacing=5
    表示框架与框架间的保留空白的距离，以免看起来太挤。

 
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>

  1. SRC="a.htm"
    设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）

  2. NAME="1"
    设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。

  3. frameborder=0
    设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。

  4. scrolling="no"
    设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情况显示。

  5. noresize
    设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。

  6. marginhight=2
    表示框架高度部份边缘所保留的空间。

  7. marginwidth=2
    表示框架宽度部份边缘所保留的空间。



【相关用法】

◆ <noframe>

  1. 使用方法：<noframe>请换有支援Frame功能的浏览器</noframe>

  2. 标签解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有Frame语法的网页标签，那么，没有支援Frame功能的浏览器，便会自动显示没有Frame语法的网页。

◆ target=框窗名称

  1. 使用方法：<A HREF="d1-1.htm" target=3>显示内容</A>

  2. 标签解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！

◆ target=_top

  1. 使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>

  2. 标签解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个萤幕啦！

4.13 HTML语言其他技巧<回细说索引>

■ 网页配色及背景音乐

首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。

要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！

内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！

然后是音乐，有人喜欢用bgsound标签

<bgsound src="music.mid">

可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">

这样就可以正常播放了唷～

■ 首页应有的特质及重要性

  1. About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入Allproducts.com即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。

  2. 主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)

  3. Navigation：让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的连结，各个icon如果可能的话，尽可能加上一些纯文字的说明及link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的link应该放在内层；另外，最好能在首页上提供Site Map的连结，让使用者可以很快了解网站的架构；所有的link应该把握 intuitive , obvious , fast的原则。

  4. Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用太多层的table。

  5. Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。

  6. 其它：首页上应该有service account 及 联络资料

■ Meta Tag 的简介

一般常用的格式如下：

  • <Title>All Products Online</title>
    这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。

  • <meta http-quive="content-type" content="text/html; charset=iso-8859-1">
    说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。

  • <meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">
    铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个Character (约44个字)。

  • <meta name="description" contents="整个网站的描述….">
    铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过200个Character (约15个字)，若文章真的太长，可以切割成两个部分，较不重要的部分置入下一个Description。

  • <meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
    此功能是要给搜寻引擎使用的，是要用来告诉Spider哪些网页是要去撷取的或不用去撷取的，一般都设定成All(内定值)。

 

你可能感兴趣的:(html)

  • Web编辑器与Word文档的无缝对接技巧 全武凌(荆门泽优) 前端编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 针对Word文档，百度编辑器提供了哪些便捷的上传与粘贴功能？ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 正则表达式-万能表达式 活跃家族 正则表达式
    1、正则正则表达式是一组由字母和符号组成的特殊文本,它可以用来从文本中找出满足你想要的格式的句子.{“basketId”:0,“count”:1,“prodId”:#prodId#,“shopId”:1,“skuId”:#skuId#}===#prodId#re相关的文章：https://www.cnblogs.com/Simple-Small/p/9150947.htmlregular表达式学习
  • CSS（美化页面） じ☆ve角落里哋暗殇灬 csshtml前端
    概念层叠样式表（cascadingstylesheet）：层叠：css的一个特性；样式：外观部分；表：css到代码书写的表现形式类似于一张表。作用：书写css代码用于美化页面使用嵌入方式：利用每个标签自带的style属性来设置样式内联：在中添加来写css代码css代码外联：创建一个以.css为后缀的文件，在文件中书写css代码，在中通过引入css文件注释HTML注释：是一种特殊的说明，对于自己的代
  • nginx502 Bad Gateway错误解决办法 Hanson, nginx
    一、问题现象nginx部署正常，运行正常。后端tomcat程序部署正常，运行正常。通过nginx反向代理后出现如下报错。nginx配置：server{listen80;listen[::]:80;server_nameweb;root/usr/share/nginx/html;#Loadconfigurationfilesforthedefaultserverblock.include/etc/n
  • CSS id 和 class 智慧浩海 CSScss前端
    id和class选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id"和"class"选择器。id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。以下的样式规则应用于元素属性id="para1":实例#para1{text-align:center;color:red;}尝试一下»ID属性不
  • HTML零基础入门详细教程 一花一world 前端htmlcss前端
    欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！1.HTML基本结构HTML文档由标签（tag）和文本组成。标签用于描述文本的含义和结构，而文本则是标签所描述的内容。HTML文档的基本结构如下：页面标题页面内容上面的代码是一个最简单的HTML文档。其中，声明了文
  • 【HTML 基础教程】HTML 元素 日记成书 HTML基础教程前端htmljavascript
    HTML文档由HTML元素定义。HTML元素开始标签*元素内容结束标签*这是一个段落这是一个链接换行*开始标签常被称为起始标签（openingtag），结束标签常称为闭合标签（closingtag）。HTML元素语法HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HTML元素具有空内容（emptycontent）空元素在开始标签中进行关闭（以开始标签
  • 大厂 H5 开发实战手册 人工智能_SYBH 课程推荐2025年前后端实战项目1024程序员节大厂H5开发实战手册
    京东凹凸实验室(Aotu.io，英文简称O2)，创立于2015年10月，为掘金最早一批联合编辑，拥有数千关注者。O2对内负责京东PC端首页、多个频道页、小程序版本京东购物、微信手Q京东购物、M端京东、各类营销活动场景HTML5活动等多个业务模块的前端开发工作，对外作为京东的多终端技术品牌一直活跃于掘金、GitHub等知名知识共享平台。O2官网：Aotu.io小册介绍这本小册
  • 【实战】解决图片 Hover 抖动问题的完整指南 oliver.chau 前端开发前端
    在开发网站时，很多人都会遇到一个常见问题：鼠标移动到图片上，图片放大，结果发生抖动或闪烁。这个问题往往伴随着后端接口请求、JS动态追加DOM等复杂行为。本文将深入剖析这个问题的成因，并提供一套彻底的解决方案，适合所有在前端开发中遇到此类困扰的朋友。问题现象鼠标移动到图片上，图片被放大（hover效果）图片出现抖动/闪烁/重排现象使用了innerHTML+=方式追加HTML每次hover时，JS/后
  • 实现元素方向感知
    html元素方向感知有时候我们需要获取鼠标从元素的哪个方向进入，从而实现一些效果。例如一些方向感知提示。有时候也需要知道我们鼠标当前落在元素的哪个象限。来控制元素应该朝向哪个区域拓展。元素方向感知#canvas{border:1pxsolidblack;}#content{width:200px;height:200px;border:1pxsolidred;}/*元素方向感知*/function
  • 下载与安装---tensorflow on linux weixin_34097242 人工智能运维python
    http://wiki.jikexueyuan.com/project/tensorflow-zh/get_started/os_setup.html你可以使用我们提供的Pip,Docker,Virtualenv,Anaconda或源码编译的方法安装TensorFlow.Pip安装Pip是一个Python的软件包安装与管理工具.在安装TensorFlow过程中要涉及安装或升级的包详见列表首先安装p
  • AI对前端开发的冲击更直接？后端开发的AI替代阻力更大？后端开发因技术门槛更高，岗位稳定性略优于前端。 南北极之间 人工智能前端
    基于参考资料和行业现状，前端开发在短期内比后端开发更容易受到AI冲击，但两者均不会被完全取代。以下是具体分析（附参考资料引用）：一、AI对前端开发的冲击更直接自动化程度高：低代码工具（如FigmaAI、Webflow）可通过拖拽生成页面，替代基础布局和组件开发。代码生成工具（如GitHubCopilot、通义灵码）能根据自然语言描述生成HTML/CSS/JavaScript代码，替代30%-50%
  • 代码随想录——动态规划-股票问题 Nero33666 动态规划算法
    https://www.programmercarl.com/动态规划-股票问题总结篇.html#买卖股票的最佳时机含手续费一、只能买一次不断更新最小买入值，不断更新profit=prices[i]-buy二、可以买卖多次动态规划-定义dp数组dp[i][1],dp[i][0]分别表示第i天持有股票时的现金和第i天未持有股票时的现金-递推公式dp[i][1]=max(dp[i-1][1],dp[i
  • NoSQL 数据库的应用场景与挑战 无界探索 数据库nosql
    ```htmlNoSQL数据库的应用场景与挑战随着互联网的快速发展，数据量呈爆炸式增长，传统的关系型数据库（如MySQL、Oracle等）在处理大规模数据时遇到了瓶颈。NoSQL数据库应运而生，它以其灵活的数据模型和强大的可扩展性，满足了现代应用对大数据存储和处理的需求。应用场景高并发读写场景：NoSQL数据库通过分布式架构设计，能够轻松应对高并发读写请求。例如，在电商网站中，用户浏览商品、下单购
  • 微信小程序框架 被甩了一耳光的梦 小程序小程序
    6个微信小程序热门的UI组件:minUI、vant、WeUI、colorUI、iviewUI、TaroUI、WuxUI1.minUI(http://www.miniui.com/)minUI代码轻量级，使开发者更专注于业务和服务端，从而能够轻松的实现页面开发，并且用户体验比较好。技术亮点：-快速开发：使用html配置界面，减少80%界面代码量。-易学易用：简单的API设计、可以独立、组合使用控件。
  • Canvas 示例：4种超炫的网站动画背景效果 「已注销」 前端css3html5canvas
    今天，我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势，已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中，在这里我们想向您分享几个使用JavaScript和Canvas创建不同页眉的动画示例。在线演示立即下载您可能感兴趣的相关文章网站开发中很有用的jQuery效果【附源码】分享35个让人惊讶的CSS3动画效果演示十分惊艳的8个HTML5&JavaS
  • Canvas渲染管线解析：从API调用到像素落地的全过程 沐土Arvin 信息可视化前端javascripthtmlcss
    1.Canvas基本定义★了解Canvas是HTML5提供的一个通过JavaScript来绘制图形的元素。它提供了一个空白的绘图区域，开发者可以使用JavaScript脚本在其中绘制各种图形、动画、游戏画面等。2.Canvas使用场景★了解数据可视化：绘制图表、图形等游戏开发：HTML5游戏图像处理：滤镜、像素操作动画效果：创建动态视觉效果交互式图形：绘图应用、设计工具教育演示：数学函数可视化等3
  • 使用 HTML、CSS 和 JavaScript 的简单模拟时钟 海拥✘ 100个前端优质项目javascriptcsshtml
    个人网站:【海拥】【小霸王游戏机】风趣幽默的前端学习课程：28个案例趣学前端想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】免费且实用的计算机相关知识题库：进来逛逛给大家安利一个免费且实用的前端刷题（面经大全）网站，
  • 分享一个让 uniapp 微信小程序支持 EventSource 的方法 魔众 uni-app微信小程序notepad++
    微信小程序不支持EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。一个替代实现方式c
  • 纯HTML+CSS实现3D空间正方体旋转 开心小老虎 html+csshtmlcss3d前端
    以下是一个使用纯HTML和CSS实现的3D空间正方体旋转效果。一、效果效果特点：半透明发光正方体进行多轴旋转核心光点脉冲效果正方体边框的霓虹光效多重阴影叠加的立体效果实现原理：使用CSS3D变换实现正方体结构通过preserve-3d保持三维空间关系组合使用rotateX/Y/Z实现多轴旋转使用box-shadow实现发光效果可以通过调整以下参数自定义效果：修改cube的尺寸调整正方体大小调整an
  • 如何低成本选择讯投QMT 的服务器/电脑，低成本运行？ wtsolutions qmt量化交易电脑服务器qmt
    本文适合给正在使用讯投QMT做程序化交易的新手朋友，当然也非常欢迎老手门参观，在评论区互相交流。关注WTSolutionsInvest的专栏，分享IBKR的交易指南，讯投QMT的使用经验等。专栏链接如下。https://blog.csdn.net/wtsolutions/category_12891723.htmlhttps://blog.csdn.net/wtsolutions/category
  • Nacos 上等猿 笔记后端nacos
    简介Nacos（DynamicNamingandConfigurationService）是阿里巴巴开源的一款动态服务发现、配置管理和服务管理平台，旨在为微服务架构提供高可用、高性能的解决方案。其核心功能包括服务注册与发现、动态配置管理、服务健康监测、动态DNS服务等，广泛应用于云原生和分布式系统场景官网https://nacos.io/zh-cn/docs/what-is-nacos.html配
  • SDL窗口嵌入到Qt窗口中 daqinzl qt流媒体视频音频SQLQt窗口嵌入
    参考链接：https://blog.csdn.net/qq_44825209/article/details/132419207https://www.cnblogs.com/lifan3a/articles/7464106.htmlhttps://avmedia.0voice.com/?id=41915https://blog.csdn.net/weixin_38890593/article/d
  • web第三次作业 Forget_8550 前端cssjavascript
    弹窗案例1.首页代码      综合案例      *{      margin:0;      padding:0;      box-sizing:border-box;    }    html,body{      width:100%;      height:100%;    }    .container{      width:100%;      height:100%;    
  • Springboot旅游管理系统的设计与实现4eqkg计算机毕业设计-课程设计-期末作业-毕设程序代做 屹涛科技 旅游
    Springboot旅游管理系统的设计与实现4eqkg计算机毕业设计-课程设计-期末作业-毕设程序代做【免费赠送源码】Springboot旅游管理系统的设计与实现4eqkg计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：
  • java数据透视表插件_纯前端表格控件SpreadJS：新增数据透视表插件等，完美呈现强大的Excel数据分析能力... 天生双下巴 java数据透视表插件
    SpreadJS是一款基于HTML5的纯前端电子表格控件，兼容450种以上的Excel公式，凭借其“高性能、跨平台、与Excel高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。新版本特性:新增数据透视表插件，拥有强大的Excel数据分析能力在线表格编辑器(控件版)：更易嵌入、秒级加载、灵活定制新增迭代计算功能，可实现高精度计算支持渐进加载、HTML导出支持渐进填充、多列
  • 【Django】教程-4-一个增删改查的Demo 唐古乌梁海 Djangodjango
    【Django】教程-1-安装+创建项目+目录结构介绍【Django】教程-2-前端-目录结构介绍【Django】教程-3-数据库相关介绍9.demo一个包含前后端的，增删查demo9.1前端代码layout.html定义父级，需要被其他前端页面继承的html模板,JQ跟bootstrap使用cdn的就可以！我的为本地的{%loadstatic%}{%blocktitle%}{%endblock%
  • JSP 指令 wangjinjin180 java开发语言
    1.JSP指令概述JSP指令是用来控制JSP页面行为的特殊标签，通常出现在JSP页面的开头。与脚本元素和动作标签不同，JSP指令在编译时执行，并且影响整个JSP页面或Servlet类。它们不像脚本代码那样直接生成HTML输出，而是用来设置页面的属性或行为。常见的JSP指令类型页面指令（PageDirective）包含指令（IncludeDirective）标签库指令（TaglibDirective
  • JavaScript、CSS像素动画特效代码
    我将从专业角度解析这个像素动画特效的实现原理，并提供优化方案。以下是详细的技术分解：一、核心实现原理graphTDA[HTML结构]-->B[容器定位]B-->C[CSS动画驱动]C-->D[JS动态生成]D-->E[粒子生命周期管理]二、代码优化建议内存优化方案：//修改后的JS代码（增加粒子回收机制）constMAX_PARTICLES=100;//最大粒子数functioncreatePix
  • knob UI插件使用 换个号韩国红果果 JavaScriptjsonpknob
    图形是用canvas绘制的 js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displayInput:'tr
  • Android+Jquery Mobile学习系列(5)-SQLite数据库 白糖_ JQuery Mobile
    目录导航   SQLite是轻量级的、嵌入式的、关系型数据库，目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好，很容易使用，很小，高效而且可靠。   因为Android已经集成了SQLite，所以开发人员无需引入任何JAR包，而且Android也针对SQLite封装了专属的API，调用起来非常快捷方便。   我也是第一次接触S
  • impala-2.1.2-CDH5.3.2 dayutianfei impala
    最近在整理impala编译的东西，简单记录几个要点： 根据官网的信息（https://github.com/cloudera/Impala/wiki/How-to-build-Impala）： 1. 首次编译impala，推荐使用命令： ${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format 2.仅编译BE ${I
  • 求二进制数中1的个数 周凡杨 java算法二进制
    解法一： 对于一个正整数如果是偶数，该数的二进制数的最后一位是 0 ，反之若是奇数，则该数的二进制数的最后一位是 1 。因此，可以考虑利用位移、判断奇偶来实现。   public int bitCount(int x){ int count = 0; while(x!=0){ if(x%2!=0){ /
  • spring中hibernate及事务配置 g21121 Hibernate
    hibernate的sessionFactory配置： <!-- hibernate sessionFactory配置 --> <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <
  • log4j.properties 使用 510888780 log4j
    log4j.properties 使用 一.参数意义说明 输出级别的种类 ERROR、WARN、INFO、DEBUG ERROR 为严重错误 主要是程序的错误 WARN 为一般警告，比如session丢失 INFO 为一般要显示的信息，比如登录登出 DEBUG 为程序的调试信息 配置日志信息输出目的地 log4j.appender.appenderName = fully.qua
  • Spring mvc-jfreeChart柱图（2） 布衣凌宇 jfreechart
    上一篇中生成的图是静态的，这篇将按条件进行搜索，并统计成图表，左面为统计图，右面显示搜索出的结果。 第一步：导包 第二步；配置web.xml(上一篇有代码) 建BarRenderer类用于柱子颜色 import java.awt.Color; import java.awt.Paint; import org.jfree.chart.renderer.category.BarR
  • 我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。 PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java
  • maven 之 cobertura 简单使用 antlove maventestunitcoberturareport
    1. 创建一个maven项目 2. 创建com.CoberturaStart.java package com; public class CoberturaStart { public void helloEveryone(){ System.out.println("=================================================
  • 程序的执行顺序 百合不是茶 JAVA执行顺序
          刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧   代码如下;     经典的程序执行面试题 //关于程序执行的顺序 //例如： //定义一个基类 public class A(){ public A(
  • 设置session失效的几种方法 bijian1013 web.xmlsession失效监听器
    在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
  • java jvm常用命令工具 bijian1013 javajvm
    一.概述         程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据，进而提高问题解决速度。 本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法，主要包含以下工具:       &nbs
  • 【Spring框架一】Spring常用注解之Autowired和Resource注解 bit1129 Spring常用注解
    Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后，对Spring一些常用注解的含义行为一直处于比较模糊的状态，写几篇总结下Spring常用的注解。本篇包含的注解有如下几个： Autowired Resource Component Service Controller Transactional 根据它们的功能、目的，可以分为三组，Autow
  • mysql 操作遇到safe update mode问题 bitray update
        我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全.     在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行 SET
  • nginx_perl试用 ronin47 nginx_perl试用
    因为空闲时间比较多，所以在CPAN上乱翻，看到了nginx_perl这个项目(原名Nginx::Engine)，现在托管在github.com上。地址见：https://github.com/zzzcpan/nginx-perl 这个模块的目的，是在nginx内置官方perl模块的基础上，实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能（这里
  • java-63-在字符串中删除特定的字符 bylijinnan java
    public class DeleteSpecificChars { /** * Q 63 在字符串中删除特定的字符 * 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符。 * 例如，输入”They are students.”和”aeiou”，则删除之后的第一个字符串变成”Thy r stdnts.” */ public static voi
  • EffectiveJava--创建和销毁对象 ccii 创建和销毁对象
    本章内容： 1. 考虑用静态工厂方法代替构造器 2. 遇到多个构造器参数时要考虑用构建器（Builder模式） 3. 用私有构造器或者枚举类型强化Singleton属性 4. 通过私有构造器强化不可实例化的能力 5. 避免创建不必要的对象 6. 消除过期的对象引用 7. 避免使用终结方法 1. 考虑用静态工厂方法代替构造器     类可以通过
  • [宇宙时代]四边形理论与光速飞行 comsci
       从四边形理论来推论 为什么光子飞船必须获得星光信号才能够进行光速飞行？    一组星体组成星座  向空间辐射一组由复杂星光信号组成的辐射频带，按照四边形-频率假说  一组频率就代表一个时空的入口    那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道，该时空通道在三维空间的投影是一
  • ubuntu server下python脚本迁移数据 cywhoyi pythonKettlepymysqlcx_Oracleubuntu server
    因为是在Ubuntu下，所以安装python、pip、pymysql等都极其方便，sudo apt-get install pymysql， 但是在安装cx_Oracle（连接oracle的模块）出现许多问题，查阅相关资料，发现这边文章能够帮我解决，希望大家少走点弯路。http://www.tbdazhe.com/archives/602 1.安装python 2.安装pip、pymysql
  • Ajax正确但是请求不到值解决方案 dashuaifu Ajaxasync
    Ajax正确但是请求不到值解决方案   解决方案：1 .     async: false ,    2.     设置延时执行js里的ajax或者延时后台java方法！！！！！！！   例如：   $.ajax({     &
  • windows安装配置php+memcached dcj3sjt126com PHPInstallmemcache
    Windows下Memcached的安装配置方法 1、将第一个包解压放某个盘下面，比如在c:\memcached。 2、在终端（也即cmd命令界面）下输入 'c:\memcached\memcached.exe -d install' 安装。 3、再输入： 'c:\memcached\memcached.exe -d start' 启动。（需要注意的: 以后memcached将作为windo
  • iOS开发学习路径的一些建议 dcj3sjt126com ios
    iOS论坛里有朋友要求回答帖子，帖子的标题是： 想学IOS开发高阶一点的东西，从何开始，然后我吧啦吧啦回答写了很多。既然敲了那么多字，我就把我写的回复也贴到博客里来分享，希望能对大家有帮助。欢迎大家也到帖子里讨论和分享，地址：http://bbs.csdn.net/topics/390920759   下面是我回复的内容：   结合自己情况聊下iOS学习建议，
  • Javascript闭包概念 fanfanlovey JavaScript闭包
    1.参考资料 http://www.jb51.net/article/24101.htm http://blog.csdn.net/yn49782026/article/details/8549462 2.内容概述 要理解闭包，首先需要理解变量作用域问题 内部函数可以饮用外面全局变量 var n=999; 　　functio
  • yum安装mysql5.6 haisheng mysql
    1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm   2、yum install mysql   3、yum install mysql-server   4、vi /etc/my.cnf   添加character_set_server=utf8
  • po/bo/vo/dao/pojo的详介 IT_zhlp80 javaBOVODAOPOJOpo
        JAVA几种对象的解释 PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作. VO:value object值对象。通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
  • java设计模式 kerryg java设计模式
    设计模式的分类：    一、 设计模式总体分为三大类： 1、创建型模式（5种）：工厂方法模式，抽象工厂模式，单例模式，建造者模式，原型模式。 2、结构型模式（7种）：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。 3、行为型模式（11种）：策略模式，模版方法模式，观察者模式，迭代子模式，责任链模式，命令模式，备忘录模式，状态模式，访问者
  • [1]CXF3.1整合Spring开发webservice——helloworld篇 木头.java springwebserviceCXF
    Spring 版本3.2.10 CXF 版本3.1.1 项目采用MAVEN组织依赖jar 我这里是有parent的pom，为了简洁明了，我直接把所有的依赖都列一起了，所以都没version，反正上面已经写了版本 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
  • Google 工程师亲授：菜鸟开发者一定要投资的十大目标 qindongliang1922 工作感悟人生
    身为软件开发者，有什么是一定得投资的？ Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资，第一项就是身体健康，英文与数学也都是必备能力吗？来看看他怎么说。（以下文字以作者第一人称撰写）） 你的健康 无疑地，软件开发者是世界上最久坐不动的职业之一。 每天连坐八到十六小时，休息时间只有一点点，绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险，
  • linux打开最大文件数量1,048,576 tianzhihehe clinux
    File descriptors are represented by the C int type. Not using a special type is often  considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
  • java语言中PO、VO、DAO、BO、POJO几种对象的解释 衞酆夼 javaVOBOPOJOpo
    PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象 封装业务逻辑的java对象
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他