当前位置：首页 > news >正文

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

news 2025/8/3 1:57:23

一、HTML表格

二、表单

三、布局标签

四、CSS

五、选择器

一、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>

实现效果：