前端入门：链接元素-列表元素-表格元素-表单元素

1.链接元素

<a href="mailto:674787679@qq.com">联系我们</a>

2.列表元素

<!-- 无序列表 -->
<h3>购物车</h3>
<ul>
  <li>苹果5斤</li>
  <li>电水壶1个</li>
  <li>牛奶2箱</li>
</ul>
<hr />
<!-- 有序列表 -->
<h3>购物车</h3>
<ol start="5">
  <li>苹果5斤</li>
  <li>电水壶1个</li>
  <li>牛奶2箱</li>
</ol>
<!-- 自定义列表 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本语言</dd>
  <dd>页面是由多个元素组成</dd>
  <dt>CSS</dt>
  <dd>层叠样式</dd>
  <dt>JavaScript</dt>
  <dd>前端通用脚本语言</dd>
</dl>

3.表格元素

    <table
  border="1"
  cellpadding="5"
  cellspacing="0"
  width="500"
  align="center"
>
  <caption>
    员工信息表
  </caption>
  <tr>
    <td>部门</td>
    <td>id</td>
    <td>姓名</td>
    <td>职务</td>
    <td>手机</td>
  </tr>
  <tbody>
    <tr>
      <td>开发部</td>
      <td>100</td>
      <td>小王</td>
      <td>主管</td>
      <td>10000</td>
    </tr>
    <tr>
      <td>开发部</td>
      <td>101</td>
      <td>小张</td>
      <td>工程师</td>
      <td>20000</td>
    </tr>
    </body>
    </table>

4.表单元素

    <h3>用户注册</h3>
<form action="">
  <section>
    <label for="username">用户名：</label>
    <input
      type="text"
      id="username"
      placeholder="不少于6位"
      required
      autofocus
      maxlength="10"
    />
  </section>
  <section>
    <label for="password">密码：</label>
    <input
      type="password"
      id="password"
      placeholder="不少于8位"
      required
      size="10"
    />
  </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/><label
        for="secret"
        >保密</label
      >
    </div>
  </section>
  <!-- 复选框 -->
  <section>
    <label for="">兴趣</label>
    <div class="box">
      <input type="checkbox" name="hobby[]" id="game" /><label for=""
        >游戏</label
      >
      <input type="checkbox" name="hobby[]" id="lvyou" /><label for=""
        >旅游</label
      >
      <input type="checkbox" name="hobby[]" id="diaoyu" /><label for=""
        >钓鱼</label
      >
      <input type="checkbox" name="hobby[]" id="php"" /><label for=""
        >php开发</label
      >
    </div>
  </section>
</form>