HTML入门十大技巧

1。永远结束你的HTML标签

当您键入一个开放的 HTML标签（如<B>，<P>）结束时，始终把相应的关闭标签。例如：

• <B>我最喜欢的动物是马和大象。</ B>
• <P>我最喜欢的动物是马和大象。</ P>
• <H2>我最喜欢的动物是马和大象。</ h2>

这将确保你的HTML页面所有的浏览器上正常工作，将有助于防止发生任何奇怪的问题，在您的网页！这是特别重要的标签，如<DIV>，<SPAN>，<TABLE>，<TR>和<TD>。

有些标记没有相应的结束标签 - 只需要使用自己的这些标签。的例子包括：

• <BR>标签，创建换行符
• <IMG>标签，插入图片

使用XHTML标记，你甚至要关闭标签，如BR和IMG。为此，您可以在短手的方式，将“/”前的右尖括号（“>” ）-例如，<BR/>和<IMG ... /> 。了解更多关于XHTML，HTML教程。

2。尽可能使用样式表的样式HTML

样式表会使你的HTML编码的生活变得更轻松。没有更多的<FONT>标签无处不在！您还可以得到更好地控制您的网页的外观，仅仅通过编辑一个样式表文件，你可以改变自己的外表。

如果您还没有使用样式表，流行到我们的CSS教程起来啦！

3。使用一个HTML验证器

运行您的网页的HTML验证器发布之前，他们在您的网站，这是一个伟大的想法。这些项目将潜在的问题，如缺少结束标记表，并使用标签，将所有的浏览器无法正常工作。不要忘了 - 只是因为你的页面您正在查看这并不意味着它会在其他浏览器在浏览器中看起来很棒！

HTML验证器是一个很好的方式，以了解正确的方法来使用HTML标签 - 你可以从错误中学习！

在网络上有一些很好的免费验证器包括W3C标记验证服务和WDG HTML验证。许多现代的网页制作软件包内置HTML跳棋。

4。明智地使用HTML注释

为了让你更清楚你的HTML代码（和其他人），你可以添加注释你的代码。这是通过Web浏览器的代码段将被忽略，所以他们是有用的，在代码中加入简短的说明和提醒：

<！ - 导航区：突出显示的菜单项的“喜”类 - ><div id="nav">  <UL>    <LI> <a href="/">首页</ A> </ P>    <li class="hi"> href="/about/">关于</ a> </ li>  </ ul></ DIV>

了解如何在我们的HTML注释教程编写和使用的意见。

5。在HTML中嵌入图像

指向正确的图像使用<IMG>标签是一种常见的绊脚石，适合初学者。您的网页通常会很好看桌面上的PC，但是，当您上传到您的网站的页面，所有的图像都坏了！

问题是没有帮助的一些网页编辑器，其中不正确的地方“文件:/ /”的形象，而不是使用相对URL的URL！

按照这些简单的规则，以确保您的HTML图像显示每次都正确。

A）如果可能的话，使用相对URL

相对URL通常是最好用的，因为他们工作的地方的页面和图片的位置，他们总是在同一个地方，彼此相对。例如，如果图像是在同一文件夹中的Web网页，使用方法：

<img src="myphoto.jpg">

如果图像是在同一级别的Web网页中的图像文件夹，使用方法：

<img src="images/myphoto.jpg">

如果图像是在一个图像文件夹中的Web页以上的水平，使用方法：

<img src="../images/myphoto.jpg">

B）另外，使用相对于文档根目录的URL

如果你把所有的图像在一个图像文件夹在您的网站的顶层（文档根目录或Web根目录），你可以参考这样的图像：

<img src="/images/myphoto.jpg">

这样做的好处是您可以将您的网站内的任何地方，您的网页和图像将仍然显示，只要你保持这一全球性的图像文件夹中的图像。

这种方法的缺点是，它只能工作在您的Web页面被显示通过一个Web服务器（使用包含http://），而不是直接观察时从您的硬盘驱动器（使用文件:/ /）。

C）不使用绝对路径！

