HTML5ţͱԪصʹ

20200828 01:05:21Ķ23 / ѧϰ / ǰsearchϰ

HTML5 ţԪءԪ

Ԫؼ

 <table> ǩ塣ÿУ <tr> ǩ壩ÿָΪɵԪ <td> ǩ壩ĸ td ָtable dataԪݡԪsureıpictureб䡢ˮƽߡȵȡ

Ԫصʹ

  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>1</title>
  7. </head>
  8. <body>
  9. <!-- ʽչʾĹ -->
  10. <!-- widthñ,borderӱñϸֵ,alignñˮƽУcellspacingõԪ߿϶cellpaddingõԪڱ߾ -->
  11. <table
  12. border="1"
  13. cellspacing="0"
  14. cellpadding="0"
  15. width="500"
  16. align="center"
  17. >
  18. <!-- colgroup:еһб -->
  19. <colgroup>
  20. <!-- col:ռλʹûʽҲʡ,sureΪеԪʽ,Ϊclass -->
  21. <col bgcolor="gray" />
  22. <col bgcolor="springgreen" />
  23. <col bgcolor="#00ffff" />
  24. <col bgcolor="#ff33ff" />
  25. <col bgcolor="#008765" />
  26. <col bgcolor="yellow" />
  27. </colgroup>
  28. <!-- captionԪض -->
  29. <caption>
  30. Ʒ
  31. </caption>
  32. <!-- thead:ͷ -->
  33. <thead>
  34. <tr bgcolor="white">
  35. <!-- th:tdĽplusprovideкӴʽ -->
  36. <th></th>
  37. <th>Ʒ</th>
  38. <th></th>
  39. <th></th>
  40. <th>ۿ</th>
  41. <th>ܼ</th>
  42. </tr>
  43. </thead>
  44. <!-- tbody:壬ʱĬϼ -->
  45. <tbody>
  46. <tr>
  47. <td>1</td>
  48. <td></td>
  49. <td>100</td>
  50. <td>400</td>
  51. <td>0.8</td>
  52. <td>32000</td>
  53. </tr>
  54. <tr>
  55. <td>2</td>
  56. <td>ֻ</td>
  57. <!-- ԪֱϲrowspanϲԪ -->
  58. <td rowspan="2">30</td>
  59. <td>1000</td>
  60. <td>0.7</td>
  61. <td>21000</td>
  62. </tr>
  63. <tr>
  64. <td>3</td>
  65. <td></td>
  66. <td>6000</td>
  67. <td>0.8</td>
  68. <td>144000</td>
  69. </tr>
  70. </tbody>
  71. <tfoot>
  72. <tr>
  73. <!-- ԪˮƽϲcolspanϲԪ -->
  74. <td colspan="0">ϼ:</td>
  75. <td colspan="4" bgcolor="gray"></td>
  76. <td>197000</td>
  77. </tr>
  78. </tfoot>
  79. </table>
  80. </body>
  81. </html>

effectͼ

Ԫ


Ԫؼ

HTML user web վӦó֮佻main֮һusertake web վԪuserstay,磺ıinputı(textarea)бѡ(radio-buttons)ѡ(checkboxes)ȵȡamongı type Ҳ廯Ĺ

Ԫصʹ

  1. <body>
  2. <div style="margin: 100px auto 0 auto;">
  3. <h3>userע</h3>
  4. <!-- action:ύserviceַ磺login.php -->
  5. <!-- GETPOSTύķʽGETΪԼԵNowURL -->
  6. <form action="login.php" method="post">
  7. <!-- fieldset:ڶԱеĿԪؽз -->
  8. <fieldset>
  9. <!-- legend:expressfieldsetݱõԪ -->
  10. <legend></legend>
  11. <div>
  12. <!-- ı -->
  13. <label for="userName">user:</label>
  14. <input
  15. type="text"
  16. id="userName"
  17. value=""
  18. placeholder="4ַ"
  19. required
  20. autofocus
  21. />
  22. </div>
  23. <div>
  24. <!-- -->
  25. <label for="pwd">:</label>
  26. <input
  27. type="password"
  28. name="password"
  29. id="pwd"
  30. widthmin="8"
  31. placeholder="Ӧ8λ"
  32. required
  33. />
  34. </div>
  35. <!-- required Ϊֵԣ涨Ϊ -->
  36. <div>
  37. <!--radio:ѡť ÿťؼnameԱһ-->
  38. <label for="secret">Ա</label>
  39. <input type="radio" name="gender" id="male" /><label for="male"
  40. ></label
  41. >
  42. <input type="radio" name="gender" id="female" /><label for="female"
  43. >Ů</label
  44. >
  45. <input type="radio" name="gender" id="secret" checked /><label
  46. for="secret"
  47. ></label
  48. >
  49. </div>
  50. <div>
  51. <!-- checkbox:ѡťԺ͵ѡ -->
  52. <lable for="">:</lable>
  53. <input type="checkbox" name="hobby[]" id="code" /><label for="code"
  54. ></label
  55. >
  56. <input type="checkbox" name="hobby[]" id="sport" /><label for="sport"
  57. >˶</label
  58. >
  59. <input type="checkbox" name="hobby[]" id="movie" /><label for="movie"
  60. >film</label
  61. >
  62. </div>
  63. <div>
  64. <!-- file:ļϴļ -->
  65. <label for="user_img">ͷ</label>
  66. <input
  67. type="file"
  68. name="user_img"
  69. id="user_img
  70. "
  71. />
  72. <!-- hidden: -->
  73. <!-- ļСserviceο,thisҪҲuserprovide -->
  74. <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  75. <!-- useridcommonlyͨ -->
  76. <input type="hidden" name="user_id" value="1024" />
  77. </div>
  78. <div>
  79. <!-- datalist:Ԥ帴Ͽ/б -->
  80. <label for="my_course">γ̣</label
  81. ><input type="text" name="" id="my_course" list="course" />
  82. <!-- takeıба,ͨılistбidа -->
  83. <datalist id="course">
  84. <option value="html5">html5</option>
  85. <option value="css3">css3</option>
  86. <option value="javascript">javascript</option>
  87. <option value="vue.js">vue.js</option>
  88. <option value="php">php</option>
  89. <option value="laravel">laravel</option>
  90. </datalist>
  91. </div>
  92. <!-- ı -->
  93. <div>
  94. <label for="email"></label
  95. ><input type="email" name="my_email" id="email" />
  96. </div>
  97. <!-- time -->
  98. <div>
  99. <label for="birthday">գ</label
  100. ><input type="date" name="my_birthday" id="birthday" />
  101. </div>
  102. <!-- ֵ -->
  103. <div>
  104. <label for="age">:</label
  105. ><input type="number" name="my_age" min="18" id="age" />
  106. </div>
  107. <!-- ɫ -->
  108. <div>
  109. <label
  110. for="
  111. color"
  112. >ɫ</label
  113. ><input type="color" name="my_color" id="color" />
  114. </div>
  115. </fieldset>
  116. <fieldset>
  117. <legend>ѡ</legend>
  118. <div>
  119. <label style="display: block;" for="self">introduce</label
  120. ><textarea name="self" id="self" cols="40" rows="10"></textarea>
  121. </div>
  122. </fieldset>
  123. <button type="submit"></button>
  124. </form>
  125. </div>
  126. </body>

effectͼ

Ԫ

״̬ϸ

ʦдҵ, ̫
  • Ϣ
    ѧϰ
    2
    ˿
    0
    comment
    0
    
    65
    ֣1
    P4