网页制作教程第一期——熟悉HTML[RainoXu编著]

rainoxu

<link rel="stylesheet" href="http://www.ynutx.net/raindesign/raino_teach/style.css" type="text/css">

<div id="rainocontent">


<h1>&nbsp;1、基本知识入门</h1>

<p>&nbsp;&nbsp;&nbsp;&nbsp;先来简要地谈谈HTML的知识，HTML就是Hyper Text Marked Language的简写，既我们熟知的超文本标记语言，对于这些我们不去深究，因为这不是我写教程想讲的东西，那些大家自己可以上网去查，资料一搜就是一打。
</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;HTML的主要就是用标签将内容“框”起来，说地直白些就是排版。运行特定功能的标签，可以给内容赋予特定的属性（比如颜色，大小，位置）。例如：</p>

<div>&lt;b&gt;这段文字将被加粗&lt;/b&gt;<br>
    &lt;u&gt;这段文字将被加下划线&lt;/u&gt;<br>
    &lt;i&gt;这段文字将被斜体放置&lt;/i&gt; </div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的效果预效：</p>

<div><b>这段文字将被加粗</b><br>
<u>这段文字将被加下划线</u><br>
  <i>这段文字将被斜体放置</i> </div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;可以看HTML通常中的标签大多数是成对出现的，起始于开始标记，终止于结束标记，其格式如下：<br>
  <span class="highred">&lt;Start Tag&gt;</span>这里放置你需要的内容<span class="highred">&lt;/End
  Tag&gt;</span><br>
  就像上面的格式那样，一对尖括号将标签括在一起，中间部分是网页中要显示的内容。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; 不过需要提一下的是，也有不成对出现的标签，例如&lt;br&gt;（插入一个换行）、&lt;hr&gt;（插入一条水平线），这些标签是单独出现的，例如下面一段代码：</p>
  <div>&lt;b&gt;加粗文字&lt;/b&gt;<br>
    &lt;br&gt;<br>
  &lt;hr&gt;<br>
  &lt;br&gt; <br>
    &lt;b&gt;上面的文字换了一行，同时又插入了一条水平线&lt;/b&gt; </div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的效果预效：</p>
<div><b>这段文字将被加粗</b><br>
  <hr>
  <i>上面的文字换了一行，同时又插入了一条水平线 </i></div>
  
<p>&nbsp; </p>
<h1>2、下面来介绍几个比较常用的标签 </h1>  
<p><span class="highred">&lt;p&gt;标签</span>
<p>&nbsp;&nbsp;&nbsp;&nbsp;p标签就是用来定义段落的，一对&lt;p&gt;内容&lt;/p&gt;就定义了一个段落：<br>
  <br>
<div>
    <p>&lt;p&gt;<br>
      这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落<br>
      &lt;/p&gt; </p>
    <p>&lt;p&gt;<br>
      这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落<br>
      &lt;/p&gt; </p>
  </div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的预览： </p>
<div>
<p>这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落这里是第一个段落
</p>

<p>
这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落这里是第二个段落
</p>
</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;可以看出，&lt;p&gt;标签划分段落后，会在最后加上两个换行，我想这里大家也明白了&lt;p&gt;和&lt;br&gt;的区别了吧，在排版中，我们更提倡使用&lt;p&gt;，至于原因，这种写法更符合W3C的标准，因为&lt;p&gt;标签具有明确的意义。这在以后给大家讲到关于网站标准化的内容时将做详细介绍。</p>
<p><span class="highred">&lt;hr&gt;标签</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;hr&gt;就是插入一条水平线，在上面的例子大家已经看到了效果，不过似乎它还不满足我们的要求，相把它变得更细一些或者更粗一些？想改变颜色？这些我们交给CSS去做，CSS也是今后要讲的内容，不过这里先提一下，大家可以不用完全了解，只要看到效果就行。我们通常不用&lt;hr&gt;，而是用其他元素去模拟&lt;hr&gt;的效果，这里我们就用一个div标签吧。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;用CSS对它进行样式控制的代码：</p>
<p>
  <div>&lt;style&gt;<br>
  .div_line{<br>
  border-top:1px solid #FA2FA9;<br>
  width:300px;<br>
  height:1px;<br>
  overflow:hidden; <br>
    } <br>
    &lt;/style&gt;<br>
  &lt;div class=&quot;div_line&quot;&gt;&lt;/div&gt;</div>
   
<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的预览：</p>
<div>       
        <div style="border-top:1px solid #FA2FA9;border-bottom:0px;border-left:0px;border-right:0px;width:300px;height:1px;overflow:hidden;"></div>
