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>

  结果:

 

posted @ 2018-03-06 09:33  耐烦不急  阅读(172)  评论(0编辑  收藏  举报