Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > HTML常用元素的链接、列表、表格、表单小结
Blogger Information
Blog 18
fans 0
comment 0
visits 13384
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML常用元素的链接、列表、表格、表单小结
马晓宁
Original
949 people have browsed it

一.链接元素

<a href="http://www.baidu.com" target="_blank">百度搜索</a>
<a href="tel:1367111111">热线电话</a>

二.列表元素

1.无序列表

  1. <h4>水果</h4>
  2.  <ul>
  3.    <li>苹果</li>
  4.    <li>香蕉</li>
  5.    <li>葡萄</li>
  6.  </ul>

2.有序列表

  1.  <h4>家电数字列表：</h4>
  2.   <ol>
  3.     <li>电视</li>
  4.     <li>冰箱</li>
  5.     <li>洗衣机</li>
  6.     <li>微波炉</li>
  7.   </ol>
  8. <h4>用品字母列表：</h4>
  9.   <ol type="A">
  10.     <li>洗衣液 </li>
  11.     <li>肥皂</li>
  12.     <li>香皂</li>
  13.     <li>洗手液</li>
  14.   </ol>
  15. <h4>小写字母列表：</h4>
  16.   <ol type="a">
  17.     <li>苹果</li>
  18.     <li>香蕉</li>
  19.     <li>柠檬</li>
  20.     <li>桔子</li>
  21.   </ol>
  23.  自定义列表
  24.   <dl>
  25.    <dt>汽车品牌</dt>
  26.    <dd>奥迪</dd>
  27.  </dl>

三.表格元素

  1. <body>
  2.   <table border="1" cellpadding="5" cellspacing="0" width="500" h
  3.     <colgroup>
  4.      <col bgcolor="yellow">
  5.      <col bgcolor="red">
  6.      <col bgcolor="pink" span="2">
  7.      <col bgcolor="grey">
  8.    </colgroup>
  9.  <caption style="font-size: 2rem;margin-bottom: 10px;">医院人员表   </caption>
  10.   <thead>
  11.     <tr bgcolor="lightblue">
  12.       <th>部门</th>
  13.       <th>姓名</th>
  14.       <th>年龄</th> 
  15.       <th>学历</th>  
  16.       <th>籍贯</th>
  17.     </tr>
  18.   </thead>
  19.   <tr>
  20.     <td rowspan="3" align="center" >内科</td>
  21.       <td>张三</td>
  22.       <td>25</td>
  23.       <td>本科</td>
  24.       <td>河北</td>
  25.    </tr>
  26.     <tr>
  27.         <td>王五</td>
  28.         <td>27</td>
  29.         <td>本科</td>
  30.         <td>山东</td>
  31.       </tr>
  32.       <tr>
  33.         <td>李四</td>
  34.         <td>30</td>
  35.         <td>博士</td>
  36.         <td>辽宁</td>
  37.       </tr>
  38.       <tr>
  39.         <td rowspan="3" align="center">外科</td>
  40.           <td>林某</td>
  41.           <td>30</td>
  42.           <td>研究生</td>
  43.           <td>河北</td>
  44.         </tr>
  45.         <tr>
  46.           <td>马某</td>
  47.           <td>32</td>
  48.           <td>博士</td>
  49.           <td>山东</td>
  50.         </tr>
  51.         <tfoot>
  52.           <tr bgcolor="wheat">
  53.           <td>备注：</td>
  54.           <td colspan="4">人员信息</td>
  55.         </tr>
  56.       </tfoot>
  57.    </table>
  58. </body>

四.表单元素

  1. <body>
  2. <h3>用户注册</h3>
  3. <form action="">
  4.   <section>
  5.     <label for="username">用户名：</label>
  6.     <input
  7.       type="text"
  8.       id="username"
  9.       name="username"
  10.       maxlength="20"
  11.       placeholder="不少于6位"
  12.       required
  13.       autofocus
  14.     />
  15.   </section>
  16.   <section>
  17.     <label for="password">密 码：</label>
  18.     <input
  19.       type="password"
  20.       id="password"
  21.       name="password"
  22.       placeholder="不少于8位"
  23.       required
  24.       size="15"
  25.     />
  26.   </section>
  27.   <!----单选框按钮 ----->
  28.   <section>
  29.     <label for="">性别：</label>
  30.     <div class="box">
  31.       <input type="radio" name="gender" id="male" value="male" /><label
  32.         for="male"
  33.         >男
  34.       </label>
  35.       <input type="radio" name="gender" id="female" value="female" /><label
  36.         for="female"
  37.         >女 </label
  38.       ><input
  39.         type="radio"
  40.         name="gender"
  41.         id="secret"
  42.         value="secret"
  43.         checked
  44.       /><label for="secret">保密 </label>
  45.     </div>
  46.   </section>
  47.   <!--- 复选框---->
  48.   <section>
  49.     <label for="programme">兴趣：</label>
  50.     <div class="box">
  51.       <input type="checkbox" name="hobby[]" id="game" value="game" /><label
  52.         for=""
  53.         >游戏</label
  54.       >
  55.       <input
  56.         type="checkbox"
  57.         name="hobby[]"
  58.         id="shoot"
  59.         value="shoot"
  60.       /><label for="">摄影</label>
  61.       <input
  62.         type="checkbox"
  63.         name="hobby[]"
  64.         id="travel"
  65.         value="travel"
  66.       /><label for="">旅游</label>
  67.     </div>
  68.   </section>
  69. </form>

</body>

Correcting teacher：天蓬老师天蓬老师

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