Blogger Information
Blog 17
fans 0
comment 0
visits 8280
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
想躺平的第三天
想做一个躺平的程序员
Original
430 people have browsed it

实现表单的登录

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>表单练习</title>
  7. <link rel="stylesheet" href="">
  8. </head>
  9. <style>
  10. h2{
  11. color: blue;
  12. }
  13. </style>
  14. <body>
  15. <div>
  16. <!-- label.for=input.id 绑定 -->
  17. <label for="username">用户名:</label>
  18. <!-- autofocus布尔属性 自动获取焦点 -->
  19. <!-- required布尔属性 必须填写 -->
  20. <input type="text" name="username" id="username" autofocus required>
  21. <br>
  22. <label for="psw">密码:</label>
  23. <!-- required布尔属性 必须填写 -->
  24. <input type="password" name="password" id="psw" required>
  25. <br>
  26. <label for="my-email">邮箱</label>
  27. <!-- required布尔属性 必须填写 -->
  28. <input type="email" id="my-email" name="email" required>
  29. </div>
  30. <div>
  31. <label for="male">性别:</label>
  32. <!-- checked布尔属性 意思是: 选中 -->
  33. <input type="radio" name="sex" id="male" checked><label for="male"></label>
  34. <input type="radio" name="sex" id="female"><label for="female"></label>
  35. </div>
  36. <div>
  37. <label for="lq">爱好</label>
  38. <!-- checkbox : 复选框 -->
  39. <!-- 复选框 name是数组 因为想要发送到后端中,必须是数组 -->
  40. <!-- checked布尔属性 -->
  41. <input type="checkbox" name="select[]" id="sy" checked><label for="sy">摄影</label>
  42. <input type="checkbox" name="select[]" id="lq"><label for="lq">篮球</label>
  43. <input type="checkbox" name="select[]" id="zq"><label for="zq">足球</label>
  44. <input type="checkbox" name="select[]" id="yx"><label for="yx">游戏</label>
  45. </div>
  46. </body>
  47. </html>

<a>+<iframe> 后台架构实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!-- a标签 超链接 -->
  10. <!-- a.target属性规定在哪里打开链接文档 -->
  11. <a href="https://map.baidu.com/@12609384.2,2631450.580000001,12z" target="myname">去躺平的世界</a>
  12. <!-- iframe.name=a.target -->
  13. <!-- iframe.name可以作为链接的目标 -->
  14. <iframe src="" frameborder="0" name="myname"></iframe>
  15. </body>
  16. </html>

css样式来源与优先级

第一种样式来源,既我们(程序员)自己定义的样式

第二种样式来源,既本身自带的css样式

css优先级

在上面这个图中我们可以看到 <p>标签并没有写css样式 color属性,但是可以看到 <p>标签的内容变成红色了, 也就是我们常见的继承属性

再看看下面的图片

在<p>标签中添加了css样式后,可以看到内容又变成了蓝色, 为什么div标签明明已经写了color,然后又在p标签中写color,内容会显示p标签中color呢?
这是因为css样式优先级 写在p标签内的css样式优先级大于div签内的css样式优先级

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post