点击这里给我发消息 点击这里给我发消息
首页 > 行业资讯 > HTML>详细内容

HTML初学者应该看下

添加时间:2013-12-6
    相关阅读: 网页 设计 软件 技术 页面 网络 HTML

HTML(HyperTextMark-upLanguage)中文是超文本链接标示语言。是网络的通用语言,一种简单、通用的全置标记语言。它允许人建立文本 与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到 的就是这种语言写的页面。
而对于我们攻略组来说HTML代码有什么作用呢?它可以让我们容易地做出一篇图文并茂的攻略,不仅如此它还能实现各种特效、制作表格等丰富的功能,比起论坛自带的编辑功能强大的多。所以作为攻略组成员都应该掌握好基本的HTML代码应用。本篇教程只是针对新手来说,另外推荐大家用OFFICE软件的FRONTPAGE(下文简称FP)本软件对初学者来说简单易学。

第一讲 字体设置
在讲之前先简单了解一下FP,在FP中有两种方法可以编辑网页,第一种是在代码模式编写HTML代码,这种方式需要对HTML语言有很深入的了解(其实 会HTML代码不需要什么软件直接用记事本来写就行);第二种就是直接设计用软件内置的工具来做,这种比较简单适合初学者而且也不用认识HTML代码。好了废话就到这为止,下面来说一下字体的设置。


在HTML代码里,字体的定义比较容易,只需用 <font>标签即可定义字体、字号、字体颜色等。<font> 标签原则上要求成对出现,即在被修饰
的字体前使用<font>引导,在被修饰的文字后用</font>结尾。下面给出例子和效果及相关说明

语法为:<font color="#FF0000"><b>巴士速攻</b></font>
效果:巴士速攻

 

其他一些常用代码

