ACCP学习旅程之----- 使用HTML语言开发商业站点(第一章 HTML的基本标签)

在这里记录HTML中的所有单标签:<META>
                                 <P>…</P>可选
                                 <BR>
                                 <IMG>
                                 <HR>
                                 <LI>…</LI>可选
                                 <INPUT>
                                 <FRAME>
                                 <LINK>

在HTML文本中显示空格的三种方式:
  1。字符实体:   &nbsp;
  2。预格式标签:<PRE>空格<PRE>
  3。全角字符:在全角字符状态下按空格键,键入。

1¥ HTML文件的基本结构

  完整的HTML文件至少包括:

      <HTML>标签、
      <HEAD>标签、
      <TITLE>标签
      和<BODY>标签

 这些标签成对出现,开头标签为<>,结束标签为</>

1)    HTML文档的结构

1$ HTML部分:(整个网页文件的最外侧标签)

   <HTML>……</HTML>

   作用:告诉浏览器,这两个标签中间的内容是HTML文件。

2$ 头部:
 
   以<HEAD>标签开始,以</HEAD>标签结束。

   如: <HEAD>
        <TITLE>……</TITLE> 标识网页的标题
        </HEAD>

   作用:包含显示在网页标题栏中的标题和其他在网页中不显示的
         信息。

3$ 主体部分:

   包含在网页中显示的文本、图像和链接。

   以<BODY>标签开始,以</BODY>标签结束

另外:标签不区分大小写,<html>等效于<HTML>

2)    使用记事本创建网页

1$ 创建一个HTML文档,需要两个工具:

      一个文本编辑器(如记事本等)
      一个用于查看HTML文档效果的Web浏览器

2$ 保存一个HTML文档

   需将编辑好的HTML文档,在保存对话框中选择保存类型中选中“所有文件”

   在编码下拉列表框中选择“ANSI”选项

3)<META>标签(在HEAD中)

   <META>标签出现在网页的标题部分,提供有关网页的信息。

   使用<<META>标签中的charset属性设置网页的编码语系

    如: charset=gb2312  简体中文网页
         charset=big5    繁体中文网页
         charset=iso-8859-1 或不设置  纯英文网页

4)页面背景色或背景图像(若果是设置整个网页背景,则在BODY中)
        
   如:<BODY bgcolor=”ffccff” ></BODY>  设置页面背景颜色

  又如:<BODY background=”back_image.gif”>  设置页面背景图像

  另外:为了使页面美观大方,整个页面背景一般尽量浅。

2¥ 文本相关标签

1$ 字体、字号相关标签

1.。标题标签
 
 HTML提供了六级标题,<H1>为最大,<H6>为最小。

 如: <H1>一级标题</H1>

2.。字体标签

 <FONT>标签用于控制网页上的文本的显示外观,如:文字大小、字体类型和颜色等属性。

  如:<FONT size=”+2” color=”red” face=”隶书”></FONT>
  

 说明:1。在font中字体大小用size, 默认为3,范围为1~7;
          也可以默认为基准,使用加减号控制大小。

          如上例:“+2”即在默认基础上加大2个单位。

       2。在font中颜色用color控制,颜色值可16进制数表示。

       3。在font中,字体类型使用face

       4。 所有属性名用等号连接属性值。

3.。特殊符号(字符实体)

    某些字符在HTML中有特殊意义,如:<, >, 空格, 等。
    在浏览器中显示这些字符,就必须使用HTML中的字符实体

    字符实体有3部分组成:&号、实体名、分号;

    注意:字符实体各字符之间不能有空格
          转义码必须以分号;结束
          单独的&不是转义的开始

    空格:  &nbsp;
    >   :  &gt;
    <   :  &lt;
    “”   :  &quot;
    版权符号:&copy;

2$ 行的控制标签

1.。段落标签<P>

段落标记<P>用于标记段落的开始,段落的结束标记</P>为可选。
如没有</P>标签,则下一个<P>开始自动开始一个新段落。

可以通过段落的align属性,设置段落的对齐方式。
 
2.。强制换行标签<BR> (单标签,略)

3¥ 图像标签
1)常见的图片格式(暂略)
                                          
   4种: jpg gif swf bmp

1$ JPG

 是联合图像专家组文件格式(Joint Photographic Expert Group)的缩写

2)图像的基本语法

   <IMG>标签用于在HTML文档中插入图像,使用src属性制定图像文件所在的路径。

如:<IMG src=\'#\'" width=”300” height=”150” alt=”图像”>

说明:
  1。 alt属性有两个作用
      如果图像没有被下载,在图像位置出现的提示文字;
      如果图像正常下载完成,将鼠标放在该图像上,在鼠标旁边出现的
      提示文字。

 
3)图像与文本的对齐