如果可能的话，在您的网站，避免使用绝对URL。一个绝对URL 包含http://或文件:/ /开头的URL 。特别是，如果您的硬盘驱动器上的Web页面包含一个图像URL这样的：

<img src="file:///C:|/mywebsite/images/myphoto.jpg">

它不工作时，你把它上传到您的Web服务器，IMG标签中直接引用您的硬盘驱动器上的文件！更改链接的相对链接，如：

<img src="myphoto.jpg">

或可能有如下几个原因：

<img src="../images/myphoto.jpg">

上述规则。

在Web页面中，您可以找到更多的图像信息，通过阅读我们的HTML教程！

6。使用HTML图像的宽度和高度

这是一个好主意，指定宽度和高度的图像时使用的<img>标签。例如：

<img src="myphoto.jpg" width="234" height="123">

这样做的好处是，Web浏览器可以更迅速地加载，因为它是格式化的页面，因为它知道如何订出的图像之前，他们已经被下载。这意味着，您的访问者可以浏览您的网页，而不必等待所有的图像显示！

大多数图形包（Photoshop，Paint Shop Pro的，等等）使您可以查看图像的宽度和高度（以像素为单位），你可以槽的值到<IMG>标签。您还可以右键点击图片并选择“ 属性“（在Internet Explorer）或在一个窗口中查看图像，对自己和阅读的标题栏的宽度和高度（在大多数其他浏览器）。

7。非换行空格的HTML

有时你想保持一定的字眼联系在一起，使他们分散在两行。的方式做，这是一个不破的空间。在HTML标记的非打破空间看起来像这样：

例如，下面的话会换行，如果它们出现在年底行：

<P>敏捷的棕色狐狸</ p>

尽管这个例子，它采用了非打破空间，将保持“棕色”和“狐狸”在一起，即使他们的行结束：

<P>敏捷的棕色狐狸</ p>

8。使用表格的表格数据，CSS布局

表传统奠定了网页上的内容，但是这是从来没有达到预定可使用。他们真正的意思是用于显示表格数据（如数据从电子表格，例如）。

CSS的定位功能，您可以建立只包含页面内容的HTML页面，并使用一个单独的样式表来打下的内容。虽然它有一个陡峭的学习曲线比基于表的布局，CSS定位是非常值得学习，您的网站将更快的加载，更易于维护和更易于访问的。

 

CSS定位也做了很多很酷的技巧是很辛苦的表，只需要通过改变样式表，你也可以改变你的网站的整体外观。

如果你是新的CSS，看看我们的CSS文章。

9。创建空的表格单元格

有时你没有在他们将要创建的表格单元格（<TD>），例如，当一个特定的行没有任何数据，它的一列。通常情况下，最好的办法是与非打破空间创建一个空的表格单元格，如下所示：

<TD> </ TD>

不要只使用<TD> </ TD> ，因为这会导致你的表，觉得很奇怪，在某些浏览器！

10。间隔GIF招

非常精确的控制页面布局，如果你现在还没有挂起的CSS定位，你不能击败老间隔GIF伎俩。这涉及到使用一个1像素x 1像素的透明GIF，这将是不可见的，在您的网页，并使用宽度和高度属性来控制页面元素，如图片，文字和表格单元格之间的精确的填充。例如，代码如下：

<img src="one.gif" width="20" height="20" BORDER="0"><img src="space.gif" width="10" height="1" BORDER="0"><img src="two.gif" width="20" height="20" BORDER="0">

将创建一个10像素的水平之间两个图像，one.gif和two.gif的差距。

您可以使用表格单元格中的占位GIF“垫”的表格单元格的确保不缩水低于一定的宽度或高度。在此代码示例：

<TD> <img src="space.gif" WIDTH="1" height="20" </ TD>

表格单元格将始终至少有20个像素高。

这很容易使间隔GIF图形软件包-创建一个新的1像素×1像素的图像，然后将其保存为GIF透明背景。另外，您在这里可以下载一个（压缩了，方便下载）。

当然，这些天，你真的应该使用CSS定位来布置您的内容。:)

希望你喜欢这些的HTML技巧和发现它们非常有用。祝你好运与您的网站！

本文翻自http://www.heatpress123.net