html5基础知识(2)-——表格&&列表&&表单

来源：互联网发布：上海六大支柱产业数据编辑：程序博客网时间：2024/05/17 00:53

HTML表格：

表格标签<table>定义表格<caption>定义表格标题<th>定义表格表头<tr>定义表格的行<td>定义表格的单元<thead> 定义表格的页眉<tbody>定义表格的主体<tfoot>定义表格的页脚<col>定义表格的列属性

单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间

单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距，也就是说单元格中的内容与单元格边缘的距离为0，内容紧挨着边缘

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <table border="1" cellpadding="0" cellspacing="0">        <caption>重要表格</caption>        <!--表头-->        <tr>            <th>单元</th>            <th>单元</th>            <th>单元</th>        </tr>        <tr>            <td>                <ul>                <li>苹果</li>                <li>香蕉</li>               </ul>            </td>            <td colspan="2" ></td>   <!--合并单元格-->        </tr>    </table></body></html>

HTML列表：
1、有序列表
标签：<ol><li>
属性：A、a、I、i、start
2、无序列表
标签：<ul><li>

属性：disc(实体圆)、circle（空心圆）、square（方块）

<ol type="disc"></ol>

3、嵌套列表

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <ol>        <li>车</li>        <ul>            <li>卡车</li>            <li>汽车</li>            <li>摩托车</li>        </ul>        <li>花</li>        <ul>            <li>桃花</li>            <li>百合</li>            <li>玫瑰</li>        </ul>    </ol></body></html>

4、自定义列表

<dl>  <dt>学习</dt>    <dd>学习是很重要的事</dd></dl>

HTML表单：

1、表单用于获取不同类型的用户输入

表单标签<form> 表单<input> 输入域<textarea> 文本域<label> 控制标签<fieldset> 定义域<legend> 域的标题<select> 选择列表<optgroup> 选项组<option> 下拉列表中的选项<button> 按钮
最简单的一个用户输入

<body><form>    用户名    <input type="text">    <br/>    密码：    <input type="password"></form></body>

下面我们来写一个也是常见的

1、复选框

<body><form>    你喜欢的水果有    <br/>    苹果<input type="checkbox">    西红柿<input type="checkbox">    梨<input type="checkbox"></form></body>

2、单选按钮

<body><form>    你的性别是    <br/>    男<input type="radio" name="sex">    女<input type="radio" name="sex"></form></body>

注意我们新加了一个name,name必须相同,此时不能同时选中

3、下拉列表

<body><form>    你的专业是    <select>        <option>计算机</option>        <option>生物</option>        <option>地理</option>        <option>医生</option>    </select></form></body>

当然在html5中，新增了一个文本框的list属性，datalist元素类似选择框，但当用户想要设定的值不在选择列表中，可以自行输入

；datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

<body><form>    你喜欢的专业是    <input type="text" name="greeting" list="greeting">    <datalist id="greeting" style="display: none">        <option value="计算机"></option>        <option value="生物"></option>        <option value="地理"></option>        <option value="医生"></option>    </datalist></form></body>

这里的文本框是可直接输入的。

4、文本域

文本域可在表单外创建

<body>    <textarea cols="30" rows="30">请在此输入你的建议</textarea></body>

5、按钮

<body><form>    <input type="button" value="提交">    <input type="submit">    <input type="submit" value="提交"></form></body>

第二个按钮上的字随浏览器不同而不同，有的浏览器直接是”提交“.

1 0