学习笔记(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、<sub>上标</sub>     <sup>下标</sup>

===========================================================================       
四、超链接 <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

原文地址:https://www.cnblogs.com/key1309/p/3123834.html