1.列表标签

截屏2022-08-05 14.46.49.png

<body>
    <!-- ul ol子标签也是只能放li标签，不能包含其他的标签，但是可以把其他标签放在li标签里面。-->
    <h2>水果 无序 </h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <h2>排行榜 有序</h2>
    <ol>
        <li>章三</li>
        <li>里斯</li>
        <li>王武</li>
    </ol>
    <!-- 自定义列表 dl的子标签只允许放dt 和 dd,如果想要放其他标签只能放在dt dd里面。-->
    <dl>
        <dt>购物指南</dt>
        <dd>购物流程</dd>
        <dd>会员介绍</dd>
        <dd>生活旅行</dd>
        <dd>常见问题</dd>
    </dl>
</body>

2.表格标签

截屏2022-08-05 14.48.26.png

<body>
    <table border="1" width="400">
        <!-- 大标题 -->
        <caption> <strong>学生成绩表</strong> </caption> 
        <!-- 表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       <tbody>
        <tr>
            <td>章三</td>
            <td rowspan="2">100分</td>
            <td rowspan="2">优秀</td>
        </tr>
        <tr>
            <td>里斯</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">100分</td>
        </tr>
       </tfoot>
    </table>
</body>

3.表单标签

截屏2022-08-05 14.50.00.png

<body>
    <form action="">
        用户名: <input type="text" placeholder="请输入用户名">
        <br>
        <br>
        密  码: <input type="password" placeholder="请输入密码">
        <br>
        <br>
        性别: 男<input type="radio" name="sex" checked> 女<input type="radio" name="sex"> 
        <br>
        <br>
        爱好: 羽毛球<input type="checkbox" checked> 足球<input type="checkbox"> 蓝球<input type="checkbox">
        <br>
        <br>
        <!-- 文件多选 multiple -->
        <input type="file" multiple>
        <br>
        <br>
        <!-- 提交按钮 -->
        <input type="submit" value="免费注册">
        <!-- 重置 -->
        <input type="reset" value="重置">
        <!-- 普通按钮 -->
        <input type="button" value="获取vip" >
        <button type="reset">重置2</button>
    </form>
    <!-- 必须结合form来使用 -->
    <button type="reset">重置2</button>
    <input type="reset" value="重置">
</body>

  <button>我是按钮</button>
  <button type="submit">提交按钮</button>
  <button type="reset">重置按钮</button>

     <input type="radio" name="sex" id="man"> <label for="man"> 男</label>
     <label> <input type="radio" name="sex">女</label> 
     <!-- 选中文字也可以选中按钮的两种方法，
        1,先设置input的id,labelfor设置对应的id.
        2,label是input的父,他们之间的关系是父子关系.
    -->
    <br>
    <br>
    <label> <input type="checkbox">足球 </label>
    
    <input type="checkbox" id="badminton"> 
    <label for="badminton">羽毛球 </label>
         <!-- 选中文字也可以选中按钮的两种方法，
        1,先设置input的id,labelfor设置对应的id.
        2,label是input的父,他们之间的关系是父子关系.
    -->

  <select>
        <option>北京市</option>     
        <option>上海市</option>
        <option>广州市</option>
        <option selected>台湾市</option>
    </select>
    <!-- 类似 radio checkbox 的selected -->

    <textarea cols="120" rows="4"></textarea>
    <!-- 默认是可以拖动的，使用css去设置不可以编辑。 -->

4.语义化标签 div span

5.字符实体：&nbsp

6.demo1

截屏2022-08-05 14.54.06.png

<body>
    <table border="1" width="400" height="400">
        <caption><strong>优秀学生信息表格</strong> </caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年级二班</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>110</td>
            <td>三年级三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很好</td>
        </tr>
    </table>
</body>

7.demo2

截屏2022-08-05 14.55.06.png

<body>
    <h1>青春不常在，抓紧努力学</h1>
    <hr>
    用户名: <input type="text" placeholder="请输入用户名">
    <br> <br>
    性别: <label> <input type="radio" name="sex" checked>男 </label> <label> <input type="radio" name="sex">女 </label>
    <br> <br>
    所在城市 :
    <select>
        <option>上海</option>
        <option>北京</option>
        <option selected>台湾</option>
    </select>
    <br> <br>
    爱好:
    <label> <input type="checkbox" checked>羽毛球 </label> <label> <input type="checkbox" checked>LOL </label>
    <br> 
    <br>
    个人介绍
    <br>
    <br>
    <textarea rows="10" cols="100" placeholder="请输入个人介绍"></textarea>
    <h3>我的考试：</h3>
    <ul>
        <li>语文考试100</li>
        <li>数学考试100</li>
        <li>数学考试100</li>
    </ul>
    <input type="checkbox">我同意所有的条款
    <br> <br>
    <input type="submit" value="注册">
    <input type="reset" value="重置">
</body>