小新 编译自 Insight Data Blog

量子位 出品 | 公众号 QbitAI

写个网页能有多麻烦？在大多数公司里，这项工作分为三步：

1. 产品经理完成用户调研任务后，列出一系列技术要求；

2. 设计师根据这些要求来设计低保真原型，逐渐修改得到高保真原型和UI设计图；

3. 工程师将这些设计图实现为代码，最终变成用户使用的产品。

这么多环节，任何地方出一点问题，都会拉长开发周期。因此，不少公司，比如Airbnb已经开始用机器学习来提高这个过程的效率。

△ Airbnb内部的AI工具，从图纸到代码一步到位

看起来很美好，但Airbnb还没公开该模型中端到端训练的细节，以及手工设计的图像特征对该模型的贡献度。这是该公司特有的闭源解决方案专利，可能不会进行公开。

好在，一个叫Ashwin Kumar的程序员创建了一个开源版本，让开发者/设计师的工作变得更简单。

以下内容翻译自他的博客：

理想上，这个模型可以根据网站设计的简单手绘原型，很快地生成一个可用的HTML网站：

△ SketchCode模型利用手绘线框图来生成HTML网站

事实上，上面例子就是利用训练好的模型在测试集上生成的一个实际网站，代码请访问：https://github.com/ashnkumar/sketch-code。

从图像标注中获取灵感

目前要解决的问题属于一种更广泛的任务，叫做程序综合（program synthesis），即自动生成工作源代码。尽管很多程序综合研究通过自然语言规范或执行追踪法来生成代码，但在当前任务中，我会充分利用源图像，即给出的手绘线框图来展开工作。

在机器学习中有一个十分热门的研究领域，称为图像标注（image caption），目的是构建一种把图像和文本连接在一起的模型，特别是用于生成源图像内容的描述。

△ 图像标注模型生成源图像的文本描述

我从一篇pix2code论文和另一个应用这种方法的相关项目中获得灵感，决定把我的任务按照图像标注方式来实现，把绘制的网站线框图作为输入图像，并将其相应的HTML代码作为其输出内容。

注：上段提到的两个参考项目分别是

pix2code论文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

获取合适的数据集

确定图像标注方法后，理想中使用的训练数据集会包含成千上万对手绘线框图和对应的HTML输出代码。但是，目前还没有我想要的相关数据集，我只好为这个任务来创建数据集。

最开始，我尝试了pix2code论文给出的开源数据集，该数据集由1750张综合生成网站的截图及其相应源代码组成。

△ pix2code数据集中的生成网站图片和源代码

这是一个很好的数据集，有几个有趣的地方：

• 该数据集中的每个生成网站都包含几个简单的辅助程序元素，如按钮、文本框和DIV对象。尽管这意味着这个模型受限于将这些少数元素作为它的输出内容，但是这些元素可通过选择生成网络来修改和扩展。这种方法应该很容易地推广到更大的元素词汇表。

• 每个样本的源代码都是由领域专用语言（DSL）的令牌组成，这是该论文作者为该任务所创建的。每个令牌对应于HTML和CSS的一个片段，且加入编译器把DSL转换为运行的HTML代码。

彩色网站图像变手绘图

为了修改我的任务数据集，我要让网站图像看起来像手工绘制出的。我尝试使用Python中的OpenCV库和PIL库等工具对每张图像进行修改，包括灰度转换和轮廓检测。

最终，我决定直接修改原始网站的CSS样式表，通过执行以下操作：

1. 更改页面上元素的边框半径来平滑按钮和DIV对象的边缘；

2. 模仿绘制的草图来调整边框的粗细，并添加阴影；

3. 将原有字体更改为类似手写的字体；

最终实现的流程中还增加了一个步骤，通过添加倾斜、移动和旋转来实现图像增强，来模拟实际绘制草图中的变化。

使用图像标注模型架构

现在，我已经处理好数据集，接下来是构建模型。

我利用了图像标注中使用的模型架构，该架构由三个主要部分组成：

1. 一种使用卷积神经网络（CNN）的计算机视觉模型，从源图像提取图像特征；

2. 一种包含门控单元GRU的语言模型，对源代码令牌序列进行编码；

3. 一个解码器模型，也属于GRU单元，把前两个步骤的输出作为输入，并预测序列中的下一个令牌。

△ 以令牌序列为输入来训练模型

为了训练模型，我将源代码拆分为令牌序列。模型的输入为单个部分序列及它的源图像，其标签是文本中的下一个令牌。该模型使用交叉熵函数作为损失函数，将模型的下个预测令牌与实际的下个令牌进行比较。

在模型从头开始生成代码的过程中，该推理方式稍有不同。图像仍然通过CNN网络进行处理，但文本处理开始时仅采用一个启动序列。在每个步骤中，模型对序列中输出的下个预测令牌将会添加到当前输入序列，并作为新的输入序列送到模型中；重复此操作直到模型的预测令牌为，或该过程达到每个文本中令牌数目的预定义值。

当模型生成一组预测令牌后，编译器就会将DSL令牌转换为HTML代码，这些HTML代码可以在任何浏览器中运行。

用BLEU分数评估模型

我决定使用BLEU分数来评估模型。这是机器翻译任务中常用的一种度量标准，通过在给定相同输入的情况下，衡量机器生成的文本与人类可能产生内容的近似程度。

实际上，BLEU通过比较生成文本和参考文本的N元序列，以创建修改后的准确版本。它非常适用于这个项目，因为它会影响生成HTML代码中的实际元素，以及它们之间的相互关系。

最棒的是，我还可以通过检查生成的网站来比较当前的实际BLEU分数。

△ 观察BLEU分数

当BLEU分数为1.0时，则说明给定源图像后该模型能在正确位置设置合适的元素，而较低的BLEU分数这说明模型预测了错误元素或是把它们放在相对不合适的位置。我们最终模型在评估数据集上的BLEU分数为0.76。

福利：定制网页风格

后来，我还想到，由于该模型只生成当前页面的框架，即文本的令牌，因此我可以在编译过程中添加一个定制的CSS层，并立刻得到不同风格的生成网站。

△ 一个手绘图生成多种风格的网页

把风格定制和模型生成两个过程分开，在使用模型时带来了很多好处：

1.如果想要将SketchCode模型应用到自己公司的产品中，前端工程师可以直接使用该模型，只需更改一个CSS文件来匹配该公司的网页设计风格；

2. 该模型内置的可扩展性，即通过单一源图像，模型可以迅速编译出多种不同的预定义风格，因此用户可以设想出多种可能的网站风格，并在浏览器中浏览这些生成网页。

总结和展望

受到图像标注研究的启发，SketchCode模型能够在几秒钟内将手绘网站线框图转换为可用的HTML网站。

但是，该模型还存在一些问题，这也是我接下来可能的工作方向：

1. 由于这个模型只使用了16个元素进行训练，所以它不能预测这些数据以外的令牌。下一步方向可能是使用更多元素来生成更多的网站样本，包括网站图片，下拉菜单和窗体，可参考启动程序组件（https://getbootstrap.com/docs/4.0/components/buttons/）来获得思路；

2. 在实际网站构建中，存在很多变化。创建一个能更好反映这种变化的训练集，是提高生成效果的一种好方法，可以通过获取更多网站的HTML/CSS代码以及内容截图来提高；

3. 手绘图纸也存在很多CSS修改技巧无法捕捉到的变化。解决这个问题的一种好方法是使用生成对抗网络GAN来创建更逼真的绘制网站图像。

相关地址

代码：https://github.com/ashnkumar/sketch-code

