HTML-案例-注册页面
<!-- 定义表单from, post:获取#号--> <form action="#" method="post"> <!-- 边框1 集中,宽度500 --> <table border="1" align="center" width="500"> <tr><!-- 定义行--> <td><label for="username">用户名</label> </td><!-- 表头单元格 点击用户名也可以选中框子--> <td><input type="test" name="username" id="username"></td><!-- 表头单元格--> </tr> <tr><!-- 定义行--> <td><label for="password">密码</label> </td><!-- 表头单元格--> <td><input type="password" name="password" id="password"></td><!-- 表头单元格--> </tr> <tr><!-- 定义行--> <td><label for="username">Email</label> </td><!-- 表头单元格--> <td><input type="email" name="email" id="email"></td><!-- 表头单元格--> </tr> <tr><!-- 定义行--> <td><label for="name">姓名</label> </td><!-- 表头单元格--> <td><input type="test" name="name" id="name"></td><!-- 表头单元格--> </tr> <tr><!-- 定义行--> <td><label for="tel">手机号</label> </td><!-- 表头单元格--> <td><input type="test" name="tel" id="tel"></td><!-- 表头单元格--> </tr> <tr><!-- 定义行--> <td><label>性别</label> </td><!-- 表头单元格--> <td><input type="radio" name="gender" id="male"> 男 <input type="radio" name="gender" id="female"> 女 </td><!-- 表头单元格 单选框,选中后,展示gender--> </tr> <tr><!-- 定义行--> <td><label for="birthday">出生日期</label> </td><!-- 表头单元格--> <td><input type="date" name="birthday" id="birthday"></td><!-- 表头单元格 日期类单元格--> </tr> <tr><!-- 定义行--> <td><label for="checkcode">验证码</label> </td><!-- 表头单元格--> <td><input type="test" name="checkcode" id="checkcode"> <img src="img/verify_code.jpg"> <!-- 验证码--> </td><!-- 表头单元格--> </tr> <tr><!-- 定义行 --> <td colspan="2" align="center"><input type="submit" value="注册"></td><!--合并列,居中 表头单元格,注册按钮--> </tr> </table> </form>
CSS-概述
概念:
CSS指层叠样式表(Sascading Style Sheets)
层叠:多个样式可以作用在同一个html的元素上,同时生效
什么是CSS
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中。是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为1
好处:
功能强大
将内容展示和样式控制分离
降低耦合度,解耦
让分工协议更容易
提高开发效率
标签:层叠,样式,HTML,样式表,CSS,页面 From: https://www.cnblogs.com/yuzong/p/16813978.html