前端基础-html 列表标签,表格标签,表单标签

时间 2019-12-07

标签前端基础 html 列表标签表格表单栏目 HTML 繁體版

原文原文链接

1、列表标签php

一、ul（无序列表）标签html

ul（unordered list）无序列表，ul下的子元素只能是li（list item），以下示例：html5

    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>

总结：python

　　1）li不能单独存在，必须包裹在ul里面；反过来讲，ul的“儿子”不能是别的东西，只能是li；浏览器

　　2）列表之间是能够嵌套的（li是一个容器级标签，li里面什么都能放。甚至能够再放一个ul）；安全

　　3）type属性html4.01中已废弃，html5不支持；服务器

二、ol（有序列表）标签app

ol（ordered list）有序列表，ol下的子元素只能是li，以下示例：post

    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

总结：google

1）ol和ul就是语义不同，怎么使用都是同样的；

2）type和start属性html4.01中已废弃，html5不支持；

3）ol这个东西用的很少，若是想表达顺序，你们通常也用ul；以下示例：

   <ul>
        <li>1. 第一项</li>
        <li>2. 第二项</li>
        <li>3. 第三项</li>
    </ul>

三、dl（定义列表）标签

dl（definition list）没有属性，dl的子元素只能是dt和dd。

<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每个项目/名字）一块儿使用。以下示例：

    <dl>
        <dt>站点信息</dt>
        <dd>意见反馈</dd>
        <dd>关于咱们</dd>
        <dd>免责声明</dd>
        <dd>文章归档</dd>
    </dl>

       或者：

    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>

总结：

1）dt（definition title）列表的标题，这个标签是必须写的；

2）dd（definition description）列表的列表项，若是不须要它，能够不加；

3）定义列表用法很灵活，能够一个dt配多个dd，也可让每个dl里只有一个dt和dd；

　　　　4）dt，dd都是容器级标签，想放什么均可以，因此如今应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）；

2、table标签

表格标签用<table>表示，一个表格<table>是由每行<tr>组成的，每行是由<td>或者<th>组成的，因此咱们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。以下表格示例：

    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

1）单元格的合并

若是要将两个单元格合并，那确定就要删掉一个单元格。

横向合并：colspan，例如colspan=”2”表示当前单元格在水平方向上要占据两个单元格的位置。

纵向合并：rowspan，例如rowspan=”2”表示当前单元格在垂直方向上占据两个单元格的位置。

    <table border="1">
        <tr>
            <th colspan="2">userinfo</th>
        </tr>
        <tr>
            <td >First Name:</td>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <td rowspan="2">Telephone:</td>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>

2）<caption>：表格的标题，使用时和<tr>标签并列，以下示例：　　

    <table border="1">
       <caption>Monthly savings</caption>
       <tr>
           <th>Month</th>
           <th>Savings</th>
       </tr>
       <tr>
           <td>January</td>
           <td>$100</td>
       </tr>
    </table>

3）表格的<thead>标签、<tbody>标签、<tfoot>标签

这三个标签有与没有的区别：

a、若是写了，那么这三部分的代码顺序能够任意，浏览器显示的时候仍是按照thead、tbody、tfoot的顺序依次来显示内容。若是不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

b、当表格很是大内容很是多的时候，若是用thead、tbody、tfoot标签的话，那么数据能够边获取边显示。若是不写，则必须等表格的内容所有从服务器获取完成才能显示出来。

3、form表单（结合js用）

表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写和选择的。

属性：

　　　　1）action：指定表单数据的处理程序，通常是PHP，如：action=”login.php”；

　　2）method：表单数据的提交方式，通常取值：get（默认）和post；

　　form标签里边的action属性和method属性后面再详细介绍，如今稍微了解一下：action属性就是表示将表单提交到哪里。method属性表示用什么http方法提交，有get、post两种。

1、get方式：

　　将表单数据，以“name=value”形式追加到action指定的处理程序的后面，二者间用“？”隔开，每个表单的“name=value”间用“&”号隔开。

　　特色：只适合提交少许信息，而且不太安全（不要提交敏感数据），url中能看到提交的数据，提交的数据类型只限于ASCII字符。