原文：https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82

— 完 —

诚挚招聘

量子位正在招募编辑/记者，工作地点在北京中关村。期待有才气、有热情的同学加入我们！相关细节，请在量子位公众号(QbitAI)对话界面，回复“招聘”两个字。

量子位 QbitAI · 头条号签约作者

վ'ᴗ' ի 追踪AI技术和产品新动态

译自： https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

作者： Kunal Sarkar

译者： MjSeven

在一个美好的夜晚，你的肚子拒绝消化你在晚餐吃的大块披萨，所以你不得不在睡梦中冲进洗手间。

在浴室里，当你在思考为什么会发生这种情况时，你听到一个来自通风口的低沉声音：“嘿，我是蝙蝠侠。”

这时，你会怎么做呢？

在你恐慌并处于关键时刻之前，蝙蝠侠说：“我需要你的帮助。我是一个超级极客，但我不懂 HTML。我需要用 HTML 写一封情书，你愿意帮助我吗？”

谁会拒绝蝙蝠侠的请求呢，对吧？所以让我们用 HTML 来写一封蝙蝠侠的情书。

你的第一个 HTML 文件

HTML 网页与你电脑上的其它文件一样。就同一个 .doc 文件以 MS Word 打开，.jpg 文件在图像查看器中打开一样，一个 .html 文件在浏览器中打开。

那么，让我们来创建一个 .html 文件。你可以在 Notepad 或其它任何编辑器中完成此任务，但我建议使用 VS Code。 在这里下载并安装 VS Code 。它是免费的，也是我唯一喜欢的微软产品。

在系统中创建一个目录，将其命名为 “HTML Practice”（不带引号）。在这个目录中，再创建一个名为 “Batman’s Love Letter”（不带引号）的目录，这将是我们的项目根目录。这意味着我们所有与这个项目相关的文件都会在这里。

打开 VS Code，按下 ctrl+n 创建一个新文件，按下 ctrl+s 保存文件。切换到 “Batman’s Love Letter” 文件夹并将其命名为 “loveletter.html”，然后单击保存。

现在，如果你在文件资源管理器中双击它，它将在你的默认浏览器中打开。我建议使用 Firefox 来进行 web 开发，但 Chrome 也可以。

让我们将这个过程与我们已经熟悉的东西联系起来。还记得你第一次拿到电脑吗？我做的第一件事是打开 MS Paint 并绘制一些东西。你在 Paint 中绘制一些东西并将其另存为图像，然后你可以在图像查看器中查看该图像。之后，如果要再次编辑该图像，你在 Paint 中重新打开它，编辑并保存它。

我们目前的流程非常相似。正如我们使用 Paint 创建和编辑图像一样，我们使用 VS Code 来创建和编辑 HTML 文件。就像我们使用图像查看器查看图像一样，我们使用浏览器来查看我们的 HTML 页面。

HTML 中的段落

我们有一个空的 HTML 文件，以下是蝙蝠侠想在他的情书中写的第一段。

“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”

复制这些到 VS Code 中的 loveletter.html。单击 “View -> Toggle Word Wrap (alt+z)” 自动换行。

保存并在浏览器中打开它。如果它已经打开，单击浏览器中的刷新按钮。

瞧！那是你的第一个网页！

我们的第一段已准备就绪，但这不是在 HTML 中编写段落的推荐方法。我们有一种特定的方法让浏览器知道一个文本是一个段落。

如果你用 <p> 和 </p> 来包裹文本，那么浏览器将识别 <p> 和 </p> 中的文本是一个段落。我们这样做：

<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>

通过在 <p> 和 </p>中编写段落，你创建了一个 HTML 元素。一个网页就是 HTML 元素的集合。

让我们首先来认识一些术语：<p> 是开始标签，</p> 是结束标签，“p” 是标签名称。元素开始和结束标签之间的文本是元素的内容。

“style” 属性

在上面，你将看到文本覆盖屏幕的整个宽度。

我们不希望这样。没有人想要阅读这么长的行。让我们设定段落宽度为 550px。

我们可以通过使用元素的 style 属性来实现。你可以在其 style 属性中定义元素的样式（例如，在我们的示例中为宽度）。以下行将在 p 元素上创建一个空样式属性：

<p style="">...</p>

你看到那个空的 "" 了吗？这就是我们定义元素外观的地方。现在我们要将宽度设置为 550px。我们这样做：

<p style="width:550px;">

After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

我们将 width 属性设置为 550px，用冒号 : 分隔，以分号 ; 结束。

另外，注意我们如何将 <p> 和 </p> 放在单独的行中，文本内容用一个制表符缩进。像这样设置代码使其更具可读性。

HTML 中的列表

接下来，蝙蝠侠希望列出他所钦佩的人的一些优点，例如：

You complete my darkness with your light. I love:

- the way you see good in the worst things

- the way you handle emotionally difficult situations

- the way you look at Justice

I have learned a lot from you. You have occupied a special place in my heart over time.

这看起来很简单。

让我们继续，在 </p> 下面复制所需的文本：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love:

- the way you see good in the worse

- the way you handle emotionally difficult situations

- the way you look at Justice

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

保存并刷新浏览器。

哇！这里发生了什么，我们的列表在哪里？

如果你仔细观察，你会发现没有显示换行符。在代码中我们在新的一行中编写列表项，但这些项在浏览器中显示在一行中。

如果你想在 HTML（新行）中插入换行符，你必须使用 <br>。让我们来使用 <br>，看看它长什么样：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love: <br>

- the way you see good in the worse <br>

- the way you handle emotionally difficult situations <br>

- the way you look at Justice <br>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

保存并刷新：

好的，现在它看起来就像我们想要的那样！

另外，注意我们没有写一个 </br>。有些标签不需要结束标签（它们被称为自闭合标签）。

还有一件事：我们没有在两个段落之间使用 <br>，但第二个段落仍然是从一个新行开始，这是因为 <p> 元素会自动插入换行符。

我们使用纯文本编写列表，但是有两个标签可以供我们使用来达到相同的目的：<ul> and <li>。

让我们解释一下名字的意思：ul 代表 无序列表(Unordered List)，li 代表 列表项目(List Item)。让我们使用它们来展示我们的列表：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love:

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

在复制代码之前，注意差异部分：

• 我们删除了所有的 <br>，因为每个 <li> 会自动显示在新行中
• 我们将每个列表项包含在 <li> 和 </li> 之间
• 我们将所有列表项的集合包裹在 <ul> 和 </ul> 之间
• 我们没有像 <p> 元素那样定义 <ul> 元素的宽度。这是因为 <ul> 是 <p> 的子节点，<p> 已经被约束到 550px，所以 <ul> 不会超出这个范围。

让我们保存文件并刷新浏览器以查看结果：

你会立即注意到在每个列表项之前显示了重点标志。我们现在不需要在每个列表项之前写 “-”。

经过仔细检查，你会注意到最后一行超出 550px 宽度。这是为什么？因为 HTML 不允许 <ul> 元素出现在 <p> 元素中。让我们将第一行和最后一行放在单独的 <p> 元素中：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love:

</p>

<ul style="width:550px;">

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p style="width:550px;">

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

保存并刷新。

注意，这次我们还定义了 <ul> 元素的宽度。那是因为我们现在已经将 <ul> 元素放在了 <p> 元素之外。

定义情书中所有元素的宽度会变得很麻烦。我们有一个特定的元素用于此目的：<div> 元素。一个 <div> 元素就是一个通用容器，用于对内容进行分组，以便轻松设置样式。

让我们用 <div> 元素包装整个情书，并为其赋予宽度：550px 。

