html标签、列表、表格和表单

1、常用标签分类

块级元素：<div>  <p>  <h1>…<h6>  <ol>  <ul>  <dl>  <table>  <address>  <blockquote>  <form>

内联元素：<a>  <span>  <br>  <i>  <em>  <strong>  <q>  <blockquote>  <cite>  <code>

内联块级元素：<img>  <input>

2、列表

两个列表之间可以相互嵌套，也可以自身嵌套

（1）无序列表：<ul>

<li></li>

</ul>

若设置样式，使用List-style=”   ”

（2）有序列表：<ol></ol>

若设置样式，则<ol type=”A”><ol>

3、表单

1、<form ></form>创建一个表单

属性：action：属性值为路径，规定当提交表单时，向何处发送表单数据,即将表单提交给哪个后台的路径。

method：属性值为get和post，规定以何种方式发送数据，前者提交数据量多，但是不安全，后者提交数据量少，但是性能好。

Eg:<form action=”jaca.jsp”></form>

2、<input></input>创建一个文本框

属性1：type

属性值：<1>text 成为一个输入文本框，例如输入用户名

<2>password 成为输入密码的文本框，输出的密码即为隐藏的黑点

<3>submit 提交按钮，可以使用value值改变按钮上的字，

例如<input type="submit" value="登录"/>

<4>reset 重置按钮 同上可以使用value改变按钮上的字

例如：<input type="reset" value="重置"/>

<5>checkbox 多选框 设置value属性可以用于后台，checked表示默认的选择

例如：<input type="checkbox" value="basketball" />篮球

<6>radio 单选框，只有当把所有的name属性的值设置相同时才可以实现单选，同样有value属性，checked表示默认的选择

例如：<input type="radio" value="boy" name="sex"/>男

<input type="radio" value="girl"name="sex"/>女

<input type="radio" value="无"name="sex" checked/>无

<7>button是按钮，使用value属性设置按钮上的值，与button标签相同

例如：<input type="button" value="按钮"/>

<button>按钮</button>

属性2：<1>和<2>有maxlength和 placeholder属性，表示输入的最大长度和提示词

例如：<input type="text" maxlength="10" placeholder="请输入" name="username"/>用户名

3、使用select创建下拉菜单，配合option使用，为select添加multiple属性可以变为多选框。

例如：<select multiple>

    <option value="请选择">请选择</option>

    <option value="语文">语文</option>

    <option value="数学">数学</option>

    <option value="英语">英语</option>

    <option value="体育">体育</option>

</select>

4、标签<textarea></textarea>创建一个多行文本框。

属性cols和rows属性值可以表示文本框的大小。

例如：<textarea name="" id="" cols="30" rows="10"></textarea>

5、表格

在HTML中使用table创建表格，用tr表示行，几个tr就有几行在行中写了几个td就有几个单元格，caption表示表头 cellspacing表示边线的宽度，设置0表示合边线 cellpadding表示字与边框的距离colspan表示列合并 rowspan表示行合并

<table width="200px" height="200px" cellspacing="0" cellpadding="10" border="1px red">
        <caption>信息表</caption>
        <tr>
            <td  colspan="2">1</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr >
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
 </table>

得到如下表格