引用:
粗体:<b>文字</b> (例:文字

加重:<strong>文字</strong> (例:文字

上标:<sup>文字</sup> (例: 文字

下标:<sub>文字</sub> (例: 文字

斜体:<i>文字</i> (例:文 字

下划线:<u>文字</u> (例: 文字

 

 

在FP中我们不用记住语法也可以简便地对文字进行编辑,方法为用鼠标选中要改变的字体或者句子,点击右键就会有“字体”选项,在那里我们可以快速进行文字设置

 

第二讲 对齐,排版
要想写好一篇好的攻略,首要条件是把排版问题搞好。试想一下你的攻略排版非常混乱就算是再好的攻略也没人看。在FP设置模版上面的工具栏上有基本的文段格式按钮,一些常用的功能比如:居中、对齐、缩进、编号都可以直接使用。这里我说一下一些比较实用代码:

 

格式预设:<pre>内容</pre>

你是否试过在自己电脑上把文字排列得很整齐但是发到论坛上又变样了呢?上面的那个代码是非常有用的,它可以使得最终显示效果以原始格式实现。请看以下代码和效果:

引用:

 

代码:

<pre>
 1234
-1234
--------
    0
</pre>


效果:

 1234
-1234
--------
    0

 

没用代码效果:

1234
-1234
--------
    0

 

 

在论坛里,有时我们需要精确地对齐某些文字或是数字,pre标签能够帮上大忙了,它能令效果比在“设计”模式下用空格符移动显示符号更准确。

 

隐藏表格

用表格来实现网页布局一直被大量使用。在论坛里发帖,有些需 要居中的地方,我们不妨用用表格,它的使用效果比用居中好得多。试看以下例子:

春天的第一只蝴蝶
身披橙色和紫色
从我的路上飞过
一朵飞行的花
改变了
我生活的颜色

上面中我用的是表格,把表格的边框大小改为0的效果,至于表格下面再详细说明。

 

第三讲  超级链接、贴图

超级连接可以说是论坛上使用频率比较多的功能了,一般在论坛上,我们在编辑模式下输入或者复制一个网址,论坛系统自动令其成为超级链接模式,即发布后,一点击这个地址浏览器会打开该地址。这是因为,论坛系统在后台给出了超级链接标签。但是在在HTML编辑模式下,我们得自己添加级链接,否则输入的链接是点不了的。

具体方法:是选中点亮想要进行超级连接的文字、网址或是别的数据,点击右键的“超链接”再输入想要连接的网址就行了又或者点击工具栏的“插入”也可以找到“超链接”选项。
图片位置

 

例子:http://bbs.tgbus.com/index.php     语法:<a href=网址 target=数值>文字或图像或网址</a>

书签当网页内容太长或要导航到其它页面的一个具体位置时,就可以使用Html中书签功能了。一般在做攻略时加入目录较长使用“书签”功能就很方便了。先看一下例子:

 

我是书签我怕谁

 

具体的做法就是,先选择一个文字或是数字等作为“书签”,方法是选中点亮要作为书签的文字,然后在工具栏中的“插入”选择“书签”确定就行,书签的名字可以自己随意改写。接着就要就行书签连接了,其实方法和超级连接差不多,选定点亮要进行连接的文字。右键选择“超链接”→“本文档的位置”→选择要连接的书签就可以了,是不是很简单呢?比如上例中我是把下面的表格最后面的“句号”加上书签,然后把上面那句“我是书签我怕谁”用超连接连上本地的书签就可以了。

 

贴图也是在论坛上常用的技巧,在FP中我们只要选中工具栏中的“插入文件中的图片”就可以贴图了。这里需要注意的是加入的必须是网上图片的地址,如果是自己硬盘中的图片发到论坛上就是大叉了。

 

 

引用:

 

贴图的HTML的基本语法是:<img src=图片地址 border=数值 align=对齐方式>

src:图片地址。在论坛里,强烈建议使用图片的完整地址也就是绝对地址,若是上传到论坛的图片,可以使用相对地址,一般从upload一节开始。

border:图片的边框。取值范围为正整数,边框颜色不可改变(黑色)。多数论坛里的图片都会链接到自身,当用户点击过它,它的边框颜色通常就是默认的蓝色,故为美观起见,建议设置为0。

align:图片与文字的位置关系。

 

另外贴图可以添加各种特效,这里我只讲一下添加图片的边框问题。请先看下面的例子

加上边框后是不是另有一番味道呢?好了说一下怎么做,首先选中贴的图点击右键选择“图片属性”,再选择“样式”→选择“格式”

→选择“边框”。在这里就可以随自己的喜好改变边框。

 

第四讲 表格应用

表格是在论坛做帖的重要武器,表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在论坛做帖也起到不可估量的作用,帖子的页面布局将因使用了表格而可以随心所欲地排版。

在FP里制作表格非常简单,在工具栏中选择“表格”→“插入”→“表格”就行。

例:

 

 

表格的HTML代码如下

 

引用:
<table>
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
</table>

说明:

<table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。

<tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

<tr>:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

<td>:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

</td>、</tr>、</tbody>、</table>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。


制作好表格后是不是觉得很单调呢?好了下面说一下表格的属性设置,把表格变得更加美观。

 

在FP的“设计”编辑模式下的表格属性设置,在“设计”模式下,通过点击鼠标,可以方便地设置表格的属性,只是,它没有通过代码设置来得灵活。

 

先来看看例子:

本表格的属性设置:
边框大小:border=1
边框颜色:bordercolor=#CCFFFF
背景色:bgcolor=#cc9968
表格宽度:width=400
单元格间距:cellspcing=16
单元格衬距:cellpadding=8
表格的对齐方式(居中):align=center

其他属性都未设置。

代码为
引用:
<table borderColor="#ff0000" cellSpacing="10" cellPadding="8" width="400" bgColor="#CCFFFF" border="1">
  <tr>
   <td>
   <p class="main">本表格的属性设置:<br>
   边框大小:border=1<br>
   边框颜色:bordercolor=#CCFFFF<br>
   背景色:bgcolor=#cc9968<br>
   表格宽度:width=400<br>
   单元格间距:cellspcing=16<br>
   单元格衬距:cellpadding=8<br>
   表格的对齐方式(居中):align=center<br>
   <br>
   其他属性都未设置。</td>
  </tr>
 </table>
好了,下面详细说明一下各个代码的作用
border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
 
cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
 
cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。
 
width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
 
height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。
 
bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。
 
background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。
 
bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。
 
bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。
 
bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。
 
align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码!此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性

 

表格嵌套

嵌套即是在一个表格内插入另一个表格,论坛所有精美的帖子,几乎无一例外地都用到表格的嵌套技术,论坛中给用户提供施展身手的余地十分有限,只有通过表格的修饰,帖子才能既成为独立的显示单位。表格的可分割性和容器特征在帖子制作中充当着重要的角色,兼管帖子的布局的同时还承载着表达帖子信息元素的重任。

    作为容器,表格可以往里放置可以放置的元素。表格也是一个元素,故而表格放在表格里是合理的,因此就有了表格的嵌套。表格的嵌套还可以是另外的形式,那就是,一个表格的单元格里还有表格。先看下面的例子:

表1

表2

代码如下

引用:

<table cellpadding="0" cellspacing="0" width="254" height="134" border="1">
<!-- MSTableType="nolayout" -->
<tr>
<td height="134">
<p align="left">表1</p>
<table cellpadding="0" cellspacing="0" width="253" border="1">
<!-- MSTableType="nolayout" -->
<tr>
<td height="34">表2</td>
</tr>
</table>
</td>
</tr>
</table>

 

 

 

 

结语

罗罗嗦嗦写了一堆东西,希望能给大家一些帮助。在论坛做HTML帖子是一项颇具挑战性的创作活动。本教程只是对HTML语法作了简单的介绍,想要做出出色的帖子还需各位自己探索,本教程只是说明了一些最基本的方法,其实HTML语言还有更多的趣味性让我们发掘,只要大家掌握基本的方法,就可以自己探索出更好的技巧。最后提醒一句:知识是靠慢慢积累的,不要企图一蹴而就

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册