<div style="width:550px;">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

棒极了，我们的代码现在看起来简洁多了。

HTML 中的标题

到目前为止，蝙蝠侠对结果很高兴，他希望在情书上标题。他想写一个标题： “Bat Letter”。当然，你已经看到这个名字了，不是吗？:D

你可以使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 标签来添加标题，<h1> 是最大的标题和最主要的标题，<h6> 是最小的标题。

让我们在第二段之前使用 <h1> 做主标题和一个副标题：

<div style="width:550px;">

<h1>Bat Letter</h1>

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

保存，刷新。

HTML 中的图像

我们的情书尚未完成，但在继续之前，缺少一件大事：蝙蝠侠标志。你见过是蝙蝠侠的东西但没有蝙蝠侠的标志吗？

并没有。

所以，让我们在情书中添加一个蝙蝠侠标志。

在 HTML 中包含图像就像在一个 Word 文件中包含图像一样。在 MS Word 中，你到 “菜单 -> 插入 -> 图像 -> 然后导航到图像位置为止 -> 选择图像 -> 单击插入”。

在 HTML 中，我们使用 <img> 标签让浏览器知道我们需要加载的图像，而不是单击菜单。我们在 src 属性中写入文件的位置和名称。如果图像在项目根目录中，我们可以简单地在 src 属性中写入图像文件的名称。

在我们深入编码之前，从 这里 下载蝙蝠侠标志。你可能希望裁剪图像中的额外空白区域。复制项目根目录中的图像并将其重命名为 “bat-logo.jpeg”。

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

我们在第 3 行包含了 <img> 标签。这个标签也是一个自闭合的标签，所以我们不需要写 </img>。在 src 属性中，我们给出了图像文件的名称。这个名称应与图像名称完全相同，包括扩展名（.jpeg）及其大小写。

保存并刷新，查看结果。

该死的！刚刚发生了什么？

当使用 <img> 标签包含图像时，默认情况下，图像将以其原始分辨率显示。在我们的例子中，图像比 550px 宽得多。让我们使用 style 属性定义它的宽度：

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg" style="width:100%">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

你会注意到，这次我们定义宽度使用了 “%” 而不是 “px”。当我们在 “%” 中定义宽度时，它将占据父元素宽度的百分比。因此，100% 的 550px 将为我们提供 550px。

保存并刷新，查看结果。

太棒了！这让蝙蝠侠的脸露出了羞涩的微笑 :)。

HTML 中的粗体和斜体

现在蝙蝠侠想在最后几段中承认他的爱。他有以下文本供你用 HTML 编写：

“I have a confession to make

It feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.

I don’t show my emotions, but I think this man behind the mask is falling for you.”

当阅读到这里时，你会问蝙蝠侠：“等等，这是给谁的？”蝙蝠侠说：

“这是给超人的。”

你说：哦！我还以为是给神奇女侠的呢。

蝙蝠侠说：不，这是给超人的，请在最后写上 “I love you Superman.”。

好的，我们来写：

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg" style="width:100%">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p>I love you Superman.</p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

这封信差不多完成了，蝙蝠侠另外想再做两次改变。蝙蝠侠希望在最后段落的第一句中的 “does” 一词是斜体，而 “I love you Superman” 这句话是粗体的。

我们使用 <em> 和 <strong> 以斜体和粗体显示文本。让我们来更新这些更改：

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg" style="width:100%">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

HTML 中的样式

你可以通过三种方式设置样式或定义 HTML 元素的外观：

• 内联样式：我们使用元素的 style 属性来编写样式。这是我们迄今为止使用的，但这不是一个好的实践。
• 嵌入式样式：我们在由 <style> 和 </style> 包裹的 “style” 元素中编写所有样式。
• 链接样式表：我们在具有 .css 扩展名的单独文件中编写所有元素的样式。此文件称为样式表。

让我们来看看如何定义 <div> 的内联样式：

<div style="width:550px;">

我们可以在 <style> 和 </style> 里面写同样的样式：

div{

width:550px;

}

在嵌入式样式中，我们编写的样式是与元素分开的。所以我们需要一种方法来关联元素及其样式。第一个单词 “div” 就做了这样的活。它让浏览器知道花括号 {...} 里面的所有样式都属于 “div” 元素。由于这种语法确定要应用样式的元素，因此它称为一个选择器。

我们编写样式的方式保持不变：属性（width）和值（550px）用冒号（:）分隔，以分号（;）结束。

让我们从 <div> 和 <img> 元素中删除内联样式，将其写入 <style> 元素：

<style>

div{

width:550px;

}

img{

width:100%;

}

</style>

<div>

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

保存并刷新，结果应保持不变。

但是有一个大问题，如果我们的 HTML 文件中有多个 <div> 和 <img> 元素该怎么办？这样我们在 <style> 元素中为 div 和 img 定义的样式就会应用于页面上的每个 div 和 img。

如果你在以后的代码中添加另一个 div，那么该 div 也将变为 550px 宽。我们并不希望这样。

我们想要将我们的样式应用于现在正在使用的特定 div 和 img。为此，我们需要为 div 和 img 元素提供唯一的 id。以下是使用 id 属性为元素赋予 id 的方法：

<div id="letter-container">

以下是如何在嵌入式样式中将此 id 用作选择器：

#letter-container{

...

}

注意 # 符号。它表示它是一个 id，{...} 中的样式应该只应用于具有该特定 id 的元素。

让我们来应用它：

<style>

#letter-container{

width:550px;

}

#header-bat-logo{

width:100%;

}

</style>

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

HTML 已经准备好了嵌入式样式。

但是，你可以看到，随着我们包含越来越多的样式，<style></style> 将变得很大。这可能很快会混乱我们的主 HTML 文件。

因此，让我们更进一步，通过将 <style> 标签内的内容复制到一个新文件来使用链接样式。

在项目根目录中创建一个新文件，将其另存为 “style.css”：

#letter-container{

width:550px;

}

#header-bat-logo{

width:100%;

}

我们不需要在 CSS 文件中写 <style> 和 </style>。

我们需要使用 HTML 文件中的 <link> 标签来将新创建的 CSS 文件链接到 HTML 文件。以下是我们如何做到这一点：

<link rel="stylesheet" type="text/css" href="style.css">

我们使用 <link> 元素在 HTML 文档中包含外部资源，它主要用于链接样式表。我们使用的三个属性是：

• rel：关系。链接文件与文档的关系。具有 .css 扩展名的文件称为样式表，因此我们保留 rel=“stylesheet”。
• type：链接文件的类型；对于一个 CSS 文件来说它是 “text/css”。
• href：超文本参考。链接文件的位置。

link 元素的结尾没有 </link>。因此，<link> 也是一个自闭合的标签。

<link rel="gf" type="cute" href="girl.next.door">

如果只是得到一个女朋友，那么很容易：D

可惜没有那么简单，让我们继续前进。

这是我们 “loveletter.html” 的内容：

<link rel="stylesheet" type="text/css" href="style.css">

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

“style.css” 内容：

#letter-container{

width:550px;

}

#header-bat-logo{

width:100%;

}

保存文件并刷新，浏览器中的输出应保持不变。

一些手续

我们的情书已经准备好给蝙蝠侠，但还有一些正式的片段。

与其他任何编程语言一样，HTML 自出生以来（1990 年）经历过许多版本，当前版本是 HTML5。

那么，浏览器如何知道你使用哪个版本的 HTML 来编写页面呢？要告诉浏览器你正在使用 HTML5，你需要在页面顶部包含 <!DOCTYPE html>。对于旧版本的 HTML，这行不同，但你不需要了解它们，因为我们不再使用它们了。

