HTML基本标签

HTML     基本标签

文本相关标签

字体、字号

标题标签<H1>－<H6>

<FONT>标签

特殊符号

行的控制

段落标签<P>

换行标签<BR>

字体、字号相关标签

标题标签

<H#> ... </H#>      #=1, 2, 3, 4, 5, 6

说明：<H1>到<H6>

字体大小依次递减

<FONT size=”+2” color=”red” face=”律书”>

</FONT>

行的控制相关标签

段落标签<P>

段(Paragraph) (可以看作是空行) <p>

换行标签<BR>

换行 <br>

特殊符号

图像标签

图像的基本语法

<IMG src="images/adv_2.jpg" width="300“

      height="150“ alt="明星演唱会开幕" >

图像与文本的对齐方式

<IMG align="middle">

如何使用内容分隔<HR>标签

<HR size="5" color="red" width="300">

电子邮件链接

要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”

<A href="mailto:webmaster@sohu.com">站长信箱</A>

如何使用列表

<H4>注册步骤：</H4>

  <OL type="1" >

    <LI>填写信息</LI>

    <LI>收电子邮件</LI>

    <LI>注册成功 </LI>

  </OL>

  新人上路指南

  <UL type="circle">

    <LI>如何激活会员名？ </LI>

    <LI>如何注册淘宝会员？ </LI>

    <LI>注册时密码设置有什么要求？</LI>

    <LI>支付宝认证</LI>

  </UL>

如何使用预格式文本<PRE>标签

<PRE>

<IMG src="images/QQ.JPG" width="159"

               height="133" align="LEFT">

       腾讯-QQ币/QQ幻想-30元卡

        一 口 价：26.45元    

        运　费：卖家承担运费  

        剩余时间：5天  

        宝贝类型： 全新

       卖主声明：货到付款，可试用10天！

</PRE>

页面链接<A>标签

要链接到同一目录 (C:\HTML) 下的页面，可编写

<A HREF = “Doc2.htm”>

或<A HREF = “C:\html\Doc2.htm”>

链接到其他页面

相对路径

指定相对于当前文件的文件位置。

绝对路径

指定从根目录到文件的完整路径。

链接到本页面

锚记标签用于使用户“跳”到文档的某个部分

HTML 的 NAME 属性用于创建锚标记

 <A NAME = “marker”>主题名称</A>

为达到这种跳转效果，请在 HREF 参数中使用该标记

<A HREF= “#marker”>主题名称</A>

滚动<MARQUEE>标签

<MARQUEE    scrolldelay =“100”   direction=“up "  >

      滚动文字或图像

</MARQUEE>

说明：

scrolldelay：表示滚动延迟时间，默认值为90。

direction：表示滚动的方向，默认为从右向左。

<MARQUEE scrolldelay ="100" >水平滚动</MARQUEE>

   <MARQUEE scrolldelay ="200"  direction="up"  >垂直滚动</MARQUEE>

   <MARQUEE scrolldelay ="300"  direction="up"  

     onmouseover="this.stop()" onMouseOut="this.start()">

   <A href="#"><IMG src="images/scroll/1.gif" border="0" align="middle">

     Avon化妆品</A><BR>

   <A href="#"><IMG src="images/scroll/2.gif"  border="0" align="middle">

     雅诗兰黛 </A><BR>

   </MARQUEE>

第二章  使用表格显示数据

如何创建表格

<TABLE  border="2">

  <TR>

    <TD>移动</TD>

    <TD>联通</TD>

    <TD>铁通</TD>

  </TR>

 <TR>

    <TD>IBM </TD>

    <TD>惠普</TD>

    <TD>华硕</TD>

  </TR>

</TABLE>

跨多列的表格 

<TABLE border="2">

  <TR>

    <TD  colspan="3">学生成绩表</TD>

  </TR>

<TR>

    <TD >英语</TD>

    <TD >数学</TD>

    <TD >语文</TD>

  </TR>

<TR>

    <TD>95</TD>

    <TD>98</TD>

    <TD>89</TD>

  </TR>

