html 无序标签有序标签及表单

## 列表标签

### 1、无序列表`

    `,无序列表中的每一项是`
  • `

    ```html

         

    • 默认1
    •    

    • 默认2
    •    

    • 默认3

    ```

    **属性:**

     - `type="属性值"`。属性值: `disc`(实心原点,默认),`square`(实心方点),`circle`(空心圆)。

    列表之间是可以**嵌套**的。代码:

    ```html

     

         

    • 北京市

             

                   

      • 海淀区
      •        

         

    •  

    ```

    **li里面什么都能放,甚至可以再放一个ul**。

    ```css

    list-style-position: inside   /* 给 ul 设置这个属性后,将小圆点包含在 li 元素的内部 */

    ```

    ### 2、有序列表`

      `

      **属性:**

       - `type="属性值"`。属性值:1(阿拉伯数字,默认)、a、A、i、I。结合`start`属性表示`从几开始`。

      ```html

           

      1. 呵呵

           

      1. 哈哈

      ```

      ### 3、定义列表`

      `

      备注:dt、dd只能在dl里面

      ```html

         

      购物指南

         

              购物流程

              会员介绍

              生活旅行

         

      ```

      ## 表格标签:`

      `表示。

      一个表格`

      `是由每行``组成的,每行是由每个单元格`
      `组成的。

      ```html

         

             

             

         

      ```

      例如,3行4列的单元格:3个tr  4个td


       

      **`

      `的属性:** (记觉得重要的)

       - `border`:边框。像素为单位。

       - `style="border-collapse:collapse;"`:单元格的线和表格的边框线合并(表格的两边框合并为一条)

       - `bordercolor`:表格的边框颜色。

       - `cellpadding`:单元格内容到边的距离,像素为单位。设置属性`dir="rtl"`,指的是内容到右边那条线的距离。

       - `cellspacing`:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0

       - `bgcolor="#99cc66"`:表格的背景颜色。

       - `background="路径src/..."`:背景图片。

       - `bordercolorlight`:表格的上、左边框,以及单元格的右、下边框的颜色

       - `bordercolordark`:表格的右、下边框,以及单元格的上、左的边框的颜色

       - `dir`:公有属性,单元格内容的排列方式(direction)。 可以 取值:`ltr`:从左到右(left to right,默认),`rtl`:从右到左(right to left)

      单元格带边框的效果:

      ```css

      style="border-collapse:collapse;"

      ```


       

      ### `

      `:行

      **属性:**

       - `dir`:公有属性,设置这一行单元格内容的排列方式。可以取值:

          - `ltr`:从左到右(left to right,默认)

          - `rtl`:从右到左(right to left)

       - `align="center"`:一行的内容水平居中显示,取值:left、center、right

       - `valign="center"`:一行的内容垂直居中,取值:top、middle、bottom

      ### `

      `:单元格

      **属性:**

       - `align`:内容的横向对齐方式。属性值:left right center。

       - `valign`:内容的纵向对齐方式。属性值:top middle bottom

       - `background`:设置这个单元格的背景图片。

      ### 单元格的合并

      单元格的属性:

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

      - `rowspan`:纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。


       

      ### `

      `:加粗的单元格。相当于`` + ``

      ### `

      `:表格的标题。使用时和`tr`标签并列

       - 属性:`align`,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom


       

      ## 表单标签:`

      `表示,用于与服务器的交互。

      **属性:**

       - `name`:表单的名称,用于JS来操作或控制表单时使用;

       - `id`:表单的名称,用于JS来操作或控制表单时使用;

       - `action`:指定表单数据的处理程序,一般是PHP,如:action=“login.php”

       - `method`:表单数据的提交方式,一般取值:get(默认)和post

      注意:表单和表格嵌套时,是在``标记中套`

      `标记。


       

      ### ``:输入标签(文本框)'用于接收用户输入。

      ```html

      ```

      **属性:**

      - **`type="属性值"`**:文本类型。属性值可以是:

          - `text`(默认)

          - `password`:密码类型

          - `radio`:单选按钮,如果想互斥,必须要有相同的name属性。

          - `checkbox`:多选按钮,**name 属性值相同的按钮**作为一组进行选择。

          - `checked`:将单选按钮或多选按钮默认处于选中状态。当``标签设置为`type="radio"`或者`type=checkbox`时,可以用这个属性。

          - `hidden`:隐藏框,在表单中包含不希望用户看见的信息

          - `button`:普通按钮,结合js代码进行使用。

          - `submit`:提交按钮,传送当前表单的数据给服务器或其他程序处理。

          - `reset`:重置按钮,清空当前表单的内容,并设置为最初的默认值

          - `image`:图片按钮。

          - `file`:文件选择框。

       - **`value="内容"`**:文本框里的默认内容(已经被填好了的)

       - `size="50"`:表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。

      注意**size属性值的单位不是像素哦**。

       - `readonly`:文本框只读,不能编辑。

       - `disabled`:文本框只读,不能编辑,光标点不进去。属性值可以不写。


       

      ```html

         

              姓名:逗比

              昵称:

              名字:

              密码:

              性别:

                   

              爱好:吃饭

             

             

             

             

         

      ```

      ### `

                 

                 

             

             


             

             


             

             


         

      ```

      ### `

         

      ```

      ### `

      ```html

      ```

      ```html

      ```




       

      你可能感兴趣的:(前端,javascript,开发语言)