web前端与移动开发－－－html列表、表单元素等标签的学习

时间：2022-01-18 20:22:44

　　经过前两天的学习，今天我们来学习列表及表单元素。

　　首先是列表，列表分为无需列表、有序列表、自定义列表。

　　　　1.无序列表

<ul>
    <li></li>
    <li></li>
    ......
</ul>

总结：

　　（1）所有放在ul中的数据必须是无序的；

　　（2）ul标签是用来管理li标签的；

　　（3）ul中必须至少有一个li标签；

　　（4）li标签不能单独使用；

　　（5）在ul标签中只能写li标签；

　　（6）在li标签中才能嵌套其他的标签。

　　　　2.有序列表

<ol>
    <li></li>
    <li></li>
</ol>

有序列表基本上和无序列表一样，唯一的区别是有序列表里面存放的数据是有有先后顺序的。

　　　　3.自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

用来存放一类东西，dt里面存放的是大类，dd里面是小类。

　　大概在2008年以前，前端工程师还是用table布局，但是2008年以后，开始更多的使用了div来布局。下面我们来看看table到底是个什么玩意。

<table>
    <caption>班级信息管理</caption>
    <thead>
        <tr>
            <th> 编号 </th>
            <th> 姓名 </th>
            <th> 年龄 </th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <th>1</th>
            <th>张三</th>
            <th>23</th>
        </tr>
         <tr>
            <th>2</th>
            <th>李四</th>
            <th>34</th>
        </tr>
    </tbody>
</table>

实际应用中，我们用一般不用thead，tbody等，而是直接用tr和td标签来描述表格中的数据。为了能够让用户在查看数据的时候，一眼就能看出现在这条数据是什么类型的，最好将表头显示得跟具体数据不太一样，html里面为我们提供了一个标签<th>。th和td级别是一样的，只是在显示的时候有一些区别，第一，th中的文字会加粗，第二，th中的文字会居中。

　　table中其他标签的作用

标签 作用
 thead

放在标的最上面，用于存放表格的标题以及表格数据的一些说明性文字。
 tbody

放在表格的主题部分，主要用于存放具体的数据的集合，虽然这个标签我们一般不会去写，但是在表格生成的时候会自动加上去。
 tfoot

放在表格的底部，用于加一些后缀，比如公司信息，比如表格的信息。

　　

如果表格没有设置宽和高，那么这个表格的宽高是自动确定的：是根据这个表格中的内容来确定的;如果表格设置了宽高，那么这个表格的宽高是确定的，并且表格中的行以及列中的单元格的宽度是根据表格的宽高来自动分配。

属性

作用

width

 宽

Height

高 

Border

边框 

cellspacing

边框与边框之间的距离

cellpadding

内容与边框之间的距离

rowspan

当前td所占的行

colspan

当前td所占的列

 

　　表单的运用很广泛，我们最常见的就是注册页面。那么我们来看一下，表单元素到底都有哪些。

　　　　1.input标签

属性 作用
 type 

用于确定当前元素的类型

text:文本框

password:密码框

radio:单选按钮

checkbox:多选框

button:按钮

hidden:隐藏域

file:会打开文本选择框（上传文件的样式）

submit:提交按钮

reset:重置按钮
 value  input中显示的文字
   

　　　　radio：如果要使用这个标签，必须给同一组的所有标签设置一个相同的name属性。

　　　　value属性：如果在input中设置value属性，这个input是text的话，value会成为这个文本框的默认值，如果是button的话，那value就是按钮的内部文本。

　　　　hidden：用来存放一个数据，但是这个数据不方便用户直接看到，就把这个数据存放到hidden中。

　　　　2.下拉框　　　　　　

<select>
    <option>男</option>
    <option>女</option>
</select>

默认情况下下拉框的默认选项是第一个，如果要让不是第一个选项成为默认值的话，那么只需要设置selected=”selected”

　　　　3.文本域

<textarea></textarea>

可以用来输入一些文本。

注意：如果表单元素脱离了form标签，那么这些元素的作用不大。

　　最重要的form标签终于来了！

<form></form>

form标签是用来将form标签包含的内容提交到指定的页面（action属性后面指定的页面）中去的。如果要通过form进行提交操作，那么页面上必须用<input type=”submit” />。注意：如果表单元素中的参数需要提交的话，那么表单元素一定要有一个属性：name

Action:设置表单的提交参数的路径。

注意：如果一个表单元素想要提交那么这个元素必须要一个name属性。

Method:当前的请求方式：

当前的主流请求方式有两种：

Get:将要传递的参数放在url上面。（安全隐患）

Post:将要传递的参数放在请求报文体中。（如果是一个正常的网站，那将来这个参数在url上面是看不到的，参数会在请求报文中）

标签：

相关文章