此外，在之前的 HTML 版本中，我们曾经将整个文档封装在 <html></html> 标签内。整个文件分为两个主要部分：头部在 <head></head> 里面，主体在 <body></body> 里面。这在 HTML5 中不是必须的，但由于兼容性原因，我们仍然这样做。让我们用 <Doctype>, <html>、 <head> 和 <body> 更新我们的代码：

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

</body>

</html>

主要内容在 <body> 里面，元信息在 <head> 里面。所以我们把 <div> 保存在 <body> 里面并加载 <head> 里面的样式表。

保存并刷新，你的 HTML 页面应显示与之前相同的内容。

HTML 的标题

我发誓，这是最后一次改变。

你可能已经注意到选项卡的标题正在显示 HTML 文件的路径：

我们可以使用 <title> 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 <head> 内部。让我们我们在标题中加上 “Bat Letter”：

<!DOCTYPE html>

<html>

<head>

<title>Bat Letter</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

</body>

</html>

保存并刷新，你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。

蝙蝠侠的情书现在已经完成。

恭喜！你用 HTML 制作了蝙蝠侠的情书。

我们学到了什么

我们学习了以下新概念：

• 一个 HTML 文档的结构
• 在 HTML 中如何写元素（<p></p>）
• 如何使用 style 属性在元素内编写样式（这称为内联样式，尽可能避免这种情况）
• 如何在 <style>...</style> 中编写元素的样式（这称为嵌入式样式）
• 在 HTML 中如何使用 <link> 在单独的文件中编写样式并链接它（这称为链接样式表）
• 什么是标签名称，属性，开始标签和结束标签
• 如何使用 id 属性为一个元素赋予 id
• CSS 中的标签选择器和 id 选择器

我们学习了以下 HTML 标签：

• <p>：用于段落
• <br>：用于换行
• <ul>、<li>：显示列表
• <div>：用于分组我们信件的元素
• <h1>、<h2>：用于标题和子标题
• <img>：用于插入图像
• <strong>、<em>：用于粗体和斜体文字样式
• <style>：用于嵌入式样式
• <link>：用于包含外部样式表
• <html>：用于包裹整个 HTML 文档
• <!DOCTYPE html>：让浏览器知道我们正在使用 HTML5
• <head>：包裹元信息，如 <link> 和 <title>
• <body>：用于实际显示的 HTML 页面的主体
• <title>：用于 HTML 页面的标题

我们学习了以下 CSS 属性：

• width：用于定义元素的宽度
• CSS 单位：“px” 和 “%”

朋友们，这就是今天的全部了，下一个教程中见。

作者简介：开发者 + 作者 | supersarkar.com | twitter.com/supersarkar

via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

作者： Kunal Sarkar 译者： MjSeven 校对： wxy

本文由 LCTT 原创编译， Linux中国 荣誉推出

点击“了解更多”可访问文内链接

.结构性定义

文件类型 <HTML></HTML> （放在档案的开头与结尾）

文件主题 <TITLE></TITLE> （必须放在「文头」区块内）

文头 <HEAD></HEAD> （描述性资料，像是「主题」）

文体 <BODY></BODY> （文件本体）

（由浏览器控制的显示风格）

标题 <H?></H?> （从1到6，有六层选择）

标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

区分 <DIV></DIV>

区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文区块 <BLOCKQUOTE></BLOCKQUOTE> （通常会内缩）

强调 <EM></EM> （通常会以斜体显示）

特别强调 <STRONG></STRONG> （通常会以加粗显示）

引文 <CITE></CITE> （通常会以斜体显示）

码 <CODE></CODE> （显示原始码之用）

样本 <SAMP></SAMP>

键盘输入 <KBD></KBD>

变数 <VAR></VAR>

定义 <DFN></DFN> （有些浏览器不提供）

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL>

与外观相关的标签（作者自订的表现方式）

加粗 <B></B>

斜体 <I></I>

底线 <U></U> （尚有些浏览器不提供）

删除线 <S></S> （尚有些浏览器不提供）

下标 <SUB></SUB>

上标 <SUP></SUP>

打字机体 <TT></TT> （用单空格字型显示）

预定格式 <PRE></PRE> （保留文件中空格的大小）

预定格式的宽度 <PRE WIDTH=?></PRE>（以字元计算）

向中看齐 <CENTER></CENTER> （文字与图片都可以）

闪耀 <BLINK></BLINK> （有史以来最被嘲弄的标签）

字体大小 <FONT SIZE=?></FONT>（从1到7）

改变字体大小 <FONT SIZE=+|-?></FONT>

基本字体大小 <BASEFONT SIZE=?> （从1到7; 内定为3）

字体颜色 <FONT COLOR="#$$$$$$"></FONT>

说明 <!-- *** --> （浏览器不会显示）

<!--修改滚动条-->

<style type="text/css">

body {

scrollbar-face-color: #330033;

scrollbar-shadow-color: #FFFFFF;

scrollbar-highlight-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-track-color: #330033;

scrollbar-arrow-color: #FFFFFF;

}

</style>

<!--修改滚动条结束-->

将上面的代码放在叶子代码的<head></head>之间,颜色可根据自己的需要修改。

滚动条的代码意思如下：

Scrollbar-Face-Color为滚动条表面颜色设定；

Scrollbar-Track-Color为滚动条底板颜色设定；

Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定；

Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；

Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；

Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；

Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。

<!> 跑馬燈

<marquee>...</marquee>普通捲動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設捲動

<marquee behavior=alternate>...</marquee>來回捲動

<marquee direction=down>...</marquee>向下捲動

<marquee direction=up>...</marquee>向上捲動

<marquee direction=right></marquee>向右捲動

<marquee direction=’left’></marquee>向左捲動

<marquee loop=2>...</marquee>捲動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定捲動距離

<marquee scrolldelay=300>...</marquee>設定捲動時間

1)贴图：<img src="图片地址">

2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>

3)在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>

4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>

5)字体加粗：<b>写上你想写的字</b>

6)字体斜体：<i>写上你想写的字</i>

7)字体下划线: <u>写上你想写的字</u>

8)字体删除线: <s>写上你想写的字</s>

9)字体加大: <big>写上你想写的字</big>

10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)

11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

12)消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

13)贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>

14)贴flash: <embed src="flash地址" width="宽度" height="高度">

15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

16)换行：<br>

17)段落：<p>段落</p>

18)原始文字样式：<pre>正文</pre>

19)换帖子背景：<body background="背景图片地址">

20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body

bgproperties=fixed>

21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)

22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>

23)贴网页：<iframe. src="相关地址" width="宽度" height="高度"></iframe>

1、店铺音乐代码:音乐网址" loop="-1">

2、图片制作代码：＜img src="这里放图片地址"＞

3、公告图片代码：＜img border="0" src="这里放图片地址" /＞或＜img src="这里放图片地址"/＞

4、悬浮挂饰代码：＜img src="这里放图片地址" style="left:20px; position: relative; top:0px" /＞

5、商品分类代码:＜img src="这里放图片地址"/＞

6、字体大小代码:＜font size="2"＞这里放要处理的文字，可用3、4、5等设置大小＜/font＞

7、字体颜色代码:＜font color="red"＞这里放要处理的文字，可以换成blue,yellow等＜/font＞

8、文字链接代码:＜a href="网页地址"＞链接的文字，在分类栏里用时链接的网页地址必须缩短＜/a＞

9、移动文字代码:＜marquee＞从右到左移动的文字＜/marquee＞

