实战简单的注册表单以及选择器的认识

实战简单的注册表单以及选择器的认识

简单的注册表单实战

第一步创建一个html文件,确定我们需要的注册内容

这里以常用的注册用户名 注册密码 注册邮箱 注册性别 兴趣爱好 为例

1,首先创建一个基础的框架fieldset

图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>用户注册表单</title>
  8. </head>
  9. <body>
  10. <fieldset>
  11. <legend>用户注册表单</legend>
  12. <div>注册用户名</div>
  13. <div>注册密码</div>
  14. <div>注册邮箱</div>
  15. <div>注册性别</div>
  16. <div>兴趣爱好</div>
  17. </fieldset>
  18. </body>
  19. </html>
2,利用label+input控件实现每一项的功能

其中inputtype属性对输入的内容会有一些预设的值
比如注册用户名我们只需要用到默认的text文本值,而密码需要用的是password内置值,邮箱需要用到email内置值,不同的type内置值可以参考html手册

图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>用户注册表单</title>
  8. </head>
  9. <body>
  10. <fieldset>
  11. <legend>用户注册表单</legend>
  12. <div>
  13. <label for="name">注册用户名:<input type="text" /></label>
  14. </div>
  15. <div>
  16. <label for="password">注册密码:<input type="password" /></label>
  17. </div>
  18. <div>
  19. <label for="email">注册邮箱:<input type="email" /></label>
  20. </div>
  21. <div>
  22. <label for="sex">注册性别:<input type="radio" /></label>
  23. </div>
  24. <div>
  25. <label for="love">兴趣爱好:<input type="checkbox" /></label>
  26. </div>
  27. </fieldset>
  28. </body>
  29. </html>

这个样子看着是比较丑,我们在通过各种内置属性修改美化一下,大家可以参考一下html手册
我这里修改的最终版是这样的,加了两个按钮就更像样了。
图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <fieldset>
  11. <legend>用户注册</legend>
  12. <form action="#" method="get">
  13. <div>
  14. <label for="name"
  15. >注册用户:<input
  16. type="text"
  17. name="name"
  18. id="name"
  19. autofocus
  20. required
  21. placeholder="请输入用户名" /></label
  22. ><br />
  23. <label for="password"
  24. >注册密码:
  25. <input
  26. type="password"
  27. name="password"
  28. id="password"
  29. required
  30. placeholder="请输入密码" /></label
  31. ><br />
  32. <label for="email"
  33. >注册邮箱:
  34. <input
  35. type="email"
  36. name="email"
  37. id="email"
  38. placeholder="joa@qq.com"
  39. /> </label
  40. ><br />
  41. <label for="whatmen"
  42. >身份性别: <input type="radio" name="xb" id="men" />
  43. <input type="radio" name="xb" id="women" />
  44. <input type="radio" name="xb" id="whatmen" checked />保密 </label
  45. ><br />
  46. <label for="love"
  47. >兴趣爱好:
  48. <input type="checkbox" name="love" id="game" checked />游戏
  49. <input type="checkbox" name="love" id="lookmov" checked />看电影
  50. <input type="checkbox" name="love" id="ganfanr" />吃饭人
  51. <input type="checkbox" name="love" id="gogogo" />跑步 </label
  52. ><br />
  53. <button>注册</button>
  54. <button>登录</button>
  55. </div>
  56. </form>
  57. </fieldset>
  58. </body>
  59. </html>

选择器的简单认识

基础选择器

1.标签选择器

利用标签选择器选择li标签的内容并更改背景色

图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. li {
  11. background-color: blue; /*利用标签选择器选择Li标签并添加背景色蓝色*/
  12. }
  13. </style>
  14. <body>
  15. <ul>
  16. <div>这是未选中的div标签内容</div>
  17. <li>这是选中的Li标签内容</li>
  18. <li>这是选中的Li标签内容</li>
  19. <li>这是选中的Li标签内容</li>
  20. </ul>
  21. </body>
  22. </html>