</TABLE>

如何创建跨行跨列的表格

<TABLE  border="1">

  <TR>

    <TD>手机充值、IP卡 </TD>

    <TD colspan="2">办公设备、文具</TD>

  </TR>

跨多行的表格

<TABLE border="1">

  <TR>

    <TD  rowspan=“3”  >早上菜谱  </TD>

    <TD >食物</TD>

    <TD >鸡蛋</TD>

  </TR>

<TR>

    <TD rowspan="2">各种卡的总汇</TD>

    <TD>铅笔</TD>

    <TD>彩笔</TD>

</TR>

<TR>

    <TD>打印</TD>

    <TD>刻录</TD>

</TR>

</TABLE>

 <TR>

    <TD >饮料</TD>

    <TD >牛奶</TD>

  </TR>

</TABLE>

<TR>

    <TD>甜点</TD>

    <TD>开心粉</TD>

  </TR>

如何设置表格的尺寸和边框

<TABLE   width=“400” height=“200” border=“15” bordercolor="red">

  <TR>

    <TD colspan="4"> 品牌商城</TD>

  </TR>

width用来设置表格的宽度

height用来设置表格的高度

border用来设置表格边框尺寸大小

bordercolor用来设置表格边框颜色

 <TR>

    <TD colspan="2" >笔记本电脑</TD>

    <TD colspan="2" >办公设备、文具、耗材</TD>

  </TR>

<TR>

    <TD >惠普</TD>

    <TD >华硕</TD>

   <TD >打印机</TD>

   <TD >刻录盘</TD>

  </TR>

</TABLE>

如何设置背景

<TABLE background=“images/type_back.jpg”  width=“360" height="120" border="2" >

  <TR>

    <TD colspan="6"> </TD>

  </TR>

  <TR bgcolor="#EBEFFF">

    <TD colspan="3" >笔记本电脑</TD>

    <TD colspan=“3” bgcolor="yellow" >办公设备、文具、耗材</TD>

  </TR>

  ……

</TABLE>

background属性用来设置表格的背景图片

bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。

如何设置对其方式

align属性用来设置表格、行、列的对齐方式

<TABLE   width="350" height="100" border="2" background="images/type_back.jpg" >

  <TR>

    <TD colspan="4"> </TD>

  </TR>

  <TR bgcolor="#EBEFFF">

    <TD colspan="2" align="center" >笔记本电脑</TD>

    <TD colspan="2" align="center" >办公设备、文具、耗材</TD>

  </TR>

  <TR bgcolor="#EBEFFF">

    <TD >惠普</TD>

    <TD >华硕</TD>

    <TD >打印机</TD>

    <TD >刻录盘</TD>

  </TR>

</TABLE>

如何使用填充、间距属性

<TABLE border="20" cellpadding="30" cellspacing="40"

bordercolor="red">

……

</TABLE>

border(边框的厚度)

cellpadding

(单元格填充)

cellspacing

(单元格间距)

如何设置表格的填充属性

<TABLE  cellspacing=“5” cellpadding=“10” border=“1" background="images/type_back.jpg" >

  <TR>

    <TD colspan="6"> </TD>

  </TR>

  <TR bgcolor="#EBEFFF">

    <TD colspan="3" align="center" >笔记本电脑</TD>

    <TD colspan="3" align="center" >办公设备、文具、耗材</TD>

  </TR>

  ….

</TABLE>

cellspacing属性用来设置表格内框宽度

cellpadding属性用来设置表格内填充距离

如何使用表格进行布局

<TABLE width="298">

  <TR>

    <TD colspan="2"><IMG src="images/adv.jpg" /></TD>

  </TR>

  <TR>

    <TD width=“122” rowspan=“6” align=“left” ><IMG  

    src="images/wangyou.jpg" width="116" height="142" /></TD>

    <TD width=“285”  >

    <A href=“#”>超值变形金钢2.5折!</A>

    </TD>

  </TR>

  <TR>

    <TD><A href="#">人们为啥对电视吼叫 </A></TD>

  </TR>

  ……

</TABLE>