HTML表格、表单、标签、CSS、选择器

live梨

已于 2024-08-11 23:39:59 修改

阅读量981

点赞数 8

文章标签： html css 前端

于 2024-08-11 23:38:32 首次发布

本文链接：https://blog.csdn.net/2301_80034711/article/details/141107555

版权

一、HTML表格

table:表格

tr：行

td：单元格；rowspan:纵向合并相邻单元格；clospan：横向合并相邻单元格

th：单元格加粗居中

border：加上边框

cellspacing:边框与边框之间距离

cellpadding：控制边框大小

caption：表格标题

align：使表格居中

<table border="1" cellspacing="0" cellpadding="10" align="center">

   <caption>学生信息表</caption>

   <tr>

       

   <tr>

        <td>1</td>

        <td>小英</td>

        <td> 女</td>

        <td>18</td>

        <td>1班</td>

   </tr>

   

   <tr>

        <td>2</td>

        <td>a</td>

        <td> 女</td>

        <td>19</td>

        <td>1班</td>

   </tr>

   <tr>

        <td>3</td>

        <td>b</td>

        <td> 女</td>

        <td>20</td>

        <td>2班</td>

   </tr>

   <tr>

        <td>合计</td>

        <td>3人</td>

        <td></td>

        <td></td>

        <td></td>

</table>

实现效果：

将第5列两行的1班合并，将第5行的二三四五列的人数合并

<table border="1" cellspacing="0" cellpadding="10" align="center">

   <caption>学生信息表</caption>

   <tr>

       

   <tr>

        <td>1</td>

        <td>小英</td>

        <td> 女</td>

        <td>18</td>

        <td rowspan="2">1班</td>

   </tr>

   

   <tr>

        <td>2</td>

        <td>a</td>

        <td> 女</td>

        <td>19</td>

        （注释掉）

   </tr>

   <tr>

        <td>3</td>

        <td>b</td>

        <td> 女</td>

        <td>20</td>

        <td>2班</td>

   </tr>

   <tr>

        <td>合计</td>

        <td clospan="4">3人</td>

         （注释掉）

</table>

实现效果：

二、表单

1.常见：登录注册

form:表单

action:提交表单的输入值到目标地址

input: 输入标签，用于获取用户在网页中的键盘、鼠标输入

·placeholder:输入框中的提示文字

<input placeholder="请输入"></input>

·name：最终提交表单时，该项输入框的数据描述（例如传到网址上，就是？后面的参数值）

<form>

<input name="account"></input>

<input name="password"></input>

</form>

表示此表单中，分别有输入账号和密码的输入框

·value:输入框最终的【输入值/选中值/按钮文字】

<input value="123123">

label：点击到<label>时，会自动聚焦到其绑定的<input>标签

·for绑定<input>标签 id值

<label for="username">用户名</label>

<input id="username"></input>

disabled:禁止该<input>【输入/选择】

type:通过修改type的值，可以更改输入框的功能

·text：普通的文本输入框

<input type="text"> </input>

·password:密码输入框

<input type="password"></input>

·radio：单选框,

搭配checked: 默认选择；搭配disabled：禁止使用

<input type="radio" checked></input>

<input type="radio" disabled></input>

·checkbox：多选框

<input type="checkbox" checked></input>

<input type="checkbox" disabled></input>

·file：选择文件

<input type="file"> </input>

·submit：提交按钮

<input type="submit"></input>

·reset：重置按钮

<input type="reset"></input>

·button:普通按钮，需要写value值，按钮才有文字

<input type="button" value=" "></input>

例：

<form action="https://www.baidu.com/">
     
         <p>
            <span>昵称:</span>
            <input type="text" name="nickname" value="one" id="nick"> 
            <label for="nick"></label>
         </p>
         
         <p>
            <span>年龄:</span>
            <input type="text" name="age"  id="old">
            <label for="old"></label>
        </p>
        <p>
            <span>性别:</span>
            <input type="radio" name="sex" value="1" id="man">
            <label for="man">男</label>
            <input type="radio" name="sex" value="0" id="woman">
            <label for="woman">女</label>
        </p>
        <p>
            <span>城市:</span>
            <input type="radio" name="city" value="three" id="fu">
            <label for="fu">福州</label>
            <input type="radio" name="city" value="four" id="zz">
            <label for="zz">漳州</label>
        </p>
        <p>
            <input type="submit" name="submit" value="提交">
            <input type="reset" name="reset" value="取消">
        </p>
    </form>

实现效果：

2.多行文本<textarea> </textarea>

cols：规定初始显示的【列数】（以字为单位）

rows：规定初始显示的【行数】（以字为单位）

<textarea name="text" id=" " cols="10" rows="2"></textarea>

3.下拉选择框

select：下拉选择框容器

option：选项

<select id="taste">

<option value="1">微辣</option>

<option value="2">辣</option>

</select>

<label for="taste"></label>

例：

<p>
             <span>城市:</span>
             <select id="city">
                <option value="01">福州</option>
                <option value="02">漳州</option>
                <option value="03">厦门</option>
                <option value="04">泉州</option>
                <obtion value="05">宁德</obtion>
                <option value="06">莆田</option>
             </select>
             <label for="city">
             </label>
         </p>
         <p>  
                <textarea name="text" rows="20" cols="30">
                </textarea>
         </p>

实现效果：