HTML常用元素的链接、列表、表格、表单小结

一.链接元素

二.列表元素

1.无序列表

<h4>水果</h4>
 <ul>
   <li>苹果</li>
   <li>香蕉</li>
   <li>葡萄</li>
 </ul>

2.有序列表

 <h4>家电数字列表：</h4>
  <ol>
    <li>电视</li>
    <li>冰箱</li>
    <li>洗衣机</li>
    <li>微波炉</li>
  </ol>
<h4>用品字母列表：</h4>
  <ol type="A">
    <li>洗衣液 </li>
    <li>肥皂</li>
    <li>香皂</li>
    <li>洗手液</li>
  </ol>
<h4>小写字母列表：</h4>
  <ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
  </ol>
 自定义列表
  <dl>
   <dt>汽车品牌</dt>
   <dd>奥迪</dd>
 </dl>

三.表格元素

<body>
  <table border="1" cellpadding="5" cellspacing="0" width="500" h
    <colgroup>
     <col bgcolor="yellow">
     <col bgcolor="red">
     <col bgcolor="pink" span="2">
     <col bgcolor="grey">
   </colgroup>
 <caption style="font-size: 2rem;margin-bottom: 10px;">医院人员表   </caption>
  <thead>
    <tr bgcolor="lightblue">
      <th>部门</th>
      <th>姓名</th>
      <th>年龄</th> 
      <th>学历</th>  
      <th>籍贯</th>
    </tr>
  </thead>
  <tr>
    <td rowspan="3" align="center" >内科</td>
      <td>张三</td>
      <td>25</td>
      <td>本科</td>
      <td>河北</td>
   </tr>
    <tr>
        <td>王五</td>
        <td>27</td>
        <td>本科</td>
        <td>山东</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>博士</td>
        <td>辽宁</td>
      </tr>
      <tr>
        <td rowspan="3" align="center">外科</td>
          <td>林某</td>
          <td>30</td>
          <td>研究生</td>
          <td>河北</td>
        </tr>
        <tr>
          <td>马某</td>
          <td>32</td>
          <td>博士</td>
          <td>山东</td>
        </tr>
        <tfoot>
          <tr bgcolor="wheat">
          <td>备注：</td>
          <td colspan="4">人员信息</td>
        </tr>
      </tfoot>
   </table>
</body>

四.表单元素

<body>
<h3>用户注册</h3>
<form action="">
  <section>
    <label for="username">用户名：</label>
    <input
      type="text"
      id="username"
      name="username"
      maxlength="20"
      placeholder="不少于6位"
      required
      autofocus
    />
  </section>
  <section>
    <label for="password">密 码：</label>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="不少于8位"
      required
      size="15"
    />
  </section>
  <!----单选框按钮 ----->
  <section>
    <label for="">性别：</label>
    <div class="box">
      <input type="radio" name="gender" id="male" value="male" /><label
        for="male"
        >男
      </label>
      <input type="radio" name="gender" id="female" value="female" /><label
        for="female"
        >女 </label
      ><input
        type="radio"
        name="gender"
        id="secret"
        value="secret"
        checked
      /><label for="secret">保密 </label>
    </div>
  </section>
  <!--- 复选框---->
  <section>
    <label for="programme">兴趣：</label>
    <div class="box">
      <input type="checkbox" name="hobby[]" id="game" value="game" /><label
        for=""
        >游戏</label
      >
      <input
        type="checkbox"
        name="hobby[]"
        id="shoot"
        value="shoot"
      /><label for="">摄影</label>
      <input
        type="checkbox"
        name="hobby[]"
        id="travel"
        value="travel"
      /><label for="">旅游</label>
    </div>
  </section>
</form>

</body>

一.链接元素

二.列表元素

1.无序列表

2.有序列表

三.表格元素

四.表单元素

相关文章