HTML-案例-注册页面，CSS-概述

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

好处：

　　功能强大

　　将内容展示和样式控制分离

　　　　降低耦合度，解耦

　　　　让分工协议更容易

　　　　提高开发效率