zoukankan      html  css  js  c++  java
  • 学习笔记(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

  • 相关阅读:
    关于PowerShell调用Linq的一组实验
    PowerShell创建参考窗口
    Python切图脚本
    11->8
    用Python演奏音乐
    关于Haskell计算斐波那契数列的思考
    傅立叶变换与小波分析
    堆排序(python实现)
    二进制数据表示方式
    oracle数据插入/查询乱码
  • 原文地址:https://www.cnblogs.com/key1309/p/3123834.html
Copyright © 2011-2022 走看看