你的位置:HBcms宏博内容管理系统 建站经验 正文
内容搜索
热门内容
  1. 网站logo在线设计,免..
  2. 域名解析文件hosts文件..
  3. 教你如何做网线接头:..
  4. qq怎么截图?如何在qq..
  5. 雅虎yahoo邮箱smtp和p..
  6. 新注册126邮箱或163邮..
  7. 幻灯片式的网页图片滚..
  8. 做网站怎么赚钱?什么..
  9. com域名和cn域名net域..
  10. Google支付系统(Googl..
推荐内容
  1. 做一个商业网站要多少..
  2. 国外服务器租用(国外..
  3. 深圳做网站的公司!=深..
  4. 网络原创投稿,转载精..
  5. 美国服务器租赁Window..
  6. 699元的美国服务器出租..
  7. 添加友情链接,速度别..
  8. “原始人”卷款潜逃事..
  9. 设置Godaddy支持zend ..
  10. 网页设计中常用的CSS命..
学习html代码最基础
  • 原作者:傲视 添加时间:2007-11-27 发表时间:2007-11-27 人气:513
  • html基础

    当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来。
      HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。

      HTML文件基本架构  

    <HTML> 文件开始
    <HEAD> 标头区开始
    <TITLE>...</TITLE> 标题区
    </HEAD> 标头区结束

    <BODY> 本文区开始
    本文区内容
    </BODY> 本文区结束

    </HTML> 文件结束


    <HTML> 网页文件格式。
    <HEAD> 标头区 : 记录文件基本资料,如作者、编写时间。
    <TITLE> 标题区 : 文件标题须使用在标头区内,可以在浏览器最上面看到标题。
    <BODY> 本文区 : 文件资料,即在浏览器上看到的网站内容。

      注意事项

      通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。

      习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站,浏览器便会自动的找出 index.htm 文件。

    字体

     我们在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用可以增加页面的美观!

      常用字体标记

    <Hn>...</Hn> 标题,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。
    如 : <H2> 标题 </H2>

    标题
    如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 )
    标题
    <B>...</B> 粗体字。
    如 : <B> 粗体字 </B>

    粗体字


    <I>...</I> 斜体字。
    如 : <I> 斜体字 </I>
    斜体字


    <U>...</U> 加底线。
    如 : <U> 加底线 </U>
    加底线


    <DEL>...</DEL> 横线 ( 表示删除 )。
    如 : <DEL> 横线 </DEL>
    横线


    <TT>...</TT> 打字体 ( 固定宽度文字 )。
    如 : <TT> 打字体 </TT>
    打字体


    <SUP>...</SUP> 上标字。
    如 : 字体 <SUP> 上标字 </SUP>
    字体上标字


    <SUB>...</SUB> 下标字。
    如 : 字体 <SUB> 下标字 </SUB>
    字体下标字


    <!...> 注解 ( 不会显示在浏览器上 ),可以多行。

    如 : <! 更新日期 : 2000/1/1>



      设定字体大小、颜色、字型

      有关设定文字的方法共有以下几种 :

      1.设定HTML文件主体文字颜色。<BODY>...</BODY>标记。


       如 : <BODY TEXT=RED>...</BODY> 或
         <BODY TEXT=#FF0000>...</BODY>

      2.设定基本字体大小、颜色、字型。<BASEFONT>...</BASEFONT>标记。

      3.设定字体大小、颜色、字型。<FONT>...</FONT>标记。

    <BASEFONT>...</BASEFONT> 设定基本字体,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。
    如 : <BASEFONT SIZE=4> 基本字体大小为 4 </BASEFONT>
    基本字体大小为 4

    如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT>
    设定颜色

    如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
    设定字型


    <BIG>...</BIG> 基本字体加大。
    如 : <BASEFONT SIZE=4> 基本字体大小为 4,</BASEFONT>
    <BIG> 加大为 5 </BIG>
    基本字体大小为 4,加大为 5


    <SMALL>...</SMALL> 基本字体减小。
    如 : <BASEFONT SIZE=4> 基本字体大小为 4,</BASEFONT>
    <SMALL> 减小为 3 </SMALL>
    基本字体大小为 4,减小为 3


    <FONT>...</FONT> 设定字体大小、颜色、字型,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。
    如 : <FONT SIZE=4> 字体大小为 4 </FONT>
    字体大小为 4

    如 : <BASEFONT SIZE=4> 基本字体大小为 4
    <FONT SIZE=+1> +1字体大小为 5 </FONT>
    <FONT SIZE=-2> -2字体大小为 2 </FONT>...</BASEFONT>
      基本字体大小为 4
      +1字体大小为 5
       -2字体大小为 2


    如 : <FONT COLOR =#FF0000> 设定颜色 </FONT>
    设定颜色

    如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT>
    设定字型



      注意事项

      1. 设定字体的大小分 : 绝对SIZE 如 : <FONT SIZE=4>
    和 相对SIZE 如 : <FONT SIZE=+1> ( 以 BASEFONT 设定的字体大小做加减 )。

      2. 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度 ( 00 暗 ~ FF 亮 )。 #RRGGBB 所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示 ( 即十进制 0 ~ 255 )。
    十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。

      3. 设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示。

    表格

     表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。

      常用表格标记

    <TABLE>…</TABLE> 表格指令。
    相关属性 :
    ·ALIGN 调整
    ·BGCOLOR 背景颜色
    ·BORDER 边框
    ·HEIGHT 高度
    ·WIDTH 宽度


    <CAPTION>…</CAPTION> 表格标题。
    相关属性 :
    ·ALIGN 调整


    <TR>…</TR> 表格列 ( </TR>可省略 ) 。
    相关属性 :
    ·ALIGN 调整


    <TH>…</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。
    相关属性 :
    ·ALIGN 调整
    ·COLSPAN 栏宽
    ·ROWSPAN 栏高


    <TD>…</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。
    相关属性 :
    ·ALIGN 调整
    ·BGCOLOR 背景颜色
    ·HEIGHT 高度
    ·WIDTH 宽度
    ·COLSPAN 栏宽
    ·ROWSPAN 栏高


      举例

    如 : ( 基础型 )
    <TABLE BORDER=1 ALIGN=CENTER>
    <TR><TD>华夏黑客联盟<TD>华夏黑客联盟
    <TR><TD>华夏黑客联盟<TD>华夏黑客联盟
    </TABLE>
    华夏黑客联盟 华夏黑客联盟
    华夏黑客联盟 华夏黑客联盟


    如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
    <TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF>
    <CAPTION>表格标题</CAPTION>
    <TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2
    <TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A
    <TR><TD>B <TD>B <TD>B <TD>B
    <TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C
    <TR><TD>D <TD>D <TD>D <TD>D
    </TABLE>

    标示

    HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!

      常用标示标记

    <LI> 标示项目。
    如 :
    <OL>
    <LI>第一项
    <LI>第二项
    </OL>


    第一项
    第二项

    <OL>...</OL> 编号标示,可标示数字或英文、罗马字母。
    如 :
    <OL TYPE=I>
    <LI>第一项
    <LI>第二项
    </OL>


    第一项
    第二项

    <UL>...</UL> 符号标示,可标示数字或英文、罗马字母。
    如 :
    <UL>
    <LI>第一项
    <LI>第二项
    </UL>


    第一项
    第二项

    <DT> 定义项目。

    <DD> 定义资料。

    <DL>...</DL> 定义标示。
    如 :
    <DL>
    <DT>十进制 :<DD>0、1、2、3、4、5、6、7、8、9
    <DT>十六进制 :<DD>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
    </DL>


    十进制 :
    0、1、2、3、4、5、6、7、8、9
    十六进制 :
    0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F

      巢状式标示

    如 :

    <OL>
    <LI>第一章
        <OL TYPE=i>
        <LI>第一节
              <UL>
              <LI>第一段
              <LI>第二段
              </UL>
        <LI>第二节
        </OL>
    <LI>第二章
    <LI>第三章
    </OL>
    第一章
    第一节
    第一段
    第二段
    第二节
    第二章
    第三章
      其他标示标记

    <DIR>...</DIR> 目录式标示 ( 自动加圆点 )。
    如 :
    网络学院 :
    <DIR>
    <LI>新手上路
    <LI>软件教室
    <LI>设计教室
    <LI>开发教室
    </DIR>

    网络学院 :


    新手上路
    软件教室
    设计教室
    开发教室

      注意事项

      标示项目符号也可以用<FONT>...</FONT> 标记,以符号字元 ( ○、◆、◎、★、■...等 ) 标示。

      如 :<FONT COLOR =#FF0000> ● </FONT>

      特殊符号 :

      在HTML文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。


    符号 替代指令
    " " 或 "
    & & 或 &
    < < 或 <
    > > 或 >
    不可分空格 

    区段标记

     一个网站不仅要内容丰富外,也要有美观简洁的版面。HTML所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。

      常用区段标记

    <HR> 产生水平线。
    如 : <HR ALING=CERTEN WIDTH=90%>



    --------------------------------------------------------------------------------


    <BR> 跳下一行。
    如 : 华夏黑客联盟,<BR>网上学电脑的好去处。
    华夏黑客联盟,
    网上学电脑的好去处。


    <P>...</P> 段落,跳下一行并加一行空白。 ( </P> 可省略 )
    如 : 华夏黑客联盟,<P>网上学电脑的好去处。
    华夏黑客联盟,

    网上学电脑的好去处。


    <CENTER>...</CENTER> 置中。
    如 : <CENTER>置中</CENTER>


    置中
    <NOBR>...</NOBR> 不跳下一行。
    如 : <NOBR>华夏黑客联盟,</NOBR>网上学电脑的好去处。
    华夏黑客联盟,网上学电脑的好去处。



    <PRE>...</PRE> 以文件原始格式显示。

    如 : <PRE>原始格式: 文件</PRE>


    原始格式:  文件

    滚动条

    这是由IE提供的滚动条,可不要被众多的属性吓到了,越多的属性功能越强喔!

    【文字卷动标记】

    <MARQUEE>…</MARQUEE> 文字卷动 ( 滚动条 )。

    【相关属性】

    ·BEHAVIOR = 设定卷动方式
    -- ALTERNATE 交替来回卷动
    -- SCROLL 卷动 ( 预设 )
    -- SLIDE 滑动

    ·BGCOLOR = color 背景颜色
    ·DIRECTION = 设定卷动方向
    ·HEIGHT = n 高度
    ·LOOP = n 循环 , 卷动次数 ( 预设循环 )
    ·SCROLLAMOUNT = n 设定卷动距离
    ·SCROLLDELAY = milliseconds 设定卷动时间
    ·TRUESPEED = milliseconds 设定卷动速度
    ·WIDTH = n 宽度 ( 可设百分比% )


    【举例】

    如 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>华夏黑客联盟</FONT></MARQUEE>

    链接

    链接可说是HTML中最重要的功能!因为HTML拥有链接的功能,使你能接上INTERNET、WWW ……享受多姿多彩的网络世界。
    基本上链接分成 :

    外部链接——链接至网络的某个URL网址或文件,可参考考网络链接方式。
    内部链接——链接HTML文件的某个区段。

    网络链接方式

    网络链接方式 : //主机名称 / 路径 / 文件名称

    网址 如 : http : //www.hxhack.com/bbs/

    文件传输 如 : ftp : //ftp.hxhack.com/bbs/

    GROPHER 传输 如 : gropher : //gropher.net.cn/

    远端登入 如 : telnet : //bbs.net.cn/

    文件下载 如 : file : //data/html/file.zip

    NET NEWS 传输 如 : news : talk.hinet.net.cn

    E-Mail 如 : mailto : ****@******.com.cn


    常用链接标记

    <BASE> 设定基本URL位置或路径,以後只要设定文件名称即会自动加上位置或路径。
    相关属性 :
    ·HREF 链接的URL位址或文件
    ·TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合使用或开新的视窗 )

    如 :
    <BASE HREF="http://www.hxhack.com/bbs/">
    <A HREF="kk.htm">■</A>

    <BASE HREF="http://www.hxhack.com/bbs/" TARGET=frame1>


    <A>...</A> 链接指令。
    相关属性 :
    ·HREF 链接的URL位址或文件
    ·NAME 名称
    ·TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合使用或开新的视窗 )

    如 :
    外部链接
    <A HREF="http : //www.pconline.com.cn/">■</A>

    <A HREF="http : //www.pconline.com.cn/" TARGET=frame1>■</A>

    内部链接
    ·CH1.HTM 文件
    <A HREF=#A>■</A> ( 欲链接至HTML文件 A 点 )

    <A NAME=A>■</A> ( HTML文件 A 点 )

    ·CH2.HTM文件
    <A HREF=CH1.HTM#A>■</A> (欲链接至CH1.HTM 文件 A 点 )

    " ■ " 表示链接点,可以是文字或图案。( 即游标移到时,会变成手指形状的地方 )


    <LINK> 链接指令 ( 用于HEAD区,设定CSS文件 )。 <META> 储存应用资讯,可设定时间载入网页 ( 用于HEAD区 )。
    相关属性 :
    ·CHARSET 设定
    ·CONTENT 回应表头资料内容 , 若是数字表示秒数
    ·HTTP-EQUIV 回应表头 , 若设定为REFRESH载入URL设定
    ·URL HTML位置


    如 :
    ·设定中文自动跳行。
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=gb2312">

    ·设定十秒回到首页。 ( 若不设定HTML文件位置则再载入原HTML文件 )
    <META HTTP-EQUIV="REFRESH" CONTENT=10 URL=index.htm>


    设定链接、未链接部份颜色

    设定链接、未链接部份颜色,用<BODY>...</BODY>标记。

    相关属性 :

    ·ALINK按下链接部份未放开时颜色
    ·LINK未看过的链接部份颜色
    ·VLINK已看过的链接部份颜色

    如 : <BODY LINK=#0000FF ALINK=#FF0000 VLINK=#00FF00>

    框架

    框架架构的标记,主要是分割窗口和插入浮动窗口的功能。如果能有效的运用将有助于浏览网页的效率!
      常用窗口标记

    <FRAMESET>...</FRAMESET> 定义分割窗口。
    相关属性 :
    ·BORDER 边框
    ·COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 )
    ·FRAMEBORDER 显示边框
    ·ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 )


    <FRAME> 定义窗口。
    相关属性 :
    ·FRAMEBORDER 显示边框
    ·NAME 名称
    ·NORESIZE 设定是否可以调整窗口大小
    ·SRC 文件或URL位址
    ·SCROLLING 设定是否可以卷动


    <NOFRAMES>...</NOFRAMES> 无支援分割窗口浏览器显示文字。

    <IFRAME>...</IFRAME> 插入浮动窗口。
    相关属性 :
    ·BORDER 边框
    ·FRAMEBORDER 显示边框
    ·NORESIZE 设定是否可以调整窗口大小
    ·SRC 文件或URL位址
    ·SCROLLING 设定是否可以卷动


      举例

    如 : 本站窗口架构。
    ( 先分割成上下窗口,再于窗口各分割成左右窗口。 )
    <FRAMESET ROWS=74,* COLS=140,* FRAMEBORDER=NO BORDER=0>
    <FRAME SRC=rad.htm NAME=RAD NORESIZE SCROLLING=NO>
    <FRAME SRC=a-1.htm NAME=FRAME1 NORESIZE SCROLLING=NO>
    <FRAME SRC=b-1.htm NAME=FRAME2 NORESIZE SCROLLING=AUTO>
    <FRAME SRC=c-1.htm NAME=FRAME3 NORESIZE SCROLLING=AUTO>
    </FRAMESET>

    如 : 浮动窗口
    <CENTER>
    <IFRAME FRAMEBORDER=YES SCROLLING=YES SRC=c1-01.htm>
    </IFRAME>
    </CENTER>

      注意

      窗口基本架构的文件,通常放在HTML文件的第一页,如 : index.htm 。此HTML文件的基本架构并不需要本文区 ( BODY ),只需定义窗口架构,而其他HTML文件可用连结方式 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。

    设置图片

    现在的网站没有用图片的,几乎很少了吧!图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率喔!

      有关设定图片的方法共有以下几种 :


    设定HTML文件背景图片、背景颜色。<BODY>…</BODY>标记。
    如 : <BODY BACKGROUND=A.GIF>…</BODY> 或
    <BODY BGCOLOR=#000000>…</BODY>
    设定图片。<IMG>标记。
    设定地图。<MAP>…</MAP>标记。
      常用图片标记

    <IMG> 指令
    相关属性 :
    ·ALIGN 调整
    ·ALT 提示字
    ·BORDER 边框
    ·HEIGHT 高度
    ·SRC 文件或URL位址
    ·USEMAP 地图名称
    ·WIDTH 宽度

    如 : 可插入图片 ( GIF、JPG格式 )、AVI电影
    <CENTER>
    <IMG SRC="../../../images/pcedu_lo.gif" ALT="华夏黑客联盟" ALIGN=TOP BORDER=1>
    </CENTER>



    <MAP>…</MAP> 地图
    相关属性 :
    ·NAME 名称


    <AREA> 设定地图动作区域
    相关属性 :
    ·COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 )
    ·HREF 动作区域连结点 ( 可载入位址或文件 )
    ·NOHREF 动作区域连结点不动作
    ·SHAPE 外型


      举例

    设定地图
    <IMG BORDER=0 SRC=A.GIF USEMAP=#A>
    <MAP NAME=A>
    <AREA SHAPE=RECT COORDS=0,0,200,100 HREF=1.HTM>
    <AREA SHAPE=RECT COORDS=0,100,200,200 NOHREF>
    <AREA SHAPE=RECT COORDS=0,200,200,300 HREF=3.HTM>
    </MAP>

    加入声音

    HTML不仅能插入图片,也可以载入MIDI音乐、WAV 音效喔!
    常用音乐标记

    <BGSOUND> 背景音乐、音效。

    相关属性 :
    ·LOOP 循环 , 背景音乐播放次数
    ·SRC 文件或URL位址 (可为WAV、MIDI格式 )

    如 :
    <BGSOUND SRC=m-1.mid LOOP=True>

    内嵌音乐插件

    <EMBED>…</EMBED> 内嵌插件。

    相关属性 :
    ·HEIGHT 高度
    ·WIDTH 宽度 ( 可设百分比% )
    ·SRC 设定内嵌物件的 URL 位址
    ·LOOP 循环 , 背景音乐播放次数
    ·AUTOSTART 自动播放

    如 :
    <EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED>
  • 点这里复制本页地址发送给您QQ/MSN上的好友
  • 相关文章
  • 相关评论
  • 本文章所属分类:首页 建站经验