2、post方式：

　　将表单数据直接（隐藏，url中不显示）发送到action指定的处理程序。post发送的数据url不可见。action指定的处理程序能够获取到表单数据。

　　特色：能够提交海量信息，相对来讲安全一些，提交的数据格式是多样的（word、excel、rar、img）。

3、enctype：

表单数据的编码方式（加密方式），取值能够是：application/x-www-form-urlencoded、multipart/form-data。enctype只能在POST方式下使用。例如：

(1) Application/x-www-form-urlencoded：默认加密方式，除了上传文件以外的数据均可以；

(2) Multipart/form-data：上传附件时，必须使用这种编码方式；

4、<input>：输入标签（文本框）（*****）

用于接收用户输入，例如：<input type=”text” />

属性：

　　　　a、type=“属性值”：

(1) text（默认）：文本类型；

(2) password：密码类型；

(3) radio：单选按钮，名字相同的按钮做为一组进行单选（单选按钮，天生是不能互斥的，若是想互斥，必需要有相同的name属性。name就是“名字”）；

(4) checkbox：多选按钮，名字相同的按钮做为一组进行选择；

　　　　　　(5) checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，能够用这个属性。属性值也是checked，能够省略；

(6) hidden：隐藏框，在表单中包含不但愿用户看见的信息；

(7) button：普通按钮，结合js代码进行使用；

(8) submit：提交按钮，传送当前表单的数据给服务器或其余程序处理。这个按钮不须要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去；

(9) reset：重置按钮，清空当前表单的内容，并设置为最初的默认值；

(10) image：图片按钮，和提交按钮的功能彻底一致，只不过图片按钮能够显示图片；

(11) file：文件选择框；

　　　　　　　　提示：若是要限制上传文件的类型，须要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

　　　　b、name：表单的名称，用于JS来操做或控制表单时使用；

c、value=”内容”：文本框里的默认内容（已经被填好了的）；

d、id：表单的名称，用于JS来操做或控制表单时使用；

e、size="50"：表示文本框内能够显示五十个字符，一个英文或一个中文都算一个字符；

g、readonly：文本框只读，不能编辑。由于它的属性值也是readonly，因此属性值能够不写。

用了这个属性以后，在google浏览器中，光标点不进去；在IE浏览器中，光标能够点进去，可是文字不能编辑；

h、disabled：文本框只读，不能编辑，光标点不进去。属性值能够不写；

5、<label>标签

咱们先来看这样一段代码：

<input type="radio" name="sex" /> 男

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

　　对于上面这样的单选框，咱们只有点击那个单选框（小圆圈）才能够选中，点击“男”、“女”这两个文字时是没法选中的；因而，label标签派上了用场。

　　本质上来说，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。咱们能够经过label把汉字包裹起来。

　　解决方法以下：

<input type="radio" name="sex" id="nan" value=”man” /><label for="nan">男</label>
　　<input type="radio" name="sex" id="nv" value=”women” /><label for="nv">女</label>

　　上方代码中，input元素要有一个id，而后label标签有一个for属性，和input标签的id相同，那么这个label和input就有绑定关系了。任何表单元素都有label。

6、<select>：下拉列表标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl同样，都是组标签。

属性：

<select>标签的属性：

(1) multiple：能够对下拉列表中的选项进行多选。没有属性值；

(2) size="2"：若是属性值大于2，则列表为滚动视图。默认属性值为1，即下拉视图；

<option>标签的属性：

(1) selected：预选中。没有属性值。

代码示例：

    <select multiple="" size=”2”>
        <option>小学</option>
        <option>初中</option>
        <option selected="">高中</option>
        <option selected="">大学</option>
        <option>研究生</option>
    </select>

7、<textarea>标签：多行文本输入框

属性：

name：提交给服务器的key值；

　　　　value：提交给服务器的值；

　　　　rows="4"：指定文本区域的行数；

　　　　cols="20"：指定文本区域的列数；

　　　　readonly：只读；

代码示例：

4、快捷键

一、emeet语法：

！+tab

ul>li*5 + tab

div>p*3 + tab

div#main + tab

div.login + tab