zoukankan      html  css  js  c++  java
  • HTML_3

    html列表

      有序列表:在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,在网页上生成的列表,每条项目上按1、2、3编号,有序列表在实际开发中较少使用。代码如下:

    <ol>
        <li>列表文字一</li>
        <li>列表文字二</li>
        <li>列表文字三</li>
    </ol>

        网页显示结果如下:

    1. 列表文字一
    2. 列表文字二
    3. 列表文字三

      无序列表在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,结果:每条项目上会有一个小图标(不同浏览器显示效果不同),可以用样式自定义或删除图标,代码如下:

    <ul>
           <li>列表文字一</li>
           <li>列表文字二</li>
           <li>列表文字三</li>
    </ul>

        网页显示结果如下:

    • 列表文字一
    • 列表文字二
    • 列表文字三

      定义列表:用于术语的定义,<dl>标签标示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释,代码如下:

    <dl>
           <dt>术语题目</dt>
           <dd>术语的解释</dd>
           <dt>多个题目</dt>
           <dd>多个解释</dd>
    </dl>
    

      结果:

        术语题目

          术语的解释

        多个题目

          多个解释

    html表格

    <table border="2" cellpadding="1" cellspacing="3">     <!-- 声明表格,border可以不写,默认不显示表格。若写上,baoder的大小定义的是表格的边框 -->
    <!-- cellpadding定义单元格内内容与边框的距离,cellspacing定义单元格与单元格之间的距离-->
        <tr>  <!-- 表示一行 -->
            <th>name</th>   <!-- th表示表头单元格(相对比普通单元格会加粗) -->
            <th>性别</th>    <!-- 表示一列 -->
            <th>age</th>
        </tr>
    
        <tr>   <!-- 表示一行 -->
            <td>小齐</td>   <!-- td表示普通单元格 -->
            <td >男</td>     <!-- 表示一列 -->
            <td >24</td>
        </tr>
    
        <tr>   <!-- 表示一行 -->
            <td>小郭</td>
            <td rowspan="2">女</td>     <!-- rowspan设置单元格垂直合并,数值代表合并的单元格数目,相应的删去该列以下每行对应的单元格 -->
            <td>33</td>
        </tr>
    
        <tr>   <!-- 表示一行 -->
            <td align="right">小xu</td>  <!-- align设置单元格中内容的水平对齐方式,设置值:left、center、right -->
            <td valign="bottom">43</td>    <!-- valign设置单元格中内容的垂直对齐方式,设置值:top、middle、bottom -->
        </tr>
    
        <tr>   <!-- 表示一行 -->
            <td colspan="3">小qiu</td>   <!-- colspan设置单元格水平合并,数值代表合并的单元格数目,相应的删去其该行以右每列对应的单元格 -->
        </tr>
    </table>
    

      结果如下图:

      border="0" cellpadding="0" cellspacing="0"时:

    姓名:<input type="text">  <!--单行文本输入框,也可以这样写:<input type="text" name="yourname">  -->
    密码:<input type="password">  <!--密码输入框-->
    

     结果:

    爱好:
        <input type="checkbox">苹果  <!--复选框,也可以这样写: <input type="checkbox" shuiguo="fruit" value="apple"> -->
        <input type="checkbox" shuiguo="fruit" value="orange">橘子
        <input type="checkbox" checked>香蕉   <!--用checked表示默认的选项-->
    

      结果:

    性别:
        <input name="sex" type="radio" >男   <!--单选框   注:用户checked表示缺省已选的选项,可省略-->
        <input name="sex" type="radio">女  <!--没有xinbie="sex"命名这一项不会成为单选框,命名必须相同,因为二选一 -->
        <input name="sex" type='radio' checked>正常人   <!-- 注:用户checked表示缺省已选的选项-->
    

      结果:

    你最爱的水果是:<!--下拉框-->
        <select name="fruit">
            <option value="apple">苹果</option>
            <option value="prange">橘子</option>
            <option value="mango">芒果    <!--   </option>可以不写  -->
        </select>

      结果:

    请提出宝贵意见:<!--多行输入框(textarea),cols表示宽度,rows表示高度-->
        <textarea name="yoursuggest" cols="50" rows="3"></textarea>
    

      结果:

    <!--提交:将表单Form里的信息提交给表单里action所指向的文件-->
    <input type="submit" title="提交">
    

      结果:

    <!--html内嵌框架,放在body之外-->
    <!-- <iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),
        src属性来定义另一个html文件的引用地址,frameboder属性定义边框,scrolling属性定义是否有滚动条-->
    <iframe src="http://www.taobao.com" frameborder="0" scrolling="yes"></iframe>
    <iframe src="http://www.taobao.com" frameborder="0" scrolling="no" name="myframe"></iframe>
    <!--内嵌框架与a标签的配合使用:a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中-->
    <a href="http://www.taobao.com" target="myframe">页面一:淘宝</a>
    <a href="http://www.jd.com" target="myframe">页面二:京东</a>
    <a href="http://www.dangdang.com" target="myframe">页面三:当当</a>
    

      结果:

  • 相关阅读:
    如何用微软StreamInsight 处理和分析实时数据
    网站压力测试软件WebBench以及压测Jexus
    Xamarin 开源应用汇集
    微软开源 C++ REST SDK
    Visual Studio 2010/2012 Pro Power Tools
    深入浅出事件流处理NEsper(一)
    将Windows日志转换为Syslog
    事件流处理框架NEsper for .NET
    WCF技术剖析之二十一: WCF基本的异常处理模式[上篇]
    WCF技术剖析之二十一:WCF基本异常处理模式[下篇]
  • 原文地址:https://www.cnblogs.com/tianqizhi/p/8512508.html
Copyright © 2011-2022 走看看