2.元素选择器

利用元素选择器选择ID为xzid的li标签并更改背景色为红色,利用元素选择器选择class为xzclass的li标签并更改背景色为绿色

图示

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. li[id="xzid"] {
  11. background-color: red; /*利用元素选择器选择ID为`xzid`的li标签并更改背景色为红色*/
  12. }
  13. /* 或者
  14. li#xzid{
  15. background-color: red;
  16. } */
  17. li[class="xzclass"] {
  18. background-color: green; /*利用元素选择器选择class为`xzclass`的li标签并更改背景色为绿色*/
  19. }
  20. /* 或者
  21. li.class{
  22. background-color: green;
  23. }*/
  24. </style>
  25. <body>
  26. <ul>
  27. <li id="xzid">这是选中ID为'xzid'的Li标签内容</li>
  28. <li id="bxzid">这是未选中ID为‘buzid’的Li标签内容</li>
  29. <li class="xzclass">这是选中CLASS为'xzclass'的Li标签内容</li>
  30. <li class="bxzclass">这是未选中class为'bxzclass'的li标签内容</li>
  31. </ul>
  32. </body>
  33. </html>
!注意:优先级排序为ID>class>tag

上下文选择器

1.后代选择器空格(选中所有ul标签的子孙后代)
图示:

代码示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. ul li {
  11. background-color: greenyellow; /*后代选择器,选择所有ul标签的后代并更改背景色为浅绿色*/
  12. }
  13. </style>
  14. <body>
  15. <ul>
  16. <li>后代儿子</li>
  17. <li>
  18. 后代儿子
  19. <ul>
  20. <li>后代孙子</li>
  21. <li>后代孙子</li>
  22. <li>后代孙子</li>
  23. </ul>
  24. </li>
  25. <li>后代儿子</li>
  26. </ul>
  27. </body>
  28. </html>

2,子选择器>(选中所有ul标签的儿子不选中孙子级别)
图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. ul li {
  11. background-color: indianred; /*后代选择器,选择所有ul标签的后代并更改背景色为粉色*/
  12. }
  13. body > ul > li {
  14. background-color: yellow; /*子选择器,选择ul标签的子代标签并更改背景色为黄色*/
  15. }
  16. </style>
  17. <body>
  18. <ul>
  19. <li>后代儿子</li>
  20. <li>
  21. 后代儿子
  22. <ul>
  23. <li>后代孙子</li>
  24. <li>后代孙子</li>
  25. <li>后代孙子</li>
  26. </ul>
  27. </li>
  28. <li>后代儿子</li>
  29. </ul>
  30. </body>
  31. </html>

3.同级相邻选择器+(选择与class属性为class的标签相邻的一个标签)
图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. .class + li {
  11. background-color: yellowgreen;
  12. }
  13. </style>
  14. <body>
  15. <ul>
  16. <li>后代儿子</li>
  17. <li>后代儿子</li>
  18. <li>后代儿子</li>
  19. <li class="class">选择属性的标签</li>
  20. <li>相邻的标签</li>
  21. <li>后代儿子</li>
  22. </ul>
  23. </body>
  24. </html>

4.同级所有选择器~(选择与class属性为class的标签相邻同级的素有标签)
图示:

代码实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. .class ~ li {
  11. background-color: yellowgreen;
  12. }
  13. </style>
  14. <body>
  15. <ul>
  16. <li>后代儿子</li>
  17. <li>后代儿子</li>
  18. <li>后代儿子</li>
  19. <li class="class">选择属性的标签</li>
  20. <li>相邻的所有标签</li>
  21. <li>相邻的所有标签</li>
  22. </ul>
  23. </body>
  24. </html>

> 文章的一些细节没有进行描述,标签元素参考html手册不懂的可以留言,我会了解后给你解释的喔~joa,天天爱学习。