学习笔记(2):HTML 常用标签的归纳

一、body 的属性：

    bgcolor="#000000"           网页正文部分的背景色
    background="../key/1.jpg"   注：地址只能用英文，背景图片，如果图片足够的大，它将盖住背景颜色bgcolor
    text="#0000ff"              网页正文部分的文字的颜色
    link="#ffffff"              超链接的颜色
    alink="#cccccc"             鼠标按下超级链接时候文本的颜色                    vlink="#cccccc" 被访问过的超级链接的颜色
    leftmargin="20"             左缩进的长度，单位是像素
    topmargin="30"              上缩进的长度，单位是像素

=============================================================================
    
二、格式标签

    1、<pre>。。。</pre>             把包围起来的内容按原格式显示在浏览器上
    2、<p>。。。</p>                 段落标签，实质是：换行并加入一个空行
    3、<br>                          换行不产生空行
    4、<center>。。。</center>       居中显示

    5、<dl>                          列表标签
      <dt>中国城市</dt>
      <dd>石家庄</dd>
      <dd>唐山</dd>
      <dd>廊坊</dd>
      <dt>美国城市</dt>
      <dd>通县</dd>
      <dd>大兴</dd>
      <dd>铁岭</dd>
       </dl>
       更多关于列表标签的内容：
       
    6、<ul>  。。。。。。。。。。。。有序清单                      
    <li></li>
    <li></li>
    <li></li>
       </ul>

    7、<ol>   。。。。。。。。。。。。无序清单
    <li></li>
    <li></li>
    <li></li>
       </ol>

==========================================================================
三、文本标签
    
    1、<h1></h1>  HTML中定义6个h标签来表示不同大小的字体，只能是1-6，不能是其他数字
       <h2></h2>
       <h3></h3>
       <h4></h4>
       <h5></h5>
       <h6></h6>
    
    2、<font color="#111111" size="12" face="隶书"> 字体设置标签 </font>     

    3、<b>这是粗体标签</b>         <strong> 这也是粗体标签 </strong>

    4、<em>斜体效果</em>   <var>斜体效果<var>   <cite>斜体效果<cite>    <dfn>斜体效果</dfn>     

    5、<address>换行并且斜体</address>   

    6、<u>下划线标签</u>           <strike>删除线标签</strike>

    7、<big>变大标签</big>             <small>变小标签</small>

    8、_上标     ^下标

===========================================================================       
四、超链接 <a>       

    1、普通的超链接：  <a href="http://www.baidu.com" target="_blank"> 百度 </a>
                            target属性的取值有：_blank         在新窗口打开
                                                _self          当前串口打开
                                                _top           显示到顶层视窗
                                                _parent        副框架显示



    2、锚点连接：两个<a>...</a> 才能构成一个完整的锚点连接
          
                  <a href="#one"> 这是在定义一个锚点 </a>
                  <a name="one"> one </a>    当两个点位于同一页面是的写法


                  <a href="#two"> 这是在定义一个锚点 </a>          当two位于另一个名为key.html的页面
                  <a name="key.html#one"> one </a>         此时的写法为

=======================================================================================       

五、图像标签 img

    <img src="../img"/>            此时的路径最好写相对路径 ,img 标签的属性有：
     
              src=""                   这个用于确定图片的位置，是必须要有的属性
              height=""    width=""    高、宽
              alt=""                   替换图片的文字
              hspace=""                与左右文本的距离
              vspace=""                与上下文本的距离
              lowsrc=""                低解析度的图像

===================================================================================                                

六、表格标签

<table>              表格的一般结构            
    <tr>
           <td></td><td></td>
        </tr>
    <tr>
           <td></td><td></td>
        </tr>
</table>


table标签的属性：

   width="20%"    height="90"        分别表示 宽、高，   它们的大小既可以用百分比来描述，也可以用像素点描述
                   border="1"        边框粗细
                     bgcolor         整个表格的背景颜色
    align="center/left/right"        水平对齐方式(表格相对于外面的元素)，选择三个参数中的某一个     
   valign="middle/top/bottom"        垂直对齐方式（同上）
              cellspacing="5"        单元格之间的距离
              cellpadding="3"        文字留白
                 bordercolor         边框颜色


tr标签的属性：

             align    valign         整行的单元格里  水平、竖直 对齐方式（文字相对于单元格）
                       bgcolor       本行所有单元格的背景色


td标签的属性：
                      
              width     height
              align     valign   单元格里  水平、竖直 对齐方式（文字相对于单元格）当 tr中也定义了该属性，td的优先执行
                       colspan   合并纵列的属性值个单元格，该行少了属性值-1个单元格
                       rowspan   合并横列的属性值个单元格，该行的下面属性值-1个行少了一个单元格

============================================================================

七、frame框架

框架概念 ：
所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只 要 <FRAMESET> <FRAME> 即可，而所有框架标记 要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <BODY> 标记，浏览这框架必须读取这档 案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标 记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例：
<frameset cols="300,*">                   这就是一个简单的左边固定的框架，她由两个页面1.html  2.html组成
<frame name="hello" src="1.html">
<frame name="hi" src="2.html">
</frameset>



cols="300,*"       该属性表明是将框架左右切分，大小既可以用百分数也可以用像素点表示
rows="90,*"        该属性表明是将框架上下切分   两者一般去其一
frameborder="0"    该属性设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框
border="0"         该属性设定框架的边框厚度
bordercolor="#008000"    设定框架的边框颜色
framespacing="5"         表示框架与框架间的保留空白的距离





典型框架的代码示例：

1、上方固定框架代码：
<frameset rows="80,*" frameborder="2" border="10" framespacing="0">
  <frame src="c.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frame src="b.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>


2、上方固定，左边嵌套的框架
<frameset rows="80,*" cols="*" frameborder="5" border="2" framespacing="2">
  <frame src="d.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="80,*" frameborder="5" border="2" framespacing="2">
    <frame src="c.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="b.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>
</frameset>

====================================================================================

七、表单

1、<form>。。。</form>         表单可以看做是用户向服务器提交数据的一种方式

form标签的属性：
1> method    用于确定表示向浏览器传值的方式          有post、get 两种方式
2>action     该属性表示表单提交的目标页面,     值是一个url             
3>target     表示该表单内容被提交时，目标页面是否在新的窗口中打开。_self、_blank（在讲解a标签时已经解释过）
4>title      当光标移到表单的任何一个部分时所提示的文字

表单控件的总结请看：http://www.cnblogs.com/key1309/archive/2013/06/07/3123790.html