</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;看到效果了吧，稍作解释，&lt;style&gt;&lt;/style&gt;是用来定义CSS的标签，“.div_line”（注意前面的那个点，这个不能漏掉！）是一个CSS的类名，花括号中间的是样式的代码。这里可能大家听得不明白，这没关系，等以后讲到CSS时我们再深入讨论这个问题，大家只要知道任何一种效果，实现手段不是只有一种，我们可以通别的途径去模拟它。</p>
<p><span class="highred">&lt;b&gt;标签、&lt;u&gt;标签、&lt;i&gt;标签</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上面的例子中已经讲到了，&lt;b&gt;是加粗文字，&lt;u&gt;是给文字加上下划线，&lt;i&gt;是让文字斜体显示。</p>
<p><span class="highred">&lt;font&gt;标签</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;这个标签是用来设置文字的属性的，比如颜色，大小等，给出几个例子供大家参考：</p>
<p>
  <div>&lt;font color=&quot;#FF0033&quot;&gt;这段文字是红色&lt;/font&gt;<br>
    &lt;font size=&quot;2&quot;&gt;这段文字将以Size=5的大小显示&lt;/font&gt;</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的预览：</p>
<div>
<span style="color:red">这段文字是红色</span><br>
<span style="font:18px "宋体"">这段文字将以Size=2的大小显示</span>
</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;现在已经不提倡使用&lt;font&gt;标签了，因为它不符合W3C的标准。更多的，我们使用CSS直接定义文字的效果。</p>
<p><span class="highred">&lt;img&gt;标签</span></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&gt;标签用于向网页中插入图片，<span class="highred">它不是一个成对出现的标签</span>，我们可以用它的src属性指定图片的URL，用它的width和height属性控制图片的大小。width和height如果只是指定一个值，另一个缺省，则图片会按给出的参数进行等比变换，如果不给出这两个参数，浏览器将会自动使用它的原始大小，如果同时给同这两个参数，则按这两个参数做变换（不推荐这样做，除非你特别地去限定图片的显示宽和高，否则很容易使图片显示比例失真），下面给出例子：</p>
<div>&lt;img src=&quot;http://www.ynutx.net/bbslogo.gif&quot;&gt; 原始的图<br>
  &lt;br&gt;&lt;br&gt;<br>
  &lt;img src=&quot;http://www.ynutx.net/bbslogo.gif&quot; height=&quot;100&quot;&gt;
  指定高为100像素，图片被等比放大<br>
  &lt;br&gt;&lt;br&gt;<br>
  &lt;img src=&quot;http://www.ynutx.net/bbslogo.gif&quot; width=&quot;100&quot;&gt;
  指定宽为100像素，图片被等比放大<br>
  &lt;br&gt;&lt;br&gt;<br>
  &lt;img src=&quot;http://www.ynutx.net/bbslogo.gif&quot; width=&quot;100&quot;
  height=&quot;100&quot;&gt; 指定高为100像素，指定宽为100像素，图片比例失真了<br>
  &lt;br&gt;&lt;br&gt;<br>
  &lt;img src=&quot;http://www.ynutx.net/bbslogo.gif&quot; border=&quot;1&quot;&gt;
  用border属性给图片加上了边框</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的预览：</p>
<div><img src="http://www.ynutx.net/bbslogo.gif"> 原始的图<br><br>
  <img src="http://www.ynutx.net/bbslogo.gif" height="100"> 指定高为100像素，图片被等比放大<br><br>
  <img src="http://www.ynutx.net/bbslogo.gif" width="100"> 指定宽为100像素，图片被等比放大<br><br>
  <img src="http://www.ynutx.net/bbslogo.gif" width="100" height="100"> 指定高为100像素，指定宽为100像素，图片比例失真了<br><br>
  <img src="http://www.ynutx.net/bbslogo.gif" border="1"> 用border属性给图片加上了边框</div>
<p><span class="highred">&lt;a&gt;标签</span></p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&gt;标签用来向网页中插入超级链接，用它的href属性指定跳转的URL，用它的target属性指定跳转的链接在怎样的窗体中打开</p>

  
<div>&lt;a href=&quot;http://bbs.ynutx.net&quot; target=&quot;_blank&quot;&gt;新窗口打开bbs.ynutx.net首页&lt;/a&gt;</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;上面代码的预览效果：</p>

  
<div><a href="http://bbs.ynutx.net" target="_blank">新窗口打开bbs.ynutx.net首页</a></div>
<p>&nbsp;</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;熬着夜，第一次写教程，这一部分内容就先介绍这些，肯定会有不足，大家可以打开DreamWeaver，试着输入上面的代码来尝试一下，如果有什么不懂与疑惑，可以回帖来发问，我会给你提供解答的，这是你迈向Html学习的第一步。</p>
<p>RainoXu &amp; <a href="http://raino.ynutx.net" target="_blank">http://raino.ynutx.net</a>版权所有，如需要转载，请附上此版权信息！</p>
</div>

鱼泡泡

:9: :9: :15: :15:

nobel

不错,顶一下,虚线边框是如何弄出来的

rainoxu

原帖由 nobel 于 2007-1-25 20:25 发表
不错,顶一下,虚线边框是如何弄出来的

<div style="border:1px dotted #333333;background:#EEEEEE;height:100px;witdh:100px;"></div>

其中的“border:1px dotted #333333;”是用来设置边框的，这是CSS的内容了~~

hujintao013

不错。。。很好，很强大