1$ IMG标签的align属性

  <IMG>标签的align属性用于调整图像相对于周围文本的对齐方式。
  在<IMG>中align可以取:top  bottom  middle  left  right
                         默认为bottom。

  注意:所被设置的文档应紧跟<IMG>标签

  如:<IMG align=”middle” src=\'#\'" width=”180”
         height=”95” border=”0”>请单击进入广告区

2$ IMG标签的hspace属性

<IMG>标签的hspace属性,用于设置图像周围文本与图像之间间距

 如:<IMG align=”middle” src=\'#\'" hspace=”30”>
     <OL type=”disc”>  /*列表行图标为disc”
       <LI>广告文本1</LI>
       <LI>广告文本2</LI>
     </OL>

 说明:上例如没有hspace的设置,则无法显示出列表行图标。

4¥ 文字布局

1)使用内容分隔<HR>标签

  <HR>(水平线)标签用于在页面上绘制水平线,只有开始标签,没有结束标签。

  在<HR>中可以使用align,默认为center(还有left\right)

  如: <HR size=”5” color=”red” width=”300”>

说明:
  1。size属性用于设置水平线的高度(粗细),以像素为单位
  2。width用于设置水平线的长度,像素或%均可
  3。水平线的位置用align设置,上例中没写,则去默认值center
  4。还有一个属性为 noshade 意为没有阴影

另外:

 制作垂直线:把水平线长度(width)设置为1
             水平线粗细size设置为很大,即可。

 如:<IMG size=”300” color=”red” width=”1”>

2)如何使用文字列表

   在HTML文档中包含两种文字列表:有序列表/无序列表

1$ 无序列表

   无序列表就是“项目列表”。包含在<UL>…</UL>标签中

 列表中的每一项都用列表标签<LI>表示,列表标签结束</LI>为可选

 如:<UL type=”circle”>
      <LI>如何激活会员名?<./LI>
      <LI>如何注册会员名?</LI>
     </UL>

说明:
  1。<UL>中的type属性决定列表项开始的符号,可以取值得范围:
       默认:disc 实心圆点
       circle 空心圆环
       square 空心正方形

 
2$ 有序列表

有序列表包含<OL>…</OL>标签中,列表项以自动生成的顺序显示。

如: <OL type=”1”>
       <LI>填写信息</LI>
       <LI>收电子邮件</LI>
     </OL>

说明:
  1。Type属性决定有序列表的序号类型,可取范围:
       1:阿拉伯数字序列
       a:小写英文字母序列
       A:大写英文字母序列
       i: 小写罗马数字序列
       I:大写罗马数字序列

3)如何使用预格式文本<PRE>标签(即格式化输出,略)

   <PRE>… </PRE>标签用于
   显示预先在HTML代码中已经定义好格式的文本

5¥ 页面链接<A>标签

   <A>标签用于创建超级链接,是到另一个文档或文件(图形、音频、视频)甚至到同一文档的另一部分的链接。

   单击超级链接时,就会进入链接中指定的URL(href=””)

   要创建超级链接,应指定以下两个组件:

      1。要链接文件的完整地址(href=””)
      2。将提供链接的热点
             热点可以是文本行,也可以是图像
             单击热点时,浏览器将读取URL中指定的地址并跳转到新位置

1)链接到其他页面(注意绝对路径和相对路径)

 如: <A href=”register\register.html”>[免费注册]</A>

 说明:
   1。“href”参数可提供链接到其他目录中的文件

2)链接到本页面
1$ 设置锚记(页面中链接的目标位置)

   页面的内容太多,为了方便用户,可以使用锚点链接。

   <A>标签的name属性用于在文本中创建链接要搜寻的锚记。

   如: <A name=”market”>主题名称</A>
      //定义一个名为market的锚记,即<A>超链接将搜索的名字。

2$ 给超链接设置页面中的跳转位置

  为了达到跳转的效果,超链接所在位置的href中应标记同名文件源,而且,必须带有“#”

 如: <A href=”#market”>主题名称</A>

3)    电子邮件链接

  用户可从网页发送电子邮件,可在链接标签中插入mailto:邮箱地址

  如: <A href=“mailto:[email protected]”>站长信箱</A>

6¥ 滚动<MARQUEE>标签

   使用<MARQUEE>标签不仅可以移动文字,还可以移动图片。

 如:
  <MARQUEE scrolldelay=”100” direction=”up” onmouseover=”this.stop()”
                    onmouseout=”this.start()”>
            滚动的文字或图像
      </MARQUEE>

说明:
  1。scrolldelay:表示滚动延迟时间,默认值为90毫秒
  2。direction:表示文字或图像的滚动方向,默认为从右向左
  3。滚动方向可以取4个值:
      up down left right
  4。
            设置鼠标在滚动区域和移出滚动区域时的动作

       this.stop() 停止滚动
       this.start() 开始滚动
 

你可能感兴趣的:(html,开发,职场,休闲,Accp)