10、背景音乐代码：＜bgsound loop="-1" src="这里放音乐地址"＞＜/bgsound＞

11、图片附加音乐代码：＜img border=0 src="这里放图片地址" dynsrc="这里放音乐地址"＞

12、浮动图片代码:＜img alt="1" height="150" src="这里放图片地址"/＞

公告图片的代码：公告挂饰：店铺分类代码:背景音乐代码：换行代码

计数器代码颜色代码：

1白色 #FFFFFF

2红色#FF0000

3绿色#00FF00

4蓝色#0000FF

5牡丹红#FF00FF

6青色 #00FFFF

7黄色#FFFF00

8黑色#000000

9海蓝#70DB93

10巧克力色#5C3317

11蓝紫色 #9F5F9F

12黄铜色#B5A642

13亮金色#D9D919

14棕色#A67D3D

15青铜色 #8C7853

162号青铜色 #A67D3D

17士官服蓝色 #5F9F9F

18冷铜色 #D98719

19铜色 #B87333

20珊瑚红 #FF7F00

21紫蓝色 #42426F

22深棕 #5C4033

23深绿 #2F4F2F

24深铜绿色 #4A766E

25深橄榄绿 #4F4F2F

26深兰花色 #9932CD

27深紫色 #871F78

28深石板蓝 #6B238E

29深铅灰色 #2F4F4F

30深棕褐色 #97694F

32深绿松石色 #7093DB

33暗木色 #855E42

34淡灰色 #545454

35土灰玫瑰红色 #856363

36长石色 #D19275

37火砖色#8E2323

38森林绿 #238E23

39金色 #CD7F32

40鲜黄色 #DBDB70

41灰色 #C0C0C0

42铜绿色 #527F76

43青黄色 #93DB70

44猎人绿 #215E21

45印度红 #4E2F2F

46土黄色 #9F9F5F

47浅蓝色 #C0D9D9

48浅灰色 #A8A8A8

49浅钢蓝色 #8F8FBD

59浅木色 #E9C2A6

60石灰绿色 #32CD32

61桔黄色 #E47833

62褐红色 #8E236B

63中海蓝色 #32CD99

64中蓝色 #3232CD

65中森林绿 #6B8E23

66中鲜黄色 #EAEAAE

67中兰花色 #9370DB

68中海绿色 #426F42

69中石板蓝色 #7F00FF

70中春绿色 #7FFF00

71中绿松石色 #70DBDB

72中紫红色 #DB7093

73中木色 #A68064

74深藏青色 #2F2F4F

75海军蓝 #23238E

76霓虹篮 #4D4DFF

77霓虹粉红 #FF6EC7

78新深藏青色 #00009C

79新棕褐色 #EBC79E

80暗金黄色 #CFB53B

81橙色 #FF7F00

82橙红色 #FF2400

83淡紫色 #DB70DB

84浅绿色 #8FBC8F

85粉红色 #BC8F8F

86李子色 #EAADEA

87石英色 #D9D9F3

88艳蓝色 #5959AB

89鲑鱼色 #6F4242

90猩红色 #BC1717

91海绿色 #238E68

92半甜巧克力色 #6B4226

93赭色 #8E6B23

94银色 #E6E8FA

95天蓝 #3299CC

96石板蓝 #007FFF

97艳粉红色 #FF1CAE

98春绿色 #00FF7F

99钢蓝色 #236B8E

100亮天蓝色 #38B0DE

101棕褐色 #DB9370

102紫红色 #D8BFD8

103石板蓝色 #ADEAEA

104浓深棕色 #5C4033

105淡浅灰色 #CDCDCD

106紫罗兰色 #4F2F4F

107紫罗兰红色 #CC3299

108麦黄色#D8D8BF

109黄绿色 #99CC32

简单常用HTML代码大全（修改网页必备）

网页常用HTML代码大全

超链接，用的最多：

点击在当前页打开网站

<a href="http://www.88wan.com/">这是我的网站</a>

效果：这是我的网站

点击弹出网站

<a href="http://www.88wan.com/" target="_blank">这是我的网站</a>

<br>这个是向下一行，比如

欢迎光临我的网站<br>希望开心

演示效果就是：

欢迎光临我的网站

希望开心

<p>向下一大行，比如

欢迎光临我的网站<p>希望开心

演示效果就是：

欢迎光临我的网站

希望开心

<b>这是粗体字

比如 <b >我的网站</ b>

演示效果：我的网站

我的网站这是字体的颜色BLUE是蓝，RED是红

演示

忽视右键

<body >

或

<body style="overflow-y:hidden">

如何几秒后转到别的页面？

<META. HTTP-EQUIV="Refresh" C>

点击关闭窗口

<a href="javascript.:top.window.close();">点击关闭窗口</a>！

请问如何去掉主页右面的滚动条？

<body scroll="no">

<body style="overflow-y:hidden">

如何做到让一个网页自动关闭.

<html>

<head>

<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<param name="Command" value="Close">

</object>

</head>

<body >

这个窗口会在10秒过后自动关闭,而且不会出现提示. </body>

如何在不刷新页面的情况下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>点击按钮直接修改style标签里button选择符使按钮改为红色</button>

请问如何让网页自动刷新？

在head部记入<META. HTTP-EQUIV="Refresh" c>其中20为20秒后自动刷新，你可以更改为任意值。

如何让页面自动刷新？

方法一，用refresh

HTML 代码片段如下:

<head>

<meta. http-equiv="refresh" c>

</head>

5表示刷新时间

[Ctrl+A 全部选择 提示:你可先修改部分代码，再按运行]

方法二，使用setTimeout控制

<img src=/logo.gif>

<script>

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</script>

如何让超链接没有下划线

在源代码中的<HEAD>…</HEAD>之间输入如下代码：

<style. type="text/css"> <!--

a { text-decoration: none}

--> </style>

请问如何去掉IE的上下滚动条？

<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>

</body>

怎样才能把RealPlayer文件在网页做一个试听连接？

<embed height=25　src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>

如何用html实现浏览器上后退按钮的功能？

<a href="java script.:history.go(-1)">点击后退</a>

或者

<script> history.back() </script>

请问怎么在网页中改变鼠标的箭头形状？

HTML 代码片段如下:

<body>

<a href="#" style="cursor: auto;">auto</a><br>

<a href="#" style="cursor: crosshair ">crosshair </a><br>

<a href="#" style="cursor: default ">default </a><br>

<a href="#" style="cursor: hand ">hand </a><br>

<a href="#" style="cursor: move ">move </a><br>

<a href="#" style="cursor: e-resize ">e-resize </a><br>

<a href="#" style="cursor: ne-resize ">ne-resize </a><br>

<a href="#" style="cursor: nw-resize">nw-resize</a><br>

<a href="#" style="cursor: n-resize">n-resize</a><br>

<a href="#" style="cursor: se-resize">se-resize</a><br>

<a href="#" style="cursor: sw-resize">sw-resize</a><br>

<a href="#" style="cursor: s-resize">s-resize</a><br>

<a href="#" style="cursor: w-resize">w-resize</a><br>

<a href="#" style="cursor: text">text</a><br>

<a href="#" style="cursor: wait">wait</a><br>

<a href="#" style="cursor: help">help</a><br>

</body>

怎样不使用页面的缓存？即每一次打开页面时不是调用缓存中的东西

<META. HTTP-EQUIV="

ragma" C>

页面打开时自动弹出一个窗口的代码怎么写？

HTML 代码片段如下:

<html>

<head>

<title>Untitled Document</title>

<meta. http-equiv="Content-Type" c>

<script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

