目录

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

       <!--th 加粗居中>

       <th>序号</th>

       <th>姓名</th>

       <th>性别</th>

       <th>年</th>

       <th>班级</th>

   </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>

       <!--th 加粗居中>

       <th>序号</th>

       <th>姓名</th>

       <th>性别</th>

       <th>年</th>

       <th>班级</th>

   </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>

        <!--<td>1班</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>

        <!-- <td></td>

        <td></td>

        <td></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>

例：

<code><form action="https://www.baidu.com/">code>

<p>

<span>昵称:</span>

<input type="text" name="nickname" value="one" id="nick"> code>

<label for="nick"></label>code>

</p>

<p>

<span>年龄:</span>

<input type="text" name="age" id="old">code>

<label for="old"></label>code>

</p>

<p>

<span>性别:</span>

<input type="radio" name="sex" value="1" id="man">code>

<label for="man">男</label>code>

<input type="radio" name="sex" value="0" id="woman">code>

<label for="woman">女</label>code>

</p>

<p>

<span>城市:</span>

<input type="radio" name="city" value="three" id="fu">code>

<label for="fu">福州</label>code>

<input type="radio" name="city" value="four" id="zz">code>

<label for="zz">漳州</label>code>

</p>

<p>

<input type="submit" name="submit" value="提交">code>

<input type="reset" name="reset" value="取消">code>

</p>

</form>

实现效果：

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

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

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

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