　window.open(theURL,winName,features);

}

//-->

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" >

</body>

</html>

如何让我的页面出现一个会讲话的小人？Merlin

HTML 代码片段如下:

<HTML>

<HEAD>

<TITLE>默林</TITLE>

<META. http-equiv=Content-Type c>

</HEAD>

<BODY>

<p><OBJECT id=sims classid=CLSID

45FD31B-5C6E-11D1-9EC1-00C04FD7081F>

　</OBJECT>

　<SCRIPT>

var MerlinID;

var MerlinACS;

sims.Connected = true;

MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);

Merlin = sims.Characters.Character(MerlinID);

Merlin.Show();

Merlin.Play("Surprised");

Merlin.Speak("大家好");

Merlin.Play("GestureLeft");

Merlin.Think("我是默林！");

Merlin.Play("

leased");

Merlin.Think("可爱吗？");

Merlin.Play("GestureDown");

Merlin.Speak("哈哈！");

Merlin.Hide();

function LoadLocalAgent(CharID, CharACS){

LoadReq = sims.Characters.Load(CharID, CharACS);

return(true);

}

</SCRIPT>

</p>

<p> </p>

<p>看此效果必须装有office2000！！！</p>

</BODY>

</HTML>

在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

HTML 代码片段如下:

<html><head>

<STYLE>

body　 {background-image:url(logo.gif);

background-repeat:no-repeat; background-position:center }

</STYLE>

</head>

<body bgproperties="fixed" >

</body>

</html>

[Ctrl+A 全部选择 提示:你可先修改部分代码，再按运行]

background-repeat:no-repeat; 是讓背景圖不占滿整個頁面

body bgproperties="fixed" 是拉動scroll時背景圖不動

文本输入框什么属性能实现不可输入？

HTML 代码片段如下:

<input type="text" name="textfield" disabled>

或者

<input type="text" name="textfield" readonly>

如何禁止自己的页面在别人的框架里打开？

把以下代码加至你的<head>区

<script>

if (window.top!=self){

window.top.location=self.location

}

</script>

如何实现首页全屏幕显示？

HTML 代码片段如下:

<html>

<body><script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

var coolw=642

var coolh=400

var coolhuang=window.open("http://www.51js.com","coolhuang","width="+coolw+",height="+coolh+",

fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

window.close()

</script></body></html>

如何监听一个窗口被关闭了？

HTML 代码片段如下:

<body >

如何禁止Ctrl+N？

HTML 代码片段如下:

<body nkeydown=return(!(event.keyCode==78&&event.ctrlKey))>

如何把页面加入用户的收藏夹？

HTML 代码片段如下:

<a href="<B style="color:black;background-color:#A0FFFF">javascript</B>:window.external.AddFavorite(‘‘‘‘http://www.51js.com‘‘‘‘,‘‘‘‘无忧脚本‘‘‘‘)">收藏无忧脚本</a>

如何在我的页面中加入背景音乐？

IE: <bgsound src="*.mid" loop=infinite>

NS:<embed src="*.mid" autostart=true hidden=true loop=true>

*.mid你的背景音乐的midi格式文件

关于页面转换效果

<meta. http-equiv="page-enter" c>

或

<meta. http-equiv="page-exit" c>

说明：Transition=23是随机效果，另可以选0-22任一数字固定某个效果

如何设定打开页面的大小

HTML 代码片段如下:

<body ><!--(width，height)-->

怎样双击滚屏，单击停止？

HTML 代码片段如下:

<html>

<head>

<title>新網頁1</title>

</head>

<body>

<script. language"<B style="color:black;background-color:#A0FFFF">javascript</B>">

var currentpos,timer;

function initialize()

{

timer=setInterval("scrollwindow()",10);

}

function sc(){

clearInterval(timer);

}

function scrollwindow()

{

currentpos=document.body.scrollTop;

window.scroll(0,++currentpos);

if (currentpos != document.body.scrollTop)

sc();

}

document.onmousedown=sc

document.ondblclick=initialize

</script>

<p>a</p><p>a</p><p>a</p><p>aa</p><p>aa</p><p>aa</p>

<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>

<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>

<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>a</p>

</body>

</html>

如何让body中的文字不被选中？

HTML 代码片段如下:

<body >aaa</body>

如何让弹出的窗口不能关闭？

在新开的窗口中加入如下代码

<body nunload=open(location.href)>

</body>

如何让浏览器在保存页面时保存失败？

HTML 代码片段如下:

<NOSCRIPT>

<<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="*.html">

</<B style="color:black;background-color:#ffff66">IFRAME</B>>

</NOSCRIPT>

表单中如何用图片按钮实现 reset?

<html>

<head>

<script>

function aaa(){

document.forms[0].reset()

}

</script>

</head>

<body>

<form>

<textarea rows="2" name="S1" cols="20"></textarea>

<input type="submit" values="提交" name="B1">

<image src="logo.gif" nclick=aaa()>

</form>

</body></html>

进入网页时弹出的信息对话框

<body >

关闭窗口后弹出对话框

<body >

告别提示

<body nUnload= alert("再见，感谢你的访问！")>

只要你肯干,没有什么不能成功的.

1。忽视右键

　 <body ncontextmenu="return false">

或

　 <body style="overflow-y:hidden">

2。加入背景音乐

　 IE:<bgsound src="*.mid" loop=infinite>

　 NS:<embed src="*.mid" autostart=true hidden=true loop=true>

　 </embed>

　 *.mid你的背景音乐的midi格式文件

3。简单的window.open方法

　 <a href="#"

　 nclick="javascript:window.open(文件路径/文件名,newwindow,

　 toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

　 width=400,height=300);">文字或图片</a>

参数解释：

　 <SCRIPT. LANGUAGE="javascript"> js脚本开始；

　 window.open 弹出新窗口的命令；

文件路径/文件名 弹出窗口的文件名；

　 newwindow 弹出窗口的名字（不是文件名），非必须，可用空代替；

　 width=400 窗口宽度；

　 height=300 窗口高度；

　 top=0 窗口距离屏幕上方的象素值；

　 left=0 窗口距离屏幕左侧的象素值；

　 toolbar=no 是否显示工具栏，yes为显示；

　 menubar，scrollbars 表示菜单栏和滚动栏。

　 resizable=no 是否允许改变窗口大小，yes为允许；

　 location=no 是否显示地址栏，yes为允许；

　 status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

　 </SCRIPT> js脚本结束

4。简单的页面加密

　 <script. LANGUAGE="javascript">

　 <!--

　 function loopy(){

var sWord ="";

while(sWord!="login"){sWord=prompt("请输入你的登陆密码");}

alert("登陆成功！");

　 }

　 loopy()

　 //-->

　 </script>

5。拉动页面时背景图不动

　 <style>

　 body{background-image:url(logo.gif);

　 background-repeat:no-repeat;background-position:center}

　 </style>

6。让浏览器在保存页面时保存失败

　 <NOSCRIPT><iframe. src="*.html"></iframe></NOSCRIPT>

7。随机替换图片

　 <script>

　 document.write(<img src="img/+parseInt(Math.random()*(5))

　 +.gif"height="40" width="50">

　 </script>

图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif

8。窗口定时关闭

先将如下代码网页文件的区：

　 <script. language="javascript">

　 function closeit() { setTimeout("self.close()",10000) //毫秒 }

　 </script>

然后再在<body>标内加入如：<body nload="closeit()">

9。网页自动关闭

　 <html>

　 <head>

　 <object id=closes type="application/x-oleobject"

　 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

　 <param name="Command" value="Close">

　 </object>

　 </head>

　 <body nload="window.setTimeout(closes.Click(),10000)">

这个窗口会在10秒过后自动关闭,而且不会出现提示.

　 </body>

　 </html>

10。网页自动刷新

在head部记入

　 <META. HTTP-EQUIV="Refresh" content="20">

其中20为20秒后自动刷新，你可以更改为任意值。

11。网页自动转页

　 <META. HTTP-EQUIV="Refresh" CONTENT="时间(秒);URL=地址">

12。保持layer在最前面，而不被Iframe、Object所覆盖

在Layer中再插Iframe. 或 Object 设z-Index值

　 <div z-Index:2><object xxx></object> ＃ 前面

　 <div z-Index:1><object xxx></object> ＃ 后面

　 <div id="Layer2" style="position:absolute; top:40;width:400px;

　 height:95px;z-index:2"> height=100% width=100%>

　 <iframe. width=0 height=0></iframe>

　 </div>

　 <div id="Layer1" style="position:absolute; top:50;width:200px;

　 height:115px;z-index:1">

　 <iframe. height=100% width=100%></iframe>

　 </div>

13。返回上一页

　 <a href=javascript:history.back(1)>『返回上一页』</a>

14。关闭窗口

　 <a href=javascript:self.close()>『关闭窗口』</a>

15。关于iframe的透明背景

　 <IFRAME. ID="iFrame1" SRC="iframe.htm"

　 allowTransparency="true"

　 style="background-color: green"></IFRAME>

16. ncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

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

17. <body nselectstart="return false"> 取消选取、防止复制

18.onpaste="return false" 不准粘贴

19.oncopy="return false;" ncut="return false;" 防止复制

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

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

22. <input style="ime-mode:disabled"> 关闭输入法

23. 永远都会带着框架

<script. language="JavaScript"><!--

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

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

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

// --></SCRIPT>

25. 网页将不能被另存为

<noscript><iframe. src=*.html></iframe></noscript>

26. 查看网页源代码

<input type=button value=查看网页源代码

onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

27.删除时确认

<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp? &areyou=删除&page=1"">删除</a>

28.屏蔽功能键Shift,Alt,Ctrl

<script>

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"); //可以换成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 网页不会被缓存

<META. HTTP-EQUIV="pragma" CONTENT="no-cache">

<META. HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

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

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

30.怎样让表单没有凹凸感？

<input type=text style="border:1 solid #000000">

或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

31.不要滚动条?

让竖条没有:

<body style="overflow:scroll;overflow-y:hidden">

</body>

让横条没有:

<body style="overflow:scroll;overflow-x:hidden">

</body>

两个都去掉？更简单了

<body scroll="no">

</body>

32.怎样去掉图片链接点击后，图片周围的虚线？

<a href="#" nFocus="this.blur()"><img src="logo.jpg" border=0></a>

33.电子邮件处理提交表单

<form. name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

<input type=submit>

</form>

34.在打开的子窗口刷新父窗口的代码里如何写？

window.opener.location.reload()

35.如何设定打开页面的大小

<body nload="top.resizeTo(300,200);">

打开页面的位置<body nload="top.moveBy(300,200);">

36.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

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

<script. language="Javascript"><!--

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

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 获得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判断是否是字符

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

else alert("全是字符");

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

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

</textarea>

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

<script. language=Javascript>

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(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>

42. 选择了哪一个Radio

<HTML><script. language="vbscript">

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

next

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style.

<INPUT name="radio1" type="radio" value="barcode">Barcode

<INPUT type="button" value="check" nclick="checkme()">

</BODY></HTML>

43.脚本永不出错

<SCRIPT. LANGUAGE="JavaScript">

<!-- Hide function killErrors(){return true;} window.onerror = killErrors; // -->

</SCRIPT>

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

<input nkeydown="if(event.keyCode==13)event.keyCode=9">

45. 检测某个网站的链接速度：

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

<script. language=Javascript>

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

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("<form. name=autof>")

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

document.write("<input type=text name=txt"+i+" size=10 value=测试中

……> =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=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++ }

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}

run()</script>

46. 各种样式的光标

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

47、禁止鼠标右键，把Demo的图片全都设为表格的背景，表格的大小与图片的大小一样。这样做看起来是一样的，主要是防止鼠标经过图片时会出现另存的按钮。禁止鼠标右键的代码很简单：<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵，不好意思，你甭想使用右键下载图片：）'); } } document.onmousedown=click</script>

1. 怎 样 定 义 网 页 语 言( 字 符 集)?

----在 制 作 网 页 过 程 中, 你 首 先 要 定 义 网 页 语 言, 以 便 访 问 者 浏 览 器 自 动 设 置 语 言, 而 我 们 用 所 见 即 所 得 的HTML 工 具 时, 都 没 有 注 意 到 这 个 问 题, 因 为 它 是 默 认 设 置。 要 设 置 的 语 言 可 以 在HTML 代 码 状 态 下 找 到:

$#@60; meta http －equiv="Content Type" content="text/html; charset=gb2312" $#@62;

----把charset=gb2312 改 换 成 其 它 语 言 代 码 即 可, 比 如 英 文:charset=en.

2. 怎 样 防 止 别 人 把 你 的 网 页 放 到 框 架 里?

----因 为 框 架（frame） 的 缘 故, 有 许 多 人 把 别 人 的 网 页 放 置 到 自 己 的 框 架 里, 使 之 成 为 自 己 的 一 页。 如 果你 要 防 止 别 人 这 样 做, 可 以 加 入 下 列JavaScript 代 码 即 可, 它 会 自 动 监 测, 然 后 跳 出 别 人 的 框 架。

$#@60; script language="javascript" $#@62;

？?if (self != top) { top.location = self.location; }

$#@60; /script $#@62;

3. 怎 样 设 置 字 体?

----在 制 作 网 页 过 程 中, 大 家 都 喜 欢 使 用 漂 亮 的 字 体。 但 是, 如 果 访 客 浏 览 器 没 有 安 装 同 样 的 字 体， 看 到你 的 网 页 会 是 很 普 通 的 字 体。 如 何 防 止 这 种 情 况 出 现 呢? 大 家 知 道 字 体 设 置 的 标 签 是Font, 而 它 有 个 属性 是Face, 该 属 性 是 定 义 字 体 的, 你 可 以 这 样 设 置:, 访 客 的 浏 览 器 就 会 按 照Face 定 义 的 字 体 顺 序 设 置 已 安装 的 字 体。 目 前 动 态 主 页 有 种 技 术, 可 以 把 字 体 信 息 用 向 量 格 式 存 储, 然 后 利 用 访 客 本 身 机 器 含 有 的 公共 信 息 库 把 字 体 快 速 的 组 装 起 来, 这 样, 就 不 用 担 心 访 客 是 否 安 装 有 某 种 字 体 了。

4. 怎 样 在 网 页 中 加 入 注 释?

----在 共 同 开 发 网 页 中, 加 入 注 释 是 防 止 分 工 被 搞 混 淆 或 者 注 释 某 段 代 码 特 殊 的 含 加 入 注 释 的 格 式 是:

$#@60; ! － － Microsoft FrontPage 3.0 － － $#@62;。

5. 怎 样 测 试 浏 览 器 并 自 动 装 入 所 需 要 的 网 页?

----目 前 微 软 和 网 景 的 浏 览 器 并 不 能 完 全 兼 容 所 有 网 页, 有 的 在 某 种 浏 览 器 里 非 常 漂 亮, 而 用 其 它 浏 览 器查 看 时 却 一 团 糟。 如 果 你 需 要 测 试 浏 览 器, 可 以 加 入 以 下JavaScript 代 码 并 保 存 单 独 一 个 网 页:

$#@60; script LANGUAGE="JavaScript" $#@62;

function TestBrowser(){

ie = ((navigator.appName ==

"Microsoft Internet Explorer") ＆ ＆

(parseInt(navigator.appVersion) $#@62;= 3 ))

ns = ((navigator.appName == "Netscape") ＆ ＆

(parseInt(navigator.appVersion) $#@62;= 3 ))

if (ns) {

setTimeout(location.href="nn4.htm",10);

} else {

setTimeout(location.href="ie4.htm",10);

}

}

$#@60; /script $#@62;

实 例 请 参 考:

http://www.netease.com/～tiantao/test.htm

6. 怎 样 让 链 接 没 有 下 划 线?

----只 要 在 加 入 以 下 代 码, 所 有 链 接 就 都 没 有 下 划 线 了:

$#@60; style type="text/css" $#@62;

$#@60; ! － －

A{text －transform: none;

text －decoration: none ;}

a:hover { text －decoration:underline }

－ － $#@62;

$#@60; /style $#@62;

7. 怎 样 在 网 页 中 加 入E-mail 链 接 并 显 示 预 定 的 主 题?

A HREF=mailto:lovett@163.net?subject=test

8. 怎 样 让 背 景 图 像 不 滚 动?

----Internet Explorer 浏 览 器 支 持 一 个Body 属 性Bgproperties, 它 可 以 让 背 景 不 滚 动。

$#@60; Body Background="c98.gif" Bgproperties="fixed" $#@62;

9. 怎 样 评 定 网 页 的 级 别?

----在IE4.0 浏 览 器 中, 有 一 项 功 能 是 过 滤 网 站 的, 一 些 受 限 制 的 网 站 被 过 滤 掉, 而 该 网 站 必 须 被RSAC( 美 国娱 乐 委 员 会) 评 定 了 级 别IE4.0 才 能 过 滤, 如 果 你 要 评 级 可 以 在 网 页 中 加 入 以 下 代 码:

$#@60; meta http －equiv="PICS －Label"????

content=(PICS －1.1 "http://www.rsac.org/ratingsv01.html"

？?l gen true comment "RSACi North America Server"

？?for "http://youHostname"

？?on "1998.11.26GMT08:15 ?0500"

？?r (n 0 s 0 v 0 l 0))$#@62;

10. 怎 样 定 义 本 网 页 的 关 键 字?

----在 网 页 中 加 入 关 键 字, 可 以 供 某 些 搜 索 站 台 机 器 人 的 使 用, 它 们 会 利 用 该 关 键 字 为 你 的 网 站 做 索 引, 这样, 当 别 人 用 关 键 字 搜 索 网 站 时, 如 果 你 的 网 页 包 含 该 关 键 字, 那 么 就 可 以 被 列 出 了, 定 义 本 网 页 关 键 字, 可 以 加 入 以 下 代 码:

----$#@60; meta name="Keywords" content="china,enterprise,business,net" $#@62;

----Content 所 包 含 的 就 是 关 键 字, 你 可 以 自 行 设 置。

----这 里 有 个 技 巧, 你 可 以 重 复 某 一 个 单 词, 这 样 可 以 提 高 自 己 网 站 的 排 行 位 置, 如:

----$#@60; meta name="Keywords" CONTENT="china,china,china,china" $#@62;

11. 怎 样 链 接 本 网 页 的 对 象?

----有 时 链 接 发 生 在 一 个 网 页 里, 比 如 页 面 上 半 部 分 列 出 了 目 录, 下 部 分 就 列 出 了 内 容, 而 单 击 目 录 任 何 一个 项 目 都 可 以 跳 到 指 定 部 分, 可 以 在 要 被 链 接 的 内 容 部 分 设 置 如 下 方 式:

$#@60; A NAME=" ＃t1" $#@62;$#@60; /A $#@62;

而 要 链 接 到 以 上 设 置 的 部 分, 可 以 如 下 编 制:

$#@60; A HREF="index.htm ＃t1" $#@62;t1$#@60; /A $#@62;

12. 怎 样 为 不 支 持 框 架 结 构 的 浏 览 器 指 定 内 容?

----为 了 防 止 不 支 持 框 架 结 构 的 浏 览 器 访 问 你 的 网 页, 可 以 在 你 的 网 页 中 加 入 以 下 内 容:

$#@60; body $#@62;

$#@60; noframes $#@62;

本 网 页 是 框 架 结 构, 请 下 载 新 的 浏 览 器 浏 览

$#@60; /noframes $#@62;

$#@60; /body $#@62;

13. 怎 样 删 除 表 格 边 框?

----有 时 需 要 删 除 表 格 的 边 框, 你 可 以 把Border 设 置 为 如 下 代 码:

$#@60; body $#@62;

$#@60; table border="0" width="100 ％" $#@62;

$#@60; tr $#@62;

$#@60; td width="100 ％" $#@62;$#@60; /td $#@62;

$#@60; /tr $#@62;

$#@60; /table $#@62;

$#@60; /body $#@62;

14. 怎 样 隐 藏 在 状 态 栏 里 出 现 的LINK 信 息?

----大 家 知 道, 当 你 指 向 一 个 链 接 时, 该 链 接 的 信 息 会 出 现 在 浏 览 器 状 态 栏 里, 如 果 需 要 隐 藏 信 息, 可 以 如 下设 置:

$#@60; a href="http://c98.yeah.net" onMouseOver="window.status=none ;

return true" $#@62;test$#@60; /a $#@62;

15. 怎 样 在 网 页 中 加 入 多 媒 体 文 件?

----有 些 多 媒 体 文 件 无 需 其 他 程 序 就 可 以 播 放, 而 有 许 多 多 媒 体 文 件 需 要 外 部 程 序 的 帮 助, 当 浏 览 器 下 载不 支 持 的 格 式 时 会 调 用 外 部 程 序。 如 果 浏 览 器 没 有 安 装 这 种 外 部 程 序, 那 么 浏 览 器 会 自 动 去 下 载； 如 果你 需 要 加 入 多 媒 体 格 式, 可 设 置 如 下 代 码:

$#@60; EMBED SRC="tt.ram" AUTOSTART="TRUE" LOOP="2" WIDTH="80" HEIGHT="30" $#@62;

----对 于 不 支 持EMBED 标 签 的 浏 览 器, 可 以 改 用 标 签。

16. 怎 样 在 网 页 中 加 入 电 子 邮 件 表 单 提 交?

----表 单 提 交 需 要CGI 程 序 的 支 持, 但 你 也 可 以 利 用E ？mail 提 交, 当 你 设 计 好 表 单 后, 把Action 内 容 加 入 邮 件地 址 即 可, 如 下:

form method="POST" action="mailto:lovett@163.net" ENCTYPE="text/plain"$#@62;

17. 怎 样 隐 藏 热 讯 分 析 的 图 标?

----热 讯 分 析 是 许 多 网 友 使 用 的 服 务, 它 能 帮 助 你 分 析 网 站 的 流 量, 如 果 你 想 隐 藏 该 服 务 图 标, 可 以 把 服 务代 码 中 的 width=88 height=31 都 改 为1 即 可。

18. 怎 样 在 网 页 中 加 入 最 后 修 改 日 期?

----在 中 加 入 以 下 代 码 即 可:

$#@60; Script Language="Java Script" $#@62;

document.write

(" 最 后 修 改 日 期" ＋document.lastModified);

$#@60